@salt-ds/core 1.30.0 → 1.32.0

package/dist-es/interactable-card/InteractableCard.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { clsx } from 'clsx';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
 import { capitalize } from '../utils/capitalize.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import { useControlled } from '../utils/useControlled.js';
@@ -47,6 +47,7 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../form-field-context/FormFieldContext.js';
 import '../status-indicator/StatusIndicator.js';
 import '../text/Text.js';
 import '../text/Code.js';
@@ -55,7 +56,6 @@ import '../text/Headings.js';
 import '../text/Label.js';
 import '../text/TextAction.js';
 import '../text/TextNotation.js';
-import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
@@ -65,12 +65,12 @@ import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-box/ListBox.js';
 import '../list-control/ListControlContext.js';
-import '../menu/MenuContext.js';
 import '@floating-ui/react';
+import '../menu/MenuContext.js';
 import '../menu/MenuItem.js';
 import '../menu/MenuPanel.js';
-import '../menu/MenuTriggerContext.js';
 import '../menu/MenuPanelContext.js';
+import '../menu/MenuTriggerContext.js';
 import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
@@ -106,8 +106,8 @@ import '../toggle-button/ToggleButton.js';
 import '../toggle-button-group/ToggleButtonGroup.js';
 import '../toggle-button-group/ToggleButtonGroupContext.js';
 import '../tooltip/Tooltip.js';
-import { useInteractableCard } from './useInteractableCard.js';
 import css_248z from './InteractableCard.css.js';
+import { useInteractableCard } from './useInteractableCard.js';
 
 const withBaseName = makePrefixer("saltInteractableCard");
 const InteractableCard = forwardRef(function InteractableCard2(props, ref) {
@@ -142,8 +142,8 @@ const InteractableCard = forwardRef(function InteractableCard2(props, ref) {
     state: "selected"
   });
   const role = interactableCardGroup ? interactableCardGroup.multiSelect ? "checkbox" : "radio" : "button";
-  const isMultiselect = interactableCardGroup && interactableCardGroup.multiSelect;
-  const isFirstChild = interactableCardGroup && interactableCardGroup.isFirstChild(value);
+  const isMultiselect = interactableCardGroup == null ? void 0 : interactableCardGroup.multiSelect;
+  const isFirstChild = interactableCardGroup == null ? void 0 : interactableCardGroup.isFirstChild(value);
   const ariaChecked = role === "radio" || role === "checkbox" ? selected : void 0;
   const accentValue = accent || accentPlacement;
   const handleClick = (event) => {

package/dist-es/interactable-card/InteractableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import {\n  forwardRef,\n  MouseEvent,\n  ComponentPropsWithoutRef,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { useInteractableCard } from \"./useInteractableCard\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Accent border position: defaults to \"bottom\"\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * @deprecated Use the `accent` prop instead\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    children,\n    className,\n    disabled: disabledProp,\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect =\n    interactableCardGroup && interactableCardGroup.multiSelect;\n\n  const isFirstChild =\n    interactableCardGroup && interactableCardGroup.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (interactableCardGroup && !disabled) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  let tabIndex;\n\n  if (interactableCardGroup) {\n    if (disabled) {\n      tabIndex = -1;\n    } else if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: Only selected or first item (if none are selected) is focusable\n      tabIndex = selected ? 0 : -1;\n      if (!interactableCardGroup.value && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = disabled ? -1 : 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  return (\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n        },\n        className\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["InteractableCard","interactableCardCss"],"mappings":"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"}
+{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  type InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Accent border position: defaults to \"bottom\"\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * @deprecated Use the `accent` prop instead\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    children,\n    className,\n    disabled: disabledProp,\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect = interactableCardGroup?.multiSelect;\n\n  const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (interactableCardGroup && !disabled) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  let tabIndex: number;\n\n  if (interactableCardGroup) {\n    if (disabled) {\n      tabIndex = -1;\n    } else if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: Only selected or first item (if none are selected) is focusable\n      tabIndex = selected ? 0 : -1;\n      if (!interactableCardGroup.value && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = disabled ? -1 : 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  return (\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n        },\n        className,\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["InteractableCard","interactableCardCss"],"mappings":"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"}

package/dist-es/interactable-card/InteractableCardGroup.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { clsx } from 'clsx';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import { useControlled } from '../utils/useControlled.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
@@ -46,6 +46,7 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../form-field-context/FormFieldContext.js';
 import '../status-indicator/StatusIndicator.js';
 import '../text/Text.js';
 import '../text/Code.js';
@@ -54,7 +55,6 @@ import '../text/Headings.js';
 import '../text/Label.js';
 import '../text/TextAction.js';
 import '../text/TextNotation.js';
-import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
@@ -64,12 +64,12 @@ import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-box/ListBox.js';
 import '../list-control/ListControlContext.js';
-import '../menu/MenuContext.js';
 import '@floating-ui/react';
+import '../menu/MenuContext.js';
 import '../menu/MenuItem.js';
 import '../menu/MenuPanel.js';
-import '../menu/MenuTriggerContext.js';
 import '../menu/MenuPanelContext.js';
+import '../menu/MenuTriggerContext.js';
 import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
@@ -159,7 +159,7 @@ const InteractableCardGroup = forwardRef(function InteractableCardGroup2(props,
         }
       }
     },
-    [onChange, value, setValue, multiSelect]
+    [onChange, value, multiSelect]
   );
   const isSelected = useCallback(
     (cardValue) => multiSelect ? Array.isArray(value) && value.includes(cardValue) : cardValue !== void 0 && value === cardValue,
@@ -191,7 +191,7 @@ const InteractableCardGroup = forwardRef(function InteractableCardGroup2(props,
     );
     const nextIndex = (currentIndex + 1) % elements.length;
     const prevIndex = (currentIndex - 1 + elements.length) % elements.length;
-    if (event.key == " ") {
+    if (event.key === " ") {
       event.preventDefault();
       select(
         event,
@@ -204,18 +204,22 @@ const InteractableCardGroup = forwardRef(function InteractableCardGroup2(props,
       switch (event.key) {
         case "ArrowDown":
         case "ArrowRight":
-          const nextValue = elements[nextIndex].getAttribute(
-            "data-value"
+          select(
+            event,
+            elements[nextIndex].getAttribute(
+              "data-value"
+            )
           );
-          select(event, nextValue);
           (_a = elements[nextIndex]) == null ? void 0 : _a.focus();
           break;
         case "ArrowUp":
         case "ArrowLeft":
-          const prevValue = elements[prevIndex].getAttribute(
-            "data-value"
+          select(
+            event,
+            elements[prevIndex].getAttribute(
+              "data-value"
+            )
           );
-          select(event, prevValue);
           (_b = elements[prevIndex]) == null ? void 0 : _b.focus();
           break;
       }

package/dist-es/interactable-card/InteractableCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCardGroup.js","sources":["../src/interactable-card/InteractableCardGroup.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport {\n  InteractableCardGroupContext,\n  InteractableCardValue,\n} from \"./InteractableCardGroupContext\";\nimport interactableCardGroupCss from \"./InteractableCardGroup.css\";\n\nexport interface InteractableCardGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled. Should be an array when `multiSelect` is true.\n   */\n  defaultValue?: InteractableCardValue;\n  /**\n   * If `true`, the Interactable Card Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled. Should be an array when `multiSelect` is true.\n   */\n  value?: InteractableCardValue;\n  /**\n   * If `true` the Interactable Card Group will allow multiple selection functionality, with keyboard interactions matching those of a checkbox.\n   * By default the group allows mutually exclusive selection with keyboard interactions matching radio buttons.\n   */\n  multiSelect?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (\n    event: SyntheticEvent<HTMLDivElement>,\n    value: InteractableCardValue\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltInteractableCardGroup\");\n\nexport const InteractableCardGroup = forwardRef<\n  HTMLDivElement,\n  InteractableCardGroupProps\n>(function InteractableCardGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    multiSelect,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card-group\",\n    css: interactableCardGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"InteractableCardGroup\",\n    state: \"value\",\n  });\n\n  const [elements, setElements] = useState<HTMLElement[]>([]);\n\n  useEffect(() => {\n    const childElements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\n        \".saltInteractableCard:not([disabled])\"\n      ) ?? []\n    );\n    setElements(childElements);\n  }, [children]);\n\n  const select = useCallback(\n    (\n      event: SyntheticEvent<HTMLDivElement>,\n      newValue: InteractableCardValue\n    ) => {\n      if (multiSelect) {\n        const currentValues = Array.isArray(value) ? value : [];\n        const isSelected = currentValues.includes(newValue);\n\n        const nextValues = isSelected\n          ? currentValues.filter((val) => val !== newValue)\n          : [...currentValues, newValue];\n        setValue(nextValues);\n        onChange?.(event, nextValues);\n      } else {\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, newValue);\n        }\n      }\n    },\n    [onChange, value, setValue, multiSelect]\n  );\n\n  const isSelected = useCallback(\n    (cardValue: InteractableCardValue) =>\n      multiSelect\n        ? Array.isArray(value) && value.includes(cardValue)\n        : cardValue !== undefined && value === cardValue,\n    [value, multiSelect]\n  );\n\n  const isFirstChild = useCallback(\n    (cardValue: InteractableCardValue) => {\n      return (\n        elements.findIndex(\n          (element) => element.getAttribute(\"data-value\") === cardValue\n        ) === 0\n      );\n    },\n    [elements]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      isFirstChild,\n      disabled,\n      multiSelect,\n      value,\n    }),\n    [select, isSelected, disabled, multiSelect, isFirstChild, value]\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement\n    );\n    const nextIndex = (currentIndex + 1) % elements.length;\n    const prevIndex = (currentIndex - 1 + elements.length) % elements.length;\n\n    if (event.key == \" \") {\n      event.preventDefault();\n      select(\n        event,\n        elements[currentIndex].getAttribute(\n          \"data-value\"\n        ) as InteractableCardValue\n      );\n    }\n\n    if (!multiSelect) {\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          const nextValue = elements[nextIndex].getAttribute(\n            \"data-value\"\n          ) as InteractableCardValue;\n          select(event, nextValue);\n          elements[nextIndex]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          const prevValue = elements[prevIndex].getAttribute(\n            \"data-value\"\n          ) as InteractableCardValue;\n          select(event, prevValue);\n          elements[prevIndex]?.focus();\n          break;\n      }\n    }\n    onKeyDown?.(event);\n  };\n\n  return (\n    <InteractableCardGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), className)}\n        role={multiSelect ? \"group\" : \"radiogroup\"}\n        onKeyDown={handleKeyDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </InteractableCardGroupContext.Provider>\n  );\n});\n"],"names":["InteractableCardGroup","interactableCardGroupCss","isSelected"],"mappings":"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"}
+{"version":3,"file":"InteractableCardGroup.js","sources":["../src/interactable-card/InteractableCardGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardGroupCss from \"./InteractableCardGroup.css\";\nimport {\n  InteractableCardGroupContext,\n  type InteractableCardValue,\n} from \"./InteractableCardGroupContext\";\n\nexport interface InteractableCardGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled. Should be an array when `multiSelect` is true.\n   */\n  defaultValue?: InteractableCardValue;\n  /**\n   * If `true`, the Interactable Card Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled. Should be an array when `multiSelect` is true.\n   */\n  value?: InteractableCardValue;\n  /**\n   * If `true` the Interactable Card Group will allow multiple selection functionality, with keyboard interactions matching those of a checkbox.\n   * By default the group allows mutually exclusive selection with keyboard interactions matching radio buttons.\n   */\n  multiSelect?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (\n    event: SyntheticEvent<HTMLDivElement>,\n    value: InteractableCardValue,\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltInteractableCardGroup\");\n\nexport const InteractableCardGroup = forwardRef<\n  HTMLDivElement,\n  InteractableCardGroupProps\n>(function InteractableCardGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    multiSelect,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card-group\",\n    css: interactableCardGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"InteractableCardGroup\",\n    state: \"value\",\n  });\n\n  const [elements, setElements] = useState<HTMLElement[]>([]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: queries the dom when children changes.\n  useEffect(() => {\n    const childElements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\n        \".saltInteractableCard:not([disabled])\",\n      ) ?? [],\n    );\n    setElements(childElements);\n  }, [children]);\n\n  const select = useCallback(\n    (\n      event: SyntheticEvent<HTMLDivElement>,\n      newValue: InteractableCardValue,\n    ) => {\n      if (multiSelect) {\n        const currentValues = Array.isArray(value) ? value : [];\n        const isSelected = currentValues.includes(newValue);\n\n        const nextValues = isSelected\n          ? currentValues.filter((val) => val !== newValue)\n          : [...currentValues, newValue];\n        setValue(nextValues);\n        onChange?.(event, nextValues);\n      } else {\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, newValue);\n        }\n      }\n    },\n    [onChange, value, multiSelect],\n  );\n\n  const isSelected = useCallback(\n    (cardValue: InteractableCardValue) =>\n      multiSelect\n        ? Array.isArray(value) && value.includes(cardValue)\n        : cardValue !== undefined && value === cardValue,\n    [value, multiSelect],\n  );\n\n  const isFirstChild = useCallback(\n    (cardValue: InteractableCardValue) => {\n      return (\n        elements.findIndex(\n          (element) => element.getAttribute(\"data-value\") === cardValue,\n        ) === 0\n      );\n    },\n    [elements],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      isFirstChild,\n      disabled,\n      multiSelect,\n      value,\n    }),\n    [select, isSelected, disabled, multiSelect, isFirstChild, value],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement,\n    );\n    const nextIndex = (currentIndex + 1) % elements.length;\n    const prevIndex = (currentIndex - 1 + elements.length) % elements.length;\n\n    if (event.key === \" \") {\n      event.preventDefault();\n      select(\n        event,\n        elements[currentIndex].getAttribute(\n          \"data-value\",\n        ) as InteractableCardValue,\n      );\n    }\n\n    if (!multiSelect) {\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          select(\n            event,\n            elements[nextIndex].getAttribute(\n              \"data-value\",\n            ) as InteractableCardValue,\n          );\n          elements[nextIndex]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          select(\n            event,\n            elements[prevIndex].getAttribute(\n              \"data-value\",\n            ) as InteractableCardValue,\n          );\n          elements[prevIndex]?.focus();\n          break;\n      }\n    }\n    onKeyDown?.(event);\n  };\n\n  return (\n    <InteractableCardGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), className)}\n        role={multiSelect ? \"group\" : \"radiogroup\"}\n        onKeyDown={handleKeyDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </InteractableCardGroupContext.Provider>\n  );\n});\n"],"names":["InteractableCardGroup","interactableCardGroupCss","isSelected"],"mappings":"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"}

package/dist-es/interactable-card/InteractableCardGroupContext.js

@@ -23,9 +23,9 @@ import '../button/Button.js';
 import '../card/Card.js';
 import '../checkbox/Checkbox.js';
 import '../checkbox/CheckboxGroup.js';
+import '@salt-ds/icons';
 import '@salt-ds/styles';
 import '@salt-ds/window';
-import '@salt-ds/icons';
 import '../combo-box/ComboBox.js';
 import '../dialog/Dialog.js';
 import '../dialog/DialogHeader.js';
@@ -44,6 +44,7 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../form-field-context/FormFieldContext.js';
 import '../status-indicator/StatusIndicator.js';
 import '../text/Text.js';
 import '../text/Code.js';
@@ -52,7 +53,6 @@ import '../text/Headings.js';
 import '../text/Label.js';
 import '../text/TextAction.js';
 import '../text/TextNotation.js';
-import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
@@ -62,12 +62,12 @@ import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-box/ListBox.js';
 import '../list-control/ListControlContext.js';
-import '../menu/MenuContext.js';
 import '@floating-ui/react';
+import '../menu/MenuContext.js';
 import '../menu/MenuItem.js';
 import '../menu/MenuPanel.js';
-import '../menu/MenuTriggerContext.js';
 import '../menu/MenuPanelContext.js';
+import '../menu/MenuTriggerContext.js';
 import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';

package/dist-es/interactable-card/InteractableCardGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCardGroupContext.js","sources":["../src/interactable-card/InteractableCardGroupContext.tsx"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type InteractableCardValue = string | readonly string[] | undefined;\n\nexport interface InteractableCardGroupContextValue {\n  disabled?: boolean;\n  select: (\n    event: SyntheticEvent<HTMLDivElement>,\n    value: InteractableCardValue\n  ) => void;\n  isSelected: (id: InteractableCardValue) => boolean;\n  isFirstChild: (value: InteractableCardValue) => boolean;\n  multiSelect?: boolean;\n  value: InteractableCardValue;\n}\n\nexport const InteractableCardGroupContext = createContext<\n  InteractableCardGroupContextValue | undefined\n>(\"InteractableCardGroupContext\", undefined);\n\nexport function useInteractableCardGroup() {\n  return useContext(InteractableCardGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBa,MAAA,4BAAA,GAA+B,aAE1C,CAAA,8BAAA,EAAgC,KAAS,CAAA,EAAA;AAEpC,SAAS,wBAA2B,GAAA;AACzC,EAAA,OAAO,WAAW,4BAA4B,CAAA,CAAA;AAChD;;;;"}
+{"version":3,"file":"InteractableCardGroupContext.js","sources":["../src/interactable-card/InteractableCardGroupContext.tsx"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type InteractableCardValue = string | readonly string[] | undefined;\n\nexport interface InteractableCardGroupContextValue {\n  disabled?: boolean;\n  select: (\n    event: SyntheticEvent<HTMLDivElement>,\n    value: InteractableCardValue,\n  ) => void;\n  isSelected: (id: InteractableCardValue) => boolean;\n  isFirstChild: (value: InteractableCardValue) => boolean;\n  multiSelect?: boolean;\n  value: InteractableCardValue;\n}\n\nexport const InteractableCardGroupContext = createContext<\n  InteractableCardGroupContextValue | undefined\n>(\"InteractableCardGroupContext\", undefined);\n\nexport function useInteractableCardGroup() {\n  return useContext(InteractableCardGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBa,MAAA,4BAAA,GAA+B,aAE1C,CAAA,8BAAA,EAAgC,KAAS,CAAA,EAAA;AAEpC,SAAS,wBAA2B,GAAA;AACzC,EAAA,OAAO,WAAW,4BAA4B,CAAA,CAAA;AAChD;;;;"}

package/dist-es/interactable-card/useInteractableCard.js

@@ -13,7 +13,7 @@ const useInteractableCard = ({
   const space = " ";
   useEffect(() => {
     const t = setTimeout(() => {
-      if (keyIsDown !== enter && keyIsDown !== space) {
+      if (keyIsDown !== enter && keyIsDown !== space && active) {
         setActive(false);
       }
     }, 0);

package/dist-es/interactable-card/useInteractableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInteractableCard.js","sources":["../src/interactable-card/useInteractableCard.ts"],"sourcesContent":["import {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  useEffect,\n  useState,\n} from \"react\";\n\nexport interface CardHookProps<T extends Element> {\n  disabled?: boolean;\n  onKeyUp?: (event: KeyboardEvent<T>) => void;\n  onKeyDown?: (event: KeyboardEvent<T>) => void;\n  onClick?: (event: MouseEvent<T>) => void;\n  onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface CardHookResult<T extends Element> {\n  active: boolean;\n  cardProps: {\n    \"aria-disabled\"?: boolean;\n    disabled?: boolean;\n    tabIndex: number;\n    onBlur: (event: FocusEvent<T>) => void;\n    onClick?: (event: MouseEvent<T>) => void;\n    onKeyDown: (event: KeyboardEvent<T>) => void;\n    onKeyUp: (event: KeyboardEvent<T>) => void;\n  };\n}\n\nexport const useInteractableCard = <T extends Element>({\n  disabled,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n  onBlur,\n}: CardHookProps<T>): CardHookResult<T> => {\n  const [keyIsDown, setkeyIsDown] = useState(\"\");\n  const [active, setActive] = useState(false);\n\n  const enter = \"Enter\";\n  const space = \" \";\n\n  useEffect(() => {\n    const t = setTimeout(() => {\n      // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button-like component\n      // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n      if (keyIsDown !== enter && keyIsDown !== space) {\n        setActive(false);\n      }\n    }, 0);\n\n    return () => {\n      clearTimeout(t);\n    };\n  }, [active, keyIsDown]);\n\n  const handleKeyUp = (event: KeyboardEvent<T>) => {\n    setkeyIsDown(\"\");\n    setActive(false);\n    onKeyUp?.(event);\n  };\n\n  const handleClick = (event: MouseEvent<T>) => {\n    setActive(true);\n    onClick?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<T>) => {\n    setActive(false);\n    onBlur?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<T>) => {\n    if (event.key === enter || event.key === space) {\n      setkeyIsDown(event.key);\n      event.preventDefault();\n      setActive(true);\n      onClick?.(event as unknown as MouseEvent<T>);\n    }\n    onKeyDown?.(event);\n  };\n\n  const cardProps = {\n    \"aria-disabled\": disabled ? true : undefined,\n    disabled: disabled,\n    tabIndex: disabled ? -1 : 0,\n    onBlur: handleBlur,\n    onClick: !disabled ? handleClick : undefined,\n    onKeyDown: handleKeyDown,\n    onKeyUp: handleKeyUp,\n  };\n\n  return {\n    active,\n    cardProps,\n  };\n};\n"],"names":[],"mappings":";;AA6BO,MAAM,sBAAsB,CAAoB;AAAA,EACrD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AACF,CAA2C,KAAA;AACzC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,EAAE,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA,CAAA;AAEd,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAI,IAAA,SAAA,KAAc,KAAS,IAAA,SAAA,KAAc,KAAO,EAAA;AAC9C,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACjB;AAAA,OACC,CAAC,CAAA,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA,CAAA;AAAA,KAChB,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyB,KAAA;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyB,KAAA;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACjD,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ;AACA,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,eAAA,EAAiB,WAAW,IAAO,GAAA,KAAA,CAAA;AAAA,IACnC,QAAA;AAAA,IACA,QAAA,EAAU,WAAW,CAAK,CAAA,GAAA,CAAA;AAAA,IAC1B,MAAQ,EAAA,UAAA;AAAA,IACR,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,KAAA,CAAA;AAAA,IACnC,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA,WAAA;AAAA,GACX,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useInteractableCard.js","sources":["../src/interactable-card/useInteractableCard.ts"],"sourcesContent":["import {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  useEffect,\n  useState,\n} from \"react\";\n\nexport interface CardHookProps<T extends Element> {\n  disabled?: boolean;\n  onKeyUp?: (event: KeyboardEvent<T>) => void;\n  onKeyDown?: (event: KeyboardEvent<T>) => void;\n  onClick?: (event: MouseEvent<T>) => void;\n  onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface CardHookResult<T extends Element> {\n  active: boolean;\n  cardProps: {\n    \"aria-disabled\"?: boolean;\n    disabled?: boolean;\n    tabIndex: number;\n    onBlur: (event: FocusEvent<T>) => void;\n    onClick?: (event: MouseEvent<T>) => void;\n    onKeyDown: (event: KeyboardEvent<T>) => void;\n    onKeyUp: (event: KeyboardEvent<T>) => void;\n  };\n}\n\nexport const useInteractableCard = <T extends Element>({\n  disabled,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n  onBlur,\n}: CardHookProps<T>): CardHookResult<T> => {\n  const [keyIsDown, setkeyIsDown] = useState(\"\");\n  const [active, setActive] = useState(false);\n\n  const enter = \"Enter\";\n  const space = \" \";\n\n  useEffect(() => {\n    const t = setTimeout(() => {\n      // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button-like component\n      // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n      if (keyIsDown !== enter && keyIsDown !== space && active) {\n        setActive(false);\n      }\n    }, 0);\n\n    return () => {\n      clearTimeout(t);\n    };\n  }, [active, keyIsDown]);\n\n  const handleKeyUp = (event: KeyboardEvent<T>) => {\n    setkeyIsDown(\"\");\n    setActive(false);\n    onKeyUp?.(event);\n  };\n\n  const handleClick = (event: MouseEvent<T>) => {\n    setActive(true);\n    onClick?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<T>) => {\n    setActive(false);\n    onBlur?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<T>) => {\n    if (event.key === enter || event.key === space) {\n      setkeyIsDown(event.key);\n      event.preventDefault();\n      setActive(true);\n      onClick?.(event as unknown as MouseEvent<T>);\n    }\n    onKeyDown?.(event);\n  };\n\n  const cardProps = {\n    \"aria-disabled\": disabled ? true : undefined,\n    disabled: disabled,\n    tabIndex: disabled ? -1 : 0,\n    onBlur: handleBlur,\n    onClick: !disabled ? handleClick : undefined,\n    onKeyDown: handleKeyDown,\n    onKeyUp: handleKeyUp,\n  };\n\n  return {\n    active,\n    cardProps,\n  };\n};\n"],"names":[],"mappings":";;AA6BO,MAAM,sBAAsB,CAAoB;AAAA,EACrD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AACF,CAA2C,KAAA;AACzC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,EAAE,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA,CAAA;AAEd,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAA,IAAI,SAAc,KAAA,KAAA,IAAS,SAAc,KAAA,KAAA,IAAS,MAAQ,EAAA;AACxD,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACjB;AAAA,OACC,CAAC,CAAA,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA,CAAA;AAAA,KAChB,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyB,KAAA;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyB,KAAA;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACjD,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ;AACA,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,eAAA,EAAiB,WAAW,IAAO,GAAA,KAAA,CAAA;AAAA,IACnC,QAAA;AAAA,IACA,QAAA,EAAU,WAAW,CAAK,CAAA,GAAA,CAAA;AAAA,IAC1B,MAAQ,EAAA,UAAA;AAAA,IACR,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,KAAA,CAAA;AAAA,IACnC,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA,WAAA;AAAA,GACX,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-es/link/Link.js

@@ -1,7 +1,14 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { clsx } from 'clsx';
 import { TearOutIcon } from '@salt-ds/icons';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { Text } from '../text/Text.js';
+import '../text/Code.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextAction.js';
+import '../text/TextNotation.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
@@ -44,15 +51,8 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
-import '../status-indicator/StatusIndicator.js';
-import { Text } from '../text/Text.js';
-import '../text/Code.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextAction.js';
-import '../text/TextNotation.js';
 import '../form-field-context/FormFieldContext.js';
+import '../status-indicator/StatusIndicator.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
@@ -62,12 +62,12 @@ import '../interactable-card/InteractableCardGroupContext.js';
 import '../link-card/LinkCard.js';
 import '../list-box/ListBox.js';
 import '../list-control/ListControlContext.js';
-import '../menu/MenuContext.js';
 import '@floating-ui/react';
+import '../menu/MenuContext.js';
 import '../menu/MenuItem.js';
 import '../menu/MenuPanel.js';
-import '../menu/MenuTriggerContext.js';
 import '../menu/MenuPanelContext.js';
+import '../menu/MenuTriggerContext.js';
 import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';

package/dist-es/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { IconProps, TearOutIcon } from \"@salt-ds/icons\";\nimport { makePrefixer } from \"../utils\";\nimport { Text, TextProps } from \"../text\";\n\nimport linkCss from \"./Link.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\" | \"disabled\"> {\n  IconComponent?: ComponentType<IconProps> | null;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent = TearOutIcon,\n    href,\n    className,\n    children,\n    variant = \"primary\",\n    color = \"primary\",\n    target = \"_self\",\n    ...rest\n  },\n  ref\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      as=\"a\"\n      className={clsx(withBaseName(), className)}\n      href={href}\n      ref={ref}\n      target={target}\n      variant={variant}\n      color={color}\n      {...rest}\n    >\n      {children}\n      {target === \"_blank\" && (\n        <>\n          {IconComponent && (\n            <IconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>External</span>\n        </>\n      )}\n    </Text>\n  );\n});\n"],"names":["Link","linkCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAY/B,MAAA,IAAA,GAAO,UAAyC,CAAA,SAASA,KACpE,CAAA;AAAA,EACE,aAAgB,GAAA,WAAA;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,KAAQ,GAAA,SAAA;AAAA,EACR,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,EAAG,EAAA,GAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,WAAW,QACV,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,aAAA,oBACE,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAAG,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,0BAE7D,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAAG,QAAA,EAAA,UAAA;AAAA,WAAQ,CAAA;AAAA,SAAA;AAAA,OAC5D,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { type IconProps, TearOutIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, type ReactElement, forwardRef } from \"react\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport linkCss from \"./Link.css\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\" | \"disabled\"> {\n  IconComponent?: ComponentType<IconProps> | null;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent = TearOutIcon,\n    href,\n    className,\n    children,\n    variant = \"primary\",\n    color = \"primary\",\n    target = \"_self\",\n    ...rest\n  },\n  ref,\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      as=\"a\"\n      className={clsx(withBaseName(), className)}\n      href={href}\n      ref={ref}\n      target={target}\n      variant={variant}\n      color={color}\n      {...rest}\n    >\n      {children}\n      {target === \"_blank\" && (\n        <>\n          {IconComponent && (\n            <IconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>External</span>\n        </>\n      )}\n    </Text>\n  );\n});\n"],"names":["Link","linkCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAY/B,MAAA,IAAA,GAAO,UAAyC,CAAA,SAASA,KACpE,CAAA;AAAA,EACE,aAAgB,GAAA,WAAA;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,KAAQ,GAAA,SAAA;AAAA,EACR,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,EAAG,EAAA,GAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,WAAW,QACV,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,aAAA,oBACE,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAAG,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,0BAE7D,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAAG,QAAA,EAAA,UAAA;AAAA,WAAQ,CAAA;AAAA,SAAA;AAAA,OAC5D,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/link-card/LinkCard.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import { capitalize } from '../utils/capitalize.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
@@ -45,6 +45,7 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../form-field-context/FormFieldContext.js';
 import '../status-indicator/StatusIndicator.js';
 import '../text/Text.js';
 import '../text/Code.js';
@@ -53,7 +54,6 @@ import '../text/Headings.js';
 import '../text/Label.js';
 import '../text/TextAction.js';
 import '../text/TextNotation.js';
-import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
@@ -63,12 +63,12 @@ import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../list-box/ListBox.js';
 import '../list-control/ListControlContext.js';
-import '../menu/MenuContext.js';
 import '@floating-ui/react';
+import '../menu/MenuContext.js';
 import '../menu/MenuItem.js';
 import '../menu/MenuPanel.js';
-import '../menu/MenuTriggerContext.js';
 import '../menu/MenuPanelContext.js';
+import '../menu/MenuTriggerContext.js';
 import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';

package/dist-es/link-card/LinkCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n  function LinkCard(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      href,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-card\",\n      css: linkCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <a\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n          },\n          className\n        )}\n        href={href}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["LinkCard","linkCardCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAazC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,GAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAAS,WAAW,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,SACvD;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n  function LinkCard(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      href,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-card\",\n      css: linkCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <a\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n          },\n          className,\n        )}\n        href={href}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["LinkCard","linkCardCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAazC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,GAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAAS,WAAW,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,SACvD;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/list-box/ListBox.js

@@ -1,8 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import { ListControlContext } from '../list-control/ListControlContext.js';
+import { useListControl, defaultValueToString } from '../list-control/ListControlState.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
@@ -45,6 +47,7 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../form-field-context/FormFieldContext.js';
 import '../status-indicator/StatusIndicator.js';
 import '../text/Text.js';
 import '../text/Code.js';
@@ -53,7 +56,6 @@ import '../text/Headings.js';
 import '../text/Label.js';
 import '../text/TextAction.js';
 import '../text/TextNotation.js';
-import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
@@ -62,13 +64,12 @@ import '../interactable-card/InteractableCardGroup.js';
 import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
-import { ListControlContext } from '../list-control/ListControlContext.js';
-import '../menu/MenuContext.js';
 import '@floating-ui/react';
+import '../menu/MenuContext.js';
 import '../menu/MenuItem.js';
 import '../menu/MenuPanel.js';
-import '../menu/MenuTriggerContext.js';
 import '../menu/MenuPanelContext.js';
+import '../menu/MenuTriggerContext.js';
 import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
@@ -104,7 +105,6 @@ import '../toggle-button/ToggleButton.js';
 import '../toggle-button-group/ToggleButtonGroup.js';
 import '../toggle-button-group/ToggleButtonGroupContext.js';
 import '../tooltip/Tooltip.js';
-import { useListControl, defaultValueToString } from '../list-control/ListControlState.js';
 import css_248z from './ListBox.css.js';
 
 const withBaseName = makePrefixer("saltListBox");
@@ -178,13 +178,14 @@ const ListBox = forwardRef(function ListBox2(props, ref) {
   };
   const handleKeyDown = (event) => {
     var _a, _b;
+    onKeyDown == null ? void 0 : onKeyDown(event);
     if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
       event.preventDefault();
       event.stopPropagation();
       handleTypeahead(event);
     }
     const activeOption = activeState != null ? activeState : getFirstOption().data;
-    let newActive;
+    let newActive = null;
     switch (event.key) {
       case "ArrowDown":
         newActive = (_a = getOptionAfter(activeOption)) != null ? _a : getLastOption();
@@ -217,12 +218,11 @@ const ListBox = forwardRef(function ListBox2(props, ref) {
         select(event, activeState);
         break;
     }
-    if (newActive && newActive.data.id != (activeState == null ? void 0 : activeState.id)) {
+    if (newActive && newActive.data.id !== (activeState == null ? void 0 : activeState.id)) {
       event.preventDefault();
       setActive(newActive.data);
       setFocusVisibleState(true);
     }
-    onKeyDown == null ? void 0 : onKeyDown(event);
   };
   const wasMouseDown = useRef(false);
   const handleMouseDown = () => {

package/dist-es/list-box/ListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  useRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport {\n  defaultValueToString,\n  useListControl,\n  ListControlProps,\n} from \"../list-control/ListControlState\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n  /**\n   * If `true`, the list box will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `false`, the list box will have not a border.\n   */\n  bordered?: boolean;\n  /**\n   * The options to display in the list box.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the list box will be multiselect.\n   */\n  multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n  Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n  props: ListBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    bordered,\n    className,\n    children,\n    defaultSelected,\n    disabled,\n    selected,\n    onSelectionChange,\n    multiselect,\n    valueToString = defaultValueToString,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-list-box\",\n    css: listBoxCss,\n    window: targetWindow,\n  });\n\n  const listControl = useListControl<Item>({\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    valueToString,\n    disabled,\n  });\n\n  const {\n    activeState,\n    setActive,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    setFocusVisibleState,\n    setFocusedState,\n    listRef,\n  } = listControl;\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>();\n\n  const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (typeaheadTimeout.current) {\n      clearTimeout(typeaheadTimeout.current);\n    }\n    typeaheadString.current += event.key;\n    typeaheadTimeout.current = window.setTimeout(() => {\n      typeaheadString.current = \"\";\n    }, 500);\n\n    let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n    if (!newOption) {\n      newOption = getOptionFromSearch(typeaheadString.current);\n    }\n\n    if (newOption) {\n      setActive(newOption);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleTypeahead(event);\n    }\n\n    const activeOption = activeState ?? getFirstOption().data;\n\n    let newActive;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAfter(activeOption) ?? getLastOption();\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionBefore(activeOption) ?? getFirstOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        newActive = getOptionPageAbove(activeOption);\n        break;\n      case \"PageDown\":\n        newActive = getOptionPageBelow(activeOption);\n        break;\n      case \"Enter\":\n      case \" \":\n        if (\n          Boolean(activeState?.disabled) ||\n          (typeaheadString.current.trim().length > 0 && event.key === \" \")\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!activeState) {\n          return;\n        }\n\n        event.preventDefault();\n        select(event, activeState);\n\n        break;\n    }\n\n    if (newActive && newActive.data.id != activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n      setFocusVisibleState(true);\n    }\n\n    onKeyDown?.(event);\n  };\n\n  const wasMouseDown = useRef(false);\n\n  const handleMouseDown = () => {\n    wasMouseDown.current = true;\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n    if (wasMouseDown.current) {\n      wasMouseDown.current = false;\n      return;\n    }\n\n    setFocusVisibleState(true);\n    wasMouseDown.current = false;\n\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > 0) {\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 just select the first item\n    if (!newActive) {\n      newActive = getOptionAtIndex(0);\n    }\n\n    setActive(newActive?.data);\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    setFocusedState(false);\n    setActive(undefined);\n    onBlur?.(event);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n    setActive(undefined);\n  };\n\n  const handleRef = useForkRef(listRef, ref);\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"bordered\")]: bordered },\n          className\n        )}\n        role=\"listbox\"\n        aria-activedescendant={activeState?.id}\n        aria-disabled={disabled || undefined}\n        aria-multiselectable={multiselect}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        onMouseOver={handleListMouseOver}\n        onMouseDown={handleMouseDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n"],"names":["ListBox","listBoxCss"],"mappings":"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"}
+{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n  type ListControlProps,\n  defaultValueToString,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n  /**\n   * If `true`, the list box will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `false`, the list box will have not a border.\n   */\n  bordered?: boolean;\n  /**\n   * The options to display in the list box.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the list box will be multiselect.\n   */\n  multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n  Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n  props: ListBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    bordered,\n    className,\n    children,\n    defaultSelected,\n    disabled,\n    selected,\n    onSelectionChange,\n    multiselect,\n    valueToString = defaultValueToString,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-list-box\",\n    css: listBoxCss,\n    window: targetWindow,\n  });\n\n  const listControl = useListControl<Item>({\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    valueToString,\n    disabled,\n  });\n\n  const {\n    activeState,\n    setActive,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    setFocusVisibleState,\n    setFocusedState,\n    listRef,\n  } = listControl;\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>();\n\n  const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (typeaheadTimeout.current) {\n      clearTimeout(typeaheadTimeout.current);\n    }\n    typeaheadString.current += event.key;\n    typeaheadTimeout.current = window.setTimeout(() => {\n      typeaheadString.current = \"\";\n    }, 500);\n\n    let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n    if (!newOption) {\n      newOption = getOptionFromSearch(typeaheadString.current);\n    }\n\n    if (newOption) {\n      setActive(newOption);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleTypeahead(event);\n    }\n\n    const activeOption = activeState ?? getFirstOption().data;\n\n    let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n      null;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAfter(activeOption) ?? getLastOption();\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionBefore(activeOption) ?? getFirstOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        newActive = getOptionPageAbove(activeOption);\n        break;\n      case \"PageDown\":\n        newActive = getOptionPageBelow(activeOption);\n        break;\n      case \"Enter\":\n      case \" \":\n        if (\n          Boolean(activeState?.disabled) ||\n          (typeaheadString.current.trim().length > 0 && event.key === \" \")\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!activeState) {\n          return;\n        }\n\n        event.preventDefault();\n        select(event, activeState);\n\n        break;\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const wasMouseDown = useRef(false);\n\n  const handleMouseDown = () => {\n    wasMouseDown.current = true;\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n    if (wasMouseDown.current) {\n      wasMouseDown.current = false;\n      return;\n    }\n\n    setFocusVisibleState(true);\n    wasMouseDown.current = false;\n\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > 0) {\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 just select the first item\n    if (!newActive) {\n      newActive = getOptionAtIndex(0);\n    }\n\n    setActive(newActive?.data);\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    setFocusedState(false);\n    setActive(undefined);\n    onBlur?.(event);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n    setActive(undefined);\n  };\n\n  const handleRef = useForkRef(listRef, ref);\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"bordered\")]: bordered },\n          className,\n        )}\n        role=\"listbox\"\n        aria-activedescendant={activeState?.id}\n        aria-disabled={disabled || undefined}\n        aria-multiselectable={multiselect}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        onMouseOver={handleListMouseOver}\n        onMouseDown={handleMouseDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ListBox","listBoxCss"],"mappings":"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"}