[KZN-3415] uses native popover api in SingleSelect

packages/components/src/__alpha__/SingleSelect/SingleSelect.spec.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { cleanup, render, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { SingleSelect } from './SingleSelect'
 import { singleMockItems } from './_docs/mockData'
 
 const SingleSelectWrapper = (): JSX.Element => (
-  <SingleSelect>
+  <SingleSelect items={singleMockItems}>
     <SingleSelect.List>
       {singleMockItems.map((item) => (
-        <SingleSelect.ListItem key={item.value} value={{ value: item.value }}>
+        <SingleSelect.ListItem key={item.value} id={item.value}>
           {item.label}
         </SingleSelect.ListItem>
       ))}
@@ -16,11 +17,90 @@ const SingleSelectWrapper = (): JSX.Element => (
 )
 
 describe('<SingleSelect />', () => {
+  afterEach(cleanup)
   describe('renders', () => {
     it('a basic select component', () => {
       const { getByRole } = render(<SingleSelectWrapper />)
       const select = getByRole('button')
       expect(select).toBeInTheDocument()
     })
   })
+
+  describe('popover interactions', () => {
+    it('opens the popover when the trigger is clicked', async () => {
+      const user = userEvent.setup()
+      const { getByRole, findAllByRole } = render(<SingleSelectWrapper />)
+      const trigger = getByRole('button')
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      })
+      const options = await findAllByRole('option')
+      expect(options[0]).toBeVisible()
+      expect(options[0]).toHaveTextContent(singleMockItems[0].label)
+    })
+
+    it('closes the popover when an item is selected', async () => {
+      const user = userEvent.setup()
+      const { getByRole, findAllByRole } = render(<SingleSelectWrapper />)
+      const trigger = getByRole('button')
+      await user.click(trigger)
+      await waitFor(() => {
+        expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      })
+      const options = await findAllByRole('option')
+      const item = options[0]
+      await user.click(item)
+      expect(options[0]).not.toBeVisible()
+    })
+
+    describe('via keyboard', () => {
+      it('opens the popover with keyboard (Enter) and navigates items with ArrowDown/ArrowUp', async () => {
+        const user = userEvent.setup()
+        const { getByRole, findAllByRole } = render(<SingleSelectWrapper />)
+        const trigger = getByRole('button')
+        trigger.focus()
+        await user.keyboard('{Enter}')
+        await waitFor(() => {
+          expect(trigger).toHaveAttribute('aria-expanded', 'true')
+        })
+        const options = await findAllByRole('option')
+        expect(options[0]).toHaveTextContent(singleMockItems[0].label)
+        await user.keyboard('{ArrowDown}')
+        const secondItem = options[1]
+        expect(secondItem).toHaveAttribute('data-focused', 'true')
+        await user.keyboard('{ArrowUp}')
+        expect(options[0]).toHaveAttribute('data-focused', 'true')
+      })
+
+      it('selects an item with keyboard (Enter)', async () => {
+        const user = userEvent.setup()
+        const { getByRole, queryAllByRole } = render(<SingleSelectWrapper />)
+        const trigger = getByRole('button')
+        trigger.focus()
+        await user.keyboard('{Enter}')
+        await waitFor(() => {
+          expect(trigger).toHaveAttribute('aria-expanded', 'true')
+        })
+        await user.keyboard('{ArrowDown}')
+        await user.keyboard('{Enter}')
+        const options = await queryAllByRole('option')
+        expect(options.length).toBe(0)
+      })
+      it('closes the popover when Escape key is pressed', async () => {
+        const user = userEvent.setup()
+        const { getByRole } = render(<SingleSelectWrapper />)
+        const trigger = getByRole('button')
+        await user.click(trigger)
+        await waitFor(() => {
+          expect(trigger).toHaveAttribute('aria-expanded', 'true')
+        })
+        await user.keyboard('{Escape}')
+        await waitFor(() => {
+          expect(trigger).toHaveAttribute('aria-expanded', 'false')
+        })
+      })
+    })
+  })
 })

packages/components/src/__alpha__/SingleSelect/SingleSelect.tsx

@@ -1,23 +1,85 @@
-import React, { type HTMLAttributes, type PropsWithChildren } from 'react'
-import { Popover as RACPopover, Select as RACSelect } from 'react-aria-components'
-import { type OverrideClassName } from '~components/types/OverrideClassName'
-import { List, ListItem, ListSection, Trigger } from './subcomponents'
-import styles from './SingleSelect.module.css'
+import React, { isValidElement, type PropsWithChildren } from 'react'
+import { useSelectState } from '@react-stately/select'
+import { type Key, type Selection } from '@react-types/shared'
+import { Select as RACSelect, type ListBoxProps } from 'react-aria-components'
+import { SingleSelectContext } from './context'
+import { List, ListItem, ListSection, Popover, Trigger } from './subcomponents'
+import { type SelectItem, type SelectSection } from './types'
 
 export type SingleSelectProps = {
   children?: React.ReactNode
-} & OverrideClassName<HTMLAttributes<Element>>
+  items: (SelectItem | SelectSection)[]
+  onSelectionChange?: (key: Key | null) => void
+}
 
 export const SingleSelect = ({
-  classNameOverride,
+  items,
+  onSelectionChange,
   children,
   ...restProps
 }: PropsWithChildren<SingleSelectProps>): JSX.Element => {
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const popoverRef = React.useRef<HTMLDivElement>(null)
+  const racPopoverRef = React.useRef<HTMLElement>(null)
+
+  // Select state without children render prop to keep things flexible
+  // and allow for custom list rendering
+  const state = useSelectState({
+    items,
+  })
+
+  const handleOnSelectionChange = (keys: Selection): void => {
+    let key: Key | null = null
+
+    if (keys instanceof Set && keys.size > 0) {
+      key = Array.from(keys)[0]
+    }
+
+    state.setSelectedKey(key)
+    if (onSelectionChange) {
+      onSelectionChange(key)
+    }
+  }
+
+  const selectedKeys: Iterable<Key> = state.selectedKey
+    ? new Set<Key>([state.selectedKey])
+    : new Set()
+
+  // Clone user children injection selection props
+  const injectedChildren = isValidElement(children)
+    ? React.cloneElement(children as React.ReactElement<ListBoxProps<SelectItem | SelectSection>>, {
+        selectionMode: 'single',
+        selectedKeys,
+        onSelectionChange: handleOnSelectionChange,
+        autoFocus: 'first',
+      })
+    : null
+
   return (
-    <RACSelect className={classNameOverride} placeholder="" {...restProps}>
-      <Trigger />
-      <RACPopover className={styles.popover}>{children}</RACPopover>
-    </RACSelect>
+    <SingleSelectContext.Provider
+      value={{
+        isOpen: state.isOpen,
+        setOpen: state.setOpen,
+        selectedKey: state.selectedKey,
+        items: items,
+      }}
+    >
+      <RACSelect
+        onSelectionChange={(key) =>
+          handleOnSelectionChange(key != null ? new Set([key]) : new Set())
+        }
+        placeholder=""
+        {...restProps}
+      >
+        <Trigger buttonRef={buttonRef} />
+
+        {state.isOpen && (
+          <Popover buttonRef={buttonRef} popoverRef={popoverRef} racPopoverRef={racPopoverRef}>
+            {injectedChildren}
+          </Popover>
+        )}
+      </RACSelect>
+    </SingleSelectContext.Provider>
   )
 }
 

packages/components/src/__alpha__/SingleSelect/_docs/SingleSelect.mdx

@@ -25,3 +25,7 @@ Brief summary of the component here.
 <Controls of={SingleSelectStories.Playground} />
 
 ## API
+
+## Positioning and z-index Management
+
+The SingleSelect component leverages the native Popover API to manage its dropdown functionality. By using popover instead of custom portal logic, the component takes full advantage of CSS layers, ensuring dropdowns appear above other content without manual z-index management.

packages/components/src/__alpha__/SingleSelect/_docs/SingleSelect.stickersheet.stories.tsx

@@ -17,22 +17,22 @@ const StickerSheetTemplate: StickerSheetStory = {
     return (
       <StickerSheet isReversed={isReversed} title="SingleSelect" headers={['Items', 'Grouped']}>
         <StickerSheet.Row>
-          <SingleSelect>
+          <SingleSelect items={singleMockItems}>
             <SingleSelect.List>
               {singleMockItems.map((item) => (
-                <SingleSelect.ListItem key={item.value} value={{ value: item.value }}>
+                <SingleSelect.ListItem key={item.value} id={item.value}>
                   {item.label}
                 </SingleSelect.ListItem>
               ))}
             </SingleSelect.List>
           </SingleSelect>
 
-          <SingleSelect>
+          <SingleSelect items={groupedMockItems}>
             <SingleSelect.List>
               {groupedMockItems.map((section) => (
                 <SingleSelect.ListSection name={section.label} key={section.label}>
                   {section.options.map((item) => (
-                    <SingleSelect.ListItem key={item.value} value={{ value: item.value }}>
+                    <SingleSelect.ListItem key={item.value} id={item.value}>
                       {item.label}
                     </SingleSelect.ListItem>
                   ))}

packages/components/src/__alpha__/SingleSelect/_docs/SingleSelect.stories.tsx

@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react'
 import { SingleSelect } from '../index'
+import { singleMockItems } from './mockData'
 
 const meta = {
   title: 'Components/SingleSelect/SingleSelect (alpha)',
@@ -12,7 +13,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
-  args: {},
+  args: {
+    items: singleMockItems,
+  },
   parameters: {
     docs: {
       canvas: {

packages/components/src/__alpha__/SingleSelect/context/SingleSelectContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+import { type Key } from '@react-types/shared'
+import { type SelectItem, type SelectSection } from '../types'
+
+type SingleSelectContextType = {
+  isOpen: boolean
+  setOpen: (open: boolean) => void
+  selectedKey: Key | null
+  items: (SelectItem | SelectSection)[]
+}
+
+export const SingleSelectContext = createContext<SingleSelectContextType | undefined>(undefined)
+
+export const useSingleSelectContext = (): SingleSelectContextType => {
+  const context = useContext(SingleSelectContext)
+  if (!context) {
+    throw new Error('useSingleSelectContext must be used within a SingleSelectContext.Provider')
+  }
+  return context
+}

packages/components/src/__alpha__/SingleSelect/context/index.ts

@@ -0,0 +1 @@
+export * from './SingleSelectContext'

packages/components/src/__alpha__/SingleSelect/subcomponents/List/List.module.css

@@ -2,6 +2,5 @@
   .list {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-16);
   }
 }

packages/components/src/__alpha__/SingleSelect/subcomponents/List/List.tsx

@@ -1,13 +1,14 @@
 import React, { type PropsWithChildren } from 'react'
 import classNames from 'classnames'
 import { ListBox as RACListBox, type ListBoxProps } from 'react-aria-components'
+import { type SelectItem, type SelectSection } from '../../types'
 import styles from './List.module.css'
 
 export const List = ({
   children,
   className,
   ...props
-}: ListBoxProps<object> & PropsWithChildren): React.ReactElement => {
+}: ListBoxProps<SelectItem | SelectSection> & PropsWithChildren): React.ReactElement => {
   return (
     <RACListBox className={classNames(styles.list, className)} {...props}>
       {children}

packages/components/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.module.css

@@ -5,5 +5,12 @@
     font-size: var(--typography-paragraph-body-font-size);
     line-height: var(--typography-paragraph-body-line-height);
     letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-8) var(--spacing-16);
+  }
+
+  .listItem:focus-visible {
+    background-color: var(--color-blue-200);
+    outline: none;
+    border-color: white;
   }
 }

packages/components/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.tsx

@@ -1,13 +1,14 @@
 import React, { type PropsWithChildren } from 'react'
 import classNames from 'classnames'
 import { ListBoxItem as RACListBoxItem, type ListBoxItemProps } from 'react-aria-components'
+import { type SelectItem } from '../../types'
 import styles from './ListItem.module.css'
 
 export const ListItem = ({
   children,
   className,
   ...props
-}: ListBoxItemProps<object> & PropsWithChildren): React.ReactElement => {
+}: ListBoxItemProps<SelectItem> & PropsWithChildren): React.ReactElement => {
   return (
     <RACListBoxItem className={classNames(styles.listItem, className)} {...props}>
       {children}

packages/components/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.tsx

@@ -5,14 +5,16 @@ import {
   ListBoxSection as RACListBoxSection,
   type ListBoxSectionProps,
 } from 'react-aria-components'
+import { type SelectSection } from '../../types'
 import styles from './ListSection.module.css'
 
 export const ListSection = ({
   name,
   className,
   children,
   ...props
-}: ListBoxSectionProps<object> & PropsWithChildren & { name: string }): React.ReactElement => {
+}: ListBoxSectionProps<SelectSection> &
+  PropsWithChildren & { name: string }): React.ReactElement => {
   return (
     <RACListBoxSection {...props}>
       <RACHeader className={classNames(styles.listSectionHeader, className)}>{name}</RACHeader>

packages/components/src/__alpha__/SingleSelect/SingleSelect.module.css → packages/components/src/__alpha__/SingleSelect/subcomponents/Popover/Popover.module.css

@@ -2,8 +2,7 @@
   .popover {
     background-color: var(--color-white);
     border-radius: var(--spacing-8);
-    padding: var(--spacing-8);
-    width: 200px;
+    padding: 0;
     box-shadow: var(--shadow-small-box-shadow);
   }
 }