feat(Dropdown): add placement prop

src/components/Dropdown/Dropdown.stories.tsx

@@ -24,6 +24,7 @@ import { Button } from '../Button'
 import { Dropdown } from '.'
 import { DropdownProps } from './props'
 import { Icon } from '../Icon'
+import { Placement } from './types'
 import { Tag } from '../Tag'
 import { Typography } from '../Typography'
 
@@ -74,7 +75,17 @@ const meta = {
   argTypes: {
     children: { control: false },
   },
-  render: (_, { args }) => <Dropdown {...args} />,
+  render: (_, { args }) => (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Dropdown {...args} />
+    </div>
+  ),
 } satisfies Meta<typeof Dropdown>
 
 type Story = StoryObj<typeof meta>
@@ -83,6 +94,12 @@ export default meta
 
 export const BasicExample: Story = {}
 
+export const PlacementTop: Story = {
+  args: {
+    placement: Placement.Top,
+  },
+}
+
 export const VerticalLayout: Story = {
   args: {
     itemLayout: Dropdown.ItemLayout.Vertical,

src/components/Dropdown/Dropdown.tsx

@@ -16,40 +16,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Dropdown as AntdDropdown, type MenuProps as AntdMenuProps } from 'antd'
 import React, { ReactElement, ReactNode, useCallback, useMemo, useState } from 'react'
+import { Dropdown as AntdDropdown } from 'antd'
 import classNames from 'classnames'
 
-import { DropdownClickEvent, DropdownItem, DropdownProps, DropdownTrigger, ItemLayout, OpenChangeInfoSource } from './props'
+import { AntdMenuClickEvent, AntdMenuItem, AntdMenuItems, Placement, antdSourceMap } from './types'
+import { DropdownClickEvent, DropdownItem, DropdownProps, DropdownTrigger, ItemLayout } from './props'
 import { Footer, useFooterWithHookedActions } from './components/Footer'
 import { Divider } from '../Divider'
 import Label from './components/Label'
 import styles from './dropdown.module.css'
 import { useTheme } from '../../hooks/useTheme'
 
-type ArrayElement<ArrayType extends readonly unknown[] | undefined> =
-  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
-
-type AntdMenuItems = AntdMenuProps['items']
-type AntdMenuItem = ArrayElement<AntdMenuItems>
-
-type AntdMenuClickEvent = {
-  key: string,
-  keyPath: string[],
-  domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
-}
-
-type AntdTriggerSource = 'trigger'|'menu'
-const antdSourceMap: Record<AntdTriggerSource, OpenChangeInfoSource> = {
-  'trigger': OpenChangeInfoSource.Trigger,
-  'menu': OpenChangeInfoSource.Menu,
-}
-
 export const defaults = {
   itemLayout: ItemLayout.Horizontal,
   triggers: [DropdownTrigger.Click],
   initialSelectedItems: [],
   menuItemsMaxHeight: 240,
+  placement: Placement.BottomLeft,
 }
 
 export const Dropdown = ({
@@ -67,6 +51,7 @@ export const Dropdown = ({
   initialSelectedItems = defaults.initialSelectedItems,
   multiple,
   persistSelection = true,
+  placement = defaults.placement,
 }: DropdownProps): ReactElement => {
   const { spacing } = useTheme()
 
@@ -147,7 +132,7 @@ export const Dropdown = ({
   const classes = useMemo(() => classNames(styles.dropdownWrapper, uniqueOverlayClassName), [uniqueOverlayClassName])
 
   const onOpenChangeInternal = useCallback(
-    (open: boolean, info: {source: 'trigger'| 'menu'}) => {
+    (open: boolean, info: { source: 'trigger' | 'menu' }) => {
       if (!onOpenChange) {
         return
       }
@@ -165,6 +150,7 @@ export const Dropdown = ({
       getPopupContainer={getPopupContainer}
       menu={menu}
       overlayClassName={classes}
+      placement={placement}
       trigger={triggers}
       onOpenChange={onOpenChangeInternal}
     >
@@ -175,6 +161,7 @@ export const Dropdown = ({
 
 Dropdown.ItemLayout = ItemLayout
 Dropdown.Trigger = DropdownTrigger
+Dropdown.Placement = Placement
 
 function itemsAdapter(items: DropdownItem[], layout: ItemLayout): AntdMenuItems {
   return items.map<AntdMenuItem>((item: DropdownItem) => ({
@@ -187,7 +174,7 @@ function itemsAdapter(items: DropdownItem[], layout: ItemLayout): AntdMenuItems
 
 function eventAdapter(
   event: AntdMenuClickEvent,
-  finder: (id: string) => DropdownItem|undefined,
+  finder: (id: string) => DropdownItem | undefined,
 ): DropdownClickEvent {
   return {
     id: event.key,
@@ -197,7 +184,7 @@ function eventAdapter(
   }
 }
 
-function itemFinder(items: DropdownItem[], id: string): DropdownItem|undefined {
+function itemFinder(items: DropdownItem[], id: string): DropdownItem | undefined {
   for (const item of items) {
     if (item.id === id) {
       return item

src/components/Dropdown/props.ts

@@ -18,6 +18,7 @@
 
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react'
 
+import { Placement } from './types'
 import { Size } from '../../themes/schema/shape'
 
 export enum ItemLayout {
@@ -230,5 +231,15 @@ export type DropdownProps = {
     * The default behavior is to create a div element and append it at the end of the body,
     *  but you can reset it to the scrolling area and make a relative reposition.
     */
-   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement
+   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement,
+
+  /**
+   * The placement of the dropdown menu, one of:
+   *
+   *  `Placement.TopLeft`, `Placement.TopRight`, `Placement.BottomLeft`,
+   *  `Placement.BottomRight`, `Placement.Top`, `Placement.Bottom`
+   *
+   * Defaults to `Placement.BottomLeft`
+   */
+   placement?: Placement
 }

src/components/Dropdown/types.tsx

@@ -0,0 +1,30 @@
+import { type MenuProps as AntdMenuProps } from 'antd'
+
+import { OpenChangeInfoSource } from './props'
+
+export type ArrayElement<ArrayType extends readonly unknown[] | undefined> =
+ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+export type AntdMenuItems = AntdMenuProps['items']
+export type AntdMenuItem = ArrayElement<AntdMenuItems>
+
+export type AntdMenuClickEvent = {
+   key: string,
+   keyPath: string[],
+   domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+}
+
+export type AntdTriggerSource = 'trigger' | 'menu'
+export const antdSourceMap: Record<AntdTriggerSource, OpenChangeInfoSource> = {
+  'trigger': OpenChangeInfoSource.Trigger,
+  'menu': OpenChangeInfoSource.Menu,
+}
+
+export enum Placement {
+  TopLeft = 'topLeft',
+  TopRight = 'topRight',
+  BottomLeft = 'bottomLeft',
+  BottomRight = 'bottomRight',
+  Top = 'top',
+  Bottom = 'bottom',
+}