@salt-ds/core 1.71.0 → 1.73.0

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

@@ -8,6 +8,7 @@ var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
 var ownerDocument = require('../utils/ownerDocument.js');
 var useControlled = require('../utils/useControlled.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 var useForkRef = require('../utils/useForkRef.js');
 require('../utils/useId.js');
@@ -17,6 +18,15 @@ var InteractableCardGroup$1 = require('./InteractableCardGroup.css.js');
 var InteractableCardGroupContext = require('./InteractableCardGroupContext.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltInteractableCardGroup");
+const sortCards = (cards) => [...cards].sort((cardA, cardB) => {
+  const position = cardA.element.compareDocumentPosition(cardB.element);
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+  return 0;
+});
+const cardsAreEqual = (cardsA, cardsB) => cardsA.length === cardsB.length && cardsA.every(
+  (card, index) => card.element === cardsB[index].element && card.value === cardsB[index].value
+);
 const InteractableCardGroup = React.forwardRef(function InteractableCardGroup2(props, ref) {
   const {
     children,
@@ -43,15 +53,34 @@ const InteractableCardGroup = React.forwardRef(function InteractableCardGroup2(p
     name: "InteractableCardGroup",
     state: "value"
   });
-  const [elements, setElements] = React.useState([]);
-  React.useEffect(() => {
-    var _a;
-    const childElements = Array.from(
-      ((_a = groupRef.current) == null ? void 0 : _a.querySelectorAll(
-        ".saltInteractableCard:not([disabled])"
-      )) ?? []
-    );
-    setElements(childElements);
+  const [enabledCards, setEnabledCards] = React.useState([]);
+  const registerCard = React.useCallback(
+    (cardValue, element) => {
+      const card = { element, value: cardValue };
+      setEnabledCards(
+        (currentCards) => sortCards([
+          ...currentCards.filter(
+            (currentCard) => currentCard.element !== element
+          ),
+          card
+        ])
+      );
+      return () => {
+        setEnabledCards((currentCards) => {
+          const currentCard = currentCards.find(
+            (registeredCard) => registeredCard.element === element
+          );
+          return currentCard === card ? currentCards.filter((registeredCard) => registeredCard !== card) : currentCards;
+        });
+      };
+    },
+    []
+  );
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    setEnabledCards((currentCards) => {
+      const sortedCards = sortCards(currentCards);
+      return cardsAreEqual(currentCards, sortedCards) ? currentCards : sortedCards;
+    });
   }, [children]);
   const select = React.useCallback(
     (event, newValue) => {
@@ -76,59 +105,62 @@ const InteractableCardGroup = React.forwardRef(function InteractableCardGroup2(p
   );
   const isFirstChild = React.useCallback(
     (cardValue) => {
-      return elements.findIndex(
-        (element) => element.getAttribute("data-value") === cardValue
-      ) === 0;
+      return enabledCards.findIndex((card) => card.value === cardValue) === 0;
     },
-    [elements]
+    [enabledCards]
   );
   const contextValue = React.useMemo(
     () => ({
       select,
+      registerCard,
+      hasEnabledSelection: !multiSelect && typeof value === "string" && enabledCards.some((card) => card.value === value),
       isSelected,
       isFirstChild,
       disabled,
       multiSelect,
       value
     }),
-    [select, isSelected, disabled, multiSelect, isFirstChild, value]
+    [
+      select,
+      registerCard,
+      enabledCards,
+      isSelected,
+      disabled,
+      multiSelect,
+      isFirstChild,
+      value
+    ]
   );
   const handleKeyDown = (event) => {
-    var _a, _b;
+    var _a, _b, _c;
     const doc = ownerDocument.ownerDocument(groupRef.current);
-    const currentIndex = elements.indexOf(doc.activeElement);
-    const nextIndex = (currentIndex + 1) % elements.length;
-    const prevIndex = (currentIndex - 1 + elements.length) % elements.length;
+    const currentCard = (_a = doc.activeElement) == null ? void 0 : _a.closest(
+      ".saltInteractableCard"
+    );
+    const currentIndex = currentCard ? enabledCards.findIndex((card) => card.element === currentCard) : -1;
+    if (currentIndex === -1) {
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      return;
+    }
+    const nextIndex = (currentIndex + 1) % enabledCards.length;
+    const prevIndex = (currentIndex - 1 + enabledCards.length) % enabledCards.length;
     if (event.key === " ") {
       event.preventDefault();
-      select(
-        event,
-        elements[currentIndex].getAttribute(
-          "data-value"
-        )
-      );
+      select(event, enabledCards[currentIndex].value);
     }
-    if (!multiSelect) {
+    if (!multiSelect && !event.altKey && !event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case "ArrowDown":
         case "ArrowRight":
-          select(
-            event,
-            elements[nextIndex].getAttribute(
-              "data-value"
-            )
-          );
-          (_a = elements[nextIndex]) == null ? void 0 : _a.focus();
+          event.preventDefault();
+          select(event, enabledCards[nextIndex].value);
+          (_b = enabledCards[nextIndex]) == null ? void 0 : _b.element.focus();
           break;
         case "ArrowUp":
         case "ArrowLeft":
-          select(
-            event,
-            elements[prevIndex].getAttribute(
-              "data-value"
-            )
-          );
-          (_b = elements[prevIndex]) == null ? void 0 : _b.focus();
+          event.preventDefault();
+          select(event, enabledCards[prevIndex].value);
+          (_c = enabledCards[prevIndex]) == null ? void 0 : _c.element.focus();
           break;
       }
     }

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

@@ -1 +1 @@
-{"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  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  makePrefixer,\n  ownerDocument,\n  useControlled,\n  useForkRef,\n} 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 doc = ownerDocument(groupRef.current);\n\n    const currentIndex = elements.indexOf(doc.activeElement as HTMLElement);\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":["makePrefixer","forwardRef","InteractableCardGroup","useWindow","useComponentCssInjection","interactableCardGroupCss","useRef","useForkRef","useControlled","useState","useEffect","useCallback","isSelected","useMemo","ownerDocument","jsx","InteractableCardGroupContext","clsx"],"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  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  makePrefixer,\n  ownerDocument,\n  useControlled,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} 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\ninterface RegisteredCard {\n  element: HTMLElement;\n  value: InteractableCardValue;\n}\n\nconst sortCards = (cards: RegisteredCard[]) =>\n  [...cards].sort((cardA, cardB) => {\n    const position = cardA.element.compareDocumentPosition(cardB.element);\n    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n    return 0;\n  });\n\nconst cardsAreEqual = (cardsA: RegisteredCard[], cardsB: RegisteredCard[]) =>\n  cardsA.length === cardsB.length &&\n  cardsA.every(\n    (card, index) =>\n      card.element === cardsB[index].element &&\n      card.value === cardsB[index].value,\n  );\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 [enabledCards, setEnabledCards] = useState<RegisteredCard[]>([]);\n\n  const registerCard = useCallback(\n    (cardValue: InteractableCardValue, element: HTMLElement) => {\n      const card = { element, value: cardValue };\n      setEnabledCards((currentCards) =>\n        sortCards([\n          ...currentCards.filter(\n            (currentCard) => currentCard.element !== element,\n          ),\n          card,\n        ]),\n      );\n\n      return () => {\n        setEnabledCards((currentCards) => {\n          const currentCard = currentCards.find(\n            (registeredCard) => registeredCard.element === element,\n          );\n          return currentCard === card\n            ? currentCards.filter((registeredCard) => registeredCard !== card)\n            : currentCards;\n        });\n      };\n    },\n    [],\n  );\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: re-sorts registered cards after children move.\n  useIsomorphicLayoutEffect(() => {\n    setEnabledCards((currentCards) => {\n      const sortedCards = sortCards(currentCards);\n      return cardsAreEqual(currentCards, sortedCards)\n        ? currentCards\n        : sortedCards;\n    });\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 enabledCards.findIndex((card) => card.value === cardValue) === 0;\n    },\n    [enabledCards],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      registerCard,\n      hasEnabledSelection:\n        !multiSelect &&\n        typeof value === \"string\" &&\n        enabledCards.some((card) => card.value === value),\n      isSelected,\n      isFirstChild,\n      disabled,\n      multiSelect,\n      value,\n    }),\n    [\n      select,\n      registerCard,\n      enabledCards,\n      isSelected,\n      disabled,\n      multiSelect,\n      isFirstChild,\n      value,\n    ],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const doc = ownerDocument(groupRef.current);\n\n    const currentCard = (doc.activeElement as HTMLElement | null)?.closest(\n      \".saltInteractableCard\",\n    );\n    // Only enabled cards are registered; other key events just call onKeyDown.\n    const currentIndex = currentCard\n      ? enabledCards.findIndex((card) => card.element === currentCard)\n      : -1;\n\n    if (currentIndex === -1) {\n      onKeyDown?.(event);\n      return;\n    }\n\n    const nextIndex = (currentIndex + 1) % enabledCards.length;\n    const prevIndex =\n      (currentIndex - 1 + enabledCards.length) % enabledCards.length;\n\n    if (event.key === \" \") {\n      event.preventDefault();\n      select(event, enabledCards[currentIndex].value);\n    }\n\n    // Leave modified arrow keys, e.g. Alt + Arrow for browser history, to the browser.\n    if (!multiSelect && !event.altKey && !event.ctrlKey && !event.metaKey) {\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          event.preventDefault();\n          select(event, enabledCards[nextIndex].value);\n          enabledCards[nextIndex]?.element.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          event.preventDefault();\n          select(event, enabledCards[prevIndex].value);\n          enabledCards[prevIndex]?.element.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":["makePrefixer","forwardRef","InteractableCardGroup","useWindow","useComponentCssInjection","interactableCardGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useIsomorphicLayoutEffect","isSelected","useMemo","ownerDocument","jsx","InteractableCardGroupContext","clsx"],"mappings":"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"}

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

@@ -1 +1 @@
-{"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":["createContext","useContext"],"mappings":";;;;;;;;;;;AAiBO,MAAM,4BAAA,GAA+BA,2BAAA,CAE1C,8BAAA,EAAgC,MAAS;AAEpC,SAAS,wBAAA,GAA2B;AACzC,EAAA,OAAOC,iBAAW,4BAA4B,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  registerCard?: (\n    value: InteractableCardValue,\n    element: HTMLElement,\n  ) => () => void;\n  hasEnabledSelection?: boolean;\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":["createContext","useContext"],"mappings":";;;;;;;;;;;AAsBO,MAAM,4BAAA,GAA+BA,2BAAA,CAE1C,8BAAA,EAAgC,MAAS;AAEpC,SAAS,wBAAA,GAA2B;AACzC,EAAA,OAAOC,iBAAW,4BAA4B,CAAA;AAChD;;;;;"}

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

@@ -37,7 +37,7 @@ const useInteractableCard = ({
     onBlur == null ? void 0 : onBlur(event);
   };
   const handleKeyDown = (event) => {
-    if (event.key === enter || event.key === space) {
+    if (!disabled && (event.key === enter || event.key === space)) {
       setkeyIsDown(event.key);
       event.preventDefault();
       setActive(true);
@@ -47,8 +47,7 @@ const useInteractableCard = ({
   };
   const cardProps = {
     "aria-disabled": disabled ? true : void 0,
-    disabled,
-    tabIndex: disabled ? -1 : 0,
+    tabIndex: disabled ? void 0 : 0,
     onBlur: handleBlur,
     onClick: !disabled ? handleClick : void 0,
     onKeyDown: handleKeyDown,

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

@@ -1 +1 @@
-{"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":["useState","useEffect"],"mappings":";;;;AA6BO,MAAM,sBAAsB,CAAoB;AAAA,EACrD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAA2C;AACzC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAA,GAAQ,OAAA;AACd,EAAA,MAAM,KAAA,GAAQ,GAAA;AAEd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAA,IAAI,SAAA,KAAc,KAAA,IAAS,SAAA,KAAc,KAAA,IAAS,MAAA,EAAQ;AACxD,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MACjB;AAAA,IACF,GAAG,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,IAChB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,SAAS,CAAC,CAAA;AAEtB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyB;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAyB;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AAAA,EACX,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4B;AACjD,IAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,KAAA,IAAS,KAAA,CAAM,QAAQ,KAAA,EAAO;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,IACZ;AACA,IAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAAA,EACd,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,eAAA,EAAiB,WAAW,IAAA,GAAO,MAAA;AAAA,IACnC,QAAA;AAAA,IACA,QAAA,EAAU,WAAW,EAAA,GAAK,CAAA;AAAA,IAC1B,MAAA,EAAQ,UAAA;AAAA,IACR,OAAA,EAAS,CAAC,QAAA,GAAW,WAAA,GAAc,MAAA;AAAA,IACnC,SAAA,EAAW,aAAA;AAAA,IACX,OAAA,EAAS;AAAA,GACX;AAEA,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;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    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 (!disabled && (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    tabIndex: disabled ? undefined : 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":["useState","useEffect"],"mappings":";;;;AA4BO,MAAM,sBAAsB,CAAoB;AAAA,EACrD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAA2C;AACzC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAA,GAAQ,OAAA;AACd,EAAA,MAAM,KAAA,GAAQ,GAAA;AAEd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAA,IAAI,SAAA,KAAc,KAAA,IAAS,SAAA,KAAc,KAAA,IAAS,MAAA,EAAQ;AACxD,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MACjB;AAAA,IACF,GAAG,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,IAChB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,SAAS,CAAC,CAAA;AAEtB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyB;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAyB;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AAAA,EACX,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4B;AACjD,IAAA,IAAI,CAAC,QAAA,KAAa,KAAA,CAAM,QAAQ,KAAA,IAAS,KAAA,CAAM,QAAQ,KAAA,CAAA,EAAQ;AAC7D,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,IACZ;AACA,IAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAAA,EACd,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,eAAA,EAAiB,WAAW,IAAA,GAAO,MAAA;AAAA,IACnC,QAAA,EAAU,WAAW,MAAA,GAAY,CAAA;AAAA,IACjC,MAAA,EAAQ,UAAA;AAAA,IACR,OAAA,EAAS,CAAC,QAAA,GAAW,WAAA,GAAc,MAAA;AAAA,IACnC,SAAA,EAAW,aAAA;AAAA,IACX,OAAA,EAAS;AAAA,GACX;AAEA,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-cjs/kbd/Kbd.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltKbd-primary {\n  --kbd-background: var(--salt-container-primary-background);\n}\n\n.saltKbd-secondary {\n  --kbd-background: var(--salt-container-secondary-background);\n}\n\n.saltKbd-tertiary {\n  --kbd-background: var(--salt-container-tertiary-background);\n}\n\n.saltKbd {\n  display: inline-flex;\n  box-sizing: border-box;\n  width: fit-content;\n  border-radius: var(--salt-palette-corner-weaker);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n  background: var(--kbd-background);\n  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-bold-borderColor);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  align-items: center;\n  padding: 0 var(--salt-spacing-50);\n  text-transform: capitalize;\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-code-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-style: normal;\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n";
+var css_248z = ".saltKbd-primary {\n  --kbd-background: var(--salt-container-primary-background);\n}\n\n.saltKbd-secondary {\n  --kbd-background: var(--salt-container-secondary-background);\n}\n\n.saltKbd-tertiary {\n  --kbd-background: var(--salt-container-tertiary-background);\n}\n\n.saltKbd {\n  display: inline-flex;\n  box-sizing: border-box;\n  width: fit-content;\n  border-radius: var(--salt-palette-corner-weaker);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n  background: var(--kbd-background);\n  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-bold-borderColor);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  align-items: center;\n  padding: 0 var(--salt-spacing-50);\n  text-transform: capitalize;\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-code-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-style: normal;\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Kbd.css.js.map

package/dist-cjs/link/Link.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltLink {\n  --link-color: \"inherit\";\n  --link-color-hover: \"inherit\";\n  --link-color-active: \"inherit\";\n  --link-color-visited: var(--salt-content-foreground-visited);\n  --link-color-focus: \"inherit\";\n  --link-focus-outlineColor: currentColor;\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n}\n\n.saltLink-underlineDefault {\n  --link-textDecoration: var(--salt-typography-textDecoration-underline);\n  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);\n  /* Active takes default */\n  --link-textDecoration-active: var(--link-textDecoration);\n  /* Focus takes hover */\n  --link-textDecoration-focus: var(--link-textDecoration-hover);\n  /* Visited takes default */\n  --link-textDecoration-visited: var(--link-textDecoration);\n}\n\n.saltLink-underlineNever {\n  --link-textDecoration: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);\n}\n\n/* Main css class */\n.saltLink.saltText {\n  color: var(--link-color);\n  letter-spacing: var(--salt-text-letterSpacing);\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltLink-primary {\n  --link-color: var(--salt-content-primary-foreground);\n  --link-color-hover: var(--salt-content-primary-foreground);\n  --link-color-active: var(--salt-content-primary-foreground);\n  --link-color-focus: var(--salt-content-primary-foreground);\n  --link-focus-outlineColor: var(--salt-focused-outlineColor);\n  --link-color-visited: var(--salt-content-foreground-visited);\n}\n\n/* Secondary variant */\n.saltLink-secondary {\n  --link-color: var(--salt-content-secondary-foreground);\n  --link-color-hover: var(--salt-content-secondary-foreground);\n  --link-color-active: var(--salt-content-secondary-foreground);\n  --link-color-focus: var(--salt-content-secondary-foreground);\n  --link-focus-outlineColor: var(--salt-focused-outlineColor);\n  --link-color-visited: var(--salt-content-foreground-visited);\n}\n\n.saltLink-accent {\n  --link-color: var(--salt-content-accent-foreground);\n  --link-color-hover: var(--salt-content-accent-foreground);\n  --link-color-active: var(--salt-content-accent-foreground);\n  --link-color-focus: var(--salt-content-accent-foreground);\n  --link-focus-outlineColor: var(--salt-focused-outlineColor);\n  --link-color-visited: var(--salt-content-foreground-visited);\n}\n\n/* External link's icon */\n.saltLink .saltLink-icon {\n  margin-left: var(--salt-spacing-75);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  color: var(--saltLink-color-visited, var(--link-color-visited));\n  text-decoration: var(--link-textDecoration-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  color: var(--saltLink-color-hover, var(--link-color-hover));\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  color: var(--saltLink-color-active, var(--link-color-active));\n  text-decoration: var(--link-textDecoration-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  color: var(--saltLink-color-focus, var(--link-color-focus));\n  outline: var(--salt-focused-outline);\n  outline-color: var(--link-focus-outlineColor);\n  text-decoration: var(--link-textDecoration-focus);\n}\n\n/* Class for ADA content - visually hidden but accessible to screen readers.\n   Uses clip-path and prevents user selection so the text isn't included\n   when users copy the link's visible content. */\n.saltLink-externalLinkADA {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n  user-select: none;\n  -webkit-user-select: none;\n}\n";
+var css_248z = ".saltLink {\n  --link-color: \"inherit\";\n  --link-color-hover: \"inherit\";\n  --link-color-active: \"inherit\";\n  --link-color-visited: var(--salt-content-foreground-visited, var(--link-color));\n  --link-color-focus: \"inherit\";\n  --link-focus-outlineColor: currentColor;\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n}\n\n.saltLink-underlineDefault {\n  --link-textDecoration: var(--salt-typography-textDecoration-underline);\n  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);\n  /* Active takes default */\n  --link-textDecoration-active: var(--link-textDecoration);\n  /* Focus takes hover */\n  --link-textDecoration-focus: var(--link-textDecoration-hover);\n  /* Visited takes default */\n  --link-textDecoration-visited: var(--link-textDecoration);\n}\n\n.saltLink-underlineNever {\n  --link-textDecoration: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);\n}\n\n/* Main css class */\n.saltLink.saltText {\n  color: var(--link-color);\n  letter-spacing: var(--salt-text-letterSpacing);\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltLink-primary {\n  --link-color: var(--salt-content-primary-foreground);\n  --link-color-hover: var(--salt-content-primary-foreground);\n  --link-color-active: var(--salt-content-primary-foreground);\n  --link-color-focus: var(--salt-content-primary-foreground);\n  --link-focus-outlineColor: var(--salt-focused-outlineColor);\n  --link-color-visited: var(--salt-content-foreground-visited, var(--link-color));\n}\n\n/* Secondary variant */\n.saltLink-secondary {\n  --link-color: var(--salt-content-secondary-foreground);\n  --link-color-hover: var(--salt-content-secondary-foreground);\n  --link-color-active: var(--salt-content-secondary-foreground);\n  --link-color-focus: var(--salt-content-secondary-foreground);\n  --link-focus-outlineColor: var(--salt-focused-outlineColor);\n  --link-color-visited: var(--salt-content-foreground-visited, var(--link-color));\n}\n\n.saltLink-accent {\n  --link-color: var(--salt-content-accent-foreground);\n  --link-color-hover: var(--salt-content-accent-foreground);\n  --link-color-active: var(--salt-content-accent-foreground);\n  --link-color-focus: var(--salt-content-accent-foreground);\n  --link-focus-outlineColor: var(--salt-focused-outlineColor);\n  --link-color-visited: var(--salt-content-foreground-visited, var(--link-color));\n}\n\n/* External link's icon */\n.saltLink .saltLink-icon {\n  margin-left: var(--salt-spacing-75);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  color: var(--saltLink-color-visited, var(--link-color-visited));\n  text-decoration: var(--link-textDecoration-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  color: var(--saltLink-color-hover, var(--link-color-hover));\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  color: var(--saltLink-color-active, var(--link-color-active));\n  text-decoration: var(--link-textDecoration-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  color: var(--saltLink-color-focus, var(--link-color-focus));\n  outline: var(--salt-focused-outline);\n  outline-color: var(--link-focus-outlineColor);\n  text-decoration: var(--link-textDecoration-focus);\n}\n\n/* Class for ADA content - visually hidden but accessible to screen readers.\n   Uses clip-path and prevents user selection so the text isn't included\n   when users copy the link's visible content. */\n.saltLink-externalLinkADA {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n  user-select: none;\n  -webkit-user-select: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Link.css.js.map

package/dist-cjs/link/Link.js

@@ -8,6 +8,8 @@ var React = require('react');
 var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
 require('../text/Code.js');
 require('../text/Display.js');
+require('../text/Editorial.js');
+require('../text/Eyebrow.js');
 require('../text/Headings.js');
 require('../text/Label.js');
 var Text = require('../text/Text.js');

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  forwardRef,\n  type ReactElement,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer, type RenderPropsType } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\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\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n  /**\n   * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /*\n   * The color of the text. Defaults to \"primary\".\n   */\n  color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n  /**\n   *\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    underline = \"default\",\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  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as={LinkAction}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`underline${capitalize(underline)}`),\n        {\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      href={href}\n      ref={ref}\n      target={target}\n      color=\"inherit\"\n      externalLinkContent={\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>\n            Opens in a new tab\n          </span>\n        </>\n      }\n      {...rest}\n    >\n      {children}\n    </Text>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsx","Text","LinkAction","clsx","capitalize","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAiCrC,MAAM,IAAA,GAAOC,gBAAA,CAAyC,SAASC,KAAAA,CACpE;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,SAAA,GAAY,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GAAA,EACyB;AACzB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,MAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAEjC,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AACtC,EAAA,MAAM,iBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAIC,qBAAA;AAAA,MACJ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,SAAA,EAAYC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD;AAAA,UACE,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA,EAAM,SAAA;AAAA,MACN,qCACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,iBAAA,mCACE,iBAAA,EAAA,EAAkB,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAAA,uCAEjE,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF,CAAA;AAAA,MAED,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  forwardRef,\n  type ReactElement,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer, type RenderPropsType } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\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\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n  /**\n   * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /*\n   * The color of the text. Defaults to \"primary\".\n   */\n  color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n  /**\n   *\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    underline = \"default\",\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  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as={LinkAction}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`underline${capitalize(underline)}`),\n        {\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      href={href}\n      ref={ref}\n      target={target}\n      color=\"inherit\"\n      externalLinkContent={\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>\n            Opens in a new tab\n          </span>\n        </>\n      }\n      {...rest}\n    >\n      {children}\n    </Text>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsx","Text","LinkAction","clsx","capitalize","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAiCrC,MAAM,IAAA,GAAOC,gBAAA,CAAyC,SAASC,KAAAA,CACpE;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,SAAA,GAAY,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GAAA,EACyB;AACzB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,MAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAEjC,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AACtC,EAAA,MAAM,iBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAIC,qBAAA;AAAA,MACJ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,SAAA,EAAYC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD;AAAA,UACE,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA,EAAM,SAAA;AAAA,MACN,qCACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,iBAAA,mCACE,iBAAA,EAAA,EAAkB,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAAA,uCAEjE,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF,CAAA;AAAA,MAED,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/link/LinkAction.js

@@ -12,14 +12,15 @@ require('../viewport/ViewportProvider.js');
 const LinkAction = React.forwardRef(
   function LinkAction2({ externalLinkContent, ...props }, ref) {
     const link = renderProps.renderProps("a", { ...props, ref });
-    if (link.props.target !== "_blank" || !externalLinkContent) {
+    const linkProps = link.props;
+    if (linkProps.target !== "_blank" || !externalLinkContent) {
       return link;
     }
     return React.cloneElement(
       link,
       void 0,
       /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        link.props.children,
+        linkProps.children,
         externalLinkContent
       ] })
     );

package/dist-cjs/link/LinkAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkAction.js","sources":["../src/link/LinkAction.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { renderProps } from \"../utils\";\n\ninterface LinkActionProps extends ComponentPropsWithoutRef<\"a\"> {\n  externalLinkContent?: ReactNode;\n}\n\nexport const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(\n  function LinkAction({ externalLinkContent, ...props }, ref) {\n    // Resolve the final element before deciding whether to append external-link\n    // content. A JSX `render` element can override `target`, so checking\n    // `props.target` would make the icon and announcement disagree with the\n    // rendered link.\n    const link = renderProps(\"a\", { ...props, ref });\n\n    if (link.props.target !== \"_blank\" || !externalLinkContent) {\n      return link;\n    }\n\n    return cloneElement(\n      link,\n      undefined,\n      <>\n        {link.props.children}\n        {externalLinkContent}\n      </>,\n    );\n  },\n);\n"],"names":["forwardRef","LinkAction","renderProps","cloneElement","jsxs","Fragment"],"mappings":";;;;;;;;;;;AAYO,MAAM,UAAA,GAAaA,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,EAAE,qBAAqB,GAAG,KAAA,IAAS,GAAA,EAAK;AAK1D,IAAA,MAAM,OAAOC,uBAAA,CAAY,GAAA,EAAK,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAE/C,IAAA,IAAI,IAAA,CAAK,KAAA,CAAM,MAAA,KAAW,QAAA,IAAY,CAAC,mBAAA,EAAqB;AAC1D,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAOC,kBAAA;AAAA,MACL,IAAA;AAAA,MACA,MAAA;AAAA,sBACAC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,KAAA,CAAM,QAAA;AAAA,QACX;AAAA,OAAA,EACH;AAAA,KACF;AAAA,EACF;AACF;;;;"}
+{"version":3,"file":"LinkAction.js","sources":["../src/link/LinkAction.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { renderProps } from \"../utils\";\n\ninterface LinkActionProps extends ComponentPropsWithoutRef<\"a\"> {\n  externalLinkContent?: ReactNode;\n}\n\nexport const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(\n  function LinkAction({ externalLinkContent, ...props }, ref) {\n    // Resolve the final element before deciding whether to append external-link\n    // content. A JSX `render` element can override `target`, so checking\n    // `props.target` would make the icon and announcement disagree with the\n    // rendered link.\n    const link = renderProps(\"a\", { ...props, ref });\n\n    const linkProps = link.props as ComponentPropsWithoutRef<\"a\">;\n\n    if (linkProps.target !== \"_blank\" || !externalLinkContent) {\n      return link;\n    }\n\n    return cloneElement(\n      link,\n      undefined,\n      <>\n        {linkProps.children}\n        {externalLinkContent}\n      </>,\n    );\n  },\n);\n"],"names":["forwardRef","LinkAction","renderProps","cloneElement","jsxs","Fragment"],"mappings":";;;;;;;;;;;AAYO,MAAM,UAAA,GAAaA,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,EAAE,qBAAqB,GAAG,KAAA,IAAS,GAAA,EAAK;AAK1D,IAAA,MAAM,OAAOC,uBAAA,CAAY,GAAA,EAAK,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAE/C,IAAA,MAAM,YAAY,IAAA,CAAK,KAAA;AAEvB,IAAA,IAAI,SAAA,CAAU,MAAA,KAAW,QAAA,IAAY,CAAC,mBAAA,EAAqB;AACzD,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAOC,kBAAA;AAAA,MACL,IAAA;AAAA,MACA,MAAA;AAAA,sBACAC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,SAAA,CAAU,QAAA;AAAA,QACV;AAAA,OAAA,EACH;AAAA,KACF;AAAA,EACF;AACF;;;;"}

package/dist-cjs/link-button/LinkButton.js

@@ -62,14 +62,15 @@ const LinkButton = React.forwardRef(
       target,
       children
     });
-    if (linkButton.props.target !== "_blank") {
+    const linkButtonProps = linkButton.props;
+    if (linkButtonProps.target !== "_blank") {
       return linkButton;
     }
     return React.cloneElement(
       linkButton,
       void 0,
       /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        linkButton.props.children,
+        linkButtonProps.children,
         LinkButtonIconComponent && /* @__PURE__ */ jsxRuntime.jsx(
           LinkButtonIconComponent,
           {

package/dist-cjs/link-button/LinkButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sources":["../src/link-button/LinkButton.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  cloneElement,\n  forwardRef,\n} from \"react\";\nimport { useButton } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport {\n  capitalize,\n  makePrefixer,\n  type RenderPropsType,\n  renderProps,\n} from \"../utils\";\n\nimport linkButtonCss from \"./LinkButton.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkButton\");\n\nexport interface LinkButtonProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * Icon component displayed when `target=\"_blank\"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * The sentiment of the button. Options are 'accented' and 'neutral'.\n   * 'neutral' is the default value.\n   */\n  sentiment?: \"accented\" | \"neutral\";\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link button.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  function LinkButton(props, ref) {\n    const {\n      children,\n      className,\n      IconComponent,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      sentiment = \"neutral\",\n      target = \"_self\",\n      underline = \"default\",\n      ...rest\n    } = props;\n\n    const { active, buttonProps } = useButton<HTMLAnchorElement>({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n    });\n    // Native anchors with an href do not require tabIndex=\"0\".\n    const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-button\",\n      css: linkButtonCss,\n      window: targetWindow,\n    });\n    const { ExternalIcon } = useIcon();\n\n    const LinkButtonIconComponent =\n      IconComponent === undefined ? ExternalIcon : IconComponent;\n\n    const linkButton = renderProps(\"a\", {\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(`underline${capitalize(underline)}`),\n        { [withBaseName(\"active\")]: active },\n        className,\n      ),\n      ...activeStateProps,\n      ...rest,\n      ref,\n      target,\n      children,\n    });\n\n    if (linkButton.props.target !== \"_blank\") {\n      return linkButton;\n    }\n\n    return cloneElement(\n      linkButton,\n      undefined,\n      <>\n        {linkButton.props.children}\n        {LinkButtonIconComponent && (\n          <LinkButtonIconComponent\n            className={withBaseName(\"icon\")}\n            aria-hidden\n          />\n        )}\n        <span className={withBaseName(\"externalLinkADA\")}>\n          Opens in a new tab\n        </span>\n      </>,\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","LinkButton","useButton","useWindow","useComponentCssInjection","linkButtonCss","useIcon","renderProps","clsx","capitalize","cloneElement","jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAyB3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,GAAY,SAAA;AAAA,MACZ,MAAA,GAAS,OAAA;AAAA,MACT,SAAA,GAAY,SAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAIC,mBAAA,CAA6B;AAAA,MAC3D,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,kBAAiB,GAAI,WAAA;AAErD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAEjC,IAAA,MAAM,uBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,IAAA,MAAM,UAAA,GAAaC,wBAAY,GAAA,EAAK;AAAA,MAClC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,YAAA,CAAa,CAAA,SAAA,EAAYC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,EAAO;AAAA,QACnC;AAAA,OACF;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,IAAI,UAAA,CAAW,KAAA,CAAM,MAAA,KAAW,QAAA,EAAU;AACxC,MAAA,OAAO,UAAA;AAAA,IACT;AAEA,IAAA,OAAOC,kBAAA;AAAA,MACL,UAAA;AAAA,MACA,MAAA;AAAA,sBACAC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,KAAA,CAAM,QAAA;AAAA,QACjB,uBAAA,oBACCC,cAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,uCAED,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF;AAAA,KACF;AAAA,EACF;AACF;;;;"}
+{"version":3,"file":"LinkButton.js","sources":["../src/link-button/LinkButton.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  cloneElement,\n  forwardRef,\n} from \"react\";\nimport { useButton } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport {\n  capitalize,\n  makePrefixer,\n  type RenderPropsType,\n  renderProps,\n} from \"../utils\";\n\nimport linkButtonCss from \"./LinkButton.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkButton\");\n\nexport interface LinkButtonProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * Icon component displayed when `target=\"_blank\"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * The sentiment of the button. Options are 'accented' and 'neutral'.\n   * 'neutral' is the default value.\n   */\n  sentiment?: \"accented\" | \"neutral\";\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link button.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  function LinkButton(props, ref) {\n    const {\n      children,\n      className,\n      IconComponent,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      sentiment = \"neutral\",\n      target = \"_self\",\n      underline = \"default\",\n      ...rest\n    } = props;\n\n    const { active, buttonProps } = useButton<HTMLAnchorElement>({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n    });\n    // Native anchors with an href do not require tabIndex=\"0\".\n    const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-button\",\n      css: linkButtonCss,\n      window: targetWindow,\n    });\n    const { ExternalIcon } = useIcon();\n\n    const LinkButtonIconComponent =\n      IconComponent === undefined ? ExternalIcon : IconComponent;\n\n    const linkButton = renderProps(\"a\", {\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(`underline${capitalize(underline)}`),\n        { [withBaseName(\"active\")]: active },\n        className,\n      ),\n      ...activeStateProps,\n      ...rest,\n      ref,\n      target,\n      children,\n    });\n\n    const linkButtonProps = linkButton.props as ComponentPropsWithoutRef<\"a\">;\n\n    if (linkButtonProps.target !== \"_blank\") {\n      return linkButton;\n    }\n\n    return cloneElement(\n      linkButton,\n      undefined,\n      <>\n        {linkButtonProps.children}\n        {LinkButtonIconComponent && (\n          <LinkButtonIconComponent\n            className={withBaseName(\"icon\")}\n            aria-hidden\n          />\n        )}\n        <span className={withBaseName(\"externalLinkADA\")}>\n          Opens in a new tab\n        </span>\n      </>,\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","LinkButton","useButton","useWindow","useComponentCssInjection","linkButtonCss","useIcon","renderProps","clsx","capitalize","cloneElement","jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAyB3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,GAAY,SAAA;AAAA,MACZ,MAAA,GAAS,OAAA;AAAA,MACT,SAAA,GAAY,SAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAIC,mBAAA,CAA6B;AAAA,MAC3D,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,kBAAiB,GAAI,WAAA;AAErD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAEjC,IAAA,MAAM,uBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,IAAA,MAAM,UAAA,GAAaC,wBAAY,GAAA,EAAK;AAAA,MAClC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,YAAA,CAAa,CAAA,SAAA,EAAYC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,EAAO;AAAA,QACnC;AAAA,OACF;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,kBAAkB,UAAA,CAAW,KAAA;AAEnC,IAAA,IAAI,eAAA,CAAgB,WAAW,QAAA,EAAU;AACvC,MAAA,OAAO,UAAA;AAAA,IACT;AAEA,IAAA,OAAOC,kBAAA;AAAA,MACL,UAAA;AAAA,MACA,MAAA;AAAA,sBACAC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,eAAA,CAAgB,QAAA;AAAA,QAChB,uBAAA,oBACCC,cAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,uCAED,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF;AAAA,KACF;AAAA,EACF;AACF;;;;"}

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

@@ -5,7 +5,8 @@ var styles = require('@salt-ds/styles');
 var window$1 = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
-var ListControlContext = require('../list-control/ListControlContext.js');
+var ListControlNavigationKeys = require('../list-control/ListControlNavigationKeys.js');
+var ListControlProvider = require('../list-control/ListControlProvider.js');
 var ListControlState = require('../list-control/ListControlState.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
@@ -66,7 +67,7 @@ const ListBox = React.forwardRef(function ListBox2(props, ref) {
     setListRef
   } = listControl;
   const typeaheadString = React.useRef("");
-  const typeaheadTimeout = React.useRef();
+  const typeaheadTimeout = React.useRef(void 0);
   const handleTypeahead = (event) => {
     if (typeaheadTimeout.current) {
       clearTimeout(typeaheadTimeout.current);
@@ -75,10 +76,7 @@ const ListBox = React.forwardRef(function ListBox2(props, ref) {
     typeaheadTimeout.current = window.setTimeout(() => {
       typeaheadString.current = "";
     }, 500);
-    let newOption = getOptionFromSearch(typeaheadString.current, activeState);
-    if (!newOption) {
-      newOption = getOptionFromSearch(typeaheadString.current);
-    }
+    const newOption = getOptionFromSearch(typeaheadString.current, activeState);
     if (newOption) {
       setActive(newOption);
       setFocusVisibleState(true);
@@ -87,6 +85,9 @@ const ListBox = React.forwardRef(function ListBox2(props, ref) {
   const handleKeyDown = (event) => {
     var _a;
     onKeyDown == null ? void 0 : onKeyDown(event);
+    if (ListControlNavigationKeys.isModifiedListControlNavigationKey(event)) {
+      return;
+    }
     if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
       event.preventDefault();
       event.stopPropagation();
@@ -96,26 +97,19 @@ const ListBox = React.forwardRef(function ListBox2(props, ref) {
     if (activeOption === void 0) {
       return;
     }
-    let newActive;
+    const isNavigationKey = ListControlNavigationKeys.isListControlNavigationKey(event.key);
+    if (isNavigationKey) {
+      event.preventDefault();
+    }
+    const newActive = isNavigationKey ? ListControlNavigationKeys.getListControlNavigationTarget(event.key, activeOption, {
+      getFirstOption,
+      getLastOption,
+      getOptionAfter,
+      getOptionBefore,
+      getOptionPageAbove,
+      getOptionPageBelow
+    }) : void 0;
     switch (event.key) {
-      case "ArrowDown":
-        newActive = getOptionAfter(activeOption) ?? getLastOption();
-        break;
-      case "ArrowUp":
-        newActive = getOptionBefore(activeOption) ?? getFirstOption();
-        break;
-      case "Home":
-        newActive = getFirstOption();
-        break;
-      case "End":
-        newActive = getLastOption();
-        break;
-      case "PageUp":
-        newActive = getOptionPageAbove(activeOption);
-        break;
-      case "PageDown":
-        newActive = getOptionPageBelow(activeOption);
-        break;
       case "Enter":
       case " ":
         if ((activeState == null ? void 0 : activeState.disabled) || typeaheadString.current.trim().length > 0 && event.key === " ") {
@@ -130,7 +124,6 @@ const ListBox = React.forwardRef(function ListBox2(props, ref) {
         break;
     }
     if (newActive && newActive.data.id !== (activeState == null ? void 0 : activeState.id)) {
-      event.preventDefault();
       setActive(newActive.data);
       setFocusVisibleState(true);
     }
@@ -173,7 +166,7 @@ const ListBox = React.forwardRef(function ListBox2(props, ref) {
     setActive(void 0);
   };
   const handleRef = useForkRef.useForkRef(setListRef, ref);
-  return /* @__PURE__ */ jsxRuntime.jsx(ListControlContext.ListControlContext.Provider, { value: listControl, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(ListControlProvider.ListControlProvider, { value: listControl, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: clsx.clsx(

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

@@ -1 +1 @@
-{"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  forwardRef,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  useRef,\n} from \"react\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n  defaultValueToString,\n  type ListControlProps,\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    setListRef,\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    if (activeOption === undefined) {\n      return;\n    }\n\n    let newActive:\n      | { data: OptionValue<Item>; element: HTMLElement }\n      | undefined;\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          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: ReturnType<typeof getOptionAtIndex>;\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(setListRef, 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":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","useForkRef","jsx","ListControlContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;AA8CA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAExC,MAAM,OAAA,GAAUC,gBAAA,CAAW,SAASC,QAAAA,CACzC,OACA,GAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA,GAAgBC,qCAAA;AAAA,IAChB,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,eAAeC,kBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA,EAAKC,SAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAcC,+BAAA,CAAqB;AAAA,IACvC,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,WAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACF,GAAI,WAAA;AAEJ,EAAA,MAAM,eAAA,GAAkBC,aAAO,EAAE,CAAA;AACjC,EAAA,MAAM,mBAAmBA,YAAA,EAA2B;AAEpD,EAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAyC;AAChE,IAAA,IAAI,iBAAiB,OAAA,EAAS;AAC5B,MAAA,YAAA,CAAa,iBAAiB,OAAO,CAAA;AAAA,IACvC;AACA,IAAA,eAAA,CAAgB,WAAW,KAAA,CAAM,GAAA;AACjC,IAAA,gBAAA,CAAiB,OAAA,GAAU,MAAA,CAAO,UAAA,CAAW,MAAM;AACjD,MAAA,eAAA,CAAgB,OAAA,GAAU,EAAA;AAAA,IAC5B,GAAG,GAAG,CAAA;AAEN,IAAA,IAAI,SAAA,GAAY,mBAAA,CAAoB,eAAA,CAAgB,OAAA,EAAS,WAAW,CAAA;AAExE,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA,SAAA,GAAY,mBAAA,CAAoB,gBAAgB,OAAO,CAAA;AAAA,IACzD;AAEA,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,SAAA,CAAU,SAAS,CAAA;AACnB,MAAA,oBAAA,CAAqB,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAyC;AA/HlE,IAAA,IAAA,EAAA;AAgII,IAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAEZ,IAAA,IACE,KAAA,CAAM,GAAA,CAAI,MAAA,KAAW,CAAA,IACrB,CAAC,KAAA,CAAM,OAAA,IACP,CAAC,KAAA,CAAM,OAAA,IACP,CAAC,KAAA,CAAM,MAAA,EACP;AACA,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,IACvB;AAEA,IAAA,MAAM,YAAA,GAAe,WAAA,KAAA,CAAe,EAAA,GAAA,cAAA,EAAe,KAAf,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,IAAA,CAAA;AAEtD,IAAA,IAAI,iBAAiB,MAAA,EAAW;AAC9B,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,SAAA;AAGJ,IAAA,QAAQ,MAAM,GAAA;AAAK,MACjB,KAAK,WAAA;AACH,QAAA,SAAA,GAAY,cAAA,CAAe,YAAY,CAAA,IAAK,aAAA,EAAc;AAC1D,QAAA;AAAA,MACF,KAAK,SAAA;AACH,QAAA,SAAA,GAAY,eAAA,CAAgB,YAAY,CAAA,IAAK,cAAA,EAAe;AAC5D,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,SAAA,GAAY,cAAA,EAAe;AAC3B,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,SAAA,GAAY,aAAA,EAAc;AAC1B,QAAA;AAAA,MACF,KAAK,QAAA;AACH,QAAA,SAAA,GAAY,mBAAmB,YAAY,CAAA;AAC3C,QAAA;AAAA,MACF,KAAK,UAAA;AACH,QAAA,SAAA,GAAY,mBAAmB,YAAY,CAAA;AAC3C,QAAA;AAAA,MACF,KAAK,OAAA;AAAA,MACL,KAAK,GAAA;AACH,QAAA,IAAA,CACE,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAa,QAAA,KACZ,eAAA,CAAgB,OAAA,CAAQ,IAAA,GAAO,MAAA,GAAS,CAAA,IAAK,KAAA,CAAM,GAAA,KAAQ,GAAA,EAC5D;AACA,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA;AAAA,QACF;AAEA,QAAA,IAAI,CAAC,WAAA,EAAa;AAChB,UAAA;AAAA,QACF;AAEA,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,MAAA,CAAO,OAAO,WAAW,CAAA;AAEzB,QAAA;AAAA;AAGJ,IAAA,IAAI,SAAA,IAAa,SAAA,CAAU,IAAA,CAAK,EAAA,MAAO,2CAAa,EAAA,CAAA,EAAI;AACtD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,SAAA,CAAU,UAAU,IAAI,CAAA;AACxB,MAAA,oBAAA,CAAqB,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,YAAA,GAAeA,aAAO,KAAK,CAAA;AAEjC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAsC;AACzD,IAAA,IAAI,aAAa,OAAA,EAAS;AACxB,MAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AACvB,MAAA;AAAA,IACF;AAEA,IAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,IAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AAGvB,IAAA,MAAM,WAAA,GAAc,WAAA,GAAc,gBAAA,CAAiB,WAAW,CAAA,GAAI,EAAA;AAClE,IAAA,IAAI,SAAA;AAGJ,IAAA,IAAI,cAAc,CAAA,EAAG;AACnB,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,aAAA,CAAc,SAAS,CAAA,EAAG;AAC5B,MAAA,SAAA,GAAY,kBAAA;AAAA,QACV,CAAC,MAAA,KAAW,MAAA,CAAO,KAAA,KAAU,cAAc,CAAC;AAAA,QAC5C,GAAA,EAAI;AAAA,IACR;AAGA,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA,SAAA,GAAY,iBAAiB,CAAC,CAAA;AAAA,IAChC;AAEA,IAAA,SAAA,CAAU,uCAAW,IAAI,CAAA;AACzB,IAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAsC;AACxD,IAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,IAAA,SAAA,CAAU,MAAS,CAAA;AACnB,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AAAA,EACX,CAAA;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,oBAAA,CAAqB,KAAK,CAAA;AAC1B,IAAA,SAAA,CAAU,MAAS,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,MAAM,SAAA,GAAYC,qBAAA,CAAW,UAAA,EAAY,GAAG,CAAA;AAE5C,EAAA,uBACEC,cAAA,CAACC,qCAAA,CAAmB,QAAA,EAAnB,EAA4B,OAAO,WAAA,EAClC,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWE,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA,EAAS;AAAA,QACvC;AAAA,OACF;AAAA,MACA,IAAA,EAAK,SAAA;AAAA,MACL,yBAAuB,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAa,EAAA;AAAA,MACpC,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,sBAAA,EAAsB,WAAA;AAAA,MACtB,QAAA,EAAU,WAAW,EAAA,GAAK,CAAA;AAAA,MAC1B,SAAA,EAAW,aAAA;AAAA,MACX,MAAA,EAAQ,UAAA;AAAA,MACR,OAAA,EAAS,WAAA;AAAA,MACT,WAAA,EAAa,mBAAA;AAAA,MACb,WAAA,EAAa,eAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"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  forwardRef,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useRef,\n} from \"react\";\nimport {\n  getListControlNavigationTarget,\n  isListControlNavigationKey,\n  isModifiedListControlNavigationKey,\n  type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport {\n  defaultValueToString,\n  type ListControlProps,\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    setListRef,\n  } = listControl;\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>(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    const newOption = getOptionFromSearch(typeaheadString.current, activeState);\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 (isModifiedListControlNavigationKey(event)) {\n      return;\n    }\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    if (activeOption === undefined) {\n      return;\n    }\n\n    const isNavigationKey = isListControlNavigationKey(event.key);\n    if (isNavigationKey) {\n      event.preventDefault();\n    }\n\n    const newActive: OptionAndElement<Item> | undefined = isNavigationKey\n      ? getListControlNavigationTarget(event.key, activeOption, {\n          getFirstOption,\n          getLastOption,\n          getOptionAfter,\n          getOptionBefore,\n          getOptionPageAbove,\n          getOptionPageBelow,\n        })\n      : undefined;\n\n    switch (event.key) {\n      case \"Enter\":\n      case \" \":\n        if (\n          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      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: ReturnType<typeof getOptionAtIndex>;\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(setListRef, ref);\n\n  return (\n    <ListControlProvider 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    </ListControlProvider>\n  );\n}) as <Item = string>(\n  props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","isModifiedListControlNavigationKey","isListControlNavigationKey","getListControlNavigationTarget","useForkRef","jsx","ListControlProvider","clsx"],"mappings":"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"}

package/dist-cjs/list-control/ListControlContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type RefObject, type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n  id: string;\n  disabled: boolean;\n  value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n  openState: boolean;\n  setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n  register: (\n    optionValue: OptionValue<Item>,\n    element: HTMLElement,\n  ) => () => void;\n  selectedState: unknown[];\n  select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n  activeState?: OptionValue<Item>;\n  setActive: (option: OptionValue<Item>) => void;\n  multiselect: boolean;\n  focusVisibleState: boolean;\n  valueToString: (item: Item) => string;\n  disabled?: boolean;\n  listRef?: RefObject<HTMLDivElement>;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n  \"ListControlContext\",\n  {\n    openState: false,\n    setOpen() {\n      return undefined;\n    },\n    register() {\n      return () => undefined;\n    },\n    selectedState: [],\n    select() {\n      return undefined;\n    },\n    activeState: undefined,\n    setActive() {\n      return undefined;\n    },\n    multiselect: false,\n    focusVisibleState: false,\n    valueToString: defaultValueToString,\n    disabled: false,\n    listRef: undefined,\n  },\n);\n\nexport function useListControlContext<Item>() {\n  return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":["createContext","defaultValueToString","useContext"],"mappings":";;;;;;;;;;;;AA+BO,MAAM,kBAAA,GAAqBA,2BAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,GAAU;AACR,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,QAAA,GAAW;AACT,MAAA,OAAO,MAAM,MAAA;AAAA,IACf,CAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAA,GAAS;AACP,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,MAAA;AAAA,IACb,SAAA,GAAY;AACV,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,KAAA;AAAA,IACb,iBAAA,EAAmB,KAAA;AAAA,IACnB,aAAA,EAAeC,qCAAA;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb;AAEO,SAAS,qBAAA,GAA8B;AAC5C,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}
+{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type RefObject, type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n  id: string;\n  disabled: boolean;\n  value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n  openState: boolean;\n  setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n  register: (\n    optionValue: OptionValue<Item>,\n    element: HTMLElement,\n  ) => () => void;\n  selectedState: unknown[];\n  select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n  activeState?: OptionValue<Item>;\n  setActive: (option: OptionValue<Item>) => void;\n  multiselect: boolean;\n  focusVisibleState: boolean;\n  valueToString: (item: Item) => string;\n  disabled?: boolean;\n  listRef?: RefObject<HTMLDivElement | null>;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n  \"ListControlContext\",\n  {\n    openState: false,\n    setOpen() {\n      return undefined;\n    },\n    register() {\n      return () => undefined;\n    },\n    selectedState: [],\n    select() {\n      return undefined;\n    },\n    activeState: undefined,\n    setActive() {\n      return undefined;\n    },\n    multiselect: false,\n    focusVisibleState: false,\n    valueToString: defaultValueToString,\n    disabled: false,\n    listRef: undefined,\n  },\n);\n\nexport function useListControlContext<Item>() {\n  return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":["createContext","defaultValueToString","useContext"],"mappings":";;;;;;;;;;;;AA+BO,MAAM,kBAAA,GAAqBA,2BAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,GAAU;AACR,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,QAAA,GAAW;AACT,MAAA,OAAO,MAAM,MAAA;AAAA,IACf,CAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAA,GAAS;AACP,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,MAAA;AAAA,IACb,SAAA,GAAY;AACV,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,KAAA;AAAA,IACb,iBAAA,EAAmB,KAAA;AAAA,IACnB,aAAA,EAAeC,qCAAA;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb;AAEO,SAAS,qBAAA,GAA8B;AAC5C,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}