@kaizen/components 2.0.0 → 2.0.2

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

@@ -0,0 +1,106 @@
+import React, { useId, useRef } from 'react'
+import { useComboBoxState } from '@react-stately/combobox'
+import classNames from 'classnames'
+import { useComboBox, useFilter } from 'react-aria'
+import { FieldMessage } from '~components/FieldMessage'
+import { Label } from '~components/Label'
+import { SingleSelectContext } from '../../context'
+import { type ComboBoxProps, type SelectItem } from '../../types'
+import { ComboBoxTrigger } from '../ComboBoxTrigger'
+import { List } from '../List'
+import { Popover } from '../Popover'
+import styles from './ComboBox.module.css'
+
+export const ComboBox = <T extends SelectItem>(props: ComboBoxProps<T>): JSX.Element => {
+  const {
+    items,
+    children,
+    label,
+    description,
+    labelHidden,
+    labelPosition = 'top',
+    isReadOnly,
+    isDisabled,
+    size = 'medium',
+    variant = 'primary',
+  } = props
+
+  const { contains } = useFilter({ sensitivity: 'base' })
+
+  const state = useComboBoxState({
+    ...props,
+    items: items,
+    defaultFilter: contains,
+    children: children,
+    menuTrigger: 'focus',
+  })
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const listBoxRef = useRef<HTMLUListElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const clearButtonRef = useRef<HTMLButtonElement>(null)
+  const triggerWrapperRef = useRef<HTMLDivElement>(null)
+
+  const { labelProps, descriptionProps, inputProps, listBoxProps, buttonProps } = useComboBox(
+    {
+      ...props,
+      'aria-label': labelHidden ? label : undefined,
+      inputRef,
+      buttonRef,
+      popoverRef,
+      listBoxRef,
+    },
+    state,
+  )
+  const uniqueId = useId()
+  const anchorName = `--trigger-${uniqueId}`
+
+  return (
+    <SingleSelectContext.Provider
+      value={{
+        anchorName,
+        state,
+        isComboBox: true,
+        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.comboBoxTrigger}>
+          <ComboBoxTrigger
+            inputProps={inputProps}
+            inputRef={inputRef}
+            buttonRef={buttonRef}
+            buttonProps={buttonProps}
+            clearButtonRef={clearButtonRef}
+            triggerWrapperRef={triggerWrapperRef}
+          />
+        </div>
+
+        {description && (
+          <div className={styles.description}>
+            <FieldMessage message={description} {...descriptionProps} />
+          </div>
+        )}
+      </div>
+
+      <Popover
+        state={state}
+        triggerRef={triggerWrapperRef}
+        popoverRef={popoverRef}
+        clearButtonRef={clearButtonRef}
+      >
+        <List listBoxOptions={listBoxProps} state={state} listBoxRef={listBoxRef} />
+      </Popover>
+    </SingleSelectContext.Provider>
+  )
+}

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

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

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

@@ -0,0 +1,130 @@
+@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);
+    height: var(--spacing-40);
+    min-width: var(--spacing-200);
+    width: 100%;
+    background-color: var(--color-white);
+    border-radius: 0.4375rem;
+    border: var(--spacing-2) solid var(--color-gray-500);
+    box-sizing: border-box;
+  }
+
+  .smallText {
+    font-family: var(--typography-paragraph-small-font-family);
+    font-weight: var(--typography-paragraph-small-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);
+  }
+
+  .secondary:not(.disabled, .readOnly) {
+    border-radius: 0.4375rem 0.4375rem 0 0;
+    border: 2px solid transparent;
+    border-bottom: var(--spacing-2) solid var(--color-gray-400);
+  }
+
+  .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-600);
+    border-radius: 0.4375rem;
+  }
+
+  .input {
+    outline: none;
+    text-overflow: ellipsis;
+    background-color: var(--color-white);
+    padding: var(--spacing-8) 0;
+    margin-inline-start: var(--spacing-16);
+    height: 2.25rem;
+    box-sizing: border-box;
+    width: inherit;
+  }
+
+  .small .input {
+    height: 1.75rem;
+  }
+
+  .disabled {
+    pointer-events: none;
+    border: var(--spacing-2) solid var(--color-gray-300);
+    background-color: var(--color-gray-100);
+
+    .input {
+      background-color: var(--color-gray-100);
+      color: var(--color-gray-500);
+    }
+  }
+
+  .readOnly {
+    pointer-events: none;
+    background-color: var(--color-gray-200);
+    border: var(--spacing-2) solid var(--color-gray-200);
+
+    .input {
+      background-color: var(--color-gray-200);
+    }
+  }
+
+  .trigger:focus-within {
+    outline-offset: var(--spacing-2);
+    outline: var(--spacing-2) solid var(--color-blue-500);
+    background-color: var(--color-white);
+    border-radius: 0.4375rem;
+
+    .input {
+      background-color: var(--color-white);
+    }
+  }
+
+  .trigger:hover:not(:focus-within) {
+    border-color: var(--color-gray-600);
+    background-color: var(--color-gray-200);
+
+    .input {
+      background-color: var(--color-gray-200);
+    }
+  }
+
+  .small {
+    height: var(--spacing-32);
+  }
+
+  .large {
+    height: var(--spacing-48);
+  }
+
+  .clearButton {
+    background: none;
+    padding: 0;
+    display: flex;
+  }
+
+  .clearButton:focus-visible {
+    outline: var(--spacing-2) solid var(--color-blue-500);
+    border-radius: 50%;
+  }
+
+  .chevronButton {
+    background: none;
+    padding-block: var(--spacing-8);
+    padding-inline: var(--spacing-6) var(--spacing-16);
+    display: flex;
+  }
+
+  .hidden {
+    visibility: hidden;
+  }
+}

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

@@ -0,0 +1,121 @@
+import React from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
+import classNames from 'classnames'
+import { useButton } from 'react-aria'
+import { Icon } from '~components/Icon'
+import { VisuallyHidden } from '~components/VisuallyHidden'
+import { useSingleSelectContext } from '../../context'
+import {
+  type ChevronButtonProps,
+  type ClearButtonProps,
+  type ComboBoxTriggerProps,
+} from '../../types'
+import styles from './ComboBoxTrigger.module.css'
+
+const ClearButton = ({ clearButtonRef, inputRef }: ClearButtonProps): JSX.Element => {
+  const { state, isComboBox, fieldLabel } = useSingleSelectContext()
+
+  const { formatMessage } = useIntl()
+
+  const clearButtonAlt = formatMessage(
+    {
+      id: 'singleSelect.clearButtonAlt',
+      defaultMessage: 'Clear {field} selection',
+      description: 'Alt text for the clear selection button',
+    },
+    { field: fieldLabel },
+  )
+
+  const { buttonProps } = useButton(
+    {
+      onPress: () => {
+        if (isComboBox) {
+          state.setSelectedKey(null)
+        }
+        inputRef.current?.focus()
+      },
+    },
+    clearButtonRef,
+  )
+
+  return (
+    <button
+      {...buttonProps}
+      ref={clearButtonRef}
+      type="button"
+      className={classNames(styles.clearButton, { [styles.hidden]: !state.selectedKey })}
+      tabIndex={0}
+    >
+      <Icon name="cancel" isPresentational isFilled />
+      <VisuallyHidden>{clearButtonAlt}</VisuallyHidden>
+    </button>
+  )
+}
+
+const ChevronButton = (props: ChevronButtonProps): JSX.Element => {
+  const { state, fieldLabel } = useSingleSelectContext()
+  const { formatMessage } = useIntl()
+
+  const chevronButton = formatMessage(
+    {
+      id: 'singleSelect.chevronButton',
+      defaultMessage: 'Show suggestions for {field}',
+      description: 'Aria label text for the SingleSelect button to open and close suggestions list',
+    },
+    { field: fieldLabel },
+  )
+
+  const { buttonProps } = useButton(
+    { ...props, 'aria-label': String(chevronButton), 'aria-labelledby': undefined },
+    props.buttonRef,
+  )
+
+  return (
+    <button
+      type="button"
+      {...buttonProps}
+      ref={props.buttonRef}
+      className={styles.chevronButton}
+      tabIndex={-1}
+    >
+      <Icon isPresentational name={state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} />
+    </button>
+  )
+}
+
+export const ComboBoxTrigger = ({
+  inputProps,
+  inputRef,
+  buttonProps,
+  buttonRef,
+  triggerWrapperRef,
+  clearButtonRef,
+}: ComboBoxTriggerProps): JSX.Element => {
+  const { anchorName, isDisabled, isReadOnly, secondary, size } = useSingleSelectContext()
+
+  return (
+    <>
+      <div
+        style={{ '--anchor-name': anchorName } as React.CSSProperties}
+        ref={triggerWrapperRef}
+        className={classNames(styles.trigger, {
+          [styles.disabled]: isDisabled,
+          [styles.readOnly]: isReadOnly,
+          [styles.secondary]: secondary,
+          [styles.small]: size === 'small',
+          [styles.large]: size === 'large',
+        })}
+      >
+        <input
+          {...inputProps}
+          ref={inputRef}
+          className={classNames(styles.input, { [styles.smallText]: size === 'small' })}
+        />
+        {!isDisabled && !isReadOnly && (
+          <ClearButton clearButtonRef={clearButtonRef} inputRef={inputRef} />
+        )}
+        {!isReadOnly && <ChevronButton {...buttonProps} buttonRef={buttonRef} />}
+      </div>
+    </>
+  )
+}

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

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

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

@@ -2,5 +2,10 @@
   .list {
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
+    list-style: none;
+    overflow-y: auto;
+    padding: 0.875rem;
+    margin: 0;
   }
 }

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

@@ -1,18 +1,41 @@
-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 React from 'react'
+import type { Node } from '@react-types/shared'
+import { useListBox } from 'react-aria'
+import { type ListProps, type SelectItem } from '../../types'
+import { ListItem } from '../ListItem'
+import { ListSection } from '../ListSection'
 import styles from './List.module.css'
 
-export const List = ({
-  children,
-  className,
-  ...props
-}: ListBoxProps<SelectItem | SelectSection> & PropsWithChildren): React.ReactElement => {
+export const List = <T extends SelectItem>({
+  state,
+  listBoxOptions,
+  listBoxRef,
+}: ListProps<T>): JSX.Element => {
+  const { listBoxProps } = useListBox({ ...listBoxOptions, autoFocus: 'first' }, state, listBoxRef)
+
+  const renderNode = (node: Node<T>): JSX.Element | null => {
+    if (node.type === 'section') {
+      return node.rendered ? (
+        <ListSection key={String(node.key)} section={node} state={state} />
+      ) : null
+    } else {
+      const { selectedIcon, selectedPosition, className } = node.props
+      return (
+        <ListItem
+          key={String(node.key)}
+          item={node}
+          state={state}
+          selectedIcon={selectedIcon}
+          selectedPosition={selectedPosition}
+          className={className}
+        />
+      )
+    }
+  }
+
   return (
-    <RACListBox className={classNames(styles.list, className)} {...props}>
-      {children}
-    </RACListBox>
+    <ul {...listBoxProps} ref={listBoxRef} className={styles.list}>
+      {Array.from(state.collection).map(renderNode)}
+    </ul>
   )
 }
-List.displayName = 'SingleSelect.List'

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