@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/drawer/index.tsx

@@ -0,0 +1,227 @@
+import { ScreenService, Shade, createComponent, type ScreenSize } from '@furystack/shades'
+import type { ValueObserver } from '@furystack/utils'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import { LayoutService } from '../../services/layout-service.js'
+
+export { DrawerToggleButton, type DrawerToggleButtonProps } from './drawer-toggle-button.js'
+
+/**
+ * Props for the Drawer component.
+ */
+export type DrawerProps = {
+  /** Position of the drawer */
+  position: 'left' | 'right'
+  /** Drawer behavior variant */
+  variant: 'permanent' | 'collapsible' | 'temporary'
+  /** Width of the drawer (CSS value). Default: '240px' */
+  width?: string
+  /** Initial open state for collapsible/temporary drawers. Default: true for collapsible, false for temporary */
+  defaultOpen?: boolean
+  /** Auto-collapse the drawer below this breakpoint (uses ScreenService) */
+  collapseOnBreakpoint?: ScreenSize
+}
+
+const DEFAULT_DRAWER_WIDTH = '240px'
+
+/**
+ * Standalone Drawer component for sidebars and navigation panels.
+ *
+ * Works with LayoutService for state management and supports three variants:
+ * - **permanent**: Always visible, cannot be closed
+ * - **collapsible**: Can be toggled open/closed, pushes content
+ * - **temporary**: Overlays content with backdrop, closes on backdrop click
+ *
+ * Supports responsive behavior via `collapseOnBreakpoint` prop which
+ * auto-collapses the drawer below a specified screen size.
+ *
+ * @example
+ * ```tsx
+ * // Simple collapsible drawer
+ * <Drawer position="left" variant="collapsible">
+ *   <nav>Navigation items...</nav>
+ * </Drawer>
+ *
+ * // Responsive drawer that collapses on mobile
+ * <Drawer
+ *   position="left"
+ *   variant="collapsible"
+ *   collapseOnBreakpoint="md"
+ * >
+ *   <nav>Navigation items...</nav>
+ * </Drawer>
+ *
+ * // Temporary drawer (mobile navigation)
+ * <Drawer position="left" variant="temporary">
+ *   <nav>Mobile navigation...</nav>
+ * </Drawer>
+ * ```
+ */
+export const Drawer = Shade<DrawerProps>({
+  shadowDomName: 'shade-drawer',
+  css: {
+    display: 'block',
+
+    // Drawer container
+    '& .drawer-container': {
+      position: 'fixed',
+      top: 'var(--layout-content-margin-top, 0px)',
+      bottom: '0',
+      zIndex: '1000',
+      overflow: 'hidden',
+      transition: `width ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}, transform ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}`,
+      background: cssVariableTheme.background.paper,
+    },
+
+    // Left drawer positioning
+    '& .drawer-container.drawer-left': {
+      left: '0',
+      borderRight: `1px solid ${cssVariableTheme.divider}`,
+    },
+
+    // Right drawer positioning
+    '& .drawer-container.drawer-right': {
+      right: '0',
+      borderLeft: `1px solid ${cssVariableTheme.divider}`,
+    },
+
+    // Closed state for permanent/collapsible
+    '& .drawer-container.closed': {
+      width: '0 !important',
+      overflow: 'hidden',
+    },
+
+    // Content wrapper for proper overflow
+    '& .drawer-content': {
+      height: '100%',
+      overflow: 'auto',
+    },
+
+    // Backdrop for temporary drawer
+    '& .drawer-backdrop': {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      right: '0',
+      bottom: '0',
+      backgroundColor: cssVariableTheme.action.backdrop,
+      zIndex: '999',
+      opacity: '0',
+      pointerEvents: 'none',
+      transition: `opacity ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}`,
+    },
+    '& .drawer-backdrop.visible': {
+      opacity: '1',
+      pointerEvents: 'auto',
+    },
+  },
+
+  render: ({ props, children, injector, useObservable, useDisposable }) => {
+    const layoutService = injector.getInstance(LayoutService)
+    const screenService = injector.getInstance(ScreenService)
+
+    const { position, variant, width = DEFAULT_DRAWER_WIDTH, defaultOpen, collapseOnBreakpoint } = props
+
+    // Determine initial open state based on variant
+    const getInitialOpenState = (): boolean => {
+      if (variant === 'permanent') return true
+      if (variant === 'temporary') return defaultOpen ?? false
+      // collapsible defaults to true
+      return defaultOpen ?? true
+    }
+
+    // Initialize drawer state if not already set
+    const currentState = layoutService.drawerState.getValue()[position]
+    if (!currentState) {
+      layoutService.initDrawer(position, {
+        open: getInitialOpenState(),
+        width,
+        variant,
+      })
+    } else if (currentState.width !== width) {
+      // Update width if it changed
+      layoutService.setDrawerWidth(position, width)
+    }
+
+    // Subscribe to drawer state
+    const [drawerState] = useObservable('drawerState', layoutService.drawerState)
+    const isOpen = drawerState[position]?.open ?? false
+
+    // Set up responsive breakpoint listener
+    useDisposable(`breakpoint-listener-${collapseOnBreakpoint}`, () => {
+      if (!collapseOnBreakpoint || variant === 'permanent') {
+        return { [Symbol.dispose]: () => {} }
+      }
+
+      const breakpointObservable = screenService.screenSize.atLeast[collapseOnBreakpoint]
+
+      const subscription: ValueObserver<boolean> = breakpointObservable.subscribe((isAtLeast) => {
+        // When screen becomes smaller than breakpoint, close the drawer
+        // When screen becomes larger than breakpoint, open the drawer (for collapsible)
+        if (variant === 'collapsible') {
+          layoutService.setDrawerOpen(position, isAtLeast)
+        } else if (variant === 'temporary' && isAtLeast) {
+          // For temporary drawers, close when screen is large enough
+          layoutService.setDrawerOpen(position, false)
+        }
+      })
+
+      return subscription
+    })
+
+    // Handle backdrop click for temporary drawer
+    const handleBackdropClick = () => {
+      if (variant === 'temporary') {
+        layoutService.setDrawerOpen(position, false)
+      }
+    }
+
+    // Calculate drawer style
+    const getDrawerStyle = (): Partial<CSSStyleDeclaration> => {
+      if (variant === 'temporary') {
+        // Temporary drawers use transform for slide animation
+        return {
+          width,
+          transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-100%)' : 'translateX(100%)',
+        }
+      }
+
+      // Permanent and collapsible drawers animate width
+      return {
+        width: isOpen ? width : '0',
+      }
+    }
+
+    // Build container class list
+    const containerClasses = ['drawer-container', `drawer-${position}`]
+    if (!isOpen && variant !== 'temporary') {
+      containerClasses.push('closed')
+    }
+
+    // Show backdrop only for open temporary drawers
+    const showBackdrop = variant === 'temporary' && isOpen
+
+    return (
+      <>
+        {/* Backdrop for temporary drawer */}
+        {variant === 'temporary' && (
+          <div
+            className={`drawer-backdrop ${showBackdrop ? 'visible' : ''}`}
+            onclick={handleBackdropClick}
+            data-testid={`drawer-backdrop-${position}`}
+          />
+        )}
+
+        {/* Drawer container */}
+        <div
+          className={containerClasses.join(' ')}
+          style={getDrawerStyle()}
+          data-testid={`drawer-${position}`}
+          data-variant={variant}
+          data-open={isOpen ? 'true' : 'false'}
+        >
+          <div className="drawer-content">{children}</div>
+        </div>
+      </>
+    )
+  },
+})

package/src/components/dropdown.spec.tsx

@@ -0,0 +1,445 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Dropdown } from './dropdown.js'
+import type { MenuEntry } from './menu/menu-types.js'
+
+describe('Dropdown', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const createTestItems = (): MenuEntry[] => [
+    { key: 'cut', label: 'Cut' },
+    { key: 'copy', label: 'Copy' },
+    { type: 'divider' },
+    { key: 'paste', label: 'Paste' },
+  ]
+
+  const renderDropdown = async (
+    props: Omit<Parameters<typeof Dropdown>[0], 'items'> & { items?: MenuEntry[] },
+    triggerText = 'Open',
+  ) => {
+    const items = props.items ?? createTestItems()
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: (
+        <Dropdown {...props} items={items}>
+          <button>{triggerText}</button>
+        </Dropdown>
+      ),
+    })
+    await sleepAsync(50)
+    return {
+      injector,
+      dropdown: root.querySelector('shade-dropdown') as HTMLElement,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render the dropdown element', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        expect(dropdown).toBeTruthy()
+        expect(dropdown.tagName.toLowerCase()).toBe('shade-dropdown')
+      })
+    })
+
+    it('should render the trigger content', async () => {
+      await usingAsync(await renderDropdown({}, 'Click me'), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger')
+        expect(trigger).toBeTruthy()
+        expect(trigger?.textContent).toContain('Click me')
+      })
+    })
+
+    it('should not show the dropdown panel initially', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        expect(dropdown.hasAttribute('data-open')).toBe(false)
+        const panel = dropdown.querySelector('.dropdown-panel')
+        expect(panel).toBeTruthy()
+        expect(panel?.classList.contains('visible')).toBe(false)
+      })
+    })
+  })
+
+  describe('opening and closing', () => {
+    it('should open when trigger is clicked', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const panel = dropdown.querySelector('.dropdown-panel')
+        expect(panel).toBeTruthy()
+      })
+    })
+
+    it('should show menu items when open', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const items = dropdown.querySelectorAll('[role="menuitem"]')
+        expect(items.length).toBe(3)
+        expect(dropdown.textContent).toContain('Cut')
+        expect(dropdown.textContent).toContain('Copy')
+        expect(dropdown.textContent).toContain('Paste')
+      })
+    })
+
+    it('should show dividers when open', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const dividers = dropdown.querySelectorAll('[role="separator"]')
+        expect(dividers.length).toBe(1)
+      })
+    })
+
+    it('should close when backdrop is clicked', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const backdrop = dropdown.querySelector('.dropdown-backdrop') as HTMLElement
+        backdrop.click()
+        await sleepAsync(50)
+
+        expect(dropdown.hasAttribute('data-open')).toBe(false)
+        const panel = dropdown.querySelector('.dropdown-panel')
+        expect(panel?.classList.contains('visible')).toBe(false)
+      })
+    })
+
+    it('should toggle when trigger is clicked twice', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+        expect(dropdown.hasAttribute('data-open')).toBe(true)
+
+        trigger.click()
+        await sleepAsync(50)
+        expect(dropdown.hasAttribute('data-open')).toBe(false)
+      })
+    })
+  })
+
+  describe('item selection', () => {
+    it('should call onSelect when an item is clicked', async () => {
+      const handleSelect = vi.fn()
+      await usingAsync(await renderDropdown({ onSelect: handleSelect }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const item = dropdown.querySelector('[data-key="copy"]') as HTMLElement
+        item.click()
+        await sleepAsync(50)
+
+        expect(handleSelect).toHaveBeenCalledWith('copy')
+      })
+    })
+
+    it('should close after selection', async () => {
+      await usingAsync(await renderDropdown({ onSelect: vi.fn() }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const item = dropdown.querySelector('[data-key="cut"]') as HTMLElement
+        item.click()
+        await sleepAsync(50)
+
+        expect(dropdown.hasAttribute('data-open')).toBe(false)
+        const panel = dropdown.querySelector('.dropdown-panel')
+        expect(panel?.classList.contains('visible')).toBe(false)
+      })
+    })
+
+    it('should not call onSelect for disabled items', async () => {
+      const handleSelect = vi.fn()
+      const items: MenuEntry[] = [{ key: 'disabled', label: 'Disabled', disabled: true }]
+      await usingAsync(await renderDropdown({ items, onSelect: handleSelect }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const item = dropdown.querySelector('[data-key="disabled"]') as HTMLElement
+        item.click()
+        await sleepAsync(50)
+
+        expect(handleSelect).not.toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('disabled state', () => {
+    it('should not open when disabled', async () => {
+      await usingAsync(await renderDropdown({ disabled: true }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        expect(dropdown.hasAttribute('data-open')).toBe(false)
+        const panel = dropdown.querySelector('.dropdown-panel')
+        expect(panel?.classList.contains('visible')).toBe(false)
+      })
+    })
+
+    it('should mark trigger as disabled', async () => {
+      await usingAsync(await renderDropdown({ disabled: true }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        expect(trigger.classList.contains('disabled')).toBe(true)
+      })
+    })
+
+    it('should not mark trigger as disabled when not disabled', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        expect(trigger.classList.contains('disabled')).toBe(false)
+      })
+    })
+  })
+
+  describe('groups', () => {
+    it('should render groups in dropdown', async () => {
+      const items: MenuEntry[] = [
+        {
+          type: 'group',
+          key: 'actions',
+          label: 'Actions',
+          children: [
+            { key: 'save', label: 'Save' },
+            { key: 'delete', label: 'Delete' },
+          ],
+        },
+      ]
+      await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const group = dropdown.querySelector('[role="group"]')
+        expect(group).toBeTruthy()
+
+        const menuItems = dropdown.querySelectorAll('[role="menuitem"]')
+        expect(menuItems.length).toBe(2)
+      })
+    })
+  })
+
+  describe('item icons', () => {
+    it('should render item icons', async () => {
+      const items: MenuEntry[] = [{ key: 'cut', label: 'Cut', icon: <span className="icon">✂️</span> }]
+      await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const icon = dropdown.querySelector('.dropdown-item-icon')
+        expect(icon).toBeTruthy()
+        expect(icon?.textContent).toContain('✂️')
+      })
+    })
+
+    it('should render JSX element icons', async () => {
+      const items: MenuEntry[] = [{ key: 'cut', label: 'Cut', icon: <span>X</span> }]
+      await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const icon = dropdown.querySelector('.dropdown-item-icon')
+        expect(icon).toBeTruthy()
+        expect(icon?.textContent).toContain('X')
+      })
+    })
+  })
+
+  describe('keyboard navigation', () => {
+    it('should close on Escape key', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+        expect(dropdown.hasAttribute('data-open')).toBe(true)
+
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+        await sleepAsync(50)
+
+        expect(dropdown.hasAttribute('data-open')).toBe(false)
+      })
+    })
+
+    it('should navigate to next item on ArrowDown', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+        await sleepAsync(50)
+
+        const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
+        expect(focusedItems.length).toBe(1)
+      })
+    })
+
+    it('should navigate to previous item on ArrowUp', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        // Move down twice then up once
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
+        await sleepAsync(50)
+
+        const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
+        expect(focusedItems.length).toBe(1)
+      })
+    })
+
+    it('should select focused item on Enter', async () => {
+      const handleSelect = vi.fn()
+      await usingAsync(await renderDropdown({ onSelect: handleSelect }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        // Navigate down then press Enter
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+        await sleepAsync(50)
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+        await sleepAsync(50)
+
+        expect(handleSelect).toHaveBeenCalled()
+      })
+    })
+
+    it('should wrap around when navigating past the last item', async () => {
+      const items: MenuEntry[] = [
+        { key: 'a', label: 'A' },
+        { key: 'b', label: 'B' },
+      ]
+      await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        // Navigate down past the end (2 items + 1 wrap)
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+        await sleepAsync(50)
+
+        const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
+        expect(focusedItems.length).toBe(1)
+      })
+    })
+
+    it('should wrap around when navigating before the first item', async () => {
+      const items: MenuEntry[] = [
+        { key: 'a', label: 'A' },
+        { key: 'b', label: 'B' },
+      ]
+      await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
+        await sleepAsync(50)
+
+        const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
+        expect(focusedItems.length).toBe(1)
+      })
+    })
+
+    it('should not respond to keyboard when closed', async () => {
+      const handleSelect = vi.fn()
+      await usingAsync(await renderDropdown({ onSelect: handleSelect }), async ({ dropdown }) => {
+        // Don't open the dropdown
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+        await sleepAsync(50)
+
+        expect(handleSelect).not.toHaveBeenCalled()
+        expect(dropdown.hasAttribute('data-open')).toBe(false)
+      })
+    })
+
+    it('should skip disabled items during navigation', async () => {
+      const items: MenuEntry[] = [
+        { key: 'a', label: 'A' },
+        { key: 'b', label: 'B', disabled: true },
+        { key: 'c', label: 'C' },
+      ]
+      await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        // Navigate to first enabled item
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+        await sleepAsync(50)
+
+        const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused')
+        expect(focusedItems.length).toBe(1)
+        // Focused item should not be the disabled one
+        expect(focusedItems[0].classList.contains('disabled')).toBe(false)
+      })
+    })
+  })
+
+  describe('placement', () => {
+    it('should accept bottomRight placement', async () => {
+      await usingAsync(await renderDropdown({ placement: 'bottomRight' }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const panel = dropdown.querySelector('.dropdown-panel')
+        expect(panel).toBeTruthy()
+      })
+    })
+
+    it('should accept topLeft placement', async () => {
+      await usingAsync(await renderDropdown({ placement: 'topLeft' }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const panel = dropdown.querySelector('.dropdown-panel')
+        expect(panel).toBeTruthy()
+      })
+    })
+
+    it('should accept topRight placement', async () => {
+      await usingAsync(await renderDropdown({ placement: 'topRight' }), async ({ dropdown }) => {
+        const trigger = dropdown.querySelector('.dropdown-trigger') as HTMLElement
+        trigger.click()
+        await sleepAsync(50)
+
+        const panel = dropdown.querySelector('.dropdown-panel')
+        expect(panel).toBeTruthy()
+      })
+    })
+  })
+})