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

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

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+var core = require('@salt-ds/core');
+require('../list-next/ListNext.js');
+var ListItemNext = require('../list-next/ListItemNext.js');
+var useList = require('../list-next/useList.js');
+
+const useDropdownNext = ({
+  listProps,
+  openControlProp,
+  onOpenChange: onOpenChangeProp,
+  placement: placementProp
+}) => {
+  const [open, setOpen] = core.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.useList({
+    ...listProps
+  });
+  const { select, highlight } = listContextValue;
+  const getListItems = (source) => {
+    if (!source)
+      return;
+    return source.map((item, index) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(ListItemNext.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 } = core.useFloatingUI({
+    open,
+    onOpenChange,
+    placement: placementProp,
+    middleware: [
+      react.offset(0),
+      react.size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`
+          });
+        }
+      }),
+      react.flip(),
+      react.shift({ limiter: react.limitShift() })
+    ]
+  });
+  const { getFloatingProps } = react.useInteractions([
+    react.useDismiss(context),
+    react.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
+    }
+  };
+};
+
+exports.useDropdownNext = useDropdownNext;
+//# sourceMappingURL=useDropdownNext.js.map

package/dist-cjs/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":["useControlled","useList","jsx","ListItemNext","open","useFloatingUI","offset","size","flip","shift","limitShift","useInteractions","useDismiss","useRole"],"mappings":"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"}

package/dist-cjs/index.js

@@ -45,6 +45,7 @@ var SwatchesPicker = require('./color-chooser/SwatchesPicker.js');
 var Swatch = require('./color-chooser/Swatch.js');
 var colorMap = require('./color-chooser/colorMap.js');
 var ComboBox = require('./combo-box/ComboBox.js');
+var ComboBoxNext = require('./combo-box-next/ComboBoxNext.js');
 var ComboBoxDeprecated = require('./combo-box-deprecated/ComboBoxDeprecated.js');
 var filterHelpers = require('./combo-box-deprecated/filterHelpers.js');
 var ContactAction = require('./contact-details/ContactAction.js');
@@ -61,16 +62,19 @@ var MailLinkComponent = require('./contact-details/MailLinkComponent.js');
 var ContentStatus = require('./content-status/ContentStatus.js');
 var DeckItem = require('./deck-item/DeckItem.js');
 var DeckLayout = require('./deck-layout/DeckLayout.js');
+var Dialog = require('./dialog/Dialog.js');
+var DialogTitle = require('./dialog/DialogTitle.js');
 var DialogActions = require('./dialog/DialogActions.js');
 var DialogContent = require('./dialog/DialogContent.js');
-var DialogTitle = require('./dialog/DialogTitle.js');
-var Dialog = require('./dialog/Dialog.js');
+var DialogContext = require('./dialog/DialogContext.js');
+var DialogCloseButton = require('./dialog/DialogCloseButton.js');
 var Drawer = require('./drawer/Drawer.js');
 var useDrawer = require('./drawer/useDrawer.js');
 var DropdownBase = require('./dropdown/DropdownBase.js');
 var DropdownButton = require('./dropdown/DropdownButton.js');
 var Dropdown = require('./dropdown/Dropdown.js');
 var useDropdownBase = require('./dropdown/useDropdownBase.js');
+var DropdownNext = require('./dropdown-next/DropdownNext.js');
 var EditableLabel = require('./editable-label/EditableLabel.js');
 var FileDropZone = require('./file-drop-zone/FileDropZone.js');
 var validators = require('./file-drop-zone/validators.js');
@@ -99,7 +103,7 @@ var MenuButton = require('./menu-button/MenuButton.js');
 var Metric = require('./metric/Metric.js');
 var MetricHeader = require('./metric/MetricHeader.js');
 var MetricContent = require('./metric/MetricContent.js');
-var NavItem = require('./nav-item/NavItem.js');
+var NavigationItem = require('./navigation-item/NavigationItem.js');
 var Overlay = require('./overlay/Overlay.js');
 var useOverlay = require('./overlay/useOverlay.js');
 var Pagination = require('./pagination/Pagination.js');
@@ -203,6 +207,7 @@ exports.Swatch = Swatch.Swatch;
 exports.saltColorMap = colorMap.saltColorMap;
 exports.saltlight = colorMap.saltlight;
 exports.ComboBox = ComboBox.ComboBox;
+exports.ComboBoxNext = ComboBoxNext.ComboBoxNext;
 exports.ComboBoxDeprecated = ComboBoxDeprecated.ComboBoxDeprecated;
 exports.getDefaultFilter = filterHelpers.getDefaultFilter;
 exports.getDefaultFilterRegex = filterHelpers.getDefaultFilterRegex;
@@ -220,10 +225,13 @@ exports.MailLinkComponent = MailLinkComponent.MailLinkComponent;
 exports.ContentStatus = ContentStatus.ContentStatus;
 exports.DeckItem = DeckItem.DeckItem;
 exports.DeckLayout = DeckLayout.DeckLayout;
+exports.Dialog = Dialog.Dialog;
+exports.DialogTitle = DialogTitle.DialogTitle;
 exports.DialogActions = DialogActions.DialogActions;
 exports.DialogContent = DialogContent.DialogContent;
-exports.DialogTitle = DialogTitle.DialogTitle;
-exports.Dialog = Dialog.Dialog;
+exports.DialogContext = DialogContext.DialogContext;
+exports.useDialogContext = DialogContext.useDialogContext;
+exports.DialogCloseButton = DialogCloseButton.DialogCloseButton;
 exports.DRAWER_POSITIONS = Drawer.DRAWER_POSITIONS;
 exports.Drawer = Drawer.Drawer;
 exports.useDrawer = useDrawer.useDrawer;
@@ -231,6 +239,7 @@ exports.DropdownBase = DropdownBase.DropdownBase;
 exports.DropdownButton = DropdownButton.DropdownButton;
 exports.Dropdown = Dropdown.Dropdown;
 exports.useDropdownBase = useDropdownBase.useDropdownBase;
+exports.DropdownNext = DropdownNext.DropdownNext;
 exports.EditableLabel = EditableLabel.EditableLabel;
 exports.FileDropZone = FileDropZone.FileDropZone;
 exports.createFileTypeValidator = validators.createFileTypeValidator;
@@ -262,7 +271,7 @@ exports.MenuButton = MenuButton.MenuButton;
 exports.Metric = Metric.Metric;
 exports.MetricHeader = MetricHeader.MetricHeader;
 exports.MetricContent = MetricContent.MetricContent;
-exports.NavItem = NavItem.NavItem;
+exports.NavigationItem = NavigationItem.NavigationItem;
 exports.Overlay = Overlay.Overlay;
 exports.useOverlay = useOverlay.useOverlay;
 exports.Pagination = Pagination.Pagination;

package/dist-cjs/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-cjs/list/Highlighter.js

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

package/dist-cjs/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":["makePrefixer","useWindow","useComponentCssInjection","highligherCss","escapeRegExp","jsx","Fragment"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,UAAA,GACJ,OAAO,YAAA,KAAiB,QACpB,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAIC,yBAAa,CAAA,YAAY,CAAM,CAAA,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AAEN,EAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,IAAO,uBAAAC,cAAA,CAAAC,mBAAA,EAAA;AAAA,MAAG,QAAA,EAAA,IAAA;AAAA,KAAK,CAAA,CAAA;AAAA,GACjB;AACA,EAAA,uBACGD,cAAA,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,oBAClBA,cAAA,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":["makePrefixer","useWindow","useComponentCssInjection","highligherCss","escapeRegExp","jsx","Fragment"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA,UAAA,GACJ,OAAO,YAAA,KAAiB,QACpB,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAIC,yBAAa,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,uBAAAC,cAAA,CAAAC,mBAAA,EAAA;AAAA,MAAG,QAAA,EAAA,IAAA;AAAA,KAAK,CAAA,CAAA;AAAA,GACjB;AACA,EAAA,uBACGD,cAAA,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,oBAClBA,cAAA,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-cjs/list/keyset.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyset.js","sources":["../src/list/keyset.ts"],"sourcesContent":["export class KeySet {\n  private keys: Map<number, number>;\n  private free: number[];\n  private nextKeyValue: number;\n\n  constructor(from = 0, to = 0) {\n    this.keys = new Map<number, number>();\n    this.free = [];\n    this.nextKeyValue = 0;\n    this.reset(from, to);\n  }\n\n  next(): number {\n    if (this.free.length) {\n      return this.free.pop()!;\n    } else {\n      return this.nextKeyValue++;\n    }\n  }\n\n  reset(from: number, to: number) {\n    this.keys.forEach((keyValue, rowIndex) => {\n      if (rowIndex < from || rowIndex >= to) {\n        this.free.push(keyValue);\n        this.keys.delete(rowIndex);\n      }\n    });\n\n    const size = to - from;\n    if (this.keys.size + this.free.length > size) {\n      this.free.length = size - this.keys.size;\n    }\n\n    for (let rowIndex = from; rowIndex < to; rowIndex++) {\n      if (!this.keys.has(rowIndex)) {\n        const nextKeyValue = this.next();\n        this.keys.set(rowIndex, nextKeyValue);\n      }\n    }\n  }\n\n  keyFor(rowIndex: number) {\n    return this.keys.get(rowIndex);\n  }\n}\n"],"names":[],"mappings":";;;;AAAO,MAAM,MAAO,CAAA;AAAA,EAKlB,WAAY,CAAA,IAAA,GAAO,CAAG,EAAA,EAAA,GAAK,CAAG,EAAA;AAC5B,IAAK,IAAA,CAAA,IAAA,uBAAW,GAAoB,EAAA,CAAA;AACpC,IAAA,IAAA,CAAK,OAAO,EAAC,CAAA;AACb,IAAA,IAAA,CAAK,YAAe,GAAA,CAAA,CAAA;AACpB,IAAK,IAAA,CAAA,KAAA,CAAM,MAAM,EAAE,CAAA,CAAA;AAAA,GACrB;AAAA,EAEA,IAAe,GAAA;AACb,IAAI,IAAA,IAAA,CAAK,KAAK,MAAQ,EAAA;AACpB,MAAO,OAAA,IAAA,CAAK,KAAK,GAAI,EAAA,CAAA;AAAA,KAChB,MAAA;AACL,MAAA,OAAO,IAAK,CAAA,YAAA,EAAA,CAAA;AAAA,KACd;AAAA,GACF;AAAA,EAEA,KAAA,CAAM,MAAc,EAAY,EAAA;AAC9B,IAAA,IAAA,CAAK,IAAK,CAAA,OAAA,CAAQ,CAAC,QAAA,EAAU,QAAa,KAAA;AACxC,MAAI,IAAA,QAAA,GAAW,IAAQ,IAAA,QAAA,IAAY,EAAI,EAAA;AACrC,QAAK,IAAA,CAAA,IAAA,CAAK,KAAK,QAAQ,CAAA,CAAA;AACvB,QAAK,IAAA,CAAA,IAAA,CAAK,OAAO,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,OAAO,EAAK,GAAA,IAAA,CAAA;AAClB,IAAA,IAAI,KAAK,IAAK,CAAA,IAAA,GAAO,IAAK,CAAA,IAAA,CAAK,SAAS,IAAM,EAAA;AAC5C,MAAA,IAAA,CAAK,IAAK,CAAA,MAAA,GAAS,IAAO,GAAA,IAAA,CAAK,IAAK,CAAA,IAAA,CAAA;AAAA,KACtC;AAEA,IAAA,KAAA,IAAS,QAAW,GAAA,IAAA,EAAM,QAAW,GAAA,EAAA,EAAI,QAAY,EAAA,EAAA;AACnD,MAAA,IAAI,CAAC,IAAA,CAAK,IAAK,CAAA,GAAA,CAAI,QAAQ,CAAG,EAAA;AAC5B,QAAM,MAAA,YAAA,GAAe,KAAK,IAAK,EAAA,CAAA;AAC/B,QAAK,IAAA,CAAA,IAAA,CAAK,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA,CAAA;AAAA,OACtC;AAAA,KACF;AAAA,GACF;AAAA,EAEA,OAAO,QAAkB,EAAA;AACvB,IAAO,OAAA,IAAA,CAAK,IAAK,CAAA,GAAA,CAAI,QAAQ,CAAA,CAAA;AAAA,GAC/B;AACF;;;;"}
+{"version":3,"file":"keyset.js","sources":["../src/list/keyset.ts"],"sourcesContent":["export class KeySet {\n  private keys: Map<number, number>;\n\n  private free: number[];\n\n  private nextKeyValue: number;\n\n  constructor(from = 0, to = 0) {\n    this.keys = new Map<number, number>();\n    this.free = [];\n    this.nextKeyValue = 0;\n    this.reset(from, to);\n  }\n\n  next(): number {\n    if (this.free.length) {\n      return this.free.pop()!;\n    } else {\n      return this.nextKeyValue++;\n    }\n  }\n\n  reset(from: number, to: number) {\n    this.keys.forEach((keyValue, rowIndex) => {\n      if (rowIndex < from || rowIndex >= to) {\n        this.free.push(keyValue);\n        this.keys.delete(rowIndex);\n      }\n    });\n\n    const size = to - from;\n    if (this.keys.size + this.free.length > size) {\n      this.free.length = size - this.keys.size;\n    }\n\n    for (let rowIndex = from; rowIndex < to; rowIndex++) {\n      if (!this.keys.has(rowIndex)) {\n        const nextKeyValue = this.next();\n        this.keys.set(rowIndex, nextKeyValue);\n      }\n    }\n  }\n\n  keyFor(rowIndex: number) {\n    return this.keys.get(rowIndex);\n  }\n}\n"],"names":[],"mappings":";;;;AAAO,MAAM,MAAO,CAAA;AAAA,EAOlB,WAAY,CAAA,IAAA,GAAO,CAAG,EAAA,EAAA,GAAK,CAAG,EAAA;AAC5B,IAAK,IAAA,CAAA,IAAA,uBAAW,GAAoB,EAAA,CAAA;AACpC,IAAA,IAAA,CAAK,OAAO,EAAC,CAAA;AACb,IAAA,IAAA,CAAK,YAAe,GAAA,CAAA,CAAA;AACpB,IAAK,IAAA,CAAA,KAAA,CAAM,MAAM,EAAE,CAAA,CAAA;AAAA,GACrB;AAAA,EAEA,IAAe,GAAA;AACb,IAAI,IAAA,IAAA,CAAK,KAAK,MAAQ,EAAA;AACpB,MAAO,OAAA,IAAA,CAAK,KAAK,GAAI,EAAA,CAAA;AAAA,KAChB,MAAA;AACL,MAAA,OAAO,IAAK,CAAA,YAAA,EAAA,CAAA;AAAA,KACd;AAAA,GACF;AAAA,EAEA,KAAA,CAAM,MAAc,EAAY,EAAA;AAC9B,IAAA,IAAA,CAAK,IAAK,CAAA,OAAA,CAAQ,CAAC,QAAA,EAAU,QAAa,KAAA;AACxC,MAAI,IAAA,QAAA,GAAW,IAAQ,IAAA,QAAA,IAAY,EAAI,EAAA;AACrC,QAAK,IAAA,CAAA,IAAA,CAAK,KAAK,QAAQ,CAAA,CAAA;AACvB,QAAK,IAAA,CAAA,IAAA,CAAK,OAAO,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,OAAO,EAAK,GAAA,IAAA,CAAA;AAClB,IAAA,IAAI,KAAK,IAAK,CAAA,IAAA,GAAO,IAAK,CAAA,IAAA,CAAK,SAAS,IAAM,EAAA;AAC5C,MAAA,IAAA,CAAK,IAAK,CAAA,MAAA,GAAS,IAAO,GAAA,IAAA,CAAK,IAAK,CAAA,IAAA,CAAA;AAAA,KACtC;AAEA,IAAA,KAAA,IAAS,QAAW,GAAA,IAAA,EAAM,QAAW,GAAA,EAAA,EAAI,QAAY,EAAA,EAAA;AACnD,MAAA,IAAI,CAAC,IAAA,CAAK,IAAK,CAAA,GAAA,CAAI,QAAQ,CAAG,EAAA;AAC5B,QAAM,MAAA,YAAA,GAAe,KAAK,IAAK,EAAA,CAAA;AAC/B,QAAK,IAAA,CAAA,IAAA,CAAK,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA,CAAA;AAAA,OACtC;AAAA,KACF;AAAA,GACF;AAAA,EAEA,OAAO,QAAkB,EAAA;AACvB,IAAO,OAAA,IAAA,CAAK,IAAK,CAAA,GAAA,CAAI,QAAQ,CAAA,CAAA;AAAA,GAC/B;AACF;;;;"}

package/dist-cjs/list-next/ListItemNext.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltListItemNext {\n  --listNext-item-text-color: var(--salt-text-primary-foreground);\n  --listNext-item-background: none;\n}\n\n.saltListItemNext {\n  color: var(--listNext-item-text-color);\n  background: var(--listNext-item-background);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-inline: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-size-unit);\n  position: relative;\n  align-items: center;\n  white-space: nowrap;\n  margin-block: var(--salt-size-border);\n  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n  border: var(--salt-focused-outline);\n}\n\n/* Active list item on focus using keyboard navigation  */\n.saltListItemNext-highlighted:not([aria-disabled=\"true\"]) {\n  --listNext-item-background: var(--salt-selectable-background-hover);\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);\n  --listNext-item-background: var(--salt-selectable-background-selected);\n  --saltIcon-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Style applied to disabled items */\n.saltListItemNext[aria-disabled=\"true\"] {\n  --listNext-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n.saltListItemNext[aria-disabled=\"true\"] .saltText {\n  color: var(--listNext-item-text-color);\n}\n\n/* disabled list item when selected */\n.saltListItemNext[aria-disabled=\"true\"][aria-selected=\"true\"] {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);\n  --listNext-item-background: var(--salt-selectable-background-selectedDisabled);\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltListItemNext {\n  --listNext-item-text-color: var(--salt-text-primary-foreground);\n  --listNext-item-background: none;\n}\n\n.saltListItemNext {\n  color: var(--listNext-item-text-color);\n  background: var(--listNext-item-background);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-size-unit);\n  position: relative;\n  align-items: center;\n  white-space: nowrap;\n  margin-top: var(--salt-size-border);\n  margin-bottom: var(--salt-size-border);\n  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n  border: var(--salt-focused-outline);\n}\n\n/* Active list item on focus using keyboard navigation  */\n.saltListItemNext-highlighted:not([aria-disabled=\"true\"]) {\n  --listNext-item-background: var(--salt-selectable-background-hover);\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);\n  --listNext-item-background: var(--salt-selectable-background-selected);\n  --saltIcon-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Style applied to disabled items */\n.saltListItemNext[aria-disabled=\"true\"] {\n  --listNext-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n.saltListItemNext[aria-disabled=\"true\"] .saltText {\n  color: var(--listNext-item-text-color);\n}\n\n/* disabled list item when selected */\n.saltListItemNext[aria-disabled=\"true\"][aria-selected=\"true\"] {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);\n  --listNext-item-background: var(--salt-selectable-background-selectedDisabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ListItemNext.css.js.map

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

@@ -54,6 +54,7 @@ const ListNext = React.forwardRef(
       selected,
       defaultSelected,
       onChange,
+      onSelect,
       id: listId,
       ref: listRef
     });

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

@@ -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":["makePrefixer","forwardRef","ListNext","useWindow","useComponentCssInjection","listNextCss","useId","useRef","useForkRef","useList","jsx","ListNextContext","clsx"],"mappings":"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"}
+{"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":["makePrefixer","forwardRef","ListNext","useWindow","useComponentCssInjection","listNextCss","useId","useRef","useForkRef","useList","jsx","ListNextContext","clsx"],"mappings":"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"}

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

@@ -7,10 +7,11 @@ var core = require('@salt-ds/core');
 
 const useList = ({
   disabled = false,
-  highlightedItem: highLightedItemProp,
+  highlightedItem: highlightedItemProp,
   selected: selectedProp,
   defaultSelected,
   onChange,
+  onSelect,
   id,
   ref
 }) => {
@@ -25,8 +26,8 @@ const useList = ({
     void 0
   );
   const [highlightedItem, setHighlightedItem] = core.useControlled({
-    controlled: highLightedItemProp,
-    default: highLightedItemProp,
+    controlled: highlightedItemProp,
+    default: void 0,
     name: "ListNext",
     state: "highlighted"
   });
@@ -119,12 +120,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 = React.useCallback(
     (value) => selectedItem === value,

package/dist-cjs/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":["useCallback","useState","useControlled","useIsFocusVisible","useEffect","useMemo"],"mappings":"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"}
+{"version":3,"file":"useList.js","sources":["../src/list-next/useList.ts"],"sourcesContent":["import {\n  FocusEvent,\n  KeyboardEvent,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useControlled, useIsFocusVisible } from \"@salt-ds/core\";\n\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":["useCallback","useState","useControlled","useIsFocusVisible","useEffect","useMemo"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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";
 
 module.exports = css_248z;
 //# sourceMappingURL=Logo.css.js.map

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles for LogoImage */\n.saltLogoImage {\n  max-height: 100%;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=LogoImage.css.js.map

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

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

package/dist-cjs/logo/LogoImage.js

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

package/dist-cjs/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":["makePrefixer","forwardRef","LogoImage","jsx","clsx"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,GAAQ,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEpC,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,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":["makePrefixer","forwardRef","LogoImage","useWindow","useComponentCssInjection","logoImageCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,GAAQ,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEpC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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";
 
 module.exports = css_248z;
 //# sourceMappingURL=LogoSeparator.css.js.map

package/dist-cjs/navigation-item/ConditionalWrapper.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@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__ */ jsxRuntime.jsx(core.Button, {
+    "aria-label": "expand",
+    variant: "secondary",
+    "aria-expanded": expanded,
+    className,
+    onClick: handleExpand,
+    children
+  }) : /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
+    "aria-current": active ? "page" : void 0,
+    href,
+    className,
+    children
+  });
+};
+
+exports.ConditionalWrapper = ConditionalWrapper;
+//# sourceMappingURL=ConditionalWrapper.js.map

package/dist-cjs/navigation-item/ConditionalWrapper.js.map

@@ -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":["jsx","Button","Link"],"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,yBACJA,cAAA,CAAAC,WAAA,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,oBAECD,cAAA,CAAAE,SAAA,EAAA;AAAA,IACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,IAChC,IAAA;AAAA,IACA,SAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}