@salt-ds/core 1.71.0 → 1.73.0

package/dist-es/collapsible/CollapsiblePanel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCollapsiblePanel {\n  display: grid;\n  transition:\n    grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n    opacity var(--salt-duration-perceptible) ease-in-out,\n    visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n  overflow: hidden;\n}\n";
+var css_248z = ".saltCollapsiblePanel {\n  display: grid;\n  transition:\n    grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n    opacity var(--salt-duration-perceptible) ease-in-out,\n    visibility var(--salt-duration-perceptible) ease-in-out,\n    padding-top var(--salt-duration-perceptible) ease-in-out,\n    padding-bottom var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n  overflow: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltCollapsiblePanel {\n    transition: none;\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CollapsiblePanel.css.js.map

package/dist-es/collapsible/CollapsiblePanel.js

@@ -2,8 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, isValidElement, useEffect } from 'react';
 import { makePrefixer } from '../utils/makePrefixer.js';
+import { renderProps } from '../utils/renderProps.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useId } from '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
@@ -12,33 +13,32 @@ import { useCollapsibleContext } from './CollapsibleContext.js';
 import css_248z from './CollapsiblePanel.css.js';
 
 const withBaseName = makePrefixer("saltCollapsiblePanel");
-const CollapsiblePanel = forwardRef((props, ref) => {
-  const { children, className, id: idProp, ...rest } = props;
+const CollapsiblePanel = forwardRef(function CollapsiblePanel2(props, ref) {
+  const { children, className, id: idProp, render, ...rest } = props;
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-collapsible-panel",
     css: css_248z,
     window: targetWindow
   });
-  const id = useId(idProp);
+  const renderId = isValidElement(render) ? render.props.id : void 0;
+  const id = useId(renderId ?? idProp);
   const { open, setPanelId } = useCollapsibleContext();
   useEffect(() => {
     if (id) {
       setPanelId == null ? void 0 : setPanelId(id);
     }
   }, [id, setPanelId]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(withBaseName(), className),
-      id,
-      "aria-hidden": !open ? "true" : void 0,
-      hidden: !open,
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children })
-    }
-  );
+  return renderProps("div", {
+    className: clsx(withBaseName(), className),
+    id,
+    "aria-hidden": !open ? "true" : void 0,
+    hidden: !open,
+    ref,
+    ...rest,
+    render,
+    children: /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children })
+  });
 });
 
 export { CollapsiblePanel };

package/dist-es/collapsible/CollapsiblePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps\n  extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = forwardRef<\n  HTMLDivElement,\n  CollapsiblePanelProps\n>((props, ref) => {\n  const { children, className, id: idProp, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-collapsible-panel\",\n    css: collapsiblePanelCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const { open, setPanelId } = useCollapsibleContext();\n\n  useEffect(() => {\n    if (id) {\n      setPanelId?.(id);\n    }\n  }, [id, setPanelId]);\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      id={id}\n      aria-hidden={!open ? \"true\" : undefined}\n      hidden={!open}\n      ref={ref}\n      {...rest}\n    >\n      <div className={withBaseName(\"inner\")}>{children}</div>\n    </div>\n  );\n});\n"],"names":["collapsiblePanelCss"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,IAAI,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAErD,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAI,qBAAA,EAAsB;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAa,EAAA,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA;AAAA,MACA,aAAA,EAAa,CAAC,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MAC9B,QAAQ,CAAC,IAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA;AAAA,GACnD;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  isValidElement,\n  type ReactElement,\n  useEffect,\n} from \"react\";\nimport { makePrefixer, renderProps, useId } from \"../utils\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Element used to customize the panel's root, e.g. `<CardContent />`.\n   * Props are merged onto this element, and its own props take precedence.\n   * Don't set `children`, `hidden` or `aria-hidden` on it, as they replace the\n   * panel's content and open state.\n   */\n  render?: ReactElement;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = forwardRef<\n  HTMLDivElement,\n  CollapsiblePanelProps\n>(function CollapsiblePanel(props, ref) {\n  const { children, className, id: idProp, render, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-collapsible-panel\",\n    css: collapsiblePanelCss,\n    window: targetWindow,\n  });\n\n  const renderId = isValidElement<{ id?: string }>(render)\n    ? render.props.id\n    : undefined;\n  // The render element's id wins when props are merged, so prefer it here\n  // to keep aria-controls in sync.\n  const id = useId(renderId ?? idProp);\n  const { open, setPanelId } = useCollapsibleContext();\n\n  useEffect(() => {\n    if (id) {\n      setPanelId?.(id);\n    }\n  }, [id, setPanelId]);\n\n  return renderProps(\"div\", {\n    className: clsx(withBaseName(), className),\n    id,\n    \"aria-hidden\": !open ? \"true\" : undefined,\n    hidden: !open,\n    ref,\n    ...rest,\n    render,\n    children: <div className={withBaseName(\"inner\")}>{children}</div>,\n  });\n});\n"],"names":["CollapsiblePanel","collapsiblePanelCss"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,QAAQ,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAE7D,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAW,cAAA,CAAgC,MAAM,CAAA,GACnD,MAAA,CAAO,MAAM,EAAA,GACb,MAAA;AAGJ,EAAA,MAAM,EAAA,GAAK,KAAA,CAAM,QAAA,IAAY,MAAM,CAAA;AACnC,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAI,qBAAA,EAAsB;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAa,EAAA,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,EAAA,OAAO,YAAY,KAAA,EAAO;AAAA,IACxB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,IACzC,EAAA;AAAA,IACA,aAAA,EAAe,CAAC,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,IAChC,QAAQ,CAAC,IAAA;AAAA,IACT,GAAA;AAAA,IACA,GAAG,IAAA;AAAA,IACH,MAAA;AAAA,IACA,0BAAU,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA,GAC5D,CAAA;AACH,CAAC;;;;"}

package/dist-es/combo-box/ComboBox.js

@@ -6,7 +6,8 @@ import { forwardRef, useRef, Children, useEffect } from 'react';
 import { Button } from '../button/Button.js';
 import '../form-field-context/FormFieldContext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
-import { ListControlContext } from '../list-control/ListControlContext.js';
+import { isModifiedListControlNavigationKey, isListControlNavigationKey, getComboBoxNavigationTarget } from '../list-control/ListControlNavigationKeys.js';
+import { ListControlProvider } from '../list-control/ListControlProvider.js';
 import { defaultValueToString } from '../list-control/ListControlState.js';
 import { OptionList } from '../option/OptionList.js';
 import { PillInput } from '../pill-input/PillInput.js';
@@ -166,7 +167,7 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     if (!event.repeat) {
       shouldAutoSelectRef.current = false;
     }
-    if (readOnly) {
+    if (readOnly || isModifiedListControlNavigationKey(event)) {
       return;
     }
     if (!openState) {
@@ -175,41 +176,22 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
         return;
       }
     }
+    if ((!openState || !hasValidChildren) && isListControlNavigationKey(event.key)) {
+      return;
+    }
     const activeOption = activeState;
-    let newActive;
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+    }
+    const newActive = getComboBoxNavigationTarget(event.key, activeOption, {
+      getFirstOption,
+      getLastOption,
+      getOptionAfter,
+      getOptionBefore,
+      getOptionPageAbove,
+      getOptionPageBelow
+    });
     switch (event.key) {
-      case "ArrowDown":
-        newActive = activeOption ? getOptionAfter(activeOption) : getFirstOption();
-        break;
-      case "ArrowUp":
-        newActive = activeOption ? getOptionBefore(activeOption) : getLastOption();
-        break;
-      case "Home":
-        newActive = getFirstOption();
-        break;
-      case "End":
-        newActive = getLastOption();
-        break;
-      case "PageUp":
-        if (activeOption) {
-          newActive = getOptionPageAbove(activeOption);
-        } else {
-          const lastOption = getLastOption();
-          if (lastOption) {
-            newActive = getOptionPageAbove(lastOption == null ? void 0 : lastOption.data);
-          }
-        }
-        break;
-      case "PageDown":
-        if (activeOption) {
-          newActive = getOptionPageBelow(activeOption);
-        } else {
-          const firstOption = getFirstOption();
-          if (firstOption) {
-            newActive = getOptionPageBelow(firstOption.data);
-          }
-        }
-        break;
       case "Enter":
         if (openState && (activeState == null ? void 0 : activeState.disabled)) {
           event.preventDefault();
@@ -345,7 +327,7 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     endAdornmentProp,
     showOptionsButton
   ] }) : endAdornmentProp;
-  return /* @__PURE__ */ jsxs(ListControlContext.Provider, { value: listControl, children: [
+  return /* @__PURE__ */ jsxs(ListControlProvider, { value: listControl, children: [
     /* @__PURE__ */ jsx(
       PillInput,
       {

package/dist-es/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useClassNameInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  type UseFloatingUIProps,\n  useFloatingUI,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport interface ComboBoxProps<Item = string>\n  extends UseComboBoxProps<Item>,\n    Omit<PillInputProps, \"onPillRemove\"> {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected when the tab key is pressed.\n   */\n  selectOnTab?: boolean;\n  /**\n   * Props to pass to ComboBox's overlay.\n   */\n  OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n    DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { className, props: finalProps } = useClassNameInjection(\n    \"saltComboBox\",\n    props,\n  );\n  const {\n    children,\n    disabled: disabledProp,\n    endAdornment: endAdornmentProp,\n    readOnly: readOnlyProp,\n    multiselect,\n    selectOnTab = !multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    onOpenChange,\n    onChange,\n    open,\n    inputRef: inputRefProp,\n    inputProps: inputPropsProp,\n    variant = \"primary\",\n    onKeyDown,\n    onFocus,\n    onBlur,\n    value,\n    defaultValue,\n    valueToString = defaultValueToString,\n    truncate,\n    bordered = false,\n    OverlayProps,\n    ...rest\n  } = finalProps;\n\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n  const shouldAutoSelectRef = useRef(false);\n\n  const listControl = useComboBox<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    value,\n    defaultValue,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getOptionsMatching,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    setListRef,\n    valueState,\n    setValueState,\n    removePill,\n  } = listControl;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (reason === \"focus\") {\n      setFocusedState(newOpen);\n    }\n\n    if (reason === \"focus\" && !newOpen) {\n      setFocusVisibleState(false);\n    }\n\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n\n    if (newOpen) {\n      inputRef.current?.focus();\n    }\n  };\n\n  const hasValidChildren =\n    Children.toArray(children).filter(Boolean).length > 0;\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && hasValidChildren,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      strategy: \"fixed\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            elements.floating.style.setProperty(\n              \"--overlay-minWidth\",\n              `${rects.reference.width}px`,\n            );\n            elements.floating.style.setProperty(\n              \"--overlay-maxHeight\",\n              `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            );\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!readOnly) {\n      event.stopPropagation();\n      setFocusVisibleState(false);\n      setOpen(!openState, \"manual\");\n    }\n  };\n\n  const handleButtonFocus = () => {\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.repeat) {\n      shouldAutoSelectRef.current = false;\n    }\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    const activeOption = activeState;\n\n    let newActive:\n      | { data: OptionValue<Item>; element: HTMLElement }\n      | undefined;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = activeOption\n          ? getOptionAfter(activeOption)\n          : getFirstOption();\n        break;\n      case \"ArrowUp\":\n        newActive = activeOption\n          ? getOptionBefore(activeOption)\n          : getLastOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        if (activeOption) {\n          newActive = getOptionPageAbove(activeOption);\n        } else {\n          const lastOption = getLastOption();\n          if (lastOption) {\n            newActive = getOptionPageAbove(lastOption?.data);\n          }\n        }\n        break;\n      case \"PageDown\":\n        if (activeOption) {\n          newActive = getOptionPageBelow(activeOption);\n        } else {\n          const firstOption = getFirstOption();\n          if (firstOption) {\n            newActive = getOptionPageBelow(firstOption.data);\n          }\n        }\n        break;\n      case \"Enter\":\n        if (openState && activeState?.disabled) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        select(event, activeState);\n\n        if (!multiselect) {\n          event.preventDefault();\n        }\n\n        break;\n      case \"Tab\":\n        if (\n          openState &&\n          selectOnTab &&\n          activeState &&\n          !activeState?.disabled &&\n          !selectedState.includes(activeState?.value)\n        ) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive) {\n      setFocusVisibleState(true);\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    if (event.currentTarget === inputRef.current) {\n      setFocusedState(true);\n    } else {\n      setActive(undefined);\n    }\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    event.persist();\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n      shouldAutoSelectRef.current = false;\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    if (value === \"\" && !multiselect) {\n      clear(event);\n    }\n\n    setValueState(value);\n\n    // Clean active item if no text is present.\n    if (value === \"\") {\n      setActive(undefined);\n    } else {\n      shouldAutoSelectRef.current = true;\n    }\n\n    onChange?.(event);\n  };\n\n  const handlePillRemove = (event: SyntheticEvent, index: number) => {\n    event.stopPropagation();\n    const removed = selectedState[index];\n    removePill(event, removed);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleListMouseLeave = () => {\n    setActive(undefined);\n  };\n\n  const handleFocusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      shouldAutoSelectRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (openState && value) {\n      queueMicrotask(() => {\n        const newOption = getFirstOption();\n        if (newOption && shouldAutoSelectRef.current) {\n          setActive(newOption.data);\n        }\n      });\n    }\n  }, [value, setActive, openState, getFirstOption]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    let newActive: ReturnType<typeof getFirstOption>;\n\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n        setFocusVisibleState(true);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n        setFocusVisibleState(true);\n      }\n    }\n\n    if (newActive) {\n      setActive(newActive?.data);\n    }\n  }, [openState]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(setListRef, floating);\n\n  const showOptionsButton = (\n    <Button\n      aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n      aria-label=\"Show options\"\n      aria-expanded={openState}\n      aria-controls={openState ? listId : undefined}\n      aria-haspopup=\"listbox\"\n      disabled={disabled}\n      appearance=\"transparent\"\n      onClick={handleButtonClick}\n      onFocus={handleButtonFocus}\n      tabIndex={-1}\n    >\n      {openState ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n    </Button>\n  );\n\n  // avoid render empty fragment, or empty div appear in PillInput\n  const endAdornment =\n    !readOnly && hasValidChildren ? (\n      <>\n        {endAdornmentProp}\n        {showOptionsButton}\n      </>\n    ) : (\n      endAdornmentProp\n    );\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <PillInput\n        // Ensures that the field is focused when you don't directly click on the input.\n        tabIndex={!disabled ? -1 : undefined}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"focused\")]: focusedState,\n            [withBaseName(\"focusVisible\")]: focusVisibleState,\n          },\n          className,\n        )}\n        endAdornment={endAdornment}\n        onChange={handleChange}\n        // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n        role={readOnly ? \"textbox\" : \"combobox\"}\n        disabled={disabled}\n        readOnly={readOnly}\n        inputProps={{\n          \"aria-readonly\": readOnly ? \"true\" : undefined,\n          \"aria-expanded\": !readOnly ? openState : undefined,\n          \"aria-controls\": openState && !readOnly ? listId : undefined,\n          onKeyDown: handleKeyDown,\n          ...inputPropsProp,\n        }}\n        aria-activedescendant={activeState?.id}\n        variant={variant}\n        inputRef={handleInputRef}\n        value={valueState}\n        ref={handleRef}\n        bordered={bordered}\n        {...getReferenceProps({\n          onBlur: handleBlur,\n          onFocus: handleFocus,\n          ...rest,\n        })}\n        pills={\n          multiselect ? selectedState.map((item) => valueToString(item)) : []\n        }\n        truncate={truncate && !focusedState && !openState}\n        onPillRemove={handlePillRemove}\n        hidePillClose={!focusedState || readOnly}\n        emptyReadOnlyMarker={\n          readOnly && selectedState.length > 0 ? \"\" : undefined\n        }\n      />\n      <OptionList\n        aria-multiselectable={multiselect}\n        open={(openState || focusedState) && !readOnly && hasValidChildren}\n        collapsed={!openState}\n        ref={handleListRef}\n        id={listId}\n        tabIndex={-1}\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusInput,\n          onClick: handleFocusInput,\n          onMouseLeave: handleListMouseLeave,\n          ...OverlayProps,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n      >\n        {children}\n      </OptionList>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ComboBox","_a","elements","value"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useClassNameInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  getComboBoxNavigationTarget,\n  isListControlNavigationKey,\n  isModifiedListControlNavigationKey,\n  type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  type UseFloatingUIProps,\n  useFloatingUI,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport interface ComboBoxProps<Item = string>\n  extends UseComboBoxProps<Item>,\n    Omit<PillInputProps, \"onPillRemove\"> {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected when the tab key is pressed.\n   */\n  selectOnTab?: boolean;\n  /**\n   * Props to pass to ComboBox's overlay.\n   */\n  OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n    DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { className, props: finalProps } = useClassNameInjection(\n    \"saltComboBox\",\n    props,\n  );\n  const {\n    children,\n    disabled: disabledProp,\n    endAdornment: endAdornmentProp,\n    readOnly: readOnlyProp,\n    multiselect,\n    selectOnTab = !multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    onOpenChange,\n    onChange,\n    open,\n    inputRef: inputRefProp,\n    inputProps: inputPropsProp,\n    variant = \"primary\",\n    onKeyDown,\n    onFocus,\n    onBlur,\n    value,\n    defaultValue,\n    valueToString = defaultValueToString,\n    truncate,\n    bordered = false,\n    OverlayProps,\n    ...rest\n  } = finalProps;\n\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n  const shouldAutoSelectRef = useRef(false);\n\n  const listControl = useComboBox<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    value,\n    defaultValue,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getOptionsMatching,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    setListRef,\n    valueState,\n    setValueState,\n    removePill,\n  } = listControl;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (reason === \"focus\") {\n      setFocusedState(newOpen);\n    }\n\n    if (reason === \"focus\" && !newOpen) {\n      setFocusVisibleState(false);\n    }\n\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n\n    if (newOpen) {\n      inputRef.current?.focus();\n    }\n  };\n\n  const hasValidChildren =\n    Children.toArray(children).filter(Boolean).length > 0;\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && hasValidChildren,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      strategy: \"fixed\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            elements.floating.style.setProperty(\n              \"--overlay-minWidth\",\n              `${rects.reference.width}px`,\n            );\n            elements.floating.style.setProperty(\n              \"--overlay-maxHeight\",\n              `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            );\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!readOnly) {\n      event.stopPropagation();\n      setFocusVisibleState(false);\n      setOpen(!openState, \"manual\");\n    }\n  };\n\n  const handleButtonFocus = () => {\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.repeat) {\n      shouldAutoSelectRef.current = false;\n    }\n\n    if (readOnly || isModifiedListControlNavigationKey(event)) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    // With no list shown, leave these keys to move the caret or scroll the page.\n    if (\n      (!openState || !hasValidChildren) &&\n      isListControlNavigationKey(event.key)\n    ) {\n      return;\n    }\n\n    const activeOption = activeState;\n\n    // Unlike arrow keys, PageUp/PageDown scroll the nearest scroll container.\n    if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n      event.preventDefault();\n    }\n\n    const newActive: OptionAndElement<Item> | undefined =\n      getComboBoxNavigationTarget(event.key, activeOption, {\n        getFirstOption,\n        getLastOption,\n        getOptionAfter,\n        getOptionBefore,\n        getOptionPageAbove,\n        getOptionPageBelow,\n      });\n\n    switch (event.key) {\n      case \"Enter\":\n        if (openState && activeState?.disabled) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        select(event, activeState);\n\n        if (!multiselect) {\n          event.preventDefault();\n        }\n\n        break;\n      case \"Tab\":\n        if (\n          openState &&\n          selectOnTab &&\n          activeState &&\n          !activeState?.disabled &&\n          !selectedState.includes(activeState?.value)\n        ) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive) {\n      setFocusVisibleState(true);\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    if (event.currentTarget === inputRef.current) {\n      setFocusedState(true);\n    } else {\n      setActive(undefined);\n    }\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    event.persist();\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n      shouldAutoSelectRef.current = false;\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    if (value === \"\" && !multiselect) {\n      clear(event);\n    }\n\n    setValueState(value);\n\n    // Clean active item if no text is present.\n    if (value === \"\") {\n      setActive(undefined);\n    } else {\n      shouldAutoSelectRef.current = true;\n    }\n\n    onChange?.(event);\n  };\n\n  const handlePillRemove = (event: SyntheticEvent, index: number) => {\n    event.stopPropagation();\n    const removed = selectedState[index];\n    removePill(event, removed);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleListMouseLeave = () => {\n    setActive(undefined);\n  };\n\n  const handleFocusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      shouldAutoSelectRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (openState && value) {\n      queueMicrotask(() => {\n        const newOption = getFirstOption();\n        if (newOption && shouldAutoSelectRef.current) {\n          setActive(newOption.data);\n        }\n      });\n    }\n  }, [value, setActive, openState, getFirstOption]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    let newActive: ReturnType<typeof getFirstOption>;\n\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n        setFocusVisibleState(true);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n        setFocusVisibleState(true);\n      }\n    }\n\n    if (newActive) {\n      setActive(newActive?.data);\n    }\n  }, [openState]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(setListRef, floating);\n\n  const showOptionsButton = (\n    <Button\n      aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n      aria-label=\"Show options\"\n      aria-expanded={openState}\n      aria-controls={openState ? listId : undefined}\n      aria-haspopup=\"listbox\"\n      disabled={disabled}\n      appearance=\"transparent\"\n      onClick={handleButtonClick}\n      onFocus={handleButtonFocus}\n      tabIndex={-1}\n    >\n      {openState ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n    </Button>\n  );\n\n  // avoid render empty fragment, or empty div appear in PillInput\n  const endAdornment =\n    !readOnly && hasValidChildren ? (\n      <>\n        {endAdornmentProp}\n        {showOptionsButton}\n      </>\n    ) : (\n      endAdornmentProp\n    );\n\n  return (\n    <ListControlProvider value={listControl}>\n      <PillInput\n        // Ensures that the field is focused when you don't directly click on the input.\n        tabIndex={!disabled ? -1 : undefined}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"focused\")]: focusedState,\n            [withBaseName(\"focusVisible\")]: focusVisibleState,\n          },\n          className,\n        )}\n        endAdornment={endAdornment}\n        onChange={handleChange}\n        // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n        role={readOnly ? \"textbox\" : \"combobox\"}\n        disabled={disabled}\n        readOnly={readOnly}\n        inputProps={{\n          \"aria-readonly\": readOnly ? \"true\" : undefined,\n          \"aria-expanded\": !readOnly ? openState : undefined,\n          \"aria-controls\": openState && !readOnly ? listId : undefined,\n          onKeyDown: handleKeyDown,\n          ...inputPropsProp,\n        }}\n        aria-activedescendant={activeState?.id}\n        variant={variant}\n        inputRef={handleInputRef}\n        value={valueState}\n        ref={handleRef}\n        bordered={bordered}\n        {...getReferenceProps({\n          onBlur: handleBlur,\n          onFocus: handleFocus,\n          ...rest,\n        })}\n        pills={\n          multiselect ? selectedState.map((item) => valueToString(item)) : []\n        }\n        truncate={truncate && !focusedState && !openState}\n        onPillRemove={handlePillRemove}\n        hidePillClose={!focusedState || readOnly}\n        emptyReadOnlyMarker={\n          readOnly && selectedState.length > 0 ? \"\" : undefined\n        }\n      />\n      <OptionList\n        aria-multiselectable={multiselect}\n        open={(openState || focusedState) && !readOnly && hasValidChildren}\n        collapsed={!openState}\n        ref={handleListRef}\n        id={listId}\n        tabIndex={-1}\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusInput,\n          onClick: handleFocusInput,\n          onMouseLeave: handleListMouseLeave,\n          ...OverlayProps,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n      >\n        {children}\n      </OptionList>\n    </ListControlProvider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["ComboBox","_a","elements","value"],"mappings":"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"}

package/dist-es/combo-box/useComboBox.js

@@ -3,6 +3,7 @@ import 'react';
 import 'clsx';
 import 'react/jsx-runtime';
 import { useControlled } from '../utils/useControlled.js';
+import { useEventCallback } from '../utils/useEventCallback.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
@@ -35,35 +36,34 @@ function useComboBox(props) {
     readOnly,
     valueToString
   });
-  const { selectedState, getOptionsMatching, setSelectedState, setOpen } = listControl;
+  const { selectedState, setSelectedState, setOpen } = listControl;
   const [valueState, setValueState] = useControlled({
     controlled: value,
     default: defaultValue ?? (selectedState.length === 1 && !multiselect ? listControl.valueToString(selectedState[0]) : defaultValue),
     name: "ComboBox",
     state: "value"
   });
-  const select = (event, option) => {
-    if (option.disabled || disabled || readOnly) {
-      return;
-    }
-    let newSelected = [option.value];
-    if (multiselect) {
-      if (selectedState.includes(option.value)) {
-        newSelected = selectedState.filter((item) => item !== option.value);
-      } else {
-        newSelected = selectedState.concat([option.value]);
+  const select = useEventCallback(
+    (event, option) => {
+      if (option.disabled || disabled || readOnly) {
+        return;
+      }
+      let newSelected = [option.value];
+      if (multiselect) {
+        if (selectedState.includes(option.value)) {
+          newSelected = selectedState.filter((item) => item !== option.value);
+        } else {
+          newSelected = selectedState.concat([option.value]);
+        }
+      }
+      setSelectedState(newSelected);
+      setValueState(multiselect ? "" : listControl.valueToString(option.value));
+      onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
+      if (!multiselect) {
+        setOpen(false);
       }
     }
-    setSelectedState(newSelected);
-    const newValue = getOptionsMatching(
-      (option2) => newSelected.includes(option2.value)
-    ).map((option2) => listControl.valueToString(option2.data.value));
-    setValueState(multiselect ? "" : newValue[0]);
-    onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
-    if (!multiselect) {
-      setOpen(false);
-    }
-  };
+  );
   const removePill = (event, itemToRemove) => {
     if (!multiselect || disabled || readOnly) {
       return;

package/dist-es/combo-box/useComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComboBox.js","sources":["../src/combo-box/useComboBox.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport type { OptionValue } from \"../list-control/ListControlContext\";\nimport {\n  type ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { useControlled } from \"../utils\";\n\nexport type UseComboBoxProps<Item> = ListControlProps<Item> &\n  Pick<ComponentPropsWithoutRef<\"input\">, \"value\" | \"defaultValue\">;\n\nexport function useComboBox<Item>(props: UseComboBoxProps<Item>) {\n  const {\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    disabled,\n    readOnly,\n    valueToString,\n    value,\n    defaultValue,\n  } = props;\n\n  const listControl = useListControl<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const { selectedState, getOptionsMatching, setSelectedState, setOpen } =\n    listControl;\n\n  const [valueState, setValueState] = useControlled({\n    controlled: value,\n    default:\n      defaultValue ??\n      (selectedState.length === 1 && !multiselect\n        ? listControl.valueToString(selectedState[0])\n        : defaultValue),\n    name: \"ComboBox\",\n    state: \"value\",\n  });\n\n  const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n    if (option.disabled || disabled || readOnly) {\n      return;\n    }\n\n    let newSelected = [option.value];\n\n    if (multiselect) {\n      if (selectedState.includes(option.value)) {\n        newSelected = selectedState.filter((item) => item !== option.value);\n      } else {\n        newSelected = selectedState.concat([option.value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    const newValue = getOptionsMatching((option) =>\n      newSelected.includes(option.value),\n    ).map((option) => listControl.valueToString(option.data.value));\n    setValueState(multiselect ? \"\" : newValue[0]);\n    onSelectionChange?.(event, newSelected);\n\n    if (!multiselect) {\n      setOpen(false);\n    }\n  };\n\n  const removePill = (event: SyntheticEvent, itemToRemove: Item) => {\n    if (!multiselect || disabled || readOnly) {\n      return;\n    }\n\n    let newSelected: Item[];\n\n    if (selectedState.includes(itemToRemove)) {\n      newSelected = selectedState.filter((item) => item !== itemToRemove);\n    } else {\n      newSelected = selectedState.concat([itemToRemove]);\n    }\n\n    setSelectedState(newSelected);\n    setValueState(\"\");\n    onSelectionChange?.(event, newSelected);\n  };\n\n  return { ...listControl, select, valueState, setValueState, removePill };\n}\n"],"names":["option"],"mappings":"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"}
+{"version":3,"file":"useComboBox.js","sources":["../src/combo-box/useComboBox.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport type { OptionValue } from \"../list-control/ListControlContext\";\nimport {\n  type ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { useControlled, useEventCallback } from \"../utils\";\n\nexport type UseComboBoxProps<Item> = ListControlProps<Item> &\n  Pick<ComponentPropsWithoutRef<\"input\">, \"value\" | \"defaultValue\">;\n\nexport function useComboBox<Item>(props: UseComboBoxProps<Item>) {\n  const {\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    disabled,\n    readOnly,\n    valueToString,\n    value,\n    defaultValue,\n  } = props;\n\n  const listControl = useListControl<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const { selectedState, setSelectedState, setOpen } = listControl;\n\n  const [valueState, setValueState] = useControlled({\n    controlled: value,\n    default:\n      defaultValue ??\n      (selectedState.length === 1 && !multiselect\n        ? listControl.valueToString(selectedState[0])\n        : defaultValue),\n    name: \"ComboBox\",\n    state: \"value\",\n  });\n\n  const select = useEventCallback(\n    (event: SyntheticEvent, option: OptionValue<Item>) => {\n      if (option.disabled || disabled || readOnly) {\n        return;\n      }\n\n      let newSelected = [option.value];\n\n      if (multiselect) {\n        if (selectedState.includes(option.value)) {\n          newSelected = selectedState.filter((item) => item !== option.value);\n        } else {\n          newSelected = selectedState.concat([option.value]);\n        }\n      }\n\n      setSelectedState(newSelected);\n      setValueState(multiselect ? \"\" : listControl.valueToString(option.value));\n      onSelectionChange?.(event, newSelected);\n\n      if (!multiselect) {\n        setOpen(false);\n      }\n    },\n  );\n\n  const removePill = (event: SyntheticEvent, itemToRemove: Item) => {\n    if (!multiselect || disabled || readOnly) {\n      return;\n    }\n\n    let newSelected: Item[];\n\n    if (selectedState.includes(itemToRemove)) {\n      newSelected = selectedState.filter((item) => item !== itemToRemove);\n    } else {\n      newSelected = selectedState.concat([itemToRemove]);\n    }\n\n    setSelectedState(newSelected);\n    setValueState(\"\");\n    onSelectionChange?.(event, newSelected);\n  };\n\n  return { ...listControl, select, valueState, setValueState, removePill };\n}\n"],"names":[],"mappings":"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"}

package/dist-es/dialog/DialogHeader.js

@@ -6,6 +6,8 @@ import { forwardRef, useEffect } from 'react';
 import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
 import '../text/Code.js';
 import '../text/Display.js';
+import '../text/Editorial.js';
+import '../text/Eyebrow.js';
 import { H2 } from '../text/Headings.js';
 import '../text/Label.js';
 import { Text } from '../text/Text.js';

package/dist-es/dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      className,\n      description,\n      disableAccent,\n      actions,\n      header,\n      preheader,\n      status: statusProp,\n      ...rest\n    } = props;\n    const {\n      status: statusContext,\n      setId: setHeaderId,\n      id: contextHeaderId,\n    } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-header\",\n      css: dialogHeaderCss,\n      window: targetWindow,\n    });\n\n    const status = statusProp ?? statusContext;\n    const headerId = useId(contextHeaderId);\n\n    useEffect(() => {\n      if (headerId) {\n        setHeaderId?.(headerId);\n      }\n    }, [headerId, setHeaderId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent && !status,\n            [withBaseName(status ?? \"\")]: !!status,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && <StatusIndicator status={status} />}\n        <div className={withBaseName(\"container\")}>\n          <H2 id={headerId} className={withBaseName(\"header\")}>\n            {preheader && <Text color=\"primary\">{preheader}</Text>}\n            {header}\n          </H2>\n          {description && (\n            <Text color=\"secondary\" className={withBaseName(\"description\")}>\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["DialogHeader","dialogHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM;AAAA,MACJ,MAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,WAAA;AAAA,MACP,EAAA,EAAI;AAAA,QACF,gBAAA,EAAiB;AAErB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAA,IAAc,aAAA;AAC7B,IAAA,MAAM,QAAA,GAAW,MAAM,eAAe,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AAAA,MAChB;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,WAAW,CAAC,CAAA;AAE1B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAA,CAAa,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA,oBAAU,GAAA,CAAC,mBAAgB,MAAA,EAAgB,CAAA;AAAA,0BAC5C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAG,EAAA,EAAI,QAAA,EAAU,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAC/C,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAa,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,cAC9C;AAAA,aAAA,EACH,CAAA;AAAA,YACC,WAAA,wBACE,IAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      className,\n      description,\n      disableAccent,\n      actions,\n      header,\n      preheader,\n      status: statusProp,\n      ...rest\n    } = props;\n    const {\n      status: statusContext,\n      setId: setHeaderId,\n      id: contextHeaderId,\n    } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-header\",\n      css: dialogHeaderCss,\n      window: targetWindow,\n    });\n\n    const status = statusProp ?? statusContext;\n    const headerId = useId(contextHeaderId);\n\n    useEffect(() => {\n      if (headerId) {\n        setHeaderId?.(headerId);\n      }\n    }, [headerId, setHeaderId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent && !status,\n            [withBaseName(status ?? \"\")]: !!status,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && <StatusIndicator status={status} />}\n        <div className={withBaseName(\"container\")}>\n          <H2 id={headerId} className={withBaseName(\"header\")}>\n            {preheader && <Text color=\"primary\">{preheader}</Text>}\n            {header}\n          </H2>\n          {description && (\n            <Text color=\"secondary\" className={withBaseName(\"description\")}>\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["DialogHeader","dialogHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM;AAAA,MACJ,MAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,WAAA;AAAA,MACP,EAAA,EAAI;AAAA,QACF,gBAAA,EAAiB;AAErB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAA,IAAc,aAAA;AAC7B,IAAA,MAAM,QAAA,GAAW,MAAM,eAAe,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AAAA,MAChB;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,WAAW,CAAC,CAAA;AAE1B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAA,CAAa,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA,oBAAU,GAAA,CAAC,mBAAgB,MAAA,EAAgB,CAAA;AAAA,0BAC5C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAG,EAAA,EAAI,QAAA,EAAU,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAC/C,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAa,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,cAC9C;AAAA,aAAA,EACH,CAAA;AAAA,YACC,WAAA,wBACE,IAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}

package/dist-es/drawer/DrawerHeader.js

@@ -5,6 +5,8 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import '../text/Code.js';
 import '../text/Display.js';
+import '../text/Editorial.js';
+import '../text/Eyebrow.js';
 import { H2 } from '../text/Headings.js';
 import '../text/Label.js';
 import { Text } from '../text/Text.js';

package/dist-es/drawer/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Hides the accent bar in the Drawer Header. Defaults to `false`.\n   */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Drawer\n   */\n  header?: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  function DrawerHeader(props, ref) {\n    const {\n      actions,\n      className,\n      description,\n      disableAccent,\n      header,\n      preheader,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-header\",\n      css: drawerHeaderCss,\n      window: targetWindow,\n    });\n\n    const { setHeaderId, setDescriptionId } = useDrawerContext();\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} className={withBaseName(\"header\")}>\n              {preheader && (\n                <Text as=\"span\" color=\"primary\">\n                  {preheader}\n                </Text>\n              )}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["DrawerHeader","drawerHeaderCss"],"mappings":"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"}
+{"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Hides the accent bar in the Drawer Header. Defaults to `false`.\n   */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Drawer\n   */\n  header?: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  function DrawerHeader(props, ref) {\n    const {\n      actions,\n      className,\n      description,\n      disableAccent,\n      header,\n      preheader,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-header\",\n      css: drawerHeaderCss,\n      window: targetWindow,\n    });\n\n    const { setHeaderId, setDescriptionId } = useDrawerContext();\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} className={withBaseName(\"header\")}>\n              {preheader && (\n                <Text as=\"span\" color=\"primary\">\n                  {preheader}\n                </Text>\n              )}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["DrawerHeader","drawerHeaderCss"],"mappings":"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"}

package/dist-es/dropdown/Dropdown.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDropdown {\n  all: unset;\n  box-sizing: border-box;\n  min-width: 4em;\n  width: 100%;\n  background: var(--dropdown-background);\n  min-height: var(--salt-size-base);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--salt-spacing-100);\n  color: var(--dropdown-color);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  position: relative;\n  overflow: hidden;\n}\n\n.saltDropdown:hover {\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltDropdown-bordered.saltDropdown {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor);\n}\n\n.saltDropdown-bordered.saltDropdown:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--dropdown-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown:focus,\n.saltDropdown-bordered.saltDropdown:focus:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--dropdown-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"],\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"]:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-bordered.saltDropdown-disabled,\n.saltDropdown-bordered.saltDropdown-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor);\n}\n\n.saltDropdown:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--dropdown-borderColor-hover);\n}\n\n.saltDropdown:focus .saltDropdown-activationIndicator,\n.saltDropdown:focus:hover .saltDropdown-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--dropdown-borderColor-active);\n}\n\n.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown[aria-readonly=\"true\"]:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-disabled .saltDropdown-activationIndicator,\n.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-bordered .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltDropdown-primary {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-editable-primary-background);\n  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-secondary {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-editable-secondary-background);\n  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-tertiary {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-editable-tertiary-background);\n  --dropdown-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-error {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-status-error-background);\n  --dropdown-background-readonly: var(--salt-status-error-background);\n  --dropdown-borderColor: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-error-borderColor);\n  --dropdown-outlineColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdown-warning {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-status-warning-background);\n  --dropdown-background-readonly: var(--salt-status-warning-background);\n  --dropdown-borderColor: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-warning-borderColor);\n  --dropdown-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdown-success {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-status-success-background);\n  --dropdown-background-readonly: var(--salt-status-success-background);\n  --dropdown-borderColor: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-success-borderColor);\n  --dropdown-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdown:focus,\n.saltDropdown:focus:hover {\n  cursor: var(--salt-cursor-hover);\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);\n}\n\n.saltDropdown.saltDropdown[aria-readonly=\"true\"] {\n  background: var(--dropdown-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltDropdown.saltDropdown:disabled,\n.saltDropdown.saltDropdown:disabled:hover {\n  background: var(--dropdown-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltDropdown-content {\n  flex: 1;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-wrap: nowrap;\n}\n\n.saltDropdown-placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n.saltDropdown-startAdornmentContainer {\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltDropdown .saltDropdown-toggle {\n  margin-left: var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltDropdown {\n  all: unset;\n  box-sizing: border-box;\n  min-width: 4em;\n  width: 100%;\n  background: var(--dropdown-background);\n  min-height: var(--salt-size-base);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--salt-spacing-100);\n  color: var(--dropdown-color);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  position: relative;\n  overflow: hidden;\n}\n\n.saltDropdown:hover {\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltDropdown-bordered.saltDropdown {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor);\n}\n\n.saltDropdown-bordered.saltDropdown:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--dropdown-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown:focus,\n.saltDropdown-bordered.saltDropdown:focus:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--dropdown-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"],\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"]:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-bordered.saltDropdown-disabled,\n.saltDropdown-bordered.saltDropdown-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor);\n}\n\n.saltDropdown:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--dropdown-borderColor-hover);\n}\n\n.saltDropdown:focus .saltDropdown-activationIndicator,\n.saltDropdown:focus:hover .saltDropdown-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--dropdown-borderColor-active);\n}\n\n.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown[aria-readonly=\"true\"]:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-disabled .saltDropdown-activationIndicator,\n.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-bordered .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltDropdown-primary {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-editable-primary-background);\n  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-secondary {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-editable-secondary-background);\n  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-tertiary {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-editable-tertiary-background);\n  --dropdown-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-error {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-status-error-background);\n  --dropdown-background-readonly: var(--salt-status-error-background);\n  --dropdown-borderColor: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-error-borderColor);\n  --dropdown-outlineColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdown-warning {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-status-warning-background);\n  --dropdown-background-readonly: var(--salt-status-warning-background);\n  --dropdown-borderColor: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-warning-borderColor);\n  --dropdown-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdown-success {\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-background: var(--salt-status-success-background);\n  --dropdown-background-readonly: var(--salt-status-success-background);\n  --dropdown-borderColor: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-success-borderColor);\n  --dropdown-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdown:focus,\n.saltDropdown:focus:hover {\n  cursor: var(--salt-cursor-hover);\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);\n}\n\n.saltDropdown.saltDropdown[aria-readonly=\"true\"] {\n  background: var(--dropdown-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltDropdown.saltDropdown:disabled,\n.saltDropdown.saltDropdown:disabled:hover {\n  background: var(--dropdown-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltDropdown-content {\n  flex: 1;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-wrap: nowrap;\n}\n\n.saltDropdown-placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n.saltDropdown-startAdornmentContainer {\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltDropdown .saltDropdown-toggle {\n  margin-left: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Dropdown.css.js.map