@kaizen/components 1.80.1 → 1.80.3

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

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

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

package/src/__alpha__/SingleSelect/SingleSelect.spec.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { SingleSelect } from './SingleSelect'
-import { singleMockItems } from './_docs/mockData'
-
-const SingleSelectWrapper = (): JSX.Element => (
-  <SingleSelect>
-    <SingleSelect.List>
-      {singleMockItems.map((item) => (
-        <SingleSelect.ListItem key={item.value} value={{ value: item.value }}>
-          {item.label}
-        </SingleSelect.ListItem>
-      ))}
-    </SingleSelect.List>
-  </SingleSelect>
-)
-
-describe('<SingleSelect />', () => {
-  describe('renders', () => {
-    it('a basic select component', () => {
-      const { getByRole } = render(<SingleSelectWrapper />)
-      const select = getByRole('button')
-      expect(select).toBeInTheDocument()
-    })
-  })
-})