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

package/dist/types/__alpha__/SingleSelect/subcomponents/index.d.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';

package/dist/types/__alpha__/SingleSelect/types.d.ts

@@ -1,25 +1,66 @@
-import { type RefObject } from 'react';
-import { type Key } from '@react-types/shared';
+import type { DOMAttributes, RefObject } from 'react';
+import type React from 'react';
+import { type ComboBoxState, type ComboBoxStateOptions } from '@react-stately/combobox';
+import type { ListState } from '@react-stately/list';
+import { type SelectState, type SelectStateOptions } from '@react-stately/select';
+import { type Key, type Node } from '@react-types/shared';
+import { type FocusableElement } from '@react-types/shared/src/dom';
+import type { AriaButtonProps, AriaListBoxOptions, AriaPopoverProps } from 'react-aria';
 export type SelectItem = {
     label: string;
     value: string;
+    key: Key;
 };
 export type SelectSection = {
     label: string;
     options: SelectItem[];
 };
-export type SingleSelectProps = {
-    children?: React.ReactNode;
-    items: (SelectItem | SelectSection)[];
-    onSelectionChange?: (key: Key | null) => void;
+export type SelectLabel = {
+    labelHidden: true;
+    label: string;
+} | {
+    labelHidden?: false;
+    label: React.ReactNode;
+};
+export type SelectBaseProps = {
+    variant?: 'primary' | 'secondary';
+    size?: 'small' | 'medium' | 'large';
+    labelPosition?: 'top' | 'side';
+    isReadOnly?: boolean;
+} & SelectLabel;
+export type SelectProps<T extends SelectItem> = Omit<SelectStateOptions<T>, 'label' | 'defaultFilter' | 'menuTrigger' | 'allowsCustomValue'> & SelectBaseProps;
+export type ComboBoxProps<T extends SelectItem> = Omit<ComboBoxStateOptions<T>, 'label' | 'defaultFilter' | 'menuTrigger' | 'allowsCustomValue'> & SelectBaseProps;
+export type SingleSelectProps<T extends SelectItem> = (ComboBoxProps<T> & {
+    isComboBox?: true;
+}) | (SelectProps<T> & {
+    isComboBox?: false;
+});
+export type SelectTriggerProps = {
+    triggerProps: AriaButtonProps<'button'>;
+    valueProps: DOMAttributes<FocusableElement>;
+    buttonRef: React.MutableRefObject<HTMLButtonElement | null>;
+};
+export type ComboBoxTriggerProps = {
+    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    inputRef: React.MutableRefObject<HTMLInputElement | null>;
+    buttonProps: AriaButtonProps<'button'>;
+    buttonRef: React.MutableRefObject<HTMLButtonElement | null>;
+    triggerWrapperRef: React.MutableRefObject<HTMLDivElement | null>;
+    clearButtonRef: React.MutableRefObject<HTMLButtonElement | null>;
+};
+export type ChevronButtonProps = AriaButtonProps<'button'> & {
+    buttonRef: React.MutableRefObject<HTMLButtonElement | null>;
 };
-export type TriggerProps = {
-    buttonRef: React.RefObject<HTMLButtonElement>;
+export type ClearButtonProps = {
+    clearButtonRef: React.RefObject<HTMLButtonElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
 };
-export type PopoverProps = {
-    buttonRef: React.RefObject<HTMLElement>;
+export type PopoverProps<T extends SelectItem> = AriaPopoverProps & {
+    state: ComboBoxState<T> | SelectState<T>;
+    triggerRef: React.RefObject<HTMLElement>;
     popoverRef: React.RefObject<HTMLDivElement>;
-    racPopoverRef: React.Ref<any>;
+    clearButtonRef?: React.RefObject<HTMLButtonElement>;
+    children: React.ReactNode;
 };
 type PositionDataProp = number | string | undefined;
 export type PositionData = {
@@ -42,4 +83,20 @@ export type UsePopoverPositioningProps = {
     offset?: number;
     preferredPlacement?: 'top' | 'bottom';
 };
+export type ListProps<T extends SelectItem> = {
+    state: ComboBoxState<T> | SelectState<T>;
+    listBoxOptions: AriaListBoxOptions<T>;
+    listBoxRef: React.RefObject<HTMLUListElement>;
+};
+export type ListItemProps<T extends SelectItem> = {
+    item: Node<T>;
+    state: ListState<T>;
+    selectedIcon?: 'check' | 'radio';
+    selectedPosition?: 'start' | 'end';
+    className?: string;
+};
+export type ListSectionProps<T extends SelectItem> = {
+    section: Node<T>;
+    state: ComboBoxState<T> | SelectState<T>;
+};
 export {};

package/locales/en.json

@@ -185,8 +185,16 @@
     "description": "Prompts user to interact with button to hide information",
     "message": "Hide information:"
   },
+  "singleSelect.chevronButton": {
+    "description": "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message": "Show suggestions for {field}"
+  },
+  "singleSelect.clearButtonAlt": {
+    "description": "Alt text for the clear selection button",
+    "message": "Clear {field} selection"
+  },
   "splitButton.dropdownButton.label": {
     "description": "Label for a dropdown menu holding additional actions",
     "message": "Additional actions"
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-v2-20250901045936",
+  "version": "0.0.0-canary-alpha-release-20250918043833",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -15,6 +15,7 @@
   "files": [
     "bin",
     "codemods",
+    "alpha",
     "future",
     "next",
     "libs",
@@ -36,6 +37,11 @@
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs"
     },
+    "./alpha": {
+      "types": "./dist/types/__alpha__/index.d.ts",
+      "import": "./dist/esm/alpha.mjs",
+      "require": "./dist/cjs/alpha.cjs"
+    },
     "./next": {
       "types": "./dist/types/__next__/index.d.ts",
       "import": "./dist/esm/next.mjs",
@@ -86,6 +92,7 @@
     "@react-aria/select": "^3.15.7",
     "@react-aria/utils": "^3.29.1",
     "@react-stately/collections": "^3.12.5",
+    "@react-stately/combobox": "^3.11.1",
     "@react-stately/datepicker": "^3.14.2",
     "@react-stately/list": "^3.12.3",
     "@react-stately/menu": "^3.9.5",
@@ -152,10 +159,10 @@
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "tslib": "^2.8.1",
     "ts-patch": "^3.3.0",
+    "tslib": "^2.8.1",
     "tsx": "^4.20.3",
-    "@kaizen/design-tokens": "0.0.0-canary-v2-20250901045936"
+    "@kaizen/design-tokens": "11.0.0"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Modal/GenericModal/GenericModal.spec.tsx

@@ -71,7 +71,7 @@ describe('<GenericModal />', () => {
 
   it('closes the modal when a click is outside of the modal content', async () => {
     const handleDismiss = vi.fn()
-    render(<GenericModalWrapper onOutsideModalClick={handleDismiss} />)
+    render(<GenericModalWrapper onOutsideModalClick={handleDismiss()} />)
 
     await user.click(screen.getByTestId('GenericModalTestId-scrollLayer'))
     await waitFor(() => {

package/src/Modal/GenericModal/GenericModal.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect, useId, useState } from 'react'
+import React, { useId, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { Transition } from '@headlessui/react'
 import classnames from 'classnames'
-import FocusLock from 'react-focus-lock'
+import { FocusOn } from 'react-focus-on'
 import { useIsClientReady } from '../../utils/useIsClientReady'
+
 import { warn } from '../util/console'
 import { ModalContext } from './context/ModalContext'
 import styles from './GenericModal.module.scss'
@@ -38,39 +39,22 @@ export const GenericModal = ({
 
   const labelledByID = useId()
   const describedByID = useId()
-
   const isClientReady = useIsClientReady()
 
-  const [scrollLayer, setScrollLayer] = useState<HTMLDivElement | null>(null)
-  const [modalLayer, setModalLayer] = useState<HTMLDivElement | null>(null)
+  const scrollLayerRef = useRef<HTMLDivElement | null>(null)
+  const modalLayerRef = useRef<HTMLDivElement | null>(null)
 
   const scrollModalToTop = (): void => {
     // If we have a really long modal, the autofocus could land on an element down below
     // causing the modal to scroll down and skipping over the content near the modal's top.
     // Ensure that when the modal opens, we are at the top of its content.
     requestAnimationFrame(() => {
-      if (!scrollLayer) return
-      scrollLayer.scrollTop = 0
-    })
-  }
-
-  const outsideModalClickHandler = (event: React.MouseEvent): void => {
-    if (event.target === scrollLayer || event.target === modalLayer) {
-      onOutsideModalClick?.(event)
-    }
-  }
-
-  const focusOnAccessibleLabel = (): void => {
-    if (!isClientReady) return
-
-    // Check if focus already exists within the modal
-    if (modalLayer?.contains(document.activeElement)) {
-      return
-    }
+      const scrollElement = scrollLayerRef.current
 
-    const labelElement: HTMLElement | null = document.getElementById(labelledByID)
-
-    labelElement?.focus()
+      // This little verbose of a check but this ensures that the element is attached to the DOM as it animates in. This additional check aims to avoid race conditions
+      if (!scrollElement?.isConnected) return
+      scrollElement.scrollTop = 0
+    })
   }
 
   const a11yWarn = (): void => {
@@ -86,60 +70,46 @@ export const GenericModal = ({
     }
   }
 
-  const preventBodyScroll = (): void => {
+  const focusOnAccessibleLabel = (): void => {
     if (!isClientReady) return
+    const modalElement = modalLayerRef.current
+    if (!modalElement?.isConnected) return
 
-    const hasScrollbar = window.innerWidth > document.documentElement.clientWidth
-    const scrollStyles = [styles.unscrollable]
+    // Check if focus already exists within the modal
+    if (modalElement.contains(document.activeElement)) {
+      return
+    }
+
+    const labelElement: HTMLElement | null = document.getElementById(labelledByID)
 
-    if (hasScrollbar) {
-      scrollStyles.push(styles.pseudoScrollbar)
+    if (labelElement?.isConnected) {
+      labelElement.focus()
     }
+  }
 
-    document.documentElement.classList.add(...scrollStyles)
+  const onEscapeKeyHandler = (e: Event): void => {
+    if (e instanceof KeyboardEvent) {
+      onEscapeKeyup?.(e)
+    }
   }
 
   const onAfterEnterHandler = (): void => {
     scrollModalToTop()
-    if (modalLayer) {
+    const modalElement = modalLayerRef.current
+    if (modalElement) {
       onAfterEnter?.()
       focusOnAccessibleLabel()
       a11yWarn()
     }
   }
 
-  const escapeKeyHandler = useCallback(
-    (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') {
-        onEscapeKeyup?.(event)
-      }
-    },
-    [onEscapeKeyup],
-  )
-
-  const onBeforeEnterHandler = (): void => {
-    preventBodyScroll()
-
-    if (onEscapeKeyup && isClientReady) {
-      document.addEventListener('keyup', escapeKeyHandler)
+  const outsideModalClickHandler = (e: React.MouseEvent): void => {
+    if (e.target === scrollLayerRef.current || e.target === modalLayerRef.current) {
+      onOutsideModalClick?.(e)
     }
   }
 
-  const cleanUpAfterClose = useCallback(() => {
-    if (!isClientReady) return
-
-    document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar)
-
-    if (onEscapeKeyup) {
-      document.removeEventListener('keyup', escapeKeyHandler)
-    }
-  }, [escapeKeyHandler, onEscapeKeyup, isClientReady])
-
-  /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-  useEffect(() => () => cleanUpAfterClose(), [cleanUpAfterClose])
-
   const onAfterLeaveHandler = (): void => {
-    cleanUpAfterClose()
     propsOnAfterLeave?.()
   }
 
@@ -152,7 +122,6 @@ export const GenericModal = ({
     <Transition
       appear={true}
       show={isOpen}
-      beforeEnter={onBeforeEnterHandler}
       afterEnter={onAfterEnterHandler}
       afterLeave={onAfterLeaveHandler}
       data-generic-modal-transition-wrapper
@@ -161,9 +130,10 @@ export const GenericModal = ({
       as="div"
       className={classnames(styles.transitionLayer, className)}
     >
-      <FocusLock
-        disabled={focusLockDisabled}
+      <FocusOn
+        focusLock={focusLockDisabled}
         returnFocus={true}
+        onEscapeKey={onEscapeKeyHandler}
         // Disabling false positive
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={false}
@@ -174,11 +144,9 @@ export const GenericModal = ({
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
           className={styles.scrollLayer}
-          ref={(scrollLayerRef): void => {
-            setScrollLayer(scrollLayerRef)
-          }}
-          onClick={outsideModalClickHandler}
+          ref={scrollLayerRef}
           data-testid={`${id}-scrollLayer`}
+          onClick={outsideModalClickHandler}
         >
           <ModalContext.Provider
             value={{
@@ -191,14 +159,14 @@ export const GenericModal = ({
               className={styles.modalLayer}
               aria-labelledby={labelledByID}
               aria-describedby={describedByID}
-              ref={(modalLayerRef): void => setModalLayer(modalLayerRef)}
+              ref={modalLayerRef}
               data-testid={id}
             >
               {children}
             </div>
           </ModalContext.Provider>
         </div>
-      </FocusLock>
+      </FocusOn>
     </Transition>,
     document.body,
   )

package/src/Notification/InlineNotification/InlineNotification.tsx

@@ -35,7 +35,7 @@ export const InlineNotification = forwardRef<HTMLDivElement, InlineNotificationP
   ): JSX.Element => (
     <GenericNotification
       style="inline"
-      persistent={persistent ?? hideCloseIcon}
+      persistent={persistent || hideCloseIcon}
       classNameOverride={classnames(classNameOverride, [isSubtle && styles.subtle])}
       ref={ref}
       {...otherProps}

package/src/RichTextEditor/RichTextEditor/RichTextEditor.spec.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { type StoryObj } from '@storybook/react'
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { type EditorContentArray } from '../types'
 import { RichTextEditor, type RichTextEditorProps } from './RichTextEditor'
 
@@ -149,8 +149,9 @@ export const CreateALink: Story = {
   name: 'Create a link',
   play: async (context) => {
     const { canvasElement, step } = context
-    const { getByRole, getByText } = within(canvasElement)
+    const { getByRole, getByText, queryByRole, findByRole } = within(canvasElement)
     const editor = getByRole('textbox')
+
     await step('Focus on editor', async () => {
       await userEvent.click(editor)
       expect(editor).toHaveFocus()
@@ -185,8 +186,14 @@ export const CreateALink: Story = {
       await userEvent.keyboard('{Tab}{Enter}')
     })
 
+    await step('The Link Modal closes', async () => {
+      await waitFor(() => {
+        expect(queryByRole('dialog')).not.toBeInTheDocument()
+      })
+    })
+
     await step('Link exists in the RTE', async () => {
-      const link = getByRole('link', { name: 'Link' })
+      const link = await findByRole('link', { name: 'Link' })
       expect(link).toBeInTheDocument()
     })
   },

package/src/__alpha__/SingleSelect/SingleSelect.tsx

@@ -1,92 +1,39 @@
-import React, { cloneElement, isValidElement, useId, useMemo, type PropsWithChildren } from 'react'
-import { useSelectState } from '@react-stately/select'
-import { type Key, type Selection } from '@react-types/shared'
-import { Select as RACSelect, type ListBoxProps } from 'react-aria-components'
-import { SingleSelectContext } from './context'
-import { List, ListItem, ListSection, Popover, Trigger } from './subcomponents'
-import { type SelectItem, type SelectSection, type SingleSelectProps } from './types'
-
-export const SingleSelect = ({
-  items,
-  onSelectionChange,
-  children,
-  ...restProps
-}: PropsWithChildren<SingleSelectProps>): JSX.Element => {
-  const buttonRef = React.useRef<HTMLButtonElement>(null)
-  const popoverRef = React.useRef<HTMLDivElement>(null)
-  const racPopoverRef = React.useRef<HTMLElement>(null)
-  const uniqueId = useId()
-  const anchorName = `--trigger-${uniqueId}`
-
-  const state = useSelectState({
-    items,
-  })
-
-  const handleOnSelectionChange = React.useCallback(
-    (keys: Selection): void => {
-      let key: Key | null = null
-
-      if (keys instanceof Set && keys.size > 0) {
-        key = Array.from(keys)[0]
-      }
-
-      state.setSelectedKey(key)
-      if (onSelectionChange) {
-        onSelectionChange(key)
-      }
-    },
-    [state, onSelectionChange],
-  )
-
-  // Cloning children here to allow users to pass in a custom ListItem or ListSection
-  // and still have the SingleSelect handle selection state
-  const injectedChildren = useMemo(() => {
-    if (!isValidElement(children)) return null
-
-    const selectedKeys: Iterable<Key> = state.selectedKey
-      ? new Set<Key>([state.selectedKey])
-      : new Set()
+import React from 'react'
+import { Item as StatelyItem, Section } from '@react-stately/collections'
+import { ComboBox, Select } from './subcomponents'
+import {
+  type ComboBoxProps,
+  type SelectItem,
+  type SelectProps,
+  type SingleSelectProps,
+} from './types'
+
+export const SingleSelect = <T extends SelectItem>(props: SingleSelectProps<T>): JSX.Element => {
+  const { isComboBox, children, ...rest } = props
+
+  if (isComboBox) {
+    return <ComboBox {...(rest as ComboBoxProps<T>)}>{children}</ComboBox>
+  }
+
+  return <Select {...(rest as SelectProps<T>)}>{children}</Select>
+}
 
-    return cloneElement(children as React.ReactElement<ListBoxProps<SelectItem | SelectSection>>, {
-      selectionMode: 'single',
-      selectedKeys,
-      onSelectionChange: handleOnSelectionChange,
-      autoFocus: 'first',
-    })
-  }, [children, handleOnSelectionChange, state.selectedKey])
+type CustomItemProps = {
+  selectedIcon?: 'check' | 'radio'
+  selectedPosition?: 'start' | 'end'
+  key: string
+  children?: React.ReactNode
+  [key: string]: any
+}
 
-  return (
-    <SingleSelectContext.Provider
-      value={{
-        isOpen: state.isOpen,
-        setOpen: state.setOpen,
-        selectedKey: state.selectedKey,
-        items: items,
-        anchorName,
-      }}
-    >
-      <RACSelect
-        // TODO: allow user to pass in label
-        aria-label={'single-select'}
-        onSelectionChange={(key) =>
-          handleOnSelectionChange(key != null ? new Set([key]) : new Set())
-        }
-        placeholder=""
-        {...restProps}
-      >
-        <Trigger buttonRef={buttonRef} />
+export const Item = React.forwardRef<HTMLElement, CustomItemProps>((props, ref) => {
+  // @ts-expect-error: StatelyItem doesn't know about our internal item props
+  return <StatelyItem {...props} ref={ref} />
+})
 
-        {state.isOpen && (
-          <Popover buttonRef={buttonRef} popoverRef={popoverRef} racPopoverRef={racPopoverRef}>
-            {injectedChildren}
-          </Popover>
-        )}
-      </RACSelect>
-    </SingleSelectContext.Provider>
-  )
-}
+// @ts-expect-error: doesn't know that the Item can have this static property
+Item.getCollectionNode = StatelyItem.getCollectionNode
+Item.displayName = 'SingleSelectItem'
 
-SingleSelect.displayName = 'SingleSelect'
-SingleSelect.List = List
-SingleSelect.ListItem = ListItem
-SingleSelect.ListSection = ListSection
+SingleSelect.Item = Item
+SingleSelect.Section = Section