@salt-ds/lab 1.0.0-alpha.13 → 1.0.0-alpha.15

package/dist-cjs/list-next/useList.js

@@ -7,28 +7,41 @@ var core = require('@salt-ds/core');
 
 const useList = ({
   disabled = false,
+  highlightedItem: highLightedItemProp,
   selected: selectedProp,
   defaultSelected,
   onChange,
   id,
   ref
 }) => {
+  const getOptions = React.useCallback(() => {
+    var _a, _b;
+    return Array.from(
+      (_b = (_a = ref.current) == null ? void 0 : _a.querySelectorAll('[role="option"]:not([aria-disabled])')) != null ? _b : []
+    );
+  }, [ref]);
+  const [focusVisible, setFocusVisible] = React.useState(false);
   const [activeDescendant, setActiveDescendant] = React.useState(
     void 0
   );
-  const [showFocusRing, setShowFocusRing] = React.useState(false);
+  const [highlightedItem, setHighlightedItem] = core.useControlled({
+    controlled: highLightedItemProp,
+    default: highLightedItemProp,
+    name: "ListNext",
+    state: "highlighted"
+  });
   const [selectedItem, setSelectedItem] = core.useControlled({
     controlled: selectedProp,
     default: defaultSelected,
     name: "ListNext",
     state: "selected"
   });
-  const getOptions = React.useCallback(() => {
-    var _a, _b;
-    return Array.from(
-      (_b = (_a = ref.current) == null ? void 0 : _a.querySelectorAll('[role="option"]:not([aria-disabled])')) != null ? _b : []
-    );
-  }, [ref]);
+  const {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref: focusVisibleRef
+  } = core.useIsFocusVisible();
   const updateScroll = React.useCallback(
     (currentTarget) => {
       const list = ref.current;
@@ -45,39 +58,47 @@ const useList = ({
     },
     [ref]
   );
-  const updateActiveDescendant = React.useCallback(
+  const updateHighlighted = React.useCallback(
     (element) => {
+      setHighlightedItem(element.dataset.value);
       setActiveDescendant(element.id);
       updateScroll(element);
     },
-    [setActiveDescendant, updateScroll]
+    [setHighlightedItem, updateScroll]
   );
   const selectItem = React.useCallback(
     (element) => {
       const newValue = element == null ? void 0 : element.dataset.value;
       if (newValue) {
         setSelectedItem(newValue);
-        updateActiveDescendant(element);
+        updateHighlighted(element);
       }
     },
-    [setSelectedItem, updateActiveDescendant]
+    [setSelectedItem, updateHighlighted]
   );
-  const focusAndMoveActive = (element) => {
-    setShowFocusRing(true);
-    updateActiveDescendant(element);
-  };
+  React.useEffect(() => {
+    var _a;
+    const activeOptions = getOptions();
+    const highlightedIndex = activeOptions.findIndex(
+      (i) => i.dataset.value === highlightedItem
+    );
+    if (highlightedIndex) {
+      setActiveDescendant((_a = activeOptions[highlightedIndex]) == null ? void 0 : _a.id);
+      highlightedItem && updateScroll(activeOptions[highlightedIndex]);
+    }
+  }, [highlightedItem, getOptions, updateScroll]);
   const focusFirstItem = () => {
     const activeOptions = getOptions();
     const firstItem = activeOptions[0];
     if (firstItem) {
-      focusAndMoveActive(firstItem);
+      updateHighlighted(firstItem);
     }
   };
   const focusLastItem = () => {
     const activeOptions = getOptions();
     const lastItem = activeOptions[activeOptions.length - 1];
     if (lastItem) {
-      focusAndMoveActive(lastItem);
+      updateHighlighted(lastItem);
       updateScroll(lastItem);
     }
   };
@@ -96,9 +117,6 @@ const useList = ({
   const select = React.useCallback(
     (event) => {
       const newValue = event.currentTarget.dataset.value;
-      if (event.type === "click") {
-        setShowFocusRing(false);
-      }
       const activeOptions = getOptions();
       const isActiveOption = activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;
       if (newValue && selectedItem !== newValue && isActiveOption) {
@@ -109,44 +127,71 @@ const useList = ({
     [selectItem, selectedItem, onChange, getOptions]
   );
   const isSelected = React.useCallback(
-    (id2) => selectedItem === id2,
+    (value) => selectedItem === value,
     [selectedItem]
   );
+  const highlight = React.useCallback(
+    (event) => {
+      setHighlightedItem(event.currentTarget.dataset.value);
+    },
+    [setHighlightedItem]
+  );
+  const isHighlighted = React.useCallback(
+    (value) => highlightedItem === value,
+    [highlightedItem]
+  );
   const isFocused = React.useCallback(
-    (id2) => activeDescendant === id2 && showFocusRing,
-    [activeDescendant, showFocusRing]
+    (value) => isHighlighted(value) && focusVisible,
+    [focusVisible, isHighlighted]
   );
   const getActiveItem = () => {
     const activeOptions = getOptions();
     const activeIndex = activeOptions.findIndex(
       (i) => i.id === activeDescendant
     );
-    return activeOptions[activeIndex !== -1 ? activeIndex : 0];
+    return activeOptions[activeIndex];
   };
   const blurHandler = () => {
-    setShowFocusRing(false);
+    handleBlurVisible();
+    if (!isFocusVisibleRef.current) {
+      setFocusVisible(false);
+    }
   };
-  const mouseDownHandler = () => {
-    setShowFocusRing(false);
+  const mouseOverHandler = () => {
+    if (focusVisible) {
+      setFocusVisible(false);
+    }
   };
-  const focusHandler = () => {
+  const focusHandler = (event) => {
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current) {
+      setFocusVisible(true);
+    }
     const activeElement = getActiveItem();
-    focusAndMoveActive(activeElement);
+    if (activeElement) {
+      updateHighlighted(activeElement);
+    } else {
+      focusFirstItem();
+    }
   };
   const keyDownHandler = (event) => {
     const { key } = event;
     const currentItem = getActiveItem();
     let nextItem = currentItem;
-    if (!currentItem) {
-      return;
+    if (isFocusVisibleRef.current || !focusVisible) {
+      setFocusVisible(true);
     }
     switch (key) {
       case "ArrowUp":
       case "ArrowDown":
+        if (!currentItem) {
+          focusFirstItem();
+          break;
+        }
         nextItem = key === "ArrowUp" ? findPreviousOption(currentItem, 1) : findNextOption(currentItem, 1);
         if (nextItem && nextItem !== currentItem) {
           event.preventDefault();
-          focusAndMoveActive(nextItem);
+          updateHighlighted(nextItem);
         }
         break;
       case "Home":
@@ -160,7 +205,14 @@ const useList = ({
       case " ":
       case "Enter":
         event.preventDefault();
-        nextItem && selectItem(nextItem);
+        if (nextItem) {
+          selectItem(nextItem);
+          onChange == null ? void 0 : onChange(event, { value: nextItem.dataset.value || "" });
+        }
+        break;
+      case "PageDown":
+      case "PageUp":
+        event.preventDefault();
         break;
     }
   };
@@ -170,17 +222,24 @@ const useList = ({
       id,
       select,
       isSelected,
-      isFocused
+      isFocused,
+      highlight,
+      isHighlighted
     }),
-    [disabled, id, select, isSelected, isFocused]
+    [disabled, id, select, isSelected, isFocused, highlight, isHighlighted]
   );
   return {
     focusHandler,
     keyDownHandler,
     blurHandler,
-    mouseDownHandler,
+    mouseOverHandler,
     activeDescendant,
-    contextValue
+    selectedItem,
+    highlightedItem,
+    setSelectedItem,
+    setHighlightedItem,
+    contextValue,
+    focusVisibleRef
   };
 };
 

package/dist-cjs/list-next/useList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useList.js","sources":["../src/list-next/useList.ts"],"sourcesContent":["import {\n  KeyboardEvent,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\n\ninterface UseListProps {\n  /**\n   * If true, all items in list will be disabled.\n   */\n  disabled?: boolean;\n  /* Value for the uncontrolled version. */\n  selected?: string;\n  /* Initial value for the uncontrolled version. */\n  defaultSelected?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  id?: string;\n  ref: RefObject<HTMLUListElement>;\n}\n\nexport const useList = ({\n  disabled = false,\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n  id,\n  ref,\n}: UseListProps) => {\n  const [activeDescendant, setActiveDescendant] = useState<string | undefined>(\n    undefined\n  );\n\n  const [showFocusRing, setShowFocusRing] = useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected,\n    name: \"ListNext\",\n    state: \"selected\",\n  });\n\n  const getOptions: () => HTMLElement[] = useCallback(() => {\n    return Array.from(\n      ref.current?.querySelectorAll('[role=\"option\"]:not([aria-disabled])') ??\n        []\n    );\n  }, [ref]);\n\n  const updateScroll = useCallback(\n    (currentTarget: Element) => {\n      const list = ref.current;\n      if (!list || !currentTarget) return;\n      const { offsetTop, offsetHeight } = currentTarget as HTMLLIElement;\n      const listHeight = list?.clientHeight;\n      const listScrollTop = list?.scrollTop;\n      if (offsetTop < listScrollTop) {\n        list.scrollTop = offsetTop;\n      } else if (offsetTop + offsetHeight > listScrollTop + listHeight) {\n        list.scrollTop = offsetTop + offsetHeight - listHeight;\n      }\n    },\n    [ref]\n  );\n\n  const updateActiveDescendant = useCallback(\n    (element: HTMLElement) => {\n      setActiveDescendant(element.id);\n      updateScroll(element);\n    },\n    [setActiveDescendant, updateScroll]\n  );\n  const selectItem = useCallback(\n    (element: HTMLElement) => {\n      const newValue = element?.dataset.value;\n      if (newValue) {\n        setSelectedItem(newValue);\n        updateActiveDescendant(element);\n      }\n    },\n    [setSelectedItem, updateActiveDescendant]\n  );\n\n  const focusAndMoveActive = (element: HTMLElement) => {\n    setShowFocusRing(true);\n    updateActiveDescendant(element);\n  };\n\n  const focusFirstItem = () => {\n    // Find first active item\n    const activeOptions = getOptions();\n    const firstItem = activeOptions[0];\n    if (firstItem) {\n      focusAndMoveActive(firstItem);\n    }\n  };\n  const focusLastItem = () => {\n    // Find last active item\n    const activeOptions = getOptions();\n    const lastItem = activeOptions[activeOptions.length - 1];\n    if (lastItem) {\n      focusAndMoveActive(lastItem);\n      updateScroll(lastItem);\n    }\n  };\n\n  const findNextOption = (\n    currentOption: HTMLElement | null,\n    moves: number\n  ): HTMLElement => {\n    const activeOptions = getOptions();\n    // Returns next item, if no current option it will return 0\n    const nextOptionIndex = currentOption\n      ? activeOptions.indexOf(currentOption) + moves\n      : 0;\n    return (\n      activeOptions[nextOptionIndex] || activeOptions[activeOptions.length - 1]\n    );\n  };\n\n  const findPreviousOption = (\n    currentOption: HTMLElement,\n    moves: number\n  ): HTMLElement => {\n    // Return the previous option if it exists; otherwise, returns first option\n    const activeOptions = getOptions();\n    const currentOptionIndex = activeOptions.findIndex(\n      (i) => i.id === currentOption.id\n    );\n    return activeOptions[currentOptionIndex - moves] || activeOptions[0];\n  };\n\n  // CONTEXT CALLBACKS\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLLIElement>) => {\n      const newValue = event.currentTarget.dataset.value;\n      if (event.type === \"click\") {\n        setShowFocusRing(false);\n      }\n      const activeOptions = getOptions();\n      const isActiveOption =\n        activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;\n      if (newValue && selectedItem !== newValue && isActiveOption) {\n        selectItem(event.currentTarget);\n        onChange?.(event, { value: newValue });\n      }\n    },\n    [selectItem, selectedItem, onChange, getOptions]\n  );\n\n  const isSelected = useCallback(\n    (id: string) => selectedItem === id,\n    [selectedItem]\n  );\n\n  const isFocused = useCallback(\n    (id: string | undefined) => activeDescendant === id && showFocusRing,\n    [activeDescendant, showFocusRing]\n  );\n\n  const getActiveItem = () => {\n    const activeOptions = getOptions();\n    const activeIndex = activeOptions.findIndex(\n      (i) => i.id === activeDescendant\n    );\n    return activeOptions[activeIndex !== -1 ? activeIndex : 0];\n  };\n\n  // HANDLERS\n  const blurHandler = () => {\n    setShowFocusRing(false);\n  };\n\n  const mouseDownHandler = () => {\n    // When list gets focused, we can't guarantee that focus happens after click event.\n    // If first focus (where !activeDescendant) happens from a click, list shouldn't render focus ring in the first element.\n    setShowFocusRing(false);\n  };\n\n  // takes care of focus when using keyboard navigation\n  const focusHandler = () => {\n    const activeElement = getActiveItem();\n    focusAndMoveActive(activeElement);\n  };\n\n  // takes care of keydown when using keyboard navigation\n  const keyDownHandler = (event: KeyboardEvent<HTMLUListElement>) => {\n    const { key } = event;\n    const currentItem = getActiveItem();\n    let nextItem = currentItem;\n    if (!currentItem) {\n      return;\n    }\n    switch (key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        nextItem =\n          key === \"ArrowUp\"\n            ? findPreviousOption(currentItem, 1)\n            : findNextOption(currentItem, 1);\n\n        if (nextItem && nextItem !== currentItem) {\n          event.preventDefault();\n          focusAndMoveActive(nextItem);\n        }\n        break;\n      case \"Home\":\n        event.preventDefault();\n        focusFirstItem();\n        break;\n      case \"End\":\n        event.preventDefault();\n        focusLastItem();\n        break;\n      case \" \":\n      case \"Enter\":\n        event.preventDefault();\n        nextItem && selectItem(nextItem);\n        break;\n      default:\n        break;\n    }\n  };\n\n  // CONTEXT\n  const contextValue = useMemo(\n    () => ({\n      disabled,\n      id,\n      select,\n      isSelected,\n      isFocused,\n    }),\n    [disabled, id, select, isSelected, isFocused]\n  );\n\n  return {\n    focusHandler,\n    keyDownHandler,\n    blurHandler,\n    mouseDownHandler,\n    activeDescendant,\n    contextValue,\n  };\n};\n"],"names":["useState","useControlled","useCallback","id","useMemo"],"mappings":"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"}
+{"version":3,"file":"useList.js","sources":["../src/list-next/useList.ts"],"sourcesContent":["import {\n  FocusEvent,\n  KeyboardEvent,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useControlled, useIsFocusVisible } from \"@salt-ds/core\";\n\ninterface UseListProps {\n  /**\n   * If true, all items in list will be disabled.\n   */\n  disabled?: boolean;\n  /* Highlighted index for when the list is controlled. */\n  highlightedItem?: string;\n  /* Selected value for when the list is controlled. */\n  selected?: string;\n  /* Initial selected value for when the list is controlled. */\n  defaultSelected?: string;\n  /* Callback for when the list is controlled. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* List id. */\n  id?: string;\n  /* List ref. */\n  ref: RefObject<HTMLUListElement>;\n}\n\nexport const useList = ({\n  disabled = false,\n  highlightedItem: highLightedItemProp,\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n  id,\n  ref,\n}: UseListProps) => {\n  const getOptions: () => HTMLElement[] = useCallback(() => {\n    return Array.from(\n      ref.current?.querySelectorAll('[role=\"option\"]:not([aria-disabled])') ??\n        []\n    );\n  }, [ref]);\n\n  const [focusVisible, setFocusVisible] = useState(false);\n  const [activeDescendant, setActiveDescendant] = useState<string | undefined>(\n    undefined\n  );\n\n  const [highlightedItem, setHighlightedItem] = useControlled({\n    controlled: highLightedItemProp,\n    default: highLightedItemProp,\n    name: \"ListNext\",\n    state: \"highlighted\",\n  });\n\n  const [selectedItem, setSelectedItem] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected,\n    name: \"ListNext\",\n    state: \"selected\",\n  });\n\n  const {\n    isFocusVisibleRef,\n    onFocus: handleFocusVisible,\n    onBlur: handleBlurVisible,\n    ref: focusVisibleRef,\n  } = useIsFocusVisible();\n\n  const updateScroll = useCallback(\n    (currentTarget: Element) => {\n      const list = ref.current;\n      if (!list || !currentTarget) return;\n      const { offsetTop, offsetHeight } = currentTarget as HTMLLIElement;\n      const listHeight = list?.clientHeight;\n      const listScrollTop = list?.scrollTop;\n      if (offsetTop < listScrollTop) {\n        list.scrollTop = offsetTop;\n      } else if (offsetTop + offsetHeight > listScrollTop + listHeight) {\n        list.scrollTop = offsetTop + offsetHeight - listHeight;\n      }\n    },\n    [ref]\n  );\n\n  const updateHighlighted = useCallback(\n    (element: HTMLElement) => {\n      setHighlightedItem(element.dataset.value);\n      setActiveDescendant(element.id);\n      updateScroll(element);\n    },\n    [setHighlightedItem, updateScroll]\n  );\n\n  const selectItem = useCallback(\n    (element: HTMLElement) => {\n      const newValue = element?.dataset.value;\n      if (newValue) {\n        setSelectedItem(newValue);\n        updateHighlighted(element);\n      }\n    },\n    [setSelectedItem, updateHighlighted]\n  );\n\n  // Effect to move the cursor when items change controlled.\n  // this could be following active descendant if there is no better way of doing it when controlled\n  useEffect(() => {\n    const activeOptions = getOptions();\n    const highlightedIndex = activeOptions.findIndex(\n      (i) => i.dataset.value === highlightedItem\n    );\n    if (highlightedIndex) {\n      setActiveDescendant(activeOptions[highlightedIndex]?.id);\n      highlightedItem && updateScroll(activeOptions[highlightedIndex]);\n    }\n  }, [highlightedItem, getOptions, updateScroll]);\n\n  const focusFirstItem = () => {\n    // Find first active item\n    const activeOptions = getOptions();\n    const firstItem = activeOptions[0];\n    if (firstItem) {\n      updateHighlighted(firstItem);\n    }\n  };\n  const focusLastItem = () => {\n    // Find last active item\n    const activeOptions = getOptions();\n    const lastItem = activeOptions[activeOptions.length - 1];\n    if (lastItem) {\n      updateHighlighted(lastItem);\n      updateScroll(lastItem);\n    }\n  };\n\n  const findNextOption = (\n    currentOption: HTMLElement | null,\n    moves: number\n  ): HTMLElement => {\n    const activeOptions = getOptions();\n    // Returns next item, if no current option it will return 0\n    const nextOptionIndex = currentOption\n      ? activeOptions.indexOf(currentOption) + moves\n      : 0;\n    return (\n      activeOptions[nextOptionIndex] || activeOptions[activeOptions.length - 1]\n    );\n  };\n\n  const findPreviousOption = (\n    currentOption: HTMLElement,\n    moves: number\n  ): HTMLElement => {\n    // Return the previous option if it exists; otherwise, returns first option\n    const activeOptions = getOptions();\n    const currentOptionIndex = activeOptions.findIndex(\n      (i) => i.id === currentOption.id\n    );\n    return activeOptions[currentOptionIndex - moves] || activeOptions[0];\n  };\n\n  // CONTEXT CALLBACKS\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLLIElement>) => {\n      const newValue = event.currentTarget.dataset.value;\n      const activeOptions = getOptions();\n      const isActiveOption =\n        activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;\n      if (newValue && selectedItem !== newValue && isActiveOption) {\n        selectItem(event.currentTarget);\n        onChange?.(event, { value: newValue });\n      }\n    },\n    [selectItem, selectedItem, onChange, getOptions]\n  );\n\n  const isSelected = useCallback(\n    (value: string) => selectedItem === value,\n    [selectedItem]\n  );\n\n  const highlight = useCallback(\n    (event: SyntheticEvent<HTMLLIElement>) => {\n      setHighlightedItem(event.currentTarget.dataset.value);\n    },\n    [setHighlightedItem]\n  );\n\n  const isHighlighted = useCallback(\n    (value: string) => highlightedItem === value,\n    [highlightedItem]\n  );\n\n  const isFocused = useCallback(\n    (value: string) => isHighlighted(value) && focusVisible,\n    [focusVisible, isHighlighted]\n  );\n\n  const getActiveItem = () => {\n    const activeOptions = getOptions();\n    const activeIndex = activeOptions.findIndex(\n      (i) => i.id === activeDescendant\n    );\n    return activeOptions[activeIndex];\n  };\n\n  // HANDLERS\n  const blurHandler = () => {\n    handleBlurVisible();\n    if (!isFocusVisibleRef.current) {\n      setFocusVisible(false);\n    }\n  };\n\n  const mouseOverHandler = () => {\n    if (focusVisible) {\n      setFocusVisible(false);\n    }\n  };\n\n  // takes care of focus when using keyboard navigation\n  const focusHandler = (event: FocusEvent<HTMLUListElement>) => {\n    handleFocusVisible(event);\n    if (isFocusVisibleRef.current) {\n      setFocusVisible(true);\n    }\n    const activeElement = getActiveItem();\n    if (activeElement) {\n      updateHighlighted(activeElement);\n    } else {\n      focusFirstItem();\n    }\n  };\n\n  // takes care of keydown when using keyboard navigation\n  const keyDownHandler = (event: KeyboardEvent<HTMLElement>) => {\n    const { key } = event;\n    const currentItem = getActiveItem();\n    let nextItem = currentItem;\n    if (isFocusVisibleRef.current || !focusVisible) {\n      setFocusVisible(true);\n    }\n    switch (key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        if (!currentItem) {\n          focusFirstItem();\n          break;\n        }\n        nextItem =\n          key === \"ArrowUp\"\n            ? findPreviousOption(currentItem, 1)\n            : findNextOption(currentItem, 1);\n\n        if (nextItem && nextItem !== currentItem) {\n          event.preventDefault();\n          updateHighlighted(nextItem);\n        }\n        break;\n      case \"Home\":\n        event.preventDefault();\n        focusFirstItem();\n        break;\n      case \"End\":\n        event.preventDefault();\n        focusLastItem();\n        break;\n      case \" \":\n      case \"Enter\":\n        event.preventDefault();\n        if (nextItem) {\n          selectItem(nextItem);\n          onChange?.(event, { value: nextItem.dataset.value || \"\" });\n        }\n        break;\n      case \"PageDown\":\n      case \"PageUp\":\n        event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  // CONTEXT\n  const contextValue = useMemo(\n    () => ({\n      disabled,\n      id,\n      select,\n      isSelected,\n      isFocused,\n      highlight,\n      isHighlighted,\n    }),\n    [disabled, id, select, isSelected, isFocused, highlight, isHighlighted]\n  );\n\n  return {\n    focusHandler,\n    keyDownHandler,\n    blurHandler,\n    mouseOverHandler,\n    activeDescendant,\n    selectedItem,\n    highlightedItem,\n    setSelectedItem,\n    setHighlightedItem,\n    contextValue,\n    focusVisibleRef,\n  };\n};\n"],"names":["useCallback","useState","useControlled","useIsFocusVisible","useEffect","useMemo"],"mappings":"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"}

package/dist-cjs/nav-item/ExpansionButton.js

@@ -13,7 +13,7 @@ const iconExpansionMap = {
   },
   horizontal: {
     expanded: icons.ChevronDownIcon,
-    collapsed: icons.ChevronUpIcon
+    collapsed: icons.ChevronDownIcon
   }
 };
 function ExpansionButton({

package/dist-cjs/nav-item/ExpansionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpansionButton.js","sources":["../src/nav-item/ExpansionButton.tsx"],"sourcesContent":["import {\n  ChevronDownIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { Button } from \"@salt-ds/core\";\nimport { NavItemProps } from \"./NavItem\";\n\nconst iconExpansionMap = {\n  vertical: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronRightIcon,\n  },\n  horizontal: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronUpIcon,\n  },\n};\n\nexport function ExpansionButton({\n  expanded = false,\n  orientation = \"horizontal\",\n  ...rest\n}: Pick<NavItemProps, \"expanded\" | \"orientation\"> &\n  ComponentPropsWithoutRef<\"button\">) {\n  const Icon =\n    iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n  return (\n    <Button aria-label=\"expand\" variant=\"secondary\" {...rest}>\n      <Icon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n"],"names":["ChevronDownIcon","ChevronRightIcon","ChevronUpIcon","jsx","Button"],"mappings":";;;;;;;;AASA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAAA,qBAAA;AAAA,IACV,SAAW,EAAAC,sBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAAD,qBAAA;AAAA,IACV,SAAW,EAAAE,mBAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CACsC,EAAA;AACpC,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IAAO,YAAW,EAAA,QAAA;AAAA,IAAS,OAAQ,EAAA,WAAA;AAAA,IAAa,GAAG,IAAA;AAAA,IAClD,QAAC,kBAAAD,cAAA,CAAA,IAAA,EAAA;AAAA,MAAK,aAAY,EAAA,MAAA;AAAA,KAAO,CAAA;AAAA,GAC3B,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ExpansionButton.js","sources":["../src/nav-item/ExpansionButton.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { Button } from \"@salt-ds/core\";\nimport { NavItemProps } from \"./NavItem\";\n\nconst iconExpansionMap = {\n  vertical: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronRightIcon,\n  },\n  horizontal: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronDownIcon,\n  },\n};\n\nexport function ExpansionButton({\n  expanded = false,\n  orientation = \"horizontal\",\n  ...rest\n}: Pick<NavItemProps, \"expanded\" | \"orientation\"> &\n  ComponentPropsWithoutRef<\"button\">) {\n  const Icon =\n    iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n  return (\n    <Button aria-label=\"expand\" variant=\"secondary\" {...rest}>\n      <Icon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n"],"names":["ChevronDownIcon","ChevronRightIcon","jsx","Button"],"mappings":";;;;;;;;AAKA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAAA,qBAAA;AAAA,IACV,SAAW,EAAAC,sBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAAD,qBAAA;AAAA,IACV,SAAW,EAAAA,qBAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CACsC,EAAA;AACpC,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBACGE,cAAA,CAAAC,WAAA,EAAA;AAAA,IAAO,YAAW,EAAA,QAAA;AAAA,IAAS,OAAQ,EAAA,WAAA;AAAA,IAAa,GAAG,IAAA;AAAA,IAClD,QAAC,kBAAAD,cAAA,CAAA,IAAA,EAAA;AAAA,MAAK,aAAY,EAAA,MAAA;AAAA,KAAO,CAAA;AAAA,GAC3B,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/nav-item/NavItem.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltNavItem {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-75);\n}\n\n.saltNavItem-horizontal {\n  min-height: calc(var(--salt-size-stackable) + var(--salt-size-accent) + var(--salt-spacing-100));\n  padding: var(--salt-spacing-100);\n}\n\n.saltNavItem-vertical {\n  min-height: var(--salt-size-stackable);\n}\n\n.saltNavItem-label,\n.saltNavItem-label:hover {\n  color: var(--salt-text-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavItem-level, 0) * var(--salt-spacing-150));\n  text-decoration: none;\n}\n\n.saltNavItem-vertical .saltNavItem-expandButton {\n  justify-self: end;\n  margin: calc((var(--salt-size-stackable) - var(--salt-size-base)) / 2);\n}\n\n.saltNavItem-horizontal {\n  padding-top: calc(var(--salt-spacing-100) + var(--salt-size-accent));\n}\n\n.saltNavItem-vertical {\n  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-accent));\n}\n\n.saltNavItem:hover,\n.saltNavItem:focus {\n  background: var(--salt-navigable-primary-background-hover);\n}\n\n.saltNavItem:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltNavItem-active {\n  background: var(--salt-navigable-primary-background-active);\n}\n\n.saltNavItem::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n}\n\n.saltNavItem-horizontal::after {\n  width: 100%;\n  height: var(--salt-size-accent);\n}\n\n.saltNavItem-vertical::after {\n  width: var(--salt-size-accent);\n  height: 100%;\n}\n\n.saltNavItem-horizontal:hover::after,\n.saltNavItem-horizontal:focus::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltNavItem.saltNavItem-active::after,\n.saltNavItem.saltNavItem-active:hover::after,\n.saltNavItem.saltNavItem-active:focus::after {\n  background: var(--saltNavItem-indicator-color, var(--salt-navigable-indicator-active));\n}\n";
+var css_248z = "/* Vars applied to root NavItem component */\n.saltNavItem {\n  --navItem-color: var(--salt-text-secondary-foreground);\n  --navItem-fill: var(--salt-text-secondary-foreground);\n  --navItem-bar-inset: var(--salt-spacing-25);\n  --navItem-bar-size: calc(var(--salt-size-bar) / 2);\n  --navItem-indicator-background: var(--salt-navigable-indicator-active);\n}\n\n/* Vars applied to NavItem component when active or selected */\n.saltNavItem-active,\n.saltNavItem-blurSelected {\n  --navItem-color: var(--salt-text-primary-foreground);\n  --navItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to root NavItem component */\n.saltNavItem {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  font-weight: var(--salt-text-fontWeight-strong);\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavItem icon */\n.saltNavItem .saltNavItem-icon {\n  fill: var(--navItem-fill);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--navItem-bar-inset)) 0 var(--salt-spacing-100) 0;\n  margin: 0 var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--salt-spacing-100) + var(--navItem-bar-inset));\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavItem label */\n.saltNavItem .saltNavItem-label {\n  --link-color-visited: var(--navItem-color);\n  --link-color-hover: var(--navItem-color);\n\n  text-decoration: none;\n  color: var(--navItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n}\n\n/* Styles applied when level is not 0 */\n.saltNavItem-nested {\n  padding-left: calc(var(--salt-spacing-250) + (var(--saltNavItem-level, 0) * var(--salt-spacing-100)));\n}\n\n/* Styles applied to expand button icon */\n.saltNavItem .saltNavItem-expandButton {\n  --saltIcon-color: var(--navItem-fill);\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n}\n\n/* Styles applied to NavItem when focus is visible */\n.saltNavItem:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to activation line */\n.saltNavItem::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavItem-horizontal::after {\n  width: 100%;\n  height: var(--navItem-bar-size);\n  top: var(--navItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavItem-vertical::after {\n  width: var(--navItem-bar-size);\n  height: 100%;\n  left: var(--navItem-bar-inset);\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavItem:hover::after,\n.saltNavItem:focus::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item has active children */\n.saltNavItem.saltNavItem-blurSelected::after,\n.saltNavItem.saltNavItem-blurSelected:hover::after,\n.saltNavItem.saltNavItem-blurSelected:focus::after {\n  --navItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavItem.saltNavItem-active::after,\n.saltNavItem.saltNavItem-active:hover::after,\n.saltNavItem.saltNavItem-active:focus::after {\n  background: var(--navItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=NavItem.css.js.map

package/dist-cjs/nav-item/NavItem.js

@@ -16,6 +16,7 @@ const NavItem = React.forwardRef(
   function NavItem2(props, ref) {
     const {
       active,
+      blurSelected,
       children,
       className,
       expanded = false,
@@ -24,6 +25,8 @@ const NavItem = React.forwardRef(
       level = 0,
       onExpand,
       href,
+      IconComponent,
+      BadgeComponent,
       style: styleProp,
       ...rest
     } = props;
@@ -45,7 +48,9 @@ const NavItem = React.forwardRef(
       className: clsx.clsx(
         withBaseName(),
         {
-          [withBaseName("active")]: active
+          [withBaseName("active")]: active,
+          [withBaseName("blurSelected")]: blurSelected,
+          [withBaseName("nested")]: level !== 0
         },
         withBaseName(orientation),
         className
@@ -54,6 +59,10 @@ const NavItem = React.forwardRef(
       style,
       ...rest,
       children: [
+        IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
+          "aria-hidden": true,
+          className: withBaseName("icon")
+        }),
         /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
           className: withBaseName("label"),
           "aria-current": active ? "page" : void 0,
@@ -62,6 +71,7 @@ const NavItem = React.forwardRef(
             children
           })
         }),
+        BadgeComponent,
         parent && /* @__PURE__ */ jsxRuntime.jsx(ExpansionButton.ExpansionButton, {
           "aria-expanded": expanded,
           className: withBaseName("expandButton"),

package/dist-cjs/nav-item/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  MouseEventHandler,\n  MouseEvent,\n} from \"react\";\nimport { makePrefixer, Link } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionButton } from \"./ExpansionButton\";\n\nimport navItemCss from \"./NavItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the nav item is active.\n   */\n  active?: boolean;\n  expanded?: boolean;\n  level?: number;\n  /**\n   * The orientation of the nav item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  parent?: boolean;\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavItem\");\n\nexport const NavItem = forwardRef<HTMLDivElement, NavItemProps>(\n  function NavItem(props, ref) {\n    const {\n      active,\n      children,\n      className,\n      expanded = false,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      href,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-nav-item\",\n      css: navItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavItem-level\": `${level}`,\n    };\n\n    const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n      onExpand?.(event);\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"active\")]: active,\n          },\n          withBaseName(orientation),\n          className\n        )}\n        ref={ref}\n        style={style}\n        {...rest}\n      >\n        <Link\n          className={withBaseName(\"label\")}\n          aria-current={active ? \"page\" : undefined}\n          href={href}\n        >\n          <span>{children}</span>\n        </Link>\n        {parent && (\n          <ExpansionButton\n            aria-expanded={expanded}\n            className={withBaseName(\"expandButton\")}\n            expanded={expanded}\n            onClick={handleExpand}\n            orientation={orientation}\n          />\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","NavItem","useWindow","useComponentCssInjection","navItemCss","jsxs","clsx","jsx","Link","ExpansionButton"],"mappings":";;;;;;;;;;;;;AA8BA,MAAM,YAAA,GAAeA,kBAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,uBAAuB,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KAC5B,CAAA;AAEA,IAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,aAAa,WAAW,CAAA;AAAA,QACxB,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,SAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,UAChC,IAAA;AAAA,UAEA,QAAC,kBAAAD,cAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA;AAAA,WAAS,CAAA;AAAA,SAClB,CAAA;AAAA,QACC,0BACEA,cAAA,CAAAE,+BAAA,EAAA;AAAA,UACC,eAAe,EAAA,QAAA;AAAA,UACf,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACtC,QAAA;AAAA,UACA,OAAS,EAAA,YAAA;AAAA,UACT,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  MouseEventHandler,\n  MouseEvent,\n  ComponentType,\n  ReactNode,\n} from \"react\";\nimport { makePrefixer, Link } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ExpansionButton } from \"./ExpansionButton\";\n\nimport navItemCss from \"./NavItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the nav item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nav item has active children.\n   */\n  blurSelected?: boolean;\n  /**\n   * Whether the nav item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the nav item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the nav item is a parent with nested children.\n   */\n  parent?: boolean;\n  /**\n   * Action to be triggered when the nav item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n  /**\n   * Icon component to be displayed next to the nav item label.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Badge component to be displayed next to the nav item label.\n   */\n  BadgeComponent?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltNavItem\");\n\nexport const NavItem = forwardRef<HTMLDivElement, NavItemProps>(\n  function NavItem(props, ref) {\n    const {\n      active,\n      blurSelected,\n      children,\n      className,\n      expanded = false,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      href,\n      IconComponent,\n      BadgeComponent,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-nav-item\",\n      css: navItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavItem-level\": `${level}`,\n    };\n\n    const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n      onExpand?.(event);\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"active\")]: active,\n            [withBaseName(\"blurSelected\")]: blurSelected,\n            [withBaseName(\"nested\")]: level !== 0,\n          },\n          withBaseName(orientation),\n          className\n        )}\n        ref={ref}\n        style={style}\n        {...rest}\n      >\n        {IconComponent && (\n          <IconComponent aria-hidden className={withBaseName(\"icon\")} />\n        )}\n        <Link\n          className={withBaseName(\"label\")}\n          aria-current={active ? \"page\" : undefined}\n          href={href}\n        >\n          <span>{children}</span>\n        </Link>\n        {BadgeComponent}\n        {parent && (\n          <ExpansionButton\n            aria-expanded={expanded}\n            className={withBaseName(\"expandButton\")}\n            expanded={expanded}\n            onClick={handleExpand}\n            orientation={orientation}\n          />\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","NavItem","useWindow","useComponentCssInjection","navItemCss","jsxs","clsx","jsx","Link","ExpansionButton"],"mappings":";;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,kBAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,uBAAuB,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KAC5B,CAAA;AAEA,IAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,UAChC,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,SACtC;AAAA,QACA,aAAa,WAAW,CAAA;AAAA,QACxB,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,aAAA,oBACEC,cAAA,CAAA,aAAA,EAAA;AAAA,UAAc,aAAW,EAAA,IAAA;AAAA,UAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,wBAE7DA,cAAA,CAAAC,SAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,UAChC,IAAA;AAAA,UAEA,QAAC,kBAAAD,cAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA;AAAA,WAAS,CAAA;AAAA,SAClB,CAAA;AAAA,QACC,cAAA;AAAA,QACA,0BACEA,cAAA,CAAAE,+BAAA,EAAA;AAAA,UACC,eAAe,EAAA,QAAA;AAAA,UACf,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACtC,QAAA;AAAA,UACA,OAAS,EAAA,YAAA;AAAA,UACT,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/parent-child-layout/ParentChildLayout.js

@@ -7,7 +7,6 @@ var core = require('@salt-ds/core');
 var clsx = require('clsx');
 var React = require('react');
 var ParentChildItem = require('../parent-child-item/ParentChildItem.js');
-require('../utils/useFloatingUI.js');
 var useIsViewportLargerThanBreakpoint = require('../utils/useIsViewportLargerThanBreakpoint.js');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');

package/dist-cjs/parent-child-layout/ParentChildLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n  Breakpoints,\n  FlexLayout,\n  FlexLayoutProps,\n  makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  stackedAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Change element that is displayed when in staked view.\n   */\n  stackedViewElement?: StackedViewElement;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Orientation for slide animations.\n   */\n  orientation?: Orientation;\n  /**\n   * Controls the space between columns.\n   */\n  gap?: FlexLayoutProps<ElementType>[\"gap\"];\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n  orientation: Orientation,\n  stackedViewElement: StackedViewElement\n) => {\n  let direction: SlideDirection = \"right\";\n\n  if (orientation === \"horizontal\") {\n    if (stackedViewElement === \"parent\") {\n      direction = \"left\";\n    } else {\n      direction = \"right\";\n    }\n  } else {\n    if (stackedViewElement === \"parent\") {\n      direction = \"bottom\";\n    } else {\n      direction = \"top\";\n    }\n  }\n\n  return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    stackedAtBreakpoint = \"sm\",\n    stackedViewElement = \"parent\",\n    disableAnimations = false,\n    parent,\n    child,\n    className,\n    orientation = \"horizontal\",\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-parent-child-layout\",\n    css: parentChildLayoutCss,\n    window: targetWindow,\n  });\n\n  const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n  const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n  const stackedViewChildren = {\n    parent: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {parent}\n      </ParentChildItem>\n    ),\n    child: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {child}\n      </ParentChildItem>\n    ),\n  };\n\n  return (\n    <FlexLayout className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n      {stackedView ? (\n        stackedViewChildren[stackedViewElement]\n      ) : (\n        <>\n          <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n            {parent}\n          </ParentChildItem>\n          <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n            {child}\n          </ParentChildItem>\n        </>\n      )}\n    </FlexLayout>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useWindow","useComponentCssInjection","parentChildLayoutCss","useIsViewportLargerThanBreakpoint","jsx","ParentChildItem","FlexLayout","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,oEAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACGC,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACGD,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACGD,cAAA,CAAAE,eAAA,EAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACL,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACCD,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n  Breakpoints,\n  FlexLayout,\n  FlexLayoutProps,\n  makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  stackedAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Change element that is displayed when in staked view.\n   */\n  stackedViewElement?: StackedViewElement;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Orientation for slide animations.\n   */\n  orientation?: Orientation;\n  /**\n   * Controls the space between columns.\n   */\n  gap?: FlexLayoutProps<ElementType>[\"gap\"];\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n  orientation: Orientation,\n  stackedViewElement: StackedViewElement\n) => {\n  let direction: SlideDirection = \"right\";\n\n  if (orientation === \"horizontal\") {\n    if (stackedViewElement === \"parent\") {\n      direction = \"left\";\n    } else {\n      direction = \"right\";\n    }\n  } else {\n    if (stackedViewElement === \"parent\") {\n      direction = \"bottom\";\n    } else {\n      direction = \"top\";\n    }\n  }\n\n  return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    stackedAtBreakpoint = \"sm\",\n    stackedViewElement = \"parent\",\n    disableAnimations = false,\n    parent,\n    child,\n    className,\n    orientation = \"horizontal\",\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-parent-child-layout\",\n    css: parentChildLayoutCss,\n    window: targetWindow,\n  });\n\n  const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n  const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n  const stackedViewChildren = {\n    parent: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {parent}\n      </ParentChildItem>\n    ),\n    child: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {child}\n      </ParentChildItem>\n    ),\n  };\n\n  return (\n    <FlexLayout className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n      {stackedView ? (\n        stackedViewChildren[stackedViewElement]\n      ) : (\n        <>\n          <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n            {parent}\n          </ParentChildItem>\n          <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n            {child}\n          </ParentChildItem>\n        </>\n      )}\n    </FlexLayout>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useWindow","useComponentCssInjection","parentChildLayoutCss","useIsViewportLargerThanBreakpoint","jsx","ParentChildItem","FlexLayout","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;AAoDA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,oEAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACGC,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACGD,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACGD,cAAA,CAAAE,eAAA,EAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACL,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACCD,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/pill-next/PillNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to the root element */\n.saltPillNext {\n  --pillNext-background: var(--salt-actionable-primary-background);\n  --pillNext-background-active: var(--salt-actionable-primary-background-active);\n  --pillNext-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --pillNext-background-hover: var(--salt-actionable-primary-background-hover);\n  --pillNext-text-color: var(--salt-actionable-primary-foreground);\n  --pillNext-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --pillNext-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n  --pillNext-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n}\n\n.saltPillNext {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--pillNext-background);\n  border-radius: 0;\n  border: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-width: 4em;\n  min-height: var(--salt-text-minHeight);\n  outline: 0;\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding-inline: var(--salt-spacing-50);\n  color: var(--pillNext-text-color);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\n.saltPillNext-label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.saltPillNext .saltIcon {\n  --saltIcon-color: currentColor;\n}\n\n/* Style applied to Pill if `onClick` prop is provided  */\n.saltPillNext-clickable {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPillNext-clickable:hover {\n  color: var(--pillNext-text-color-hover);\n  background: var(--pillNext-background-hover);\n}\n\n.saltPillNext-clickable.saltPillNext-disabled:hover {\n  color: var(--pillNext-text-color);\n  background: var(--pillNext-background);\n}\n\n.saltPillNext-clickable.saltPillNext-active,\n.saltPillNext-clickable:active {\n  background: var(--pillNext-background-active);\n  color: var(--pillNext-text-color-active);\n}\n\n.saltPillNext-clickable.saltPillNext-disabled.saltPillNext-active,\n.saltPillNext-clickable.saltPillNext-disabled:active {\n  background: var(--pillNext-background);\n  color: var(--pillNext-text-color);\n}\n\n/* Style applied to Pill on focus */\n.saltPillNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Style applied to Pill when disabled */\n.saltPillNext.saltPillNext-disabled,\n.saltPillNext.saltPillNext-disabled:hover,\n.saltPillNext.saltPillNext-disabled:active {\n  color: var(--pillNext-text-color-disabled);\n  background: var(--pillNext-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=PillNext.css.js.map

package/dist-cjs/pill-next/PillNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/pill-next/PillNext.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var core = require('@salt-ds/core');
+var PillNext$1 = require('./PillNext.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+
+const withBaseName = core.makePrefixer("saltPillNext");
+const PillNext = React.forwardRef(
+  function PillNext2({ children, className, icon, disabled, ...restProps }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-pill-next",
+      css: PillNext$1,
+      window: targetWindow
+    });
+    const { buttonProps, active } = core.useButton({
+      disabled,
+      ...restProps
+    });
+    const { tabIndex, ...restButtonProps } = buttonProps;
+    return /* @__PURE__ */ jsxRuntime.jsxs("button", {
+      "data-testid": "pill",
+      ref,
+      type: "button",
+      className: clsx__default["default"](
+        withBaseName(),
+        withBaseName("clickable"),
+        {
+          [withBaseName("active")]: active,
+          [withBaseName("disabled")]: disabled
+        },
+        className
+      ),
+      ...restButtonProps,
+      ...restProps,
+      children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          className: withBaseName("label"),
+          children
+        })
+      ]
+    });
+  }
+);
+
+exports.PillNext = PillNext;
+//# sourceMappingURL=PillNext.js.map

package/dist-cjs/pill-next/PillNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillNext.js","sources":["../src/pill-next/PillNext.tsx"],"sourcesContent":["import {\n  forwardRef,\n  MouseEvent,\n  KeyboardEvent,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useButton } from \"@salt-ds/core\";\nimport pillCss from \"./PillNext.css\";\n\nexport type PillClickEvent =\n  | MouseEvent<Element, globalThis.MouseEvent>\n  | KeyboardEvent<HTMLDivElement>;\n\nexport interface PillNextProps extends ComponentPropsWithoutRef<\"button\"> {\n  /* If true the pill will be disabled */\n  disabled?: boolean;\n  /* Pass an element to render an icon descriptor on the left of the label */\n  icon?: React.ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltPillNext\");\n\nexport const PillNext = forwardRef<HTMLButtonElement, PillNextProps>(\n  function PillNext(\n    { children, className, icon, disabled, ...restProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-pill-next\",\n      css: pillCss,\n      window: targetWindow,\n    });\n    const { buttonProps, active } = useButton<HTMLButtonElement>({\n      disabled,\n      ...restProps,\n    });\n    // we do not want to spread tab index in this case because the button element\n    // does not require tabindex=\"0\" attribute\n    const { tabIndex, ...restButtonProps } = buttonProps;\n\n    return (\n      <button\n        data-testid=\"pill\"\n        ref={ref}\n        type=\"button\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(\"clickable\"),\n          {\n            [withBaseName(\"active\")]: active,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        {...restButtonProps}\n        {...restProps}\n      >\n        {icon}\n        <span className={withBaseName(\"label\")}>{children}</span>\n      </button>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","PillNext","useWindow","useComponentCssInjection","pillCss","useButton","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,UACP,EAAE,QAAA,EAAU,WAAW,IAAM,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EACpD,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAIC,cAA6B,CAAA;AAAA,MAC3D,QAAA;AAAA,MACA,GAAG,SAAA;AAAA,KACJ,CAAA,CAAA;AAGD,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AAEzC,IAAA,uBACGC,eAAA,CAAA,QAAA,EAAA;AAAA,MACC,aAAY,EAAA,MAAA;AAAA,MACZ,GAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,SAAW,EAAAC,wBAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,WAAW,CAAA;AAAA,QACxB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,eAAA;AAAA,MACH,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,wBACAC,cAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OAAA;AAAA,KACpD,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/progress/CircularProgress/CircularProgress.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCircularProgress {\n  --circularProgress-gradient-color: var(--salt-accent-background);\n\n  color: var(--salt-text-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-disabled .saltCircularProgress-progressValue,\n.saltCircularProgress-disabled circle {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n  stroke-width: 2px;\n}\n\n.saltCircularProgress-small {\n  font-size: 11px;\n}\n\n.saltCircularProgress-medium {\n  font-size: 14px;\n}\n\n.saltCircularProgress-large {\n  font-size: 16px;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-disabled {\n}\n\n.saltCircularProgress-completed {\n}\n\n.saltCircularProgress-railCircle {\n  stroke: var(--salt-track-borderColor);\n  stroke-width: var(--salt-size-border);\n}\n\n.saltCircularProgress-gradientStart,\n.saltCircularProgress-gradientStop {\n  stop-color: var(--saltCircularProgress-gradient-color, var(--circularProgress-gradient-color));\n}\n\n.saltCircularProgress-container {\n  display: inline-block;\n}\n\n.saltCircularProgress-static {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-indeterminate {\n  animation: circular-rotate 1.4s linear infinite;\n}\n\n.saltCircularProgress-svg {\n  fill: var(--salt-accent-background);\n  display: block;\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n}\n\n.saltCircularProgress-circleStatic {\n  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-circleIndeterminate {\n  animation: circular-dash 1.4s ease-in-out infinite;\n}\n\n@keyframes circular-rotate {\n  0% {\n    transform-origin: 50% 50%;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes circular-dash {\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n}\n";
+var css_248z = ".saltCircularProgress {\n  color: var(--salt-text-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-track {\n  inline-size: calc(var(--salt-size-base) * 2);\n  block-size: calc(var(--salt-size-base) * 2);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-track-borderWidth);\n  border-radius: var(--salt-size-base);\n  border-color: var(--salt-track-borderColor);\n}\n\n.saltCircularProgress-bar {\n  inline-size: calc(var(--salt-size-base) * 2);\n  block-size: calc(var(--salt-size-base) * 2);\n  border-style: var(--salt-track-borderStyle);\n  border-width: calc(var(--salt-size-adornment) * 0.5);\n  border-radius: var(--salt-size-base);\n  border-color: var(--salt-accent-background);\n}\n\n.saltCircularProgress-bars {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n  inline-size: 50%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  transform: rotate(180deg);\n  overflow: hidden;\n  position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n  inline-size: 100%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  overflow: hidden;\n  transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n  transform: rotate(0deg);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CircularProgress.css.js.map