@kaizen/components 0.0.0-canary-v2-20250901045936 → 0.0.0-canary-alpha-release-20250918043833

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

@@ -1,4 +1,8 @@
 @layer kz-components {
+  ul {
+    padding-inline-start: 0;
+  }
+
   .listItem {
     font-family: var(--typography-paragraph-body-font-family);
     font-weight: var(--typography-paragraph-body-font-weight);
@@ -6,11 +10,88 @@
     line-height: var(--typography-paragraph-body-line-height);
     letter-spacing: var(--typography-paragraph-body-letter-spacing);
     padding: var(--spacing-8) var(--spacing-16);
+    margin: 0;
+    list-style-type: none;
+    border-radius: var(--spacing-8);
+    border: var(--spacing-2) solid transparent;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    outline: none;
+    gap: var(--spacing-12);
+  }
+
+  .listItem.focused {
+    border: var(--spacing-2) solid var(--color-blue-500);
+  }
+
+  .listItem.focused:hover {
+    border-color: transparent;
+  }
+
+  .listItem:hover {
+    background-color: var(--color-gray-200);
   }
 
-  .listItem:focus-visible {
+  .listItem.focused:active {
+    background-color: var(--color-gray-300);
+  }
+
+  .startSelection {
+    justify-content: flex-start;
+  }
+
+  .selected {
+    background-color: var(--color-blue-100);
+    border: var(--spacing-2) solid transparent;
+  }
+
+  .selected:hover {
     background-color: var(--color-blue-200);
-    outline: none;
-    border-color: white;
+  }
+
+  .selected:active {
+    background-color: var(--color-blue-100);
+  }
+
+  .disabled {
+    color: var(--color-gray-500);
+  }
+
+  .disabled:hover {
+    background-color: var(--color-white);
+  }
+
+  .iconChecked {
+    color: var(--color-blue-500);
+  }
+
+  .itemContent {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .itemText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .selectedStartPosition {
+    justify-content: flex-start;
+  }
+
+  .selectedIconWrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .emptySpacer {
+    width: var(--spacing-20);
   }
 }

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

@@ -1,18 +1,74 @@
-import React, { type PropsWithChildren } from 'react'
+import React from 'react'
 import classNames from 'classnames'
-import { ListBoxItem as RACListBoxItem, type ListBoxItemProps } from 'react-aria-components'
-import { type SelectItem } from '../../types'
+import { useOption } from 'react-aria'
+import { Icon } from '~components/Icon'
+import { Radio } from '~components/Radio'
+import { type ListItemProps, type SelectItem } from '../../types'
 import styles from './ListItem.module.css'
 
-export const ListItem = ({
-  children,
+export const ListItem = <T extends SelectItem>({
+  item,
+  state,
+  selectedIcon = 'check',
+  selectedPosition = 'end',
   className,
-  ...props
-}: ListBoxItemProps<SelectItem> & PropsWithChildren): React.ReactElement => {
+}: ListItemProps<T>): JSX.Element => {
+  const ref = React.useRef(null)
+  const { optionProps, isSelected, isDisabled, isFocused } = useOption(
+    { key: item.key },
+    state,
+    ref,
+  )
+
+  const isStart = selectedPosition === 'start'
+  const isEnd = selectedPosition === 'end'
+  const isCheck = selectedIcon === 'check'
+  const isRadio = selectedIcon === 'radio'
+
+  const renderSelectionIcon = (): JSX.Element | null => {
+    if (isCheck) {
+      if (isSelected) {
+        return (
+          <div className={styles.selectedIconWrapper}>
+            <Icon name="check" isPresentational className={styles.iconChecked} />
+          </div>
+        )
+      }
+
+      return isStart ? <div className={styles.emptySpacer} /> : null
+    }
+
+    if (isRadio) {
+      return (
+        <div className={styles.selectedIconWrapper}>
+          <Radio id={item.textValue} name={item.textValue} selectedStatus={isSelected} />
+        </div>
+      )
+    }
+
+    return null
+  }
+
   return (
-    <RACListBoxItem className={classNames(styles.listItem, className)} {...props}>
-      {children}
-    </RACListBoxItem>
+    <li
+      key={item.key}
+      {...optionProps}
+      ref={ref}
+      className={classNames(styles.listItem, {
+        [styles.focused]: isFocused,
+        [styles.disabled]: isDisabled,
+        [styles.selected]: isSelected,
+        [styles.selectedStartPosition]: isStart,
+      })}
+    >
+      {isStart && renderSelectionIcon()}
+      {typeof item.rendered === 'string' ? (
+        <span className={classNames(styles.itemText, className)}>{item.rendered}</span>
+      ) : (
+        <span className={classNames(styles.itemContent, className)}>{item.rendered}</span>
+      )}
+
+      {isEnd && renderSelectionIcon()}
+    </li>
   )
 }
-ListItem.displayName = 'SingleSelect.ListItem'

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

@@ -1,9 +1,24 @@
 @layer kz-components {
+  .sectionWrapper:not(.firstSectionHeader) {
+    padding-top: var(--spacing-16);
+  }
+
+  .firstSectionHeader {
+    padding-top: var(--spacing-8);
+  }
+
   .listSectionHeader {
-    font-family: var(--typography-heading-5-font-family);
-    font-weight: var(--typography-heading-5-font-weight);
-    font-size: var(--typography-heading-5-font-size);
-    line-height: var(--typography-heading-5-line-height);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-bold-font-weight);
+    font-size: var(--typography-paragraph-small-font-size);
+    line-height: var(--typography-paragraph-small-line-height);
+    letter-spacing: var(--typography-paragraph-small-letter-spacing);
+    padding-bottom: var(--spacing-4);
+    padding-left: var(--spacing-16);
+  }
+
+  .listSectionGroup {
+    padding: 0;
+    list-style: none;
   }
 }

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

@@ -1,25 +1,52 @@
-import React, { type PropsWithChildren } from 'react'
+import React from 'react'
 import classNames from 'classnames'
-import {
-  Header as RACHeader,
-  ListBoxSection as RACListBoxSection,
-  type ListBoxSectionProps,
-} from 'react-aria-components'
-import { type SelectSection } from '../../types'
+import { useListBoxSection } from 'react-aria'
+import { Divider } from '~components/Divider'
+import { type ListSectionProps, type SelectItem } from '../../types'
+import { ListItem } from '../ListItem'
 import styles from './ListSection.module.css'
 
-export const ListSection = ({
-  name,
-  className,
-  children,
-  ...props
-}: ListBoxSectionProps<SelectSection> &
-  PropsWithChildren & { name: string }): React.ReactElement => {
+export const ListSection = <T extends SelectItem>({
+  section,
+  state,
+}: ListSectionProps<T>): JSX.Element => {
+  const { headingProps, itemProps, groupProps } = useListBoxSection({
+    'heading': section.rendered,
+    'aria-label': section['aria-label'],
+  })
+
+  const firstSectionHeader = section.key === state.collection.getFirstKey()
+
   return (
-    <RACListBoxSection {...props}>
-      <RACHeader className={classNames(styles.listSectionHeader, className)}>{name}</RACHeader>
-      {children}
-    </RACListBoxSection>
+    <React.Fragment key={section.key}>
+      {!firstSectionHeader && <li role="presentation" aria-hidden />}
+      {!firstSectionHeader && <Divider variant="content" />}
+      <li
+        {...itemProps}
+        className={classNames(styles.sectionWrapper, {
+          [styles.firstSectionHeader]: firstSectionHeader,
+        })}
+      >
+        {section.rendered && (
+          <span
+            {...headingProps}
+            role="presentation"
+            aria-hidden
+            className={styles.listSectionHeader}
+          >
+            {section.rendered}
+          </span>
+        )}
+        <ul
+          key={`${section.key}-group-contents`}
+          {...groupProps}
+          className={styles.listSectionGroup}
+        >
+          {Array.from(section.childNodes).map((node) => (
+            <ListItem key={node.key} item={node} state={state} />
+          ))}
+        </ul>
+      </li>
+    </React.Fragment>
   )
 }
-ListSection.displayName = 'SingleSelect.ListSection'

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

@@ -1,17 +1,14 @@
 @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;
+    display: flex;
+    flex-direction: column;
 
     @supports (anchor-name: --anchor) {
       position-anchor: var(--position-anchor);
@@ -21,4 +18,9 @@
       width: anchor-size(width);
     }
   }
+
+  .offsetSpacing {
+    margin-top: var(--spacing-4);
+    margin-bottom: var(--spacing-4);
+  }
 }

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

@@ -1,54 +1,107 @@
-import React, { useLayoutEffect, useMemo, type PropsWithChildren } from 'react'
-
-import { Popover as RACPopover } from 'react-aria-components'
+import React, { useLayoutEffect } from 'react'
+import classNames from 'classnames'
+import { DismissButton, Overlay, usePopover } from 'react-aria'
 import { useSingleSelectContext } from '../../context'
-import { type PopoverProps } from '../../types'
-import { usePositioningStyles } from './utils/usePositioningStyles'
+import { type PopoverProps, type SelectItem } from '../../types'
+import { usePositioningStyles, useSupportsAnchorPositioning } from './utils'
+
 import styles from './Popover.module.css'
 
-export const Popover = ({
-  buttonRef,
+export const Popover = <T extends SelectItem>({
+  state,
   popoverRef,
-  racPopoverRef,
   children,
-}: PopoverProps & PropsWithChildren): React.ReactElement => {
-  const { isOpen, setOpen, anchorName } = useSingleSelectContext()
+  clearButtonRef,
+  ...restProps
+}: PopoverProps<T>): React.ReactElement => {
+  const { anchorName } = useSingleSelectContext()
+  const manualPopoverRef = React.useRef<HTMLDivElement>(null)
 
-  const { popoverStyle, isPositioned } = usePositioningStyles(buttonRef, popoverRef, anchorName)
+  const { popoverProps } = usePopover(
+    {
+      ...restProps,
+      popoverRef,
+      shouldCloseOnInteractOutside: (element) => {
+        if (clearButtonRef?.current?.contains(element)) {
+          return false
+        }
+        return true
+      },
+    },
+    state,
+  )
 
-  const shouldShowPopover = useMemo(() => isOpen && isPositioned, [isOpen, isPositioned])
+  const supportsAnchorPositioning = useSupportsAnchorPositioning()
+  const { popoverStyle, isPositioned, updatePosition } = usePositioningStyles(
+    restProps.triggerRef as React.RefObject<HTMLElement>,
+    manualPopoverRef,
+    anchorName,
+  )
 
   useLayoutEffect(() => {
-    const popover = popoverRef.current
-    if (!popover?.showPopover || !popover?.hidePopover) return
+    if (!supportsAnchorPositioning || !state.isOpen) return
+
+    updatePosition()
 
-    if (shouldShowPopover) {
+    const popover = manualPopoverRef?.current
+
+    if (popover?.showPopover) {
       popover.showPopover()
-    } else {
+    }
+
+    return () => {
+      if (popover?.hidePopover) {
+        popover.hidePopover()
+      }
+    }
+  }, [state.isOpen, supportsAnchorPositioning, updatePosition, isPositioned])
+
+  useLayoutEffect(() => {
+    if (!supportsAnchorPositioning || state.isOpen) return
+
+    const popover = manualPopoverRef?.current
+
+    if (popover?.hidePopover) {
       popover.hidePopover()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldShowPopover])
+  }, [state.isOpen, supportsAnchorPositioning])
 
-  return (
-    <RACPopover
-      shouldUpdatePosition={false}
-      trigger="manual"
-      isOpen={isOpen}
-      onOpenChange={setOpen}
-      ref={racPopoverRef}
+  const manualPopover = (
+    <div
+      // @ts-expect-error - popover attribute is not included in current ts version, ignore type error
+      popover="manual"
+      ref={manualPopoverRef}
+      className={styles.popover}
+      style={popoverStyle}
     >
-      <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>
+      {children}
+    </div>
   )
-}
 
-Popover.displayName = 'SingleSelect.Popover'
+  return (
+    <>
+      {state.isOpen && (
+        <Overlay>
+          <div
+            id="popover-id"
+            {...popoverProps}
+            ref={popoverRef}
+            style={{
+              ...popoverProps.style,
+              ...(!supportsAnchorPositioning && {
+                width: restProps.triggerRef.current?.getBoundingClientRect().width,
+              }),
+            }}
+            className={classNames(styles.popover, {
+              [styles.offsetSpacing]: !supportsAnchorPositioning,
+            })}
+          >
+            <DismissButton onDismiss={state.close} />
+            {supportsAnchorPositioning ? manualPopover : children}
+            <DismissButton onDismiss={state.close} />
+          </div>
+        </Overlay>
+      )}
+    </>
+  )
+}

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

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

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

@@ -11,7 +11,7 @@ export function usePopoverPositioning({
   direction = 'ltr',
   offset = 4,
   preferredPlacement = 'bottom',
-}: UsePopoverPositioningProps): Position & { isPositioned: boolean } {
+}: UsePopoverPositioningProps): Position & { isPositioned: boolean; updatePosition: () => void } {
   const [position, setPosition] = useState<Position>({
     top: preferredPlacement === 'bottom' ? offset : 'auto',
     bottom: preferredPlacement === 'top' ? offset : 'auto',
@@ -104,5 +104,5 @@ export function usePopoverPositioning({
     }
   }, [updatePosition, triggerRef])
 
-  return { ...position, isPositioned }
+  return { ...position, isPositioned, updatePosition }
 }

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

@@ -42,16 +42,17 @@ export const usePositioningStyles = (
   buttonRef: React.RefObject<HTMLElement>,
   popoverRef: React.RefObject<HTMLDivElement>,
   anchorName: string,
-): { popoverStyle: React.CSSProperties; isPositioned: boolean } => {
+): { popoverStyle: React.CSSProperties; isPositioned: boolean; updatePosition: () => void } => {
   const { direction } = useLocale()
   const hasAnchorSupport = useSupportsAnchorPositioning()
 
-  const { top, bottom, insetInlineStart, maxHeight, isPositioned } = usePopoverPositioning({
-    triggerRef: buttonRef,
-    popoverRef,
-    direction,
-    preferredPlacement: 'bottom',
-  })
+  const { top, bottom, insetInlineStart, maxHeight, isPositioned, updatePosition } =
+    usePopoverPositioning({
+      triggerRef: buttonRef,
+      popoverRef,
+      direction,
+      preferredPlacement: 'bottom',
+    })
 
   const positionData = useMemo(
     () => ({
@@ -71,5 +72,5 @@ export const usePositioningStyles = (
     return getAnchorPositioningStyles(anchorName, positionData)
   }, [hasAnchorSupport, anchorName, positionData])
 
-  return { popoverStyle, isPositioned }
+  return { popoverStyle, isPositioned, updatePosition }
 }

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

@@ -0,0 +1,35 @@
+@layer kz-components {
+  .topLabel {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .sideLabel {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    column-gap: var(--spacing-12);
+    align-items: center;
+  }
+
+  .label {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .labelTop {
+    margin-bottom: var(--spacing-6);
+  }
+
+  .selectTrigger {
+    grid-column: 2;
+    grid-row: 1;
+    width: 100%;
+  }
+
+  .description {
+    grid-column: 2;
+    grid-row: 2;
+  }
+}

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

@@ -0,0 +1,84 @@
+import React, { useId, useRef } from 'react'
+import { useSelectState } from '@react-stately/select'
+import classNames from 'classnames'
+import { useSelect } from 'react-aria'
+import { FieldMessage, Label } from '~components/index'
+import { SingleSelectContext } from '../../context'
+import { type SelectItem, type SelectProps } from '../../types'
+import { List } from '../List'
+import { Popover } from '../Popover'
+import { SelectTrigger } from '../SelectTrigger'
+import styles from './Select.module.css'
+
+export const Select = <T extends SelectItem>(props: SelectProps<T>): JSX.Element => {
+  const {
+    label,
+    description,
+    labelHidden,
+    labelPosition = 'top',
+    isDisabled,
+    isReadOnly,
+    size = 'medium',
+    variant = 'primary',
+  } = props
+
+  const state = useSelectState({
+    ...props,
+    items: props.items,
+    children: props.children,
+  })
+
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const listBoxRef = useRef<HTMLUListElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+
+  const { labelProps, descriptionProps, menuProps, triggerProps, valueProps } = useSelect(
+    {
+      ...props,
+      'aria-label': labelHidden ? label : undefined,
+    },
+    state,
+    triggerRef,
+  )
+  const uniqueId = useId()
+  const anchorName = `--trigger-${uniqueId}`
+
+  return (
+    <SingleSelectContext.Provider
+      value={{
+        anchorName,
+        state,
+        isComboBox: false,
+        isDisabled: isDisabled ?? false,
+        isReadOnly: isReadOnly ?? false,
+        secondary: variant === 'secondary',
+        size,
+        fieldLabel: label,
+      }}
+    >
+      <div className={labelPosition === 'top' ? styles.topLabel : styles.sideLabel}>
+        {!labelHidden && (
+          <div className={classNames(styles.label, { [styles.labelTop]: labelPosition === 'top' })}>
+            <Label {...labelProps}>{label}</Label>
+          </div>
+        )}
+        <div className={styles.selectTrigger}>
+          <SelectTrigger
+            triggerProps={triggerProps}
+            valueProps={valueProps}
+            buttonRef={triggerRef}
+          />
+        </div>
+        {description && (
+          <div className={styles.description}>
+            <FieldMessage message={description} {...descriptionProps} />
+          </div>
+        )}
+      </div>
+
+      <Popover state={state} triggerRef={triggerRef} popoverRef={popoverRef}>
+        <List listBoxOptions={menuProps} state={state} listBoxRef={listBoxRef} />
+      </Popover>
+    </SingleSelectContext.Provider>
+  )
+}

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

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