@kaizen/components 1.80.2 → 1.80.4

package/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'))
+  },
+}

package/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>
                   ))}

package/src/__alpha__/SingleSelect/_docs/SingleSelect.stories.tsx

@@ -1,10 +1,30 @@
+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
@@ -12,7 +32,6 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
-  args: {},
   parameters: {
     docs: {
       canvas: {

package/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
+}

package/src/__alpha__/SingleSelect/context/index.ts

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

package/src/__alpha__/SingleSelect/subcomponents/List/List.module.css

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

package/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}

package/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;
   }
 }

package/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}

package/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.tsx

@@ -5,6 +5,7 @@ import {
   ListBoxSection as RACListBoxSection,
   type ListBoxSectionProps,
 } from 'react-aria-components'
+import { type SelectSection } from '../../types'
 import styles from './ListSection.module.css'
 
 export const ListSection = ({
@@ -12,7 +13,8 @@ export const ListSection = ({
   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>

package/src/__alpha__/SingleSelect/subcomponents/Popover/Popover.module.css

@@ -0,0 +1,24 @@
+@layer kz-components {
+  .popover {
+    position: absolute;
+    height: auto;
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    padding: 0;
+    box-shadow: var(--shadow-small-box-shadow);
+    overflow: hidden auto;
+    margin: 0;
+    box-sizing: border-box;
+
+    /* TODO: update width based on design */
+    width: 200px;
+
+    @supports (anchor-name: --anchor) {
+      position-anchor: var(--position-anchor);
+      margin-block: var(--spacing-4);
+      position-area: var(--position-area) center;
+      /* stylelint-disable-next-line declaration-property-value-no-unknown */
+      width: anchor-size(width);
+    }
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/Popover/Popover.tsx

@@ -0,0 +1,54 @@
+import React, { useLayoutEffect, useMemo, type PropsWithChildren } from 'react'
+
+import { Popover as RACPopover } from 'react-aria-components'
+import { useSingleSelectContext } from '../../context'
+import { type PopoverProps } from '../../types'
+import { usePositioningStyles } from './utils/usePositioningStyles'
+import styles from './Popover.module.css'
+
+export const Popover = ({
+  buttonRef,
+  popoverRef,
+  racPopoverRef,
+  children,
+}: PopoverProps & PropsWithChildren): React.ReactElement => {
+  const { isOpen, setOpen, anchorName } = useSingleSelectContext()
+
+  const { popoverStyle, isPositioned } = usePositioningStyles(buttonRef, popoverRef, anchorName)
+
+  const shouldShowPopover = useMemo(() => isOpen && isPositioned, [isOpen, isPositioned])
+
+  useLayoutEffect(() => {
+    const popover = popoverRef.current
+    if (!popover?.showPopover || !popover?.hidePopover) return
+
+    if (shouldShowPopover) {
+      popover.showPopover()
+    } else {
+      popover.hidePopover()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldShowPopover])
+
+  return (
+    <RACPopover
+      shouldUpdatePosition={false}
+      trigger="manual"
+      isOpen={isOpen}
+      onOpenChange={setOpen}
+      ref={racPopoverRef}
+    >
+      <div
+        // @ts-expect-error - popover attribute is not included in current ts version, ignore type error
+        popover="manual"
+        ref={popoverRef}
+        className={styles.popover}
+        style={popoverStyle}
+      >
+        {children}
+      </div>
+    </RACPopover>
+  )
+}
+
+Popover.displayName = 'SingleSelect.Popover'

package/src/__alpha__/SingleSelect/subcomponents/Popover/index.ts

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

package/src/__alpha__/SingleSelect/subcomponents/Popover/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './usePopoverPositioning'
+export * from './useSupportsAnchorPositioning'

package/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePopoverPositioning.ts

@@ -0,0 +1,108 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  type LogicalPosition,
+  type Position,
+  type UsePopoverPositioningProps,
+} from '../../../types'
+
+export function usePopoverPositioning({
+  triggerRef,
+  popoverRef,
+  direction = 'ltr',
+  offset = 4,
+  preferredPlacement = 'bottom',
+}: UsePopoverPositioningProps): Position & { isPositioned: boolean } {
+  const [position, setPosition] = useState<Position>({
+    top: preferredPlacement === 'bottom' ? offset : 'auto',
+    bottom: preferredPlacement === 'top' ? offset : 'auto',
+    insetInlineStart: 0,
+    maxHeight: 300, // TODO: update this based on designs
+  })
+
+  const [isPositioned, setIsPositioned] = useState(true)
+
+  const mountedRef = useRef<boolean>(false)
+  const isSSR = typeof window === 'undefined'
+
+  const updatePosition = useCallback(() => {
+    if (isSSR) return
+
+    const trigger = triggerRef.current
+    const popover = popoverRef.current
+
+    if (!mountedRef.current || !trigger || !popover?.isConnected) {
+      return
+    }
+
+    const triggerRect = trigger.getBoundingClientRect()
+    if (!triggerRect) return
+
+    const doc = trigger.ownerDocument
+    const win = doc?.defaultView ?? window
+    const isRTL = direction === 'rtl'
+
+    const inlineStart = isRTL ? win.innerWidth - triggerRect.right : triggerRect.left
+
+    const triggerTop = triggerRect.top
+    const triggerBottom = triggerRect.bottom
+    const viewportHeight = win.innerHeight
+
+    const spaceAbove = triggerTop
+    const spaceBelow = viewportHeight - triggerBottom
+
+    const shouldFlip =
+      preferredPlacement === 'bottom' && spaceBelow < 200 && spaceAbove > spaceBelow
+
+    let top: LogicalPosition
+    let bottom: LogicalPosition
+    let maxHeight: number | undefined
+
+    if (shouldFlip) {
+      top = 'auto'
+      bottom = viewportHeight - triggerTop + offset
+      maxHeight = Math.max(0, spaceAbove - offset)
+    } else {
+      top = triggerBottom + offset
+      bottom = 'auto'
+      maxHeight = Math.max(0, spaceBelow - offset)
+    }
+
+    const newPosition = {
+      top,
+      bottom,
+      insetInlineStart: inlineStart,
+      maxHeight,
+    }
+
+    setPosition(newPosition)
+    setIsPositioned(true)
+  }, [triggerRef, popoverRef, direction, offset, preferredPlacement, isSSR])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    mountedRef.current = true
+
+    const triggerEl = triggerRef.current
+
+    updatePosition()
+
+    const resizeObserver = new ResizeObserver(() => {
+      updatePosition()
+    })
+
+    if (triggerEl) resizeObserver.observe(triggerEl)
+
+    const onWindowResize = (): void => updatePosition()
+    window.addEventListener('resize', onWindowResize, { passive: true })
+
+    return () => {
+      mountedRef.current = false
+      resizeObserver.disconnect()
+      window.removeEventListener('resize', onWindowResize)
+      setIsPositioned(false)
+    }
+  }, [updatePosition, triggerRef])
+
+  return { ...position, isPositioned }
+}

package/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePositioningStyles.ts

@@ -0,0 +1,75 @@
+import { useMemo } from 'react'
+import { useLocale } from '@react-aria/i18n'
+import { type PositionData } from '../../../types'
+import { usePopoverPositioning } from './usePopoverPositioning'
+import { useSupportsAnchorPositioning } from './useSupportsAnchorPositioning'
+
+const CSS_PROPS = {
+  POSITION_ANCHOR: '--position-anchor',
+  POSITION_AREA: '--position-area',
+} as const
+
+const DEFAULTS = {
+  MAX_HEIGHT: '300px',
+} as const
+
+/**
+ * Generates manual positioning styles for browsers without anchor positioning support or SSR
+ */
+const getManualPositioningStyles = (positionData: PositionData): React.CSSProperties => ({
+  top: positionData.top,
+  bottom: positionData.bottom,
+  insetInlineStart: positionData.insetInlineStart,
+  maxHeight: positionData.maxHeight,
+  left: 'auto',
+  right: 'auto',
+  position: 'fixed',
+})
+
+const getAnchorPositioningStyles = (
+  anchorName: string,
+  positionData: PositionData,
+): React.CSSProperties => {
+  const styles: React.CSSProperties = {
+    maxHeight: positionData.maxHeight ?? DEFAULTS.MAX_HEIGHT,
+    [CSS_PROPS.POSITION_ANCHOR]: anchorName,
+    [CSS_PROPS.POSITION_AREA]: positionData.top === 'auto' ? 'top' : 'bottom',
+  }
+  return styles
+}
+
+export const usePositioningStyles = (
+  buttonRef: React.RefObject<HTMLElement>,
+  popoverRef: React.RefObject<HTMLDivElement>,
+  anchorName: string,
+): { popoverStyle: React.CSSProperties; isPositioned: boolean } => {
+  const { direction } = useLocale()
+  const hasAnchorSupport = useSupportsAnchorPositioning()
+
+  const { top, bottom, insetInlineStart, maxHeight, isPositioned } = usePopoverPositioning({
+    triggerRef: buttonRef,
+    popoverRef,
+    direction,
+    preferredPlacement: 'bottom',
+  })
+
+  const positionData = useMemo(
+    () => ({
+      top,
+      bottom,
+      insetInlineStart,
+      maxHeight,
+    }),
+    [top, bottom, insetInlineStart, maxHeight],
+  )
+
+  const popoverStyle = useMemo(() => {
+    if (hasAnchorSupport === null || !hasAnchorSupport) {
+      return getManualPositioningStyles(positionData)
+    }
+
+    return getAnchorPositioningStyles(anchorName, positionData)
+  }, [hasAnchorSupport, anchorName, positionData])
+
+  return { popoverStyle, isPositioned }
+}

package/src/__alpha__/SingleSelect/subcomponents/Popover/utils/useSupportsAnchorPositioning.ts

@@ -0,0 +1,13 @@
+import { useMemo } from 'react'
+
+export const useSupportsAnchorPositioning = (): boolean => {
+  return useMemo(() => {
+    if (typeof window === 'undefined' || typeof CSS === 'undefined') {
+      return false
+    }
+
+    return (
+      CSS.supports('position-anchor', 'auto') || CSS.supports('position-try-fallbacks: flip-block')
+    )
+  }, [])
+}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.module.css

@@ -1,5 +1,6 @@
 @layer kz-components {
   .button {
+    anchor-name: var(--anchor-name);
     display: flex;
     align-items: center;
     justify-content: space-between;

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.tsx

@@ -1,13 +1,35 @@
-import React from 'react'
-import { Button as RACButton, SelectValue } from 'react-aria-components'
+import React, { useMemo } from 'react'
+import { Button as RACButton } from 'react-aria-components'
 import { Icon } from '~components/__next__/Icon'
+import { useSingleSelectContext } from '../../context'
+import { type SelectItem, type SelectSection, type TriggerProps } from '../../types'
 import styles from './Trigger.module.css'
 
-export const Trigger = (): JSX.Element => {
+function flattenItems(items: (SelectItem | SelectSection)[]): SelectItem[] {
+  return items.flatMap((item) => ('options' in item ? item.options : item))
+}
+
+export const Trigger = ({ buttonRef }: TriggerProps): JSX.Element => {
+  const { isOpen, setOpen, selectedKey, items, anchorName } = useSingleSelectContext()
+  const flattenedItems = useMemo(() => flattenItems(items), [items])
+  const selectedLabel = useMemo(() => {
+    const key = selectedKey
+    const item = flattenedItems.find((i) => i.value === key)
+    return item?.label ?? <div></div>
+  }, [flattenedItems, selectedKey])
+
   return (
-    <RACButton className={styles.button}>
-      <SelectValue />
-      <Icon name="keyboard_arrow_down" isPresentational />
-    </RACButton>
+    <div style={{ position: 'relative' }}>
+      <RACButton
+        className={styles.button}
+        ref={buttonRef}
+        onPress={() => setOpen(!isOpen)}
+        aria-expanded={isOpen}
+        style={{ '--anchor-name': anchorName } as React.CSSProperties}
+      >
+        {selectedLabel}
+        <Icon name="keyboard_arrow_down" isPresentational />
+      </RACButton>
+    </div>
   )
 }

package/src/__alpha__/SingleSelect/subcomponents/index.ts

@@ -2,3 +2,4 @@ export * from './List'
 export * from './ListSection'
 export * from './ListItem'
 export * from './Trigger'
+export * from './Popover'

package/src/__alpha__/SingleSelect/types.ts

@@ -0,0 +1,58 @@
+import { type RefObject } from 'react'
+import { type Key } from '@react-types/shared'
+
+// Shared types
+export type SelectItem = {
+  label: string
+  value: string
+}
+
+export type SelectSection = {
+  label: string
+  options: SelectItem[]
+}
+
+// SingleSelect related types
+export type SingleSelectProps = {
+  children?: React.ReactNode
+  items: (SelectItem | SelectSection)[]
+  onSelectionChange?: (key: Key | null) => void
+}
+
+// Trigger related types
+export type TriggerProps = {
+  buttonRef: React.RefObject<HTMLButtonElement>
+}
+
+// Popover related types
+export type PopoverProps = {
+  buttonRef: React.RefObject<HTMLElement>
+  popoverRef: React.RefObject<HTMLDivElement>
+  racPopoverRef: React.Ref<any>
+}
+
+type PositionDataProp = number | string | undefined
+
+export type PositionData = {
+  top: PositionDataProp
+  bottom: PositionDataProp
+  insetInlineStart: PositionDataProp
+  maxHeight: PositionDataProp
+}
+
+export type LogicalPosition = number | 'auto' | undefined
+
+export type Position = {
+  top: LogicalPosition
+  bottom: LogicalPosition
+  insetInlineStart: number
+  maxHeight?: number
+}
+
+export type UsePopoverPositioningProps = {
+  triggerRef: RefObject<HTMLElement>
+  popoverRef: RefObject<HTMLElement>
+  direction?: 'ltr' | 'rtl'
+  offset?: number
+  preferredPlacement?: 'top' | 'bottom'
+}

package/dist/esm/src/__alpha__/SingleSelect/SingleSelect.module.css.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "popover": "SingleSelect-module_popover__ZjL9n"
-};
-export { styles as default };