@kaizen/components 2.0.0 → 2.0.2

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'

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

@@ -0,0 +1,77 @@
+@layer kz-components {
+  .trigger {
+    anchor-name: var(--anchor-name);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    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-12);
+    height: var(--spacing-40);
+    min-width: var(--spacing-200);
+    width: 100%;
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    border: var(--spacing-2) solid var(--color-gray-500);
+  }
+
+  .trigger:focus-visible {
+    outline-offset: var(--spacing-2);
+    outline: var(--spacing-2) solid var(--color-blue-500);
+    background-color: var(--color-white);
+  }
+
+  .trigger:hover:not(.disabled) {
+    border-color: var(--color-gray-600);
+    background-color: var(--color-gray-200);
+  }
+
+  .secondary:not(.disabled, .readOnly) {
+    border: 2px solid transparent;
+    border-bottom: var(--spacing-2) solid var(--color-gray-400);
+    border-radius: 0.4375rem 0.4375rem 0 0;
+  }
+
+  .secondary:not(.disabled, .readOnly):hover {
+    border: var(--spacing-2) solid var(--color-gray-600);
+    border-radius: 0.4375rem;
+  }
+
+  .secondary:not(.disabled, .readOnly):focus-within {
+    border: var(--spacing-2) solid var(--color-gray-500);
+    border-radius: 0.4375rem;
+  }
+
+  .disabled {
+    pointer-events: none;
+    border: var(--spacing-2) solid var(--color-gray-300);
+    background-color: var(--color-gray-100);
+  }
+
+  .disabledText {
+    color: var(--color-gray-500);
+  }
+
+  .readOnly {
+    pointer-events: none;
+    background-color: var(--color-gray-200);
+    border: var(--spacing-2) solid var(--color-gray-200);
+  }
+
+  .small {
+    height: var(--spacing-32);
+  }
+
+  .large {
+    height: var(--spacing-48);
+  }
+
+  .chevronButton {
+    background: none;
+    padding: 0;
+    display: flex;
+  }
+}

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import classNames from 'classnames'
+import { useButton } from 'react-aria'
+import { Icon } from '~components/Icon'
+import { Text } from '~components/Text'
+import { useSingleSelectContext } from '../../context'
+import { type SelectTriggerProps } from '../../types'
+import styles from './SelectTrigger.module.css'
+
+const ChevronButton = (): JSX.Element => {
+  const { state } = useSingleSelectContext()
+
+  return (
+    <div className={styles.chevronButton}>
+      <Icon isPresentational name={state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} />
+    </div>
+  )
+}
+
+export const SelectTrigger = ({
+  triggerProps,
+  valueProps,
+  buttonRef,
+}: SelectTriggerProps): JSX.Element => {
+  const { state, anchorName, isDisabled, isReadOnly, secondary, size } = useSingleSelectContext()
+  const { buttonProps } = useButton(triggerProps, buttonRef)
+
+  return (
+    <button
+      {...buttonProps}
+      type="button"
+      style={{ '--anchor-name': anchorName } as React.CSSProperties}
+      className={classNames(styles.trigger, {
+        [styles.disabled]: isDisabled,
+        [styles.readOnly]: isReadOnly,
+        [styles.secondary]: secondary,
+        [styles.small]: size === 'small',
+        [styles.large]: size === 'large',
+      })}
+      ref={buttonRef}
+    >
+      <Text
+        variant={size === 'small' ? 'small' : 'body'}
+        classNameOverride={isDisabled ? styles.disabledText : undefined}
+      >
+        <span {...valueProps}>{state.selectedItem ? state.selectedItem.textValue : ''}</span>
+      </Text>
+
+      {!isReadOnly && <ChevronButton />}
+    </button>
+  )
+}

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

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

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

@@ -1,5 +1,8 @@
 export * from './List'
 export * from './ListSection'
 export * from './ListItem'
-export * from './Trigger'
+export * from './SelectTrigger'
+export * from './ComboBoxTrigger'
 export * from './Popover'
+export * from './Select'
+export * from './ComboBox'