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

package/dist-es/dropdown-next/DropdownNext.js

@@ -0,0 +1,177 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { ListNext } from '../list-next/ListNext.js';
+import '../list-next/ListItemNext.js';
+import { makePrefixer, useId, useForkRef, SaltProvider } from '@salt-ds/core';
+import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
+import { forwardRef, useRef } from 'react';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './DropdownNext.css.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { FloatingPortal } from '@floating-ui/react';
+import { useDropdownNext } from './useDropdownNext.js';
+
+const withBaseName = makePrefixer("saltDropdownNext");
+const DropdownNext = forwardRef(function DropdownNext2(props, ref) {
+  const {
+    className,
+    disabled,
+    variant = "primary",
+    id: dropdownIdProp,
+    defaultSelected,
+    readOnly,
+    source,
+    placement = "bottom",
+    open: openControlProp,
+    selected: selectedControlProp,
+    highlightedItem: highlightedItemControlProp,
+    onFocus,
+    onKeyDown,
+    onBlur,
+    onMouseOver,
+    onMouseDown,
+    listRef: listRefProp,
+    ListProps,
+    ...restProps
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-dropdown-next",
+    css: css_248z,
+    window: targetWindow
+  });
+  const listId = useId(ListProps == null ? void 0 : ListProps.id);
+  const dropdownId = useId(dropdownIdProp);
+  const listRef = useRef(null);
+  const setListRef = useForkRef(listRefProp, listRef);
+  const listProps = {
+    defaultSelected,
+    disabled,
+    ref: listRef,
+    id: listId,
+    selected: selectedControlProp,
+    highlightedItem: highlightedItemControlProp
+  };
+  const {
+    handlers,
+    activeDescendant,
+    selectedItem,
+    highlightedItem,
+    getListItems,
+    portalProps
+  } = useDropdownNext({
+    listProps,
+    placement,
+    openControlProp
+  });
+  const { open, floating, reference, getDropdownNextProps } = portalProps;
+  const {
+    focusHandler,
+    keyDownHandler,
+    blurHandler,
+    mouseOverHandler,
+    mouseDownHandler
+  } = handlers;
+  const triggerRef = useForkRef(ref, reference);
+  const getIcon = () => {
+    if (readOnly)
+      return;
+    const iconClassName = clsx(withBaseName("icon"), {
+      [withBaseName("disabled")]: disabled
+    });
+    return open ? /* @__PURE__ */ jsx(ChevronUpIcon, {
+      className: iconClassName
+    }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
+      className: iconClassName
+    });
+  };
+  const handleFocus = (event) => {
+    if (disabled)
+      return;
+    focusHandler(event);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleKeyDown = (event) => {
+    if (disabled || readOnly)
+      return;
+    keyDownHandler(event);
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  const handleBlur = (event) => {
+    blurHandler();
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleMouseOver = (event) => {
+    mouseOverHandler();
+    onMouseOver == null ? void 0 : onMouseOver(event);
+  };
+  const handleMouseDown = (event) => {
+    if (disabled || readOnly)
+      return;
+    mouseDownHandler();
+    onMouseDown == null ? void 0 : onMouseDown(event);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(withBaseName()),
+    children: [
+      /* @__PURE__ */ jsxs("button", {
+        id: dropdownId,
+        disabled,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onMouseOver: handleMouseOver,
+        onMouseDown: handleMouseDown,
+        onBlur: handleBlur,
+        value: selectedItem,
+        className: clsx(
+          withBaseName("button"),
+          withBaseName(variant),
+          {
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("readOnly")]: readOnly
+          },
+          className
+        ),
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-activedescendant": activeDescendant,
+        tabIndex: disabled ? -1 : 0,
+        "aria-owns": listId,
+        "aria-controls": listId,
+        "aria-disabled": disabled,
+        ...restProps,
+        ref: triggerRef,
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: clsx(withBaseName("buttonText")),
+            children: selectedItem
+          }),
+          getIcon()
+        ]
+      }),
+      open && /* @__PURE__ */ jsx(FloatingPortal, {
+        children: /* @__PURE__ */ jsx(SaltProvider, {
+          children: /* @__PURE__ */ jsx("div", {
+            ref: floating,
+            ...getDropdownNextProps(),
+            children: /* @__PURE__ */ jsx(ListNext, {
+              id: listId,
+              className: clsx(withBaseName("list"), ListProps == null ? void 0 : ListProps.className),
+              disableFocus: true,
+              disabled: disabled || (ListProps == null ? void 0 : ListProps.disabled),
+              selected: selectedItem,
+              highlightedItem,
+              ...ListProps,
+              ref: setListRef,
+              children: getListItems(source)
+            })
+          })
+        })
+      })
+    ]
+  });
+});
+
+export { DropdownNext };
+//# sourceMappingURL=DropdownNext.js.map

package/dist-es/dropdown-next/DropdownNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport {\n  makePrefixer,\n  useId,\n  useForkRef,\n  UseFloatingUIProps,\n  SaltProvider,\n} from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n  useRef,\n  forwardRef,\n  HTMLAttributes,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  Ref,\n  ForwardedRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport dropdownNextCss from \"./DropdownNext.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { FloatingPortal, Placement } from \"@floating-ui/react\";\nimport { useDropdownNext } from \"./useDropdownNext\";\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport interface DropdownNextProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    HTMLAttributes<HTMLButtonElement> {\n  /**\n   * If `true`, dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Initially selected value for the dropdown, for use only in uncontrolled component.\n   */\n  defaultSelected?: string;\n  /**\n   * List of options when using a dropdown.\n   */\n  source: string[];\n  /**\n   * If `true`, dropdown is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Background styling variant. Defaults to `primary` .\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Placement of dropdown list. Defaults to `bottom` .\n   */\n  placement?: Placement;\n  /**\n   * Optional ref for the list component.\n   */\n  listRef?: Ref<HTMLUListElement>;\n  /**\n   * Additional props for dropdown list.\n   */\n  ListProps?: ListNextProps;\n  /* Status open or close for use in controlled component.  */\n  open?: boolean;\n  /* Selected prop for use in controlled component. */\n  selected?: string;\n  /* Highlighted item prop for use in controlled component. */\n  highlightedItem?: string;\n}\n\nexport const DropdownNext = forwardRef(function DropdownNext(\n  props: DropdownNextProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const {\n    className,\n    disabled,\n    variant = \"primary\",\n    id: dropdownIdProp,\n    defaultSelected,\n    readOnly,\n    source,\n    placement = \"bottom\",\n    open: openControlProp,\n    selected: selectedControlProp,\n    highlightedItem: highlightedItemControlProp,\n    onFocus,\n    onKeyDown,\n    onBlur,\n    onMouseOver,\n    onMouseDown,\n    listRef: listRefProp,\n    ListProps,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-next\",\n    css: dropdownNextCss,\n    window: targetWindow,\n  });\n\n  const listId = useId(ListProps?.id);\n  const dropdownId = useId(dropdownIdProp);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const setListRef = useForkRef(listRefProp, listRef);\n  const listProps = {\n    defaultSelected,\n    disabled,\n    ref: listRef,\n    id: listId,\n    selected: selectedControlProp,\n    highlightedItem: highlightedItemControlProp,\n  };\n\n  const {\n    handlers,\n    activeDescendant,\n    selectedItem,\n    highlightedItem,\n    getListItems,\n    portalProps,\n  } = useDropdownNext({\n    listProps,\n    placement,\n    openControlProp,\n  });\n\n  const { open, floating, reference, getDropdownNextProps } = portalProps;\n  const {\n    focusHandler,\n    keyDownHandler,\n    blurHandler,\n    mouseOverHandler,\n    mouseDownHandler,\n  } = handlers;\n\n  const triggerRef = useForkRef<HTMLButtonElement>(ref, reference);\n\n  const getIcon = () => {\n    if (readOnly) return;\n\n    const iconClassName = clsx(withBaseName(\"icon\"), {\n      [withBaseName(\"disabled\")]: disabled,\n    });\n\n    return open ? (\n      <ChevronUpIcon className={iconClassName} />\n    ) : (\n      <ChevronDownIcon className={iconClassName} />\n    );\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n    focusHandler(event);\n    onFocus?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || readOnly) return;\n    keyDownHandler(event);\n    onKeyDown?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    blurHandler();\n    onBlur?.(event);\n  };\n\n  const handleMouseOver = (event: MouseEvent<HTMLButtonElement>) => {\n    mouseOverHandler();\n    onMouseOver?.(event);\n  };\n\n  const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n    if (disabled || readOnly) return;\n    mouseDownHandler();\n    onMouseDown?.(event);\n  };\n\n  return (\n    <div className={clsx(withBaseName())}>\n      <button\n        id={dropdownId}\n        disabled={disabled}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onMouseOver={handleMouseOver}\n        onMouseDown={handleMouseDown}\n        onBlur={handleBlur}\n        value={selectedItem}\n        className={clsx(\n          withBaseName(\"button\"),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n          },\n          className\n        )}\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-activedescendant={activeDescendant}\n        tabIndex={disabled ? -1 : 0}\n        aria-owns={listId}\n        aria-controls={listId}\n        aria-disabled={disabled}\n        {...restProps}\n        ref={triggerRef}\n      >\n        <span className={clsx(withBaseName(\"buttonText\"))}>{selectedItem}</span>\n        {getIcon()}\n      </button>\n      {open && (\n        <FloatingPortal>\n          <SaltProvider>\n            <div ref={floating} {...getDropdownNextProps()}>\n              <ListNext\n                id={listId}\n                className={clsx(withBaseName(\"list\"), ListProps?.className)}\n                disableFocus\n                disabled={disabled || ListProps?.disabled}\n                selected={selectedItem}\n                highlightedItem={highlightedItem}\n                {...ListProps}\n                ref={setListRef}\n              >\n                {getListItems(source)}\n              </ListNext>\n            </div>\n          </SaltProvider>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n});\n"],"names":["DropdownNext","dropdownNextCss"],"mappings":"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"}

package/dist-es/dropdown-next/useDropdownNext.js

@@ -0,0 +1,165 @@
+import { jsx } from 'react/jsx-runtime';
+import { offset, size, flip, shift, limitShift, useInteractions, useDismiss, useRole } from '@floating-ui/react';
+import { useControlled, useFloatingUI } from '@salt-ds/core';
+import '../list-next/ListNext.js';
+import { ListItemNext } from '../list-next/ListItemNext.js';
+import { useList } from '../list-next/useList.js';
+
+const useDropdownNext = ({
+  listProps,
+  openControlProp,
+  onOpenChange: onOpenChangeProp,
+  placement: placementProp
+}) => {
+  const [open, setOpen] = useControlled({
+    controlled: openControlProp,
+    default: false,
+    name: "DropdownNext",
+    state: "open"
+  });
+  const {
+    focusHandler: listFocusHandler,
+    keyDownHandler: listKeyDownHandler,
+    blurHandler: listBlurHandler,
+    mouseOverHandler: listMouseOverHandler,
+    activeDescendant,
+    selectedItem,
+    setSelectedItem,
+    highlightedItem,
+    setHighlightedItem,
+    contextValue: listContextValue,
+    focusVisibleRef
+  } = useList({
+    ...listProps
+  });
+  const { select, highlight } = listContextValue;
+  const getListItems = (source) => {
+    if (!source)
+      return;
+    return source.map((item, index) => {
+      return /* @__PURE__ */ jsx(ListItemNext, {
+        value: item,
+        onMouseDown: (event) => {
+          select(event);
+        },
+        onMouseMove: (event) => {
+          highlight(event);
+        },
+        children: item
+      }, index);
+    });
+  };
+  const onOpenChange = (open2) => {
+    setOpen(open2);
+    onOpenChangeProp == null ? void 0 : onOpenChangeProp(open2);
+  };
+  const { floating, reference, x, y, strategy, placement, context } = useFloatingUI({
+    open,
+    onOpenChange,
+    placement: placementProp,
+    middleware: [
+      offset(0),
+      size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`
+          });
+        }
+      }),
+      flip(),
+      shift({ limiter: limitShift() })
+    ]
+  });
+  const { getFloatingProps } = useInteractions([
+    useDismiss(context),
+    useRole(context, { role: "listbox" })
+  ]);
+  const getDropdownNextProps = () => {
+    return getFloatingProps({
+      "data-placement": placement,
+      ref: floating,
+      style: {
+        top: y != null ? y : 0,
+        left: x != null ? x : 0,
+        position: strategy
+      }
+    });
+  };
+  const blurHandler = () => {
+    listBlurHandler();
+    setOpen(false);
+  };
+  const focusHandler = (event) => {
+    if (selectedItem) {
+      listFocusHandler(event);
+    }
+  };
+  const mouseDownHandler = () => {
+    setOpen(!open);
+  };
+  const mouseOverHandler = () => {
+    listMouseOverHandler();
+  };
+  const keyDownHandler = (event) => {
+    const { key } = event;
+    switch (key) {
+      case "ArrowUp":
+        listKeyDownHandler(event);
+        break;
+      case "ArrowDown":
+        setOpen(true);
+        listKeyDownHandler(event);
+        break;
+      case " ":
+      case "Enter":
+        if (!open) {
+          setOpen(true);
+          break;
+        }
+        if (open) {
+          listKeyDownHandler(event);
+          setOpen(false);
+          break;
+        }
+        break;
+      case "Escape":
+        setOpen(false);
+        break;
+      case "PageUp":
+      case "PageDown":
+      case "Home":
+      case "End":
+        if (open) {
+          listKeyDownHandler(event);
+          break;
+        }
+        break;
+    }
+  };
+  return {
+    handlers: {
+      focusHandler,
+      keyDownHandler,
+      blurHandler,
+      mouseOverHandler,
+      mouseDownHandler
+    },
+    activeDescendant,
+    selectedItem,
+    setSelectedItem,
+    highlightedItem,
+    setHighlightedItem,
+    focusVisibleRef,
+    getListItems,
+    portalProps: {
+      open,
+      setOpen,
+      floating,
+      reference,
+      getDropdownNextProps
+    }
+  };
+};
+
+export { useDropdownNext };
+//# sourceMappingURL=useDropdownNext.js.map

package/dist-es/dropdown-next/useDropdownNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownNext.js","sources":["../src/dropdown-next/useDropdownNext.tsx"],"sourcesContent":["import {\n  useInteractions,\n  useDismiss,\n  useRole,\n  flip,\n  shift,\n  limitShift,\n  offset,\n  size,\n} from \"@floating-ui/react\";\nimport {\n  useControlled,\n  useFloatingUI,\n  UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport { ListItemNext } from \"../list-next\";\nimport { HTMLProps, KeyboardEvent, FocusEvent } from \"react\";\nimport { useList, UseListProps } from \"../list-next/useList\";\n\ninterface UseDropdownNextProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  listProps: UseListProps;\n  // props for controlled dropdown\n  openControlProp?: boolean;\n}\n\nexport const useDropdownNext = ({\n  listProps,\n  openControlProp,\n  onOpenChange: onOpenChangeProp,\n  placement: placementProp,\n}: UseDropdownNextProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: openControlProp,\n    default: false,\n    name: \"DropdownNext\",\n    state: \"open\",\n  });\n\n  // USELIST HOOK\n  const {\n    focusHandler: listFocusHandler,\n    keyDownHandler: listKeyDownHandler,\n    blurHandler: listBlurHandler,\n    mouseOverHandler: listMouseOverHandler,\n    activeDescendant,\n    selectedItem,\n    setSelectedItem,\n    highlightedItem,\n    setHighlightedItem,\n    contextValue: listContextValue,\n    focusVisibleRef,\n  } = useList({\n    ...listProps,\n  });\n\n  const { select, highlight } = listContextValue;\n\n  // LIST SOURCE\n  const getListItems = (source: string[]) => {\n    if (!source) return;\n\n    return source.map((item, index) => {\n      return (\n        <ListItemNext\n          key={index}\n          value={item}\n          onMouseDown={(event) => {\n            select(event);\n          }}\n          onMouseMove={(event) => {\n            highlight(event);\n          }}\n        >\n          {item}\n        </ListItemNext>\n      );\n    });\n  };\n\n  // FLOATING PORTAL\n  const onOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChangeProp?.(open);\n  };\n\n  const { floating, reference, x, y, strategy, placement, context } =\n    useFloatingUI({\n      open,\n      onOpenChange,\n      placement: placementProp,\n      middleware: [\n        offset(0),\n        size({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n        flip(),\n        shift({ limiter: limitShift() }),\n      ],\n    });\n\n  const { getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useRole(context, { role: \"listbox\" }),\n  ]);\n\n  const getDropdownNextProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n      style: {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n      },\n    });\n  };\n\n  // HANDLERS\n  const blurHandler = () => {\n    listBlurHandler();\n    setOpen(false);\n  };\n\n  // handles focus on mouse and keyboard\n  const focusHandler = (event: FocusEvent<HTMLElement>) => {\n    if (selectedItem) {\n      listFocusHandler(event as FocusEvent<HTMLUListElement>);\n    }\n  };\n\n  // handles mouse click on dropdown button\n  const mouseDownHandler = () => {\n    setOpen(!open);\n  };\n\n  // handles mouse hover on dropdown button\n  const mouseOverHandler = () => {\n    listMouseOverHandler();\n  };\n\n  const keyDownHandler = (event: KeyboardEvent<HTMLElement>) => {\n    const { key } = event;\n    switch (key) {\n      case \"ArrowUp\":\n        listKeyDownHandler(event);\n        break;\n      case \"ArrowDown\":\n        setOpen(true);\n        listKeyDownHandler(event);\n        break;\n      case \" \":\n      case \"Enter\":\n        if (!open) {\n          setOpen(true);\n          break;\n        }\n        if (open) {\n          listKeyDownHandler(event);\n          setOpen(false);\n          break;\n        }\n        break;\n      case \"Escape\":\n        setOpen(false);\n        break;\n      case \"PageUp\":\n      case \"PageDown\":\n      case \"Home\":\n      case \"End\":\n        if (open) {\n          listKeyDownHandler(event);\n          break;\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  return {\n    handlers: {\n      focusHandler,\n      keyDownHandler,\n      blurHandler,\n      mouseOverHandler,\n      mouseDownHandler,\n    },\n    activeDescendant,\n    selectedItem,\n    setSelectedItem,\n    highlightedItem,\n    setHighlightedItem,\n    focusVisibleRef,\n    getListItems,\n    portalProps: {\n      open,\n      setOpen,\n      floating,\n      reference,\n      getDropdownNextProps,\n    },\n  };\n};\n"],"names":["open"],"mappings":"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"}

package/dist-es/index.js

@@ -41,6 +41,7 @@ export { SwatchesPicker } from './color-chooser/SwatchesPicker.js';
 export { Swatch } from './color-chooser/Swatch.js';
 export { saltColorMap, saltlight } from './color-chooser/colorMap.js';
 export { ComboBox } from './combo-box/ComboBox.js';
+export { ComboBoxNext } from './combo-box-next/ComboBoxNext.js';
 export { ComboBoxDeprecated } from './combo-box-deprecated/ComboBoxDeprecated.js';
 export { getDefaultFilter, getDefaultFilterRegex } from './combo-box-deprecated/filterHelpers.js';
 export { ContactAction } from './contact-details/ContactAction.js';
@@ -57,16 +58,19 @@ export { MailLinkComponent } from './contact-details/MailLinkComponent.js';
 export { ContentStatus } from './content-status/ContentStatus.js';
 export { DeckItem } from './deck-item/DeckItem.js';
 export { DeckLayout } from './deck-layout/DeckLayout.js';
+export { Dialog } from './dialog/Dialog.js';
+export { DialogTitle } from './dialog/DialogTitle.js';
 export { DialogActions } from './dialog/DialogActions.js';
 export { DialogContent } from './dialog/DialogContent.js';
-export { DialogTitle } from './dialog/DialogTitle.js';
-export { Dialog } from './dialog/Dialog.js';
+export { DialogContext, useDialogContext } from './dialog/DialogContext.js';
+export { DialogCloseButton } from './dialog/DialogCloseButton.js';
 export { DRAWER_POSITIONS, Drawer } from './drawer/Drawer.js';
 export { useDrawer } from './drawer/useDrawer.js';
 export { DropdownBase } from './dropdown/DropdownBase.js';
 export { DropdownButton } from './dropdown/DropdownButton.js';
 export { Dropdown } from './dropdown/Dropdown.js';
 export { useDropdownBase } from './dropdown/useDropdownBase.js';
+export { DropdownNext } from './dropdown-next/DropdownNext.js';
 export { EditableLabel } from './editable-label/EditableLabel.js';
 export { FileDropZone } from './file-drop-zone/FileDropZone.js';
 export { createFileTypeValidator, createTotalSizeValidator } from './file-drop-zone/validators.js';
@@ -95,7 +99,7 @@ export { MenuButton } from './menu-button/MenuButton.js';
 export { Metric } from './metric/Metric.js';
 export { MetricHeader } from './metric/MetricHeader.js';
 export { MetricContent } from './metric/MetricContent.js';
-export { NavItem } from './nav-item/NavItem.js';
+export { NavigationItem } from './navigation-item/NavigationItem.js';
 export { Overlay } from './overlay/Overlay.js';
 export { useOverlay } from './overlay/useOverlay.js';
 export { Pagination } from './pagination/Pagination.js';

package/dist-es/index.js.map

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

package/dist-es/list/Highlighter.js

@@ -16,7 +16,7 @@ const Highlighter = (props) => {
     window: targetWindow
   });
   const matchRegex = typeof matchPattern === "string" ? new RegExp(`(${escapeRegExp(matchPattern)})`, "gi") : matchPattern;
-  if (matchRegex === void 0) {
+  if (matchRegex === void 0 || matchPattern === "") {
     return /* @__PURE__ */ jsx(Fragment, {
       children: text
     });

package/dist-es/list/Highlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Highlighter.js","sources":["../src/list/Highlighter.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport highligherCss from \"./Highlighter.css\";\n\nconst withBaseName = makePrefixer(\"saltHighlighter\");\n\nexport interface HighlighterProps {\n  matchPattern?: RegExp | string;\n  text?: string;\n}\n\nexport const Highlighter = (\n  props: HighlighterProps\n): ReactElement<HighlighterProps> => {\n  const { matchPattern, text = \"\" } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-hightligher\",\n    css: highligherCss,\n    window: targetWindow,\n  });\n\n  const matchRegex =\n    typeof matchPattern === \"string\"\n      ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n      : matchPattern;\n\n  if (matchRegex === undefined) {\n    return <>{text}</>;\n  }\n  return (\n    <span>\n      {text.split(matchRegex).map((part, index) =>\n        part.match(matchRegex) ? (\n          <strong\n            className={withBaseName(\"highlight\")}\n            key={`${index}-${part}`}\n          >\n            {part}\n          </strong>\n        ) : (\n          part\n        )\n      )}\n    </span>\n  );\n};\n"],"names":["highligherCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAOtC,MAAA,WAAA,GAAc,CACzB,KACmC,KAAA;AACnC,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AACpC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,UAAA,GACJ,OAAO,YAAA,KAAiB,QACpB,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAI,YAAa,CAAA,YAAY,CAAM,CAAA,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AAEN,EAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA,EAAA,IAAA;AAAA,KAAK,CAAA,CAAA;AAAA,GACjB;AACA,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACE,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,UAAU,CAAE,CAAA,GAAA;AAAA,MAAI,CAAC,IAAM,EAAA,KAAA,KACjC,KAAK,KAAM,CAAA,UAAU,oBAClB,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QAGlC,QAAA,EAAA,IAAA;AAAA,OAFI,EAAA,CAAA,EAAG,KAAS,CAAA,CAAA,EAAA,IAAA,CAAA,CAGnB,CAEA,GAAA,IAAA;AAAA,KAEJ;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Highlighter.js","sources":["../src/list/Highlighter.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport highligherCss from \"./Highlighter.css\";\n\nconst withBaseName = makePrefixer(\"saltHighlighter\");\n\nexport interface HighlighterProps {\n  matchPattern?: RegExp | string;\n  text?: string;\n}\n\nexport const Highlighter = (\n  props: HighlighterProps\n): ReactElement<HighlighterProps> => {\n  const { matchPattern, text = \"\" } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-hightligher\",\n    css: highligherCss,\n    window: targetWindow,\n  });\n  const matchRegex =\n    typeof matchPattern === \"string\"\n      ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n      : matchPattern;\n\n  if (matchRegex === undefined || matchPattern === \"\") {\n    return <>{text}</>;\n  }\n  return (\n    <span>\n      {text.split(matchRegex).map((part, index) =>\n        part.match(matchRegex) ? (\n          <strong\n            className={withBaseName(\"highlight\")}\n            key={`${index}-${part}`}\n          >\n            {part}\n          </strong>\n        ) : (\n          part\n        )\n      )}\n    </span>\n  );\n};\n"],"names":["highligherCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAOtC,MAAA,WAAA,GAAc,CACzB,KACmC,KAAA;AACnC,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AACpC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA,UAAA,GACJ,OAAO,YAAA,KAAiB,QACpB,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAI,YAAa,CAAA,YAAY,CAAM,CAAA,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AAEN,EAAI,IAAA,UAAA,KAAe,KAAa,CAAA,IAAA,YAAA,KAAiB,EAAI,EAAA;AACnD,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA,EAAA,IAAA;AAAA,KAAK,CAAA,CAAA;AAAA,GACjB;AACA,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACE,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,UAAU,CAAE,CAAA,GAAA;AAAA,MAAI,CAAC,IAAM,EAAA,KAAA,KACjC,KAAK,KAAM,CAAA,UAAU,oBAClB,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QAGlC,QAAA,EAAA,IAAA;AAAA,OAFI,EAAA,CAAA,EAAG,KAAS,CAAA,CAAA,EAAA,IAAA,CAAA,CAGnB,CAEA,GAAA,IAAA;AAAA,KAEJ;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

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

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

package/dist-es/logo/Logo.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles for Logo */\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--salt-size-base);\n}\n\n.saltLogo svg {\n  fill: var(--salt-text-secondary-foreground);\n  stroke: none;\n}\n";
+var css_248z = "/* Styles for Logo */\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--salt-size-base);\n  gap: var(--salt-spacing-100);\n}\n\n.saltLogo svg {\n  fill: var(--salt-text-secondary-foreground);\n  stroke: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Logo.css.js.map

package/dist-es/logo/LogoImage.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles for LogoImage */\n.saltLogoImage {\n  max-height: 100%;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=LogoImage.css.js.map

package/dist-es/logo/LogoImage.css.js.map

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

package/dist-es/logo/LogoImage.js

@@ -2,11 +2,20 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './LogoImage.css.js';
 
 const withBaseName = makePrefixer("saltLogoImage");
 const LogoImage = forwardRef(
   function LogoImage2(props, ref) {
     const { className, alt, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-logo-image",
+      css: css_248z,
+      window: targetWindow
+    });
     return /* @__PURE__ */ jsx("img", {
       ...rest,
       alt,

package/dist-es/logo/LogoImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogoImage.js","sources":["../src/logo/LogoImage.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nexport interface LogoImageProps\n  extends Omit<ComponentPropsWithoutRef<\"img\">, \"alt\"> {\n  alt: string;\n}\n\nconst withBaseName = makePrefixer(\"saltLogoImage\");\n\nexport const LogoImage = forwardRef<HTMLImageElement, LogoImageProps>(\n  function LogoImage(props, ref) {\n    const { className, alt, ...rest } = props;\n\n    return (\n      <img\n        {...rest}\n        alt={alt}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["LogoImage"],"mappings":";;;;;AASA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,GAAQ,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEpC,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"LogoImage.js","sources":["../src/logo/LogoImage.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport logoImageCss from \"./LogoImage.css\";\n\nexport interface LogoImageProps\n  extends Omit<ComponentPropsWithoutRef<\"img\">, \"alt\"> {\n  alt: string;\n}\n\nconst withBaseName = makePrefixer(\"saltLogoImage\");\n\nexport const LogoImage = forwardRef<HTMLImageElement, LogoImageProps>(\n  function LogoImage(props, ref) {\n    const { className, alt, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo-image\",\n      css: logoImageCss,\n      window: targetWindow,\n    });\n\n    return (\n      <img\n        {...rest}\n        alt={alt}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["LogoImage","logoImageCss"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,GAAQ,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEpC,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,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/logo/LogoSeparator.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles for LogoSeparator */\n.saltLogoSeparator {\n  height: var(--salt-size-separator-height);\n  margin: 0 var(--salt-spacing-100);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);\n}\n";
+var css_248z = "/* Styles for LogoSeparator */\n.saltLogoSeparator {\n  height: var(--salt-size-separator-height);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=LogoSeparator.css.js.map

package/dist-es/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js}

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
 import { ChevronDownIcon, ChevronRightIcon } from '@salt-ds/icons';
-import { Button } from '@salt-ds/core';
 
 const iconExpansionMap = {
   vertical: {
@@ -12,21 +11,17 @@ const iconExpansionMap = {
     collapsed: ChevronDownIcon
   }
 };
-function ExpansionButton({
+function ExpansionIcon({
   expanded = false,
   orientation = "horizontal",
-  ...rest
+  className
 }) {
   const Icon = iconExpansionMap[orientation][expanded ? "expanded" : "collapsed"];
-  return /* @__PURE__ */ jsx(Button, {
-    "aria-label": "expand",
-    variant: "secondary",
-    ...rest,
-    children: /* @__PURE__ */ jsx(Icon, {
-      "aria-hidden": "true"
-    })
+  return /* @__PURE__ */ jsx(Icon, {
+    "aria-hidden": "true",
+    className
   });
 }
 
-export { ExpansionButton };
-//# sourceMappingURL=ExpansionButton.js.map
+export { ExpansionIcon };
+//# sourceMappingURL=ExpansionIcon.js.map

package/dist-es/navigation-item/ExpansionIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\nconst iconExpansionMap = {\n  vertical: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronRightIcon,\n  },\n  horizontal: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronDownIcon,\n  },\n};\n\nexport function ExpansionIcon({\n  expanded = false,\n  orientation = \"horizontal\",\n  className,\n}: Pick<NavigationItemProps, \"expanded\" | \"orientation\" | \"className\">) {\n  const Icon =\n    iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n  return <Icon aria-hidden=\"true\" className={className} />;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,gBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,eAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,aAAc,CAAA;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAAA,EACd,SAAA;AACF,CAAwE,EAAA;AACtE,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,IAAO,SAAA;AAAA,GAAsB,CAAA,CAAA;AACxD;;;;"}