npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.16 → 1.0.0-alpha.18 - Mend

@salt-ds/lab 1.0.0-alpha.16 → 1.0.0-alpha.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (204) hide show

package/dist-es/list-next/ListNext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListNext.js","sources":["../src/list-next/ListNext.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport {\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useList } from \"./useList\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport listNextCss from \"./ListNext.css\";\nimport { ListNextContext } from \"./ListNextContext\";\n\nconst withBaseName = makePrefixer(\"saltListNext\");\n\nexport interface ListNextProps\n extends Omit<ComponentPropsWithoutRef<\"ul\">, \"onChange\"> {\n /*\n If true, all items in list will be disabled.\n /\n disabled?: boolean;\n / If `true`, the component will not receive focus. /\n disableFocus?: boolean;\n / Value for the controlled version. /\n highlightedItem?: string;\n / Value for the controlled version. /\n selected?: string;\n / Callback for change event. /\n onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n / Initial selection. */\n defaultSelected?: string;\n}\n\nexport const ListNext = forwardRef<HTMLUListElement, ListNextProps>(\n function ListNext(\n {\n children,\n className,\n disabled,\n disableFocus,\n id,\n onSelect,\n onFocus,\n onBlur,\n onKeyDown,\n onMouseOver,\n highlightedItem,\n selected,\n defaultSelected,\n onChange,\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-next\",\n css: listNextCss,\n window: targetWindow,\n });\n\n const listId = useId(id);\n const listRef = useRef<HTMLUListElement>(null);\n const handleRef = useForkRef(listRef, ref);\n const {\n focusHandler,\n keyDownHandler,\n blurHandler,\n mouseOverHandler,\n activeDescendant,\n contextValue,\n focusVisibleRef,\n } = useList({\n disabled,\n highlightedItem,\n selected,\n defaultSelected,\n onChange,\n id: listId,\n ref: listRef,\n });\n\n const setListRef = useForkRef(focusVisibleRef, handleRef);\n\n const handleFocus = (event: FocusEvent<HTMLUListElement>) => {\n focusHandler(event);\n onFocus?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n if (disableFocus) {\n event.preventDefault();\n return;\n }\n keyDownHandler(event);\n onKeyDown?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLUListElement>) => {\n blurHandler();\n onBlur?.(event);\n };\n\n const handleMouseOver = (event: MouseEvent<HTMLUListElement>) => {\n mouseOverHandler();\n onMouseOver?.(event);\n };\n\n return (\n <ListNextContext.Provider value={contextValue}>\n <ul\n // TODO: fix type from useIsFocusVisible\n // @ts-ignore\n ref={setListRef}\n id={listId}\n className={clsx(withBaseName(), className)}\n role=\"listbox\"\n tabIndex={disabled \|\| disableFocus ? -1 : 0}\n aria-activedescendant={disabled ? undefined : activeDescendant}\n aria-disabled={disabled}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onMouseOver={handleMouseOver}\n {...rest}\n >\n {children}\n </ul>\n </ListNextContext.Provider>\n );\n }\n);\n"],"names":["ListNext","listNextCss"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;~~AAoBzC~~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"}
1	+ {"version":3,"file":"ListNext.js","sources":["../src/list-next/ListNext.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport {\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useList } from \"./useList\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport listNextCss from \"./ListNext.css\";\nimport { ListNextContext } from \"./ListNextContext\";\n\nconst withBaseName = makePrefixer(\"saltListNext\");\n\nexport interface ListNextProps\n extends Omit<ComponentPropsWithoutRef<\"ul\">, \"onChange\" \| \"onSelect\"> {\n /*\n If true, all items in list will be disabled.\n /\n disabled?: boolean;\n / If `true`, the component will not receive focus. /\n disableFocus?: boolean;\n / Value for the controlled version. /\n highlightedItem?: string;\n / Value for the controlled version. /\n selected?: string;\n / Callback for change event. Returns current selection./\n onChange?: (\n event: SyntheticEvent,\n data: { value: string \| undefined }\n ) => void;\n / Callback for select event. Returns new selected item./\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n / Initial selection. */\n defaultSelected?: string;\n}\n\nexport const ListNext = forwardRef<HTMLUListElement, ListNextProps>(\n function ListNext(\n {\n children,\n className,\n disabled,\n disableFocus,\n id,\n onSelect,\n onFocus,\n onBlur,\n onKeyDown,\n onMouseOver,\n highlightedItem,\n selected,\n defaultSelected,\n onChange,\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-next\",\n css: listNextCss,\n window: targetWindow,\n });\n\n const listId = useId(id);\n const listRef = useRef<HTMLUListElement>(null);\n const handleRef = useForkRef(listRef, ref);\n const {\n focusHandler,\n keyDownHandler,\n blurHandler,\n mouseOverHandler,\n activeDescendant,\n contextValue,\n focusVisibleRef,\n } = useList({\n disabled,\n highlightedItem,\n selected,\n defaultSelected,\n onChange,\n onSelect,\n id: listId,\n ref: listRef,\n });\n\n const setListRef = useForkRef(focusVisibleRef, handleRef);\n\n const handleFocus = (event: FocusEvent<HTMLUListElement>) => {\n focusHandler(event);\n onFocus?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n if (disableFocus) {\n event.preventDefault();\n return;\n }\n keyDownHandler(event);\n onKeyDown?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLUListElement>) => {\n blurHandler();\n onBlur?.(event);\n };\n\n const handleMouseOver = (event: MouseEvent<HTMLUListElement>) => {\n mouseOverHandler();\n onMouseOver?.(event);\n };\n\n return (\n <ListNextContext.Provider value={contextValue}>\n <ul\n // TODO: fix type from useIsFocusVisible\n // @ts-ignore\n ref={setListRef}\n id={listId}\n className={clsx(withBaseName(), className)}\n role=\"listbox\"\n tabIndex={disabled \|\| disableFocus ? -1 : 0}\n aria-activedescendant={disabled ? undefined : activeDescendant}\n aria-disabled={disabled}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onMouseOver={handleMouseOver}\n {...rest}\n >\n {children}\n </ul>\n </ListNextContext.Provider>\n );\n }\n);\n"],"names":["ListNext","listNextCss"],"mappings":"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"}

package/dist-es/list-next/useList.js CHANGED Viewed

@@ -3,10 +3,11 @@ import { useControlled, useIsFocusVisible } from '@salt-ds/core';
 const useList = ({
   disabled = false,
-  highlightedItem: highLightedItemProp,
+  highlightedItem: highlightedItemProp,
   selected: selectedProp,
   defaultSelected,
   onChange,
+  onSelect,
   id,
   ref
 }) => {
@@ -21,8 +22,8 @@ const useList = ({
     void 0
   );
   const [highlightedItem, setHighlightedItem] = useControlled({
-    controlled: highLightedItemProp,
-    default: highLightedItemProp,
+    controlled: highlightedItemProp,
+    default: void 0,
     name: "ListNext",
     state: "highlighted"
   });
@@ -115,12 +116,15 @@ const useList = ({
       const newValue = event.currentTarget.dataset.value;
       const activeOptions = getOptions();
       const isActiveOption = activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;
-      if (newValue && selectedItem !== newValue && isActiveOption) {
-        selectItem(event.currentTarget);
-        onChange == null ? void 0 : onChange(event, { value: newValue });
+      if (newValue && isActiveOption) {
+        onSelect == null ? void 0 : onSelect(event, { value: newValue });
+        if (selectedItem !== newValue) {
+          selectItem(event.currentTarget);
+          onChange == null ? void 0 : onChange(event, { value: selectedItem });
+        }
       }
     },
-    [selectItem, selectedItem, onChange, getOptions]
+    [selectItem, selectedItem, onChange, onSelect, getOptions]
   );
   const isSelected = useCallback(
     (value) => selectedItem === value,

package/dist-es/list-next/useList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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\nexport interface 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 \| HTMLElement>) => {\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":[],"mappings":"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"}
1	+ {"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\nexport interface 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 change event. This is called when the selected value changes /\n onChange?: (e: SyntheticEvent, data: { value: string \| undefined }) => void;\n / Callback for select event. This is called when any selection occurs, even if a previously selected value is selected again. /\n onSelect?: (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 onSelect,\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: undefined,\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 && isActiveOption) {\n onSelect?.(event, { value: newValue });\n if (selectedItem !== newValue) {\n selectItem(event.currentTarget);\n onChange?.(event, { value: selectedItem });\n }\n }\n },\n [selectItem, selectedItem, onChange, onSelect, 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 \| HTMLElement>) => {\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":[],"mappings":"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"}

package/dist-es/metric/MetricHeader.js CHANGED Viewed

@@ -24,6 +24,7 @@ const MetricHeader = forwardRef(
         id: subtitleId,
         className: withBaseName("subtitle"),
         "data-testid": "metric-subtitle",
+        variant: "secondary",
         children: subtitle
       });
       if (SubtitleLinkProps) {

package/dist-es/metric/MetricHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n /*\n If provided, subtitle will be rendered as a `Link` element with these props.\n \n @see `Link` for a list of valid props.\n /\n SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n /\n Subtitle of the Metric Header\n /\n subtitle?: string;\n /\n Title of the Metric Header\n */\n title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n function MetricHeader(\n { SubtitleLinkProps, className, title, subtitle, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-metric-header\",\n css: metricHeaderCss,\n window: targetWindow,\n });\n\n const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n const renderSubtitle = useCallback(() => {\n if (!subtitle) return null;\n\n const subtitleComponent = (\n <Text\n id={subtitleId}\n className={withBaseName(\"subtitle\")}\n data-testid=\"metric-subtitle\"\n >\n {subtitle}\n </Text>\n );\n\n if (SubtitleLinkProps) {\n const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n return (\n <Link href={href} {...restLinkProps}>\n {subtitleComponent}\n </Link>\n );\n }\n\n return subtitleComponent;\n }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n return (\n <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n <Text\n styleAs=\"h4\"\n className={withBaseName(\"title\")}\n data-testid=\"metric-title\"\n id={titleId}\n role=\"heading\"\n aria-level={headingAriaLevel}\n >\n {title}\n </Text>\n {renderSubtitle()}\n </div>\n );\n }\n);\n"],"names":["MetricHeader","metricHeaderCss"],"mappings":";;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqB,gBAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACH,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,~~QAEX~~,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n /*\n If provided, subtitle will be rendered as a `Link` element with these props.\n \n @see `Link` for a list of valid props.\n /\n SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n /\n Subtitle of the Metric Header\n /\n subtitle?: string;\n /\n Title of the Metric Header\n */\n title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n function MetricHeader(\n { SubtitleLinkProps, className, title, subtitle, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-metric-header\",\n css: metricHeaderCss,\n window: targetWindow,\n });\n\n const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n const renderSubtitle = useCallback(() => {\n if (!subtitle) return null;\n\n const subtitleComponent = (\n <Text\n id={subtitleId}\n className={withBaseName(\"subtitle\")}\n data-testid=\"metric-subtitle\"\n variant=\"secondary\"\n >\n {subtitle}\n </Text>\n );\n\n if (SubtitleLinkProps) {\n const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n return (\n <Link href={href} {...restLinkProps}>\n {subtitleComponent}\n </Link>\n );\n }\n\n return subtitleComponent;\n }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n return (\n <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n <Text\n styleAs=\"h4\"\n className={withBaseName(\"title\")}\n data-testid=\"metric-title\"\n id={titleId}\n role=\"heading\"\n aria-level={headingAriaLevel}\n >\n {title}\n </Text>\n {renderSubtitle()}\n </div>\n );\n }\n);\n"],"names":["MetricHeader","metricHeaderCss"],"mappings":";;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqB,gBAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACH,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,QACZ,OAAQ,EAAA,WAAA;AAAA,QAEP,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/navigation-item/ConditionalWrapper.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button, Link } from '@salt-ds/core';
+const ConditionalWrapper = ({
+  children,
+  className,
+  parent,
+  expanded,
+  onExpand,
+  active,
+  href
+}) => {
+  const handleExpand = (event) => {
+    event.stopPropagation();
+    onExpand == null ? void 0 : onExpand(event);
+  };
+  return parent ? /* @__PURE__ */ jsx(Button, {
+    "aria-label": "expand",
+    variant: "secondary",
+    "aria-expanded": expanded,
+    className,
+    onClick: handleExpand,
+    children
+  }) : /* @__PURE__ */ jsx(Link, {
+    "aria-current": active ? "page" : void 0,
+    href,
+    className,
+    children
+  });
+};
+export { ConditionalWrapper };
+//# sourceMappingURL=ConditionalWrapper.js.map

package/dist-es/navigation-item/ConditionalWrapper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConditionalWrapper.js","sources":["../src/navigation-item/ConditionalWrapper.tsx"],"sourcesContent":["import { MouseEvent, ReactNode } from \"react\";\nimport { Link, Button } from \"@salt-ds/core\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\ninterface ConditionalWrapperProps\n extends Pick<\n NavigationItemProps,\n \"parent\" | \"expanded\" | \"onExpand\" | \"active\" | \"href\"\n > {\n children: ReactNode;\n className: string;\n}\n\nexport const ConditionalWrapper = ({\n children,\n className,\n parent,\n expanded,\n onExpand,\n active,\n href,\n}: ConditionalWrapperProps) => {\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n return parent ? (\n <Button\n aria-label=\"expand\"\n variant=\"secondary\"\n aria-expanded={expanded}\n className={className}\n onClick={handleExpand}\n >\n {children}\n </Button>\n ) : (\n <Link\n aria-current={active ? \"page\" : undefined}\n href={href}\n className={className}\n >\n {children}\n </Link>\n );\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,OAAO,yBACJ,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,YAAW,EAAA,QAAA;AAAA,IACX,OAAQ,EAAA,WAAA;AAAA,IACR,eAAe,EAAA,QAAA;AAAA,IACf,SAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IAER,QAAA;AAAA,GACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,IAChC,IAAA;AAAA,IACA,SAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/navigation-item/NavigationItem.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-text-secondary-foreground);\n  --navigationItem-fill: var(--salt-text-secondary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: calc(var(--salt-size-bar) / 2);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active or selected */\n.saltNavigationItem-active,\n.saltNavigationItem-blurSelected {\n  --navigationItem-color: var(--salt-text-primary-foreground);\n  --navigationItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  font-weight: var(--salt-text-fontWeight);\n  padding-left: calc(var(--salt-spacing-250) + (var(--saltNavigationItem-level, 0) * var(--navigationItem-gap)));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::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.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper: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.saltNavigationItem-wrapper.saltNavigationItem-blurSelected::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurSelected:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurSelected:focus::after {\n  --navigationItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
+var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-text-secondary-foreground);\n  --navigationItem-fill: var(--salt-text-secondary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: var(--salt-size-indicator);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active or selected */\n.saltNavigationItem-active,\n.saltNavigationItem-blurActive {\n  --navigationItem-color: var(--salt-text-primary-foreground);\n  --navigationItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n  top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  font-weight: var(--salt-text-fontWeight);\n  padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::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.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper: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.saltNavigationItem-wrapper.saltNavigationItem-blurActive::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:focus::after {\n  --navigationItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=NavigationItem.css.js.map

package/dist-es/navigation-item/NavigationItem.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { makePrefixer, Button, Link } from '@salt-ds/core';
+import { makePrefixer } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { ExpansionIcon } from './ExpansionIcon.js';
+import { ConditionalWrapper } from './ConditionalWrapper.js';
 import css_248z from './NavigationItem.css.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -12,7 +13,7 @@ const NavigationItem = forwardRef(
   function NavigationItem2(props, ref) {
     const {
       active,
-      blurSelected,
+      blurActive,
       children,
       className,
       expanded = false,
@@ -34,29 +35,6 @@ const NavigationItem = forwardRef(
       ...styleProp,
       "--saltNavigationItem-level": `${level}`
     };
-    const handleExpand = (event) => {
-      event.stopPropagation();
-      onExpand == null ? void 0 : onExpand(event);
-    };
-    const ConditionalWrapper = ({
-      children: children2,
-      className: className2,
-      ...rest2
-    }) => parent ? /* @__PURE__ */ jsx(Button, {
-      "aria-label": "expand",
-      variant: "secondary",
-      "aria-expanded": expanded,
-      className: clsx(withBaseName("expandButton"), className2),
-      onClick: handleExpand,
-      ...rest2,
-      children: children2
-    }) : /* @__PURE__ */ jsx(Link, {
-      "aria-current": active ? "page" : void 0,
-      href,
-      className: className2,
-      ...rest2,
-      children: children2
-    });
     return /* @__PURE__ */ jsx("div", {
       ref,
       style,
@@ -67,11 +45,17 @@ const NavigationItem = forwardRef(
           withBaseName("wrapper"),
           {
             [withBaseName("active")]: active,
-            [withBaseName("blurSelected")]: blurSelected,
-            [withBaseName("nested")]: level !== 0
+            [withBaseName("blurActive")]: blurActive,
+            [withBaseName("nested")]: level !== 0,
+            [withBaseName("expandButton")]: parent
           },
           withBaseName(orientation)
         ),
+        parent,
+        expanded,
+        onExpand,
+        active,
+        href,
         children: [
           /* @__PURE__ */ jsx("span", {
             className: withBaseName("label"),

package/dist-es/navigation-item/NavigationItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef~~,\n~~ forwardRef~~,\n~~ MouseEventHandler~~,\n MouseEvent,\n ReactNode,\n~~} from \"react\";\nimport { makePrefixer, ~~Link, Button~~ } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /*\n Whether the navigation item is active.\n /\n active?: boolean;\n /\n Whether the ~~parent~~ ~~navigation~~ ~~item~~ ~~has~~ active nested ~~items~~.\n /\n ~~blurSelected~~?: boolean;\n /\n Whether the navigation item is expanded.\n /\n expanded?: boolean;\n /\n Level of nesting.\n /\n level?: number;\n /\n The orientation of the navigation item.\n /\n orientation?: \"horizontal\" \| \"vertical\";\n /\n Whether the navigation item is a parent with nested items.\n /\n parent?: boolean;\n /\n Action to be triggered when the navigation item is expanded.\n /\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /\n Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\~~ntype ConditionalWrapper = {\n children: ReactNode;\n className: string;\n};\n\~~nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(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 style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n const ConditionalWrapper = ({\n children,\n className,\n ...rest\n }: ConditionalWrapper) =>\n parent ? (\n <Button\n aria-label=\"expand\"\n variant=\"secondary\"\n aria-expanded={expanded}\n className={clsx(withBaseName(\"expandButton\"), className)}\n onClick={handleExpand}\n {...rest}\n >\n {children}\n </Button>\n ) : (\n <Link\n aria-current={active ? \"page\" : undefined}\n href={href}\n className={className}\n {...rest}\n >\n {children}\n </Link>\n );\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <ConditionalWrapper\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"~~blurSelected~~\")]: ~~blurSelected~~,\n [withBaseName(\"nested\")]: level !== 0,\n },\n withBaseName(orientation)\n )}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent && (\n <ExpansionIcon\n expanded={expanded}\n orientation={orientation}\n className={withBaseName(\"expandIcon\")}\n />\n )}\n </ConditionalWrapper>\n </div>\n );\n }\n);\n"],"names":["NavigationItem","navigationItemCss"~~,"children","className","rest"~~],"mappings":"~~;;;;;;;;;AAkDA~~,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;~~AAO~~/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,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,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,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,MAAM,qBAAqB,CAAC;AAAA,MAC1B,QAAAC,EAAAA,SAAAA;AAAA,MACA,SAAAC,EAAAA,UAAAA;AAAA,MACGC,GAAAA,KAAAA;AAAA,KACL,KACE,yBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,YAAW,EAAA,QAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,eAAe,EAAA,QAAA;AAAA,MACf,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,GAAGD,UAAS,CAAA;AAAA,MACvD,OAAS,EAAA,YAAA;AAAA,MACR,GAAGC,KAAAA;AAAA,MAEH,QAAAF,EAAAA,SAAAA;AAAA,KACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,MAChC,IAAA;AAAA,MACA,SAAWC,EAAAA,UAAAA;AAAA,MACV,GAAGC,KAAAA;AAAA,MAEH,QAAAF,EAAAA,SAAAA;AAAA,KACH,CAAA,CAAA;AAGJ,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,kBAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,~~cAAc~~,CAAI,GAAA,~~YAAA~~;AAAA,~~YAChC~~,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,~~WACtC~~;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACE,GAAA,CAAA,aAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,WAAA;AAAA,YACA,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,WACtC,CAAA;AAAA,SAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /*\n Whether the navigation item is active.\n /\n active?: boolean;\n /\n Whether the nested group is collapsed and there is an active nested item within it.\n /\n blurActive?: boolean;\n /\n Whether the navigation item is expanded.\n /\n expanded?: boolean;\n /\n Level of nesting.\n /\n level?: number;\n /\n The orientation of the navigation item.\n /\n orientation?: \"horizontal\" \| \"vertical\";\n /\n Whether the navigation item is a parent with nested items.\n /\n parent?: boolean;\n /\n Action to be triggered when the navigation item is expanded.\n /\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /\n Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\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-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <ConditionalWrapper\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"nested\")]: level !== 0,\n [withBaseName(\"expandButton\")]: parent,\n },\n withBaseName(orientation)\n )}\n parent={parent}\n expanded={expanded}\n onExpand={onExpand}\n active={active}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent && (\n <ExpansionIcon\n expanded={expanded}\n orientation={orientation}\n className={withBaseName(\"expandIcon\")}\n />\n )}\n </ConditionalWrapper>\n </div>\n );\n }\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;AA6CA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;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,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,kBAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACpC,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,MAAA;AAAA,WAClC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACE,GAAA,CAAA,aAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,WAAA;AAAA,YACA,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,WACtC,CAAA;AAAA,SAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/pill/Pill.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
+var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n  --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  --saltButton-background: var(--pill-background);\n  --saltButton-color: var(--pill-text-color);\n  --saltButton-fontSize: var(--pill-fontSize);\n  --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0);\n  --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  --saltButton-minWidth: var(--saltPill-minWidth, 40px);\n}\n\n.saltPill {\n  align-items: center;\n  border-radius: var(--saltPill-borderRadius, 0);\n  display: inline-flex;\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=Pill.css.js.map

package/dist-es/pill-next/PillNext.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-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";
+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  -webkit-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-left: var(--salt-spacing-50);\n  padding-right: 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";
 export { css_248z as default };
 //# sourceMappingURL=PillNext.css.js.map

package/dist-es/responsive/useDynamicCollapse.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDynamicCollapse.js","sources":["../src/responsive/useDynamicCollapse.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useState } from \"react\";\nimport {\n ElementRef,\n OverflowItem,\n OverflowHookProps,\n DynamicCollapseHookResult,\n} from \"./overflowTypes\";\nimport { byDescendingPriority } from \"./overflowUtils\";\nimport {\n getElementForItem,\n getRuntimePadding,\n isCollapsed,\n isCollapsible,\n measureContainerOverflow,\n measureElementSize,\n} from \"./overflowUtils\";\n\nconst UNCOLLAPSED_DYNAMIC_ITEMS =\n '[data-collapsible=\"dynamic\"]:not([data-collapsed=\"true\"]):not([data-collapsing=\"true\"])';\n\nconst hasUncollapsedDynamicItems = (containerRef: ElementRef) =>\n containerRef.current!.querySelector(UNCOLLAPSED_DYNAMIC_ITEMS) !== null;\n\nconst thereAreCollapsibleItemsAndTheyAreAllCollapsed = (\n items: OverflowItem[]\n) => {\n const collapsibleItems = items.filter(isCollapsible);\n return collapsibleItems.length > 0 && collapsibleItems.every(isCollapsed);\n};\n\nconst nextItemToCollapse = (listItems: OverflowItem[]): OverflowItem =>\n listItems.filter(isCollapsible).sort(byDescendingPriority).slice(-1)[0];\n\nexport const useDynamicCollapse = ({\n collectionHook,\n innerContainerSize = 0,\n label = \"Toolbar\",\n overflowItemsRef: managedItemsRef,\n overflowContainerRef: ref,\n orientation,\n}: OverflowHookProps): DynamicCollapseHookResult => {\n const { dispatch } = collectionHook;\n const [newCollapsingItem, setNewCollapsingItem] =\n useState<OverflowItem \| null>(null);\n const restoreCollapsingItem = useCallback(() => {\n dispatch({\n type: \"restore-collapsing-item\",\n });\n }, [dispatch]);\n\n const collapseCollapsingItem = useCallback(\n (item: OverflowItem, target: HTMLElement, minSize: number) => {\n const styleDimension =\n orientation === \"horizontal\" ? \"minWidth\" : \"minHeight\";\n // TODO do we really want to do this here ?\n target.style[styleDimension] = `${minSize}px`;\n const size = measureElementSize(target);\n\n dispatch({\n type: \"collapse-dynamic-item\",\n overflowItem: item,\n collapsedSize: size,\n minSize,\n });\n },\n [dispatch, orientation]\n );\n\n const checkDynamicContent = useCallback(\n (containerHasGrown?: boolean) => {\n const { current: managedItems } = managedItemsRef;\n // The order must matter here\n const collapsingChild = managedItems.find(\n ({ collapsible, collapsing }) => collapsible === \"dynamic\" && collapsing\n );\n const collapsedChild = managedItems.find(\n ({ collapsible, collapsed }) => collapsible === \"dynamic\" && collapsed\n );\n\n if (!collapsingChild && !collapsedChild) {\n return;\n }\n if (collapsedChild && !collapsingChild) {\n // TODO do we need a check to see whether we now have enough space to completely uncollapse the item ?\n // We may be able to uncollapse one or more items before the one we set to collapsing\n\n dispatch({\n type: \"uncollapse-dynamic-item\",\n overflowItem: collapsedChild,\n });\n } else if (collapsingChild) {\n if (containerHasGrown && collapsedChild) {\n const collapsingElement = getElementForItem(ref, collapsingChild);\n const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n // can we avoid measuring ths element on every resize event ?\n const size = measureElementSize(collapsingElement, dimension);\n // collapsingElement.getBoundingClientRect();\n\n // We don't restore a collapsing item unless there is at least one collapsed item\n if (collapsedChild && size === collapsingChild.size) {\n restoreCollapsingItem();\n }\n } else {\n // Note we are going to compare width with minWidth. Margin is ignored\n // use getBoundingClientRect rather than measureNode\n const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n const collapsingElement = getElementForItem(ref, collapsingChild);\n const { [dimension]: measuredSizeOfCollapsingElement } =\n collapsingElement.getBoundingClientRect();\n // minsize should be the size of the last item in the tooltray\n const [padStart, padEnd] = getRuntimePadding(\n collapsingElement,\n \"left\",\n \"right\"\n );\n //TODO we don't really want to measure the last item in the collapsing container\n // we want to measure the width of the item that will be the last to overflow.\n const lastTooltrayItem = collapsingElement.querySelector(\n \".Responsive-inner > :last-child\"\n );\n if (lastTooltrayItem) {\n const { [dimension]: childMinSize } =\n lastTooltrayItem.getBoundingClientRect();\n const minSize = padStart + childMinSize + padEnd;\n if (Math.floor(measuredSizeOfCollapsingElement) <= minSize) {\n collapseCollapsingItem(\n collapsingChild,\n collapsingElement,\n minSize\n );\n }\n }\n }\n }\n },\n [\n collapseCollapsingItem,\n dispatch,\n managedItemsRef,\n orientation,\n ref,\n restoreCollapsingItem,\n ]\n );\n\n const handleResize = useCallback(\n (size: number, containerHasGrown?: boolean) => {\n const { current: managedItems } = managedItemsRef;\n const { isOverflowing: willOverflow } = measureContainerOverflow(\n ref,\n orientation\n );\n\n const collapsingItem = managedItems.find((item) => item.collapsing);\n\n if (collapsingItem) {\n checkDynamicContent(containerHasGrown);\n } else if (\n containerHasGrown &&\n !willOverflow &&\n thereAreCollapsibleItemsAndTheyAreAllCollapsed(managedItems)\n ) {\n checkDynamicContent(true);\n }\n },\n [checkDynamicContent, managedItemsRef, orientation, ref]\n );\n\n const resetMeasurements = useCallback(() => {\n const { current: managedItems } = managedItemsRef;\n const hasDynamicItems = hasUncollapsedDynamicItems(ref);\n if (hasDynamicItems) {\n const collapsingItem = nextItemToCollapse(managedItems);\n setNewCollapsingItem(collapsingItem);\n\n dispatch({\n type: \"collapsing-item\",\n overflowItem: collapsingItem,\n });\n return true;\n } else {\n return false;\n }\n }, [dispatch, managedItemsRef, ref]);\n\n useIsomorphicLayoutEffect(() => {\n if (newCollapsingItem) {\n checkDynamicContent(false);\n }\n }, [checkDynamicContent, newCollapsingItem]);\n\n return {\n onResize: handleResize,\n resetMeasurements,\n };\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"useDynamicCollapse.js","sources":["../src/responsive/useDynamicCollapse.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useState } from \"react\";\nimport {\n ElementRef,\n OverflowItem,\n OverflowHookProps,\n DynamicCollapseHookResult,\n} from \"./overflowTypes\";\nimport {\n byDescendingPriority,\n getElementForItem,\n getRuntimePadding,\n isCollapsed,\n isCollapsible,\n measureContainerOverflow,\n measureElementSize,\n} from \"./overflowUtils\";\n\nconst UNCOLLAPSED_DYNAMIC_ITEMS =\n '[data-collapsible=\"dynamic\"]:not([data-collapsed=\"true\"]):not([data-collapsing=\"true\"])';\n\nconst hasUncollapsedDynamicItems = (containerRef: ElementRef) =>\n containerRef.current!.querySelector(UNCOLLAPSED_DYNAMIC_ITEMS) !== null;\n\nconst thereAreCollapsibleItemsAndTheyAreAllCollapsed = (\n items: OverflowItem[]\n) => {\n const collapsibleItems = items.filter(isCollapsible);\n return collapsibleItems.length > 0 && collapsibleItems.every(isCollapsed);\n};\n\nconst nextItemToCollapse = (listItems: OverflowItem[]): OverflowItem =>\n listItems.filter(isCollapsible).sort(byDescendingPriority).slice(-1)[0];\n\nexport const useDynamicCollapse = ({\n collectionHook,\n innerContainerSize = 0,\n label = \"Toolbar\",\n overflowItemsRef: managedItemsRef,\n overflowContainerRef: ref,\n orientation,\n}: OverflowHookProps): DynamicCollapseHookResult => {\n const { dispatch } = collectionHook;\n const [newCollapsingItem, setNewCollapsingItem] =\n useState<OverflowItem \| null>(null);\n const restoreCollapsingItem = useCallback(() => {\n dispatch({\n type: \"restore-collapsing-item\",\n });\n }, [dispatch]);\n\n const collapseCollapsingItem = useCallback(\n (item: OverflowItem, target: HTMLElement, minSize: number) => {\n const styleDimension =\n orientation === \"horizontal\" ? \"minWidth\" : \"minHeight\";\n // TODO do we really want to do this here ?\n target.style[styleDimension] = `${minSize}px`;\n const size = measureElementSize(target);\n\n dispatch({\n type: \"collapse-dynamic-item\",\n overflowItem: item,\n collapsedSize: size,\n minSize,\n });\n },\n [dispatch, orientation]\n );\n\n const checkDynamicContent = useCallback(\n (containerHasGrown?: boolean) => {\n const { current: managedItems } = managedItemsRef;\n // The order must matter here\n const collapsingChild = managedItems.find(\n ({ collapsible, collapsing }) => collapsible === \"dynamic\" && collapsing\n );\n const collapsedChild = managedItems.find(\n ({ collapsible, collapsed }) => collapsible === \"dynamic\" && collapsed\n );\n\n if (!collapsingChild && !collapsedChild) {\n return;\n }\n if (collapsedChild && !collapsingChild) {\n // TODO do we need a check to see whether we now have enough space to completely uncollapse the item ?\n // We may be able to uncollapse one or more items before the one we set to collapsing\n\n dispatch({\n type: \"uncollapse-dynamic-item\",\n overflowItem: collapsedChild,\n });\n } else if (collapsingChild) {\n if (containerHasGrown && collapsedChild) {\n const collapsingElement = getElementForItem(ref, collapsingChild);\n const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n // can we avoid measuring ths element on every resize event ?\n const size = measureElementSize(collapsingElement, dimension);\n // collapsingElement.getBoundingClientRect();\n\n // We don't restore a collapsing item unless there is at least one collapsed item\n if (collapsedChild && size === collapsingChild.size) {\n restoreCollapsingItem();\n }\n } else {\n // Note we are going to compare width with minWidth. Margin is ignored\n // use getBoundingClientRect rather than measureNode\n const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n const collapsingElement = getElementForItem(ref, collapsingChild);\n const { [dimension]: measuredSizeOfCollapsingElement } =\n collapsingElement.getBoundingClientRect();\n // minsize should be the size of the last item in the tooltray\n const [padStart, padEnd] = getRuntimePadding(\n collapsingElement,\n \"left\",\n \"right\"\n );\n //TODO we don't really want to measure the last item in the collapsing container\n // we want to measure the width of the item that will be the last to overflow.\n const lastTooltrayItem = collapsingElement.querySelector(\n \".Responsive-inner > :last-child\"\n );\n if (lastTooltrayItem) {\n const { [dimension]: childMinSize } =\n lastTooltrayItem.getBoundingClientRect();\n const minSize = padStart + childMinSize + padEnd;\n if (Math.floor(measuredSizeOfCollapsingElement) <= minSize) {\n collapseCollapsingItem(\n collapsingChild,\n collapsingElement,\n minSize\n );\n }\n }\n }\n }\n },\n [\n collapseCollapsingItem,\n dispatch,\n managedItemsRef,\n orientation,\n ref,\n restoreCollapsingItem,\n ]\n );\n\n const handleResize = useCallback(\n (size: number, containerHasGrown?: boolean) => {\n const { current: managedItems } = managedItemsRef;\n const { isOverflowing: willOverflow } = measureContainerOverflow(\n ref,\n orientation\n );\n\n const collapsingItem = managedItems.find((item) => item.collapsing);\n\n if (collapsingItem) {\n checkDynamicContent(containerHasGrown);\n } else if (\n containerHasGrown &&\n !willOverflow &&\n thereAreCollapsibleItemsAndTheyAreAllCollapsed(managedItems)\n ) {\n checkDynamicContent(true);\n }\n },\n [checkDynamicContent, managedItemsRef, orientation, ref]\n );\n\n const resetMeasurements = useCallback(() => {\n const { current: managedItems } = managedItemsRef;\n const hasDynamicItems = hasUncollapsedDynamicItems(ref);\n if (hasDynamicItems) {\n const collapsingItem = nextItemToCollapse(managedItems);\n setNewCollapsingItem(collapsingItem);\n\n dispatch({\n type: \"collapsing-item\",\n overflowItem: collapsingItem,\n });\n return true;\n } else {\n return false;\n }\n }, [dispatch, managedItemsRef, ref]);\n\n useIsomorphicLayoutEffect(() => {\n if (newCollapsingItem) {\n checkDynamicContent(false);\n }\n }, [checkDynamicContent, newCollapsingItem]);\n\n return {\n onResize: handleResize,\n resetMeasurements,\n };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/responsive/useOverflowLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOverflowLayout.js","sources":["../src/responsive/useOverflowLayout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport {\n ElementRef,\n ManagedListRef,\n OverflowItem,\n OverflowLayoutHookProps,\n} from \"./overflowTypes\";\n\nimport { getIsOverflowed } from \"./overflowUtils\";\nimport { useDynamicCollapse } from \"./useDynamicCollapse\";\nimport { useInstantCollapse } from \"./useInstantCollapse\";\nimport { useOverflow } from \"./useOverflow\";\nimport { useReclaimSpace } from \"./useReclaimSpace\";\nimport { ResizeHandler, useResizeObserver } from \"../responsive\";\n\~~nimport { measureContainerOverflow } from \"./overflowUtils\";\n\~~nconst MONITORED_DIMENSIONS: { [key: string]: string[] } = {\n horizontal: [\"width\", \"scrollHeight\"],\n vertical: [\"height\", \"scrollWidth\"],\n none: [],\n};\n\ntype overflowUpdate = (item1: OverflowItem, item2: OverflowItem) => void;\n\n// we need id, just to be able to assign id to overflowIndicator in useOverflow\nexport const useOverflowLayout = ({\n collectionHook,\n id,\n orientation,\n label = \"Toolbar\",\n disableOverflow = false,\n}: OverflowLayoutHookProps): [ElementRef, overflowUpdate] => {\n const overflowContainerRef: ElementRef = useRef(null);\n const overflowItemsRef: ManagedListRef = useRef([]);\n const measurement = useRef({ innerContainerSize: 0, rootContainerDepth: 0 });\n const { innerContainerSize } = measurement.current;\n\n const { dispatch, version: collectionVersion } = collectionHook;\n overflowItemsRef.current = collectionHook.data;\n\n const {\n onResize: onOverflowResize,\n resetMeasurements: resetOverflowMeasurements,\n } = useOverflow({\n collectionHook,\n id,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const hasOverflowedItems = getIsOverflowed(collectionHook.data);\n // const hasOverflowedItems = getIsOverflowed(managedItems);\n\n const {\n onResize: onDynamicResize,\n resetMeasurements: resetDynamicMeasurements,\n } = useDynamicCollapse({\n collectionHook,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const {\n onResize: onInstantResize,\n resetMeasurements: resetInstantMeasurements,\n } = useInstantCollapse({\n collectionHook,\n hasOverflowedItems,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const { onResize: onReclaimResize } = useReclaimSpace({\n collectionHook,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const resizeHandler: ResizeHandler = useCallback(\n ({\n scrollHeight,\n height = scrollHeight,\n scrollWidth,\n width = scrollWidth,\n }) => {\n const size = orientation === \"horizontal\" ? width : height;\n if (typeof size === \"number\") {\n const { innerContainerSize } = measurement.current;\n const sizeDiff = size - innerContainerSize;\n // Tiny size diffs seem to be down to the relative sub-pixel innaccuracy of\n // ResizeObserver vs getBoundingClientRect\n if (Math.abs(sizeDiff) > 0.5) {\n measurement.current.innerContainerSize = size;\n const containerHasGrown = size > innerContainerSize;\n // Note: any one of these hooks may trigger a render which\n // may affect the overflow state that the next hook sees.\n // Hence, they all test for overflow internally and independently.\n onDynamicResize(size, containerHasGrown);\n onInstantResize(size, containerHasGrown);\n onOverflowResize(size, containerHasGrown);\n onReclaimResize(size, containerHasGrown);\n }\n }\n },\n [\n onDynamicResize,\n onInstantResize,\n onOverflowResize,\n onReclaimResize,\n orientation,\n ]\n );\n\n const measureAndInitialize = useCallback(() => {\n const { isOverflowing, ...contentWidthAndDepth } = measureContainerOverflow(\n overflowContainerRef,\n orientation\n );\n\n measurement.current = contentWidthAndDepth;\n const { innerContainerSize } = contentWidthAndDepth;\n // TODO check this with complex combinations\n let handled = resetInstantMeasurements(isOverflowing);\n if (!handled) {\n handled = resetDynamicMeasurements();\n if (!handled) {\n resetOverflowMeasurements?.(isOverflowing, innerContainerSize);\n }\n }\n }, [\n orientation,\n resetInstantMeasurements,\n resetDynamicMeasurements,\n resetOverflowMeasurements,\n ]);\n\n const switchPriorities = useCallback(\n (item1: OverflowItem, item2: OverflowItem) => {\n const { priority: priority1 } = item1;\n const { priority: priority2 } = item2;\n if (priority1 !== priority2) {\n dispatch({\n type: \"update-items\",\n overflowItems: [\n { id: item1.id, priority: priority2 },\n { id: item2.id, priority: priority1 },\n ],\n });\n // Why do we need a timeout here when we don't inside resizeHandler ?\n setTimeout(measureAndInitialize, 0);\n }\n },\n [dispatch, measureAndInitialize]\n );\n\n // Important that we register our resize handler before we measure and\n // initialize. The initialization may trigger changes which we want the\n // resize observer to detect (when we have nested overflowables).\n useResizeObserver(\n overflowContainerRef,\n MONITORED_DIMENSIONS[disableOverflow ? \"none\" : orientation],\n resizeHandler\n );\n\n // This hook runs after a measurememnt cycle, not after every single change to\n // collection data. The version attribute has been introduced specifically for this.\n useEffect(() => {\n if (!disableOverflow) {\n measureAndInitialize();\n }\n }, [collectionVersion, disableOverflow, measureAndInitialize]);\n\n return [overflowContainerRef, switchPriorities];\n};\n"],"names":["innerContainerSize"],"mappings":";;;;;;;;;~~AAiBA~~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"}
1	+ {"version":3,"file":"useOverflowLayout.js","sources":["../src/responsive/useOverflowLayout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport {\n ElementRef,\n ManagedListRef,\n OverflowItem,\n OverflowLayoutHookProps,\n} from \"./overflowTypes\";\n\nimport { getIsOverflowed, measureContainerOverflow } from \"./overflowUtils\";\nimport { useDynamicCollapse } from \"./useDynamicCollapse\";\nimport { useInstantCollapse } from \"./useInstantCollapse\";\nimport { useOverflow } from \"./useOverflow\";\nimport { useReclaimSpace } from \"./useReclaimSpace\";\nimport { ResizeHandler, useResizeObserver } from \"../responsive\";\n\nconst MONITORED_DIMENSIONS: { [key: string]: string[] } = {\n horizontal: [\"width\", \"scrollHeight\"],\n vertical: [\"height\", \"scrollWidth\"],\n none: [],\n};\n\ntype overflowUpdate = (item1: OverflowItem, item2: OverflowItem) => void;\n\n// we need id, just to be able to assign id to overflowIndicator in useOverflow\nexport const useOverflowLayout = ({\n collectionHook,\n id,\n orientation,\n label = \"Toolbar\",\n disableOverflow = false,\n}: OverflowLayoutHookProps): [ElementRef, overflowUpdate] => {\n const overflowContainerRef: ElementRef = useRef(null);\n const overflowItemsRef: ManagedListRef = useRef([]);\n const measurement = useRef({ innerContainerSize: 0, rootContainerDepth: 0 });\n const { innerContainerSize } = measurement.current;\n\n const { dispatch, version: collectionVersion } = collectionHook;\n overflowItemsRef.current = collectionHook.data;\n\n const {\n onResize: onOverflowResize,\n resetMeasurements: resetOverflowMeasurements,\n } = useOverflow({\n collectionHook,\n id,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const hasOverflowedItems = getIsOverflowed(collectionHook.data);\n // const hasOverflowedItems = getIsOverflowed(managedItems);\n\n const {\n onResize: onDynamicResize,\n resetMeasurements: resetDynamicMeasurements,\n } = useDynamicCollapse({\n collectionHook,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const {\n onResize: onInstantResize,\n resetMeasurements: resetInstantMeasurements,\n } = useInstantCollapse({\n collectionHook,\n hasOverflowedItems,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const { onResize: onReclaimResize } = useReclaimSpace({\n collectionHook,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const resizeHandler: ResizeHandler = useCallback(\n ({\n scrollHeight,\n height = scrollHeight,\n scrollWidth,\n width = scrollWidth,\n }) => {\n const size = orientation === \"horizontal\" ? width : height;\n if (typeof size === \"number\") {\n const { innerContainerSize } = measurement.current;\n const sizeDiff = size - innerContainerSize;\n // Tiny size diffs seem to be down to the relative sub-pixel innaccuracy of\n // ResizeObserver vs getBoundingClientRect\n if (Math.abs(sizeDiff) > 0.5) {\n measurement.current.innerContainerSize = size;\n const containerHasGrown = size > innerContainerSize;\n // Note: any one of these hooks may trigger a render which\n // may affect the overflow state that the next hook sees.\n // Hence, they all test for overflow internally and independently.\n onDynamicResize(size, containerHasGrown);\n onInstantResize(size, containerHasGrown);\n onOverflowResize(size, containerHasGrown);\n onReclaimResize(size, containerHasGrown);\n }\n }\n },\n [\n onDynamicResize,\n onInstantResize,\n onOverflowResize,\n onReclaimResize,\n orientation,\n ]\n );\n\n const measureAndInitialize = useCallback(() => {\n const { isOverflowing, ...contentWidthAndDepth } = measureContainerOverflow(\n overflowContainerRef,\n orientation\n );\n\n measurement.current = contentWidthAndDepth;\n const { innerContainerSize } = contentWidthAndDepth;\n // TODO check this with complex combinations\n let handled = resetInstantMeasurements(isOverflowing);\n if (!handled) {\n handled = resetDynamicMeasurements();\n if (!handled) {\n resetOverflowMeasurements?.(isOverflowing, innerContainerSize);\n }\n }\n }, [\n orientation,\n resetInstantMeasurements,\n resetDynamicMeasurements,\n resetOverflowMeasurements,\n ]);\n\n const switchPriorities = useCallback(\n (item1: OverflowItem, item2: OverflowItem) => {\n const { priority: priority1 } = item1;\n const { priority: priority2 } = item2;\n if (priority1 !== priority2) {\n dispatch({\n type: \"update-items\",\n overflowItems: [\n { id: item1.id, priority: priority2 },\n { id: item2.id, priority: priority1 },\n ],\n });\n // Why do we need a timeout here when we don't inside resizeHandler ?\n setTimeout(measureAndInitialize, 0);\n }\n },\n [dispatch, measureAndInitialize]\n );\n\n // Important that we register our resize handler before we measure and\n // initialize. The initialization may trigger changes which we want the\n // resize observer to detect (when we have nested overflowables).\n useResizeObserver(\n overflowContainerRef,\n MONITORED_DIMENSIONS[disableOverflow ? \"none\" : orientation],\n resizeHandler\n );\n\n // This hook runs after a measurememnt cycle, not after every single change to\n // collection data. The version attribute has been introduced specifically for this.\n useEffect(() => {\n if (!disableOverflow) {\n measureAndInitialize();\n }\n }, [collectionVersion, disableOverflow, measureAndInitialize]);\n\n return [overflowContainerRef, switchPriorities];\n};\n"],"names":["innerContainerSize"],"mappings":"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"}

package/dist-es/stepped-tracker/StepLabel/StepLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport ~~type~~ StepLabelProps = ComponentPropsWithoutRef<\"label\"~~>;\~~n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n function StepLabel({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-step-label\",\n css: stepLabelCss,\n window: targetWindow,\n });\n\n return (\n <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n <strong>{children}</strong>\n </Label>\n );\n }\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;~~AAI1C~~,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAM,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC/D,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAQ,QAAA;AAAA,OAAS,CAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport interface StepLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n /*\n The content of Step Label\n */\n children?: ReactNode;\n}\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n function StepLabel({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-step-label\",\n css: stepLabelCss,\n window: targetWindow,\n });\n\n return (\n <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n <strong>{children}</strong>\n </Label>\n );\n }\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAS1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAM,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC/D,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAQ,QAAA;AAAA,OAAS,CAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/stepper-input/StepperInput.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-medium {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 24px;\n  --stepperInput-input-maxHeight: 28px;\n  --stepperInput-secondary-button-height: 26px;\n  --stepperInput-secondary-button-width: 26px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n.salt-density-touch {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 16px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 36px;\n  --stepperInput-secondary-button-height: 36px;\n  --stepperInput-secondary-button-width: 36px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-low {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 28px;\n  --stepperInput-secondary-button-height: 28px;\n  --stepperInput-secondary-button-width: 28px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-high {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 8px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 16px;\n  --stepperInput-input-maxHeight: 20px;\n  --stepperInput-secondary-button-height: 18px;\n  --stepperInput-secondary-button-width: 18px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n/* Styles applied to adornment container */\n.saltStepperInput-adornmentContainer {\n  display: flex;\n  position: relative;\n  top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));\n}\n\n/* Styles applied to refresh button */\n.saltStepperInput-secondaryButton {\n  --saltButton-height: var(--stepperInput-secondary-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-secondary-button-width);\n}\n\n.saltStepperInput-hideSecondaryButton {\n  visibility: hidden;\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: var(--stepperInput-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-button-width);\n}\n\n/* Styles applied to increment button */\n.saltStepperInput-increment {\n}\n\n/* Styles applied to decrement button */\n.saltStepperInput-decrement {\n  margin-top: 0;\n}\n\n/* Styles applied to stepper button icon */\n.saltStepperInput-stepperButtonIcon {\n}\n\n/* Styles applied to input component */\n.saltStepperInput-input {\n  max-height: var(--saltStepperInput-maxHeight, unset);\n}\n";
+var css_248z = ".salt-density-medium {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 24px;\n  --stepperInput-input-maxHeight: 28px;\n  --stepperInput-secondary-button-height: 26px;\n  --stepperInput-secondary-button-width: 26px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n.salt-density-touch {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 16px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 36px;\n  --stepperInput-secondary-button-height: 36px;\n  --stepperInput-secondary-button-width: 36px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-low {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 28px;\n  --stepperInput-secondary-button-height: 28px;\n  --stepperInput-secondary-button-width: 28px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-high {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 8px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 16px;\n  --stepperInput-input-maxHeight: 20px;\n  --stepperInput-secondary-button-height: 18px;\n  --stepperInput-secondary-button-width: 18px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n/* Styles applied to adornment container */\n.saltStepperInput-adornmentContainer {\n  display: flex;\n  position: relative;\n  top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));\n}\n\n/* Styles applied to refresh button */\n.saltStepperInput-secondaryButton {\n  --saltButton-height: var(--stepperInput-secondary-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-secondary-button-width);\n}\n\n.saltStepperInput-hideSecondaryButton {\n  visibility: hidden;\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: var(--stepperInput-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-button-width);\n}\n\n/* Styles applied to increment button */\n.saltStepperInput-increment {\n}\n\n/* Styles applied to decrement button */\n.saltStepperInput-decrement {\n  --saltButton-margin: 0 var(--stepperInput-button-margin) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n}\n\n/* Styles applied to stepper button icon */\n.saltStepperInput-stepperButtonIcon {\n}\n\n/* Styles applied to input component */\n.saltStepperInput-input {\n  max-height: var(--saltStepperInput-maxHeight, unset);\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=StepperInput.css.js.map