[KZN-3415] uses native popover api in SingleSelect

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

@@ -1,23 +1,98 @@
-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, { cloneElement, isValidElement, useId, useMemo, 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)
+
+  // Generate a unique ID for this SingleSelect instance to avoid anchor name conflicts
+  const uniqueId = useId()
+  const anchorName = `--trigger-${uniqueId}`
+
+  // Select state without children render prop to keep things flexible
+  // and allow for custom list rendering
+  const state = useSelectState({
+    items,
+  })
+
+  const handleOnSelectionChange = React.useCallback(
+    (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)
+      }
+    },
+    [state, onSelectionChange],
+  )
+
+  // Cloning children here to allow users to pass in a custom ListItem or ListSection
+  // and still have the SingleSelect handle selection state
+  const injectedChildren = useMemo(() => {
+    if (!isValidElement(children)) return null
+
+    const selectedKeys: Iterable<Key> = state.selectedKey
+      ? new Set<Key>([state.selectedKey])
+      : new Set()
+
+    return cloneElement(children as React.ReactElement<ListBoxProps<SelectItem | SelectSection>>, {
+      selectionMode: 'single',
+      selectedKeys,
+      onSelectionChange: handleOnSelectionChange,
+      autoFocus: 'first',
+    })
+  }, [children, handleOnSelectionChange, state.selectedKey])
+
   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,
+        anchorName,
+      }}
+    >
+      <RACSelect
+        // TODO: allow user to pass in label
+        aria-label={'single-select'}
+        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

@@ -18,10 +18,13 @@ import * as SingleSelectStories from './SingleSelect.stories'
 
 ## Overview
 
-{/* @todo: Update summary. */}
-Brief summary of the component here.
+SingleSelect component that handles selecting items from a dropdown, can be either filterable or not.
 
 <Canvas of={SingleSelectStories.Playground} />
 <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.spec.stories.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, screen, userEvent, waitFor } from '@storybook/test'
+import { SingleSelect } from '../SingleSelect'
+import { singleMockItems } from './mockData'
+
+const meta = {
+  title: 'Components/SingleSelect/SingleSelect (alpha)',
+  component: SingleSelect,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof SingleSelect>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const args = {
+  items: singleMockItems,
+  children: (
+    <SingleSelect.List>
+      {singleMockItems.map((item) => (
+        <SingleSelect.ListItem key={item.value} id={item.value}>
+          {item.label}
+        </SingleSelect.ListItem>
+      ))}
+    </SingleSelect.List>
+  ),
+}
+
+export const RendersButton: Story = {
+  args,
+  play: async () => {
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  },
+}
+
+export const OpensPopoverOnClick: Story = {
+  args,
+  play: async () => {
+    const trigger = screen.getByRole('button')
+    await userEvent.click(trigger)
+    await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'true'))
+    const options = await screen.findAllByRole('option')
+    expect(options[0]).toBeVisible()
+    expect(options[0]).toHaveTextContent(singleMockItems[0].label)
+  },
+}
+
+export const ClosesPopoverOnSelect: Story = {
+  args,
+  play: async () => {
+    const trigger = screen.getByRole('button')
+    await userEvent.click(trigger)
+    await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'true'))
+    const options = await screen.findAllByRole('option')
+    await userEvent.click(options[0])
+    await waitFor(() => expect(screen.queryAllByRole('option')).toHaveLength(0))
+  },
+}
+
+export const KeyboardNavigation: Story = {
+  args,
+  play: async () => {
+    const trigger = screen.getByRole('button')
+    trigger.focus()
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'true'))
+    const options = await screen.findAllByRole('option')
+    await userEvent.keyboard('{ArrowDown}')
+    expect(options[1]).toHaveAttribute('data-focused', 'true')
+    await userEvent.keyboard('{ArrowUp}')
+    expect(options[0]).toHaveAttribute('data-focused', 'true')
+  },
+}
+
+export const KeyboardSelectsItem: Story = {
+  args,
+  play: async () => {
+    const trigger = screen.getByRole('button')
+    trigger.focus()
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'true'))
+    await userEvent.keyboard('{ArrowDown}')
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(screen.queryAllByRole('option')).toHaveLength(0))
+  },
+}
+
+export const KeyboardEscapeClosesPopover: Story = {
+  args,
+  play: async () => {
+    const trigger = screen.getByRole('button')
+    await userEvent.click(trigger)
+    await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'true'))
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'false'))
+  },
+}

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,18 +1,37 @@
+import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { SingleSelect } from '../index'
+import { singleMockItems } from './mockData'
 
 const meta = {
   title: 'Components/SingleSelect/SingleSelect (alpha)',
   component: SingleSelect,
-  args: {},
+  args: {
+    items: singleMockItems,
+    children: (
+      <SingleSelect.List>
+        {singleMockItems.map((item) => (
+          <SingleSelect.ListItem key={item.value} id={item.value}>
+            {item.label}
+          </SingleSelect.ListItem>
+        ))}
+      </SingleSelect.List>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-200 justify-center items-center position-relative flex">
+        <Story />
+      </div>
+    ),
+  ],
 } satisfies Meta<typeof SingleSelect>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
-  args: {},
   parameters: {
     docs: {
       canvas: {

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

@@ -0,0 +1,21 @@
+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)[]
+  anchorName: string
+}
+
+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;
   }
 }