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

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/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js}

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@salt-ds/icons');
-var core = require('@salt-ds/core');
 
 const iconExpansionMap = {
   vertical: {
@@ -16,21 +15,17 @@ const iconExpansionMap = {
     collapsed: icons.ChevronDownIcon
   }
 };
-function ExpansionButton({
+function ExpansionIcon({
   expanded = false,
   orientation = "horizontal",
-  ...rest
+  className
 }) {
   const Icon = iconExpansionMap[orientation][expanded ? "expanded" : "collapsed"];
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-    "aria-label": "expand",
-    variant: "secondary",
-    ...rest,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
-      "aria-hidden": "true"
-    })
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, {
+    "aria-hidden": "true",
+    className
   });
 }
 
-exports.ExpansionButton = ExpansionButton;
-//# sourceMappingURL=ExpansionButton.js.map
+exports.ExpansionIcon = ExpansionIcon;
+//# sourceMappingURL=ExpansionIcon.js.map

package/dist-cjs/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":["ChevronDownIcon","ChevronRightIcon","jsx"],"mappings":";;;;;;;AAGA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAAA,qBAAA;AAAA,IACV,SAAW,EAAAC,sBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAAD,qBAAA;AAAA,IACV,SAAW,EAAAA,qBAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,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,uBAAQE,cAAA,CAAA,IAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,IAAO,SAAA;AAAA,GAAsB,CAAA,CAAA;AACxD;;;;"}

package/dist-cjs/navigation-item/NavigationItem.css.js

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

package/dist-cjs/navigation-item/NavigationItem.css.js.map

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

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

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var ExpansionIcon = require('./ExpansionIcon.js');
+var NavigationItem$1 = require('./NavigationItem.css.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+
+const withBaseName = core.makePrefixer("saltNavigationItem");
+const NavigationItem = React.forwardRef(
+  function NavigationItem2(props, ref) {
+    const {
+      active,
+      blurSelected,
+      children,
+      className,
+      expanded = false,
+      orientation = "horizontal",
+      parent,
+      level = 0,
+      onExpand,
+      href,
+      style: styleProp,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-navigation-item",
+      css: NavigationItem$1,
+      window: targetWindow
+    });
+    const style = {
+      ...styleProp,
+      "--saltNavigationItem-level": `${level}`
+    };
+    const handleExpand = (event) => {
+      event.stopPropagation();
+      onExpand == null ? void 0 : onExpand(event);
+    };
+    const ConditionalWrapper = ({
+      children: children2,
+      className: className2,
+      ...rest2
+    }) => parent ? /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+      "aria-label": "expand",
+      variant: "secondary",
+      "aria-expanded": expanded,
+      className: clsx.clsx(withBaseName("expandButton"), className2),
+      onClick: handleExpand,
+      ...rest2,
+      children: children2
+    }) : /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
+      "aria-current": active ? "page" : void 0,
+      href,
+      className: className2,
+      ...rest2,
+      children: children2
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ref,
+      style,
+      className: clsx.clsx(withBaseName(), className),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ConditionalWrapper, {
+        className: clsx.clsx(
+          withBaseName("wrapper"),
+          {
+            [withBaseName("active")]: active,
+            [withBaseName("blurSelected")]: blurSelected,
+            [withBaseName("nested")]: level !== 0
+          },
+          withBaseName(orientation)
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", {
+            className: withBaseName("label"),
+            children
+          }),
+          parent && /* @__PURE__ */ jsxRuntime.jsx(ExpansionIcon.ExpansionIcon, {
+            expanded,
+            orientation,
+            className: withBaseName("expandIcon")
+          })
+        ]
+      })
+    });
+  }
+);
+
+exports.NavigationItem = NavigationItem;
+//# sourceMappingURL=NavigationItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  MouseEventHandler,\n  MouseEvent,\n  ReactNode,\n} from \"react\";\nimport { makePrefixer, Link, Button } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the parent navigation item has active nested items.\n   */\n  blurSelected?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\ntype ConditionalWrapper = {\n  children: ReactNode;\n  className: string;\n};\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurSelected,\n      children,\n      className,\n      expanded = false,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      href,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n      onExpand?.(event);\n    };\n\n    const ConditionalWrapper = ({\n      children,\n      className,\n      ...rest\n    }: ConditionalWrapper) =>\n      parent ? (\n        <Button\n          aria-label=\"expand\"\n          variant=\"secondary\"\n          aria-expanded={expanded}\n          className={clsx(withBaseName(\"expandButton\"), className)}\n          onClick={handleExpand}\n          {...rest}\n        >\n          {children}\n        </Button>\n      ) : (\n        <Link\n          aria-current={active ? \"page\" : undefined}\n          href={href}\n          className={className}\n          {...rest}\n        >\n          {children}\n        </Link>\n      );\n\n    return (\n      <div\n        ref={ref}\n        style={style}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <ConditionalWrapper\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active,\n              [withBaseName(\"blurSelected\")]: blurSelected,\n              [withBaseName(\"nested\")]: level !== 0,\n            },\n            withBaseName(orientation)\n          )}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent && (\n            <ExpansionIcon\n              expanded={expanded}\n              orientation={orientation}\n              className={withBaseName(\"expandIcon\")}\n            />\n          )}\n        </ConditionalWrapper>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","children","className","rest","jsx","Button","clsx","Link","jsxs","ExpansionIcon"],"mappings":"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"}

package/dist-es/combo-box-next/ComboBoxNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltComboBoxNext-highlight {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltComboBoxNext-input:hover {\n  --saltInput-borderColor: var(--salt-focused-outlineColor);\n}\n\n.saltComboBoxNext-list {\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * var(--comboBoxNext-itemCount, 5));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ComboBoxNext.css.js.map

package/dist-es/combo-box-next/ComboBoxNext.css.js.map

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

package/dist-es/combo-box-next/ComboBoxNext.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { makePrefixer, useId, useForkRef, Input, SaltProvider } from '@salt-ds/core';
+import { ListNext } from '../list-next/ListNext.js';
+import '../list-next/ListItemNext.js';
+import { FloatingPortal } from '@floating-ui/react';
+import { useComboBox } from './useComboBox.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './ComboBoxNext.css.js';
+import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
+import { DefaultListItem, defaultFilter } from './utils.js';
+import { clsx } from 'clsx';
+
+const withBaseName = makePrefixer("saltComboBoxNext");
+const ComboBoxNext = forwardRef(function ComboBoxNext2({
+  InputProps: InputProps2 = {},
+  ListProps = {},
+  PortalProps = {},
+  disabled,
+  highlightedItem: highlightedItemProp,
+  selected,
+  defaultSelected,
+  onKeyDown,
+  onChange,
+  onBlur,
+  onFocus,
+  onMouseOver,
+  source,
+  ListItem = DefaultListItem,
+  itemFilter = defaultFilter,
+  variant = "primary",
+  listRef: listRefProp,
+  ...rest
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-combo-box-next",
+    css: css_248z,
+    window: targetWindow
+  });
+  const listId = useId(ListProps == null ? void 0 : ListProps.id);
+  const listRef = useRef(null);
+  const setListRef = useForkRef(listRefProp, listRef);
+  const listProps = {
+    highlightedItem: highlightedItemProp,
+    selected,
+    defaultSelected,
+    onChange,
+    id: listId,
+    ref: listRef
+  };
+  const {
+    inputValue,
+    setInputValue,
+    portalProps,
+    selectedItem,
+    highlightedItem,
+    activeDescendant,
+    focusVisibleRef,
+    keyDownHandler,
+    focusHandler,
+    blurHandler,
+    setSelectedItem,
+    setHighlightedItem,
+    mouseOverHandler
+  } = useComboBox({
+    onBlur,
+    onFocus,
+    onMouseOver,
+    onKeyDown,
+    listProps,
+    PortalProps
+  });
+  const {
+    open,
+    setOpen,
+    floating,
+    reference,
+    getTriggerProps,
+    getPortalProps
+  } = portalProps;
+  const triggerRef = useForkRef(ref, reference);
+  const inputRef = useForkRef(triggerRef, focusVisibleRef);
+  const getFilteredSource = () => {
+    if (!source)
+      return null;
+    if (selectedItem)
+      return source;
+    return itemFilter && itemFilter(source, inputValue);
+  };
+  const filteredSource = getFilteredSource();
+  const onInputChange = (event) => {
+    const value = event.target.value;
+    setInputValue(value);
+    if (value === "") {
+      setHighlightedItem(void 0);
+      setSelectedItem(value);
+    } else {
+      if (!open) {
+        setOpen(true);
+      }
+      if (filteredSource) {
+        setHighlightedItem(filteredSource[0]);
+      }
+    }
+    onChange == null ? void 0 : onChange(event, { value: inputValue || "" });
+  };
+  const adornment = open ? /* @__PURE__ */ jsx(ChevronUpIcon, {
+    className: withBaseName("chevron")
+  }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
+    className: withBaseName("chevron")
+  });
+  const { className: listClassName, ...restListProps } = ListProps;
+  const { className: inputClassName, ...restInputProps } = InputProps2;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(Input, {
+        "aria-controls": listId,
+        "aria-activedescendant": disabled ? void 0 : activeDescendant,
+        className: clsx(withBaseName("input"), inputClassName),
+        disabled,
+        endAdornment: adornment,
+        onChange: onInputChange,
+        onBlur: blurHandler,
+        inputRef,
+        inputProps: {
+          "aria-expanded": open,
+          tabIndex: disabled ? -1 : 0,
+          onFocus: focusHandler,
+          onKeyDown: keyDownHandler
+        },
+        role: "combobox",
+        variant,
+        value: inputValue,
+        ...getTriggerProps(),
+        ...restInputProps
+      }),
+      open && filteredSource && /* @__PURE__ */ jsx(FloatingPortal, {
+        children: /* @__PURE__ */ jsx(SaltProvider, {
+          children: /* @__PURE__ */ jsx("div", {
+            ref: floating,
+            ...getPortalProps(),
+            children: /* @__PURE__ */ jsx(ListNext, {
+              className: clsx(withBaseName("list"), listClassName),
+              disableFocus: true,
+              highlightedItem,
+              onMouseOver: mouseOverHandler,
+              selected: selectedItem,
+              ...restListProps,
+              ref: setListRef,
+              children: filteredSource.map((value, index) => {
+                const onMouseDown = (event) => {
+                  var _a, _b;
+                  setSelectedItem((_a = event.currentTarget) == null ? void 0 : _a.dataset.value);
+                  setInputValue((_b = event.currentTarget) == null ? void 0 : _b.dataset.value);
+                };
+                return /* @__PURE__ */ jsx(ListItem, {
+                  value,
+                  matchPattern: inputValue,
+                  onMouseDown
+                }, index);
+              })
+            })
+          })
+        })
+      })
+    ]
+  });
+});
+
+export { ComboBoxNext };
+//# sourceMappingURL=ComboBoxNext.js.map

package/dist-es/combo-box-next/ComboBoxNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  ReactElement,\n  Ref,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport {\n  Input,\n  makePrefixer,\n  SaltProvider,\n  useForkRef,\n  useId,\n  InputProps,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { FloatingPortal } from \"@floating-ui/react\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\"> {\n  /**\n   * Additional props for the input component.\n   */\n  InputProps?: InputProps;\n  /**\n   * Additional props for the list component.\n   */\n  ListProps?: ListNextProps;\n  /**\n   * Additional props for the portal.\n   */\n  PortalProps?: UseComboBoxPortalProps;\n  /**\n   * If `true`, the component 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  /**\n   * The source of combobox items.\n   */\n  source: T[];\n  /**\n   * Callback for blur event\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Callback for focus event\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Callback for keyDown event\n   */\n  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n  /**\n   * Callback for mouse over event\n   */\n  onMouseOver?: (event: SyntheticEvent) => void;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Optional ref for the list component\n   */\n  listRef?: Ref<HTMLUListElement>;\n  /**\n   * The component used for item instead of the default.\n   */\n  ListItem: (props: ComboBoxItemProps<T>) => ReactElement<ComboBoxItemProps<T>>;\n  /**\n   * Function to be used as filter.\n   */\n  itemFilter?: (source: T[], filterValue?: string) => T[];\n  /* Callback for change event in input. */\n  onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n  {\n    InputProps = {},\n    ListProps = {},\n    PortalProps = {},\n    disabled,\n    highlightedItem: highlightedItemProp,\n    selected,\n    defaultSelected,\n    onKeyDown,\n    onChange,\n    onBlur,\n    onFocus,\n    onMouseOver,\n    source,\n    ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n    itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n    variant = \"primary\",\n    listRef: listRefProp,\n    ...rest\n  }: ComboBoxNextProps<T>,\n  ref?: ForwardedRef<HTMLInputElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box-next\",\n    css: comboBoxNextCss,\n    window: targetWindow,\n  });\n  const listId = useId(ListProps?.id);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const setListRef = useForkRef(listRefProp, listRef);\n  const listProps = {\n    highlightedItem: highlightedItemProp,\n    selected,\n    defaultSelected,\n    onChange,\n    id: listId,\n    ref: listRef,\n  };\n\n  const {\n    inputValue,\n    setInputValue,\n    portalProps,\n    selectedItem,\n    highlightedItem,\n    activeDescendant,\n    focusVisibleRef,\n    keyDownHandler,\n    focusHandler,\n    blurHandler,\n    setSelectedItem,\n    setHighlightedItem,\n    mouseOverHandler,\n  } = useComboBox({\n    onBlur,\n    onFocus,\n    onMouseOver,\n    onKeyDown,\n    listProps,\n    PortalProps,\n  });\n\n  const {\n    open,\n    setOpen,\n    floating,\n    reference,\n    getTriggerProps,\n    getPortalProps,\n  } = portalProps;\n\n  // floating references\n  const triggerRef = useForkRef(ref, reference);\n  const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n  const getFilteredSource = () => {\n    if (!source) return null;\n    if (selectedItem) return source;\n    return itemFilter && itemFilter(source, inputValue);\n  };\n  const filteredSource = getFilteredSource();\n\n  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setInputValue(value);\n    if (value === \"\") {\n      setHighlightedItem(undefined);\n      setSelectedItem(value);\n    } else {\n      if (!open) {\n        setOpen(true);\n      }\n      if (filteredSource) {\n        setHighlightedItem(filteredSource[0] as unknown as string);\n      }\n    }\n    onChange?.(event, { value: inputValue || \"\" });\n  };\n\n  const adornment = open ? (\n    <ChevronUpIcon className={withBaseName(\"chevron\")} />\n  ) : (\n    <ChevronDownIcon className={withBaseName(\"chevron\")} />\n  );\n\n  const { className: listClassName, ...restListProps } = ListProps;\n  const { className: inputClassName, ...restInputProps } = InputProps;\n\n  return (\n    <>\n      <Input\n        aria-controls={listId}\n        aria-activedescendant={disabled ? undefined : activeDescendant}\n        className={clsx(withBaseName(\"input\"), inputClassName)}\n        disabled={disabled}\n        endAdornment={adornment}\n        onChange={onInputChange}\n        onBlur={blurHandler}\n        inputRef={inputRef as Ref<HTMLInputElement>}\n        inputProps={{\n          \"aria-expanded\": open,\n          tabIndex: disabled ? -1 : 0,\n          onFocus: focusHandler,\n          onKeyDown: keyDownHandler,\n        }}\n        role=\"combobox\"\n        variant={variant}\n        value={inputValue}\n        {...getTriggerProps()}\n        {...restInputProps}\n      />\n      {open && filteredSource && (\n        <FloatingPortal>\n          {/* The provider is needed to support the use case where an app has nested modes. The portal element needs to have the same style as the current scope */}\n          <SaltProvider>\n            <div ref={floating} {...getPortalProps()}>\n              <ListNext\n                className={clsx(withBaseName(\"list\"), listClassName)}\n                disableFocus\n                highlightedItem={highlightedItem}\n                onMouseOver={mouseOverHandler}\n                selected={selectedItem}\n                {...restListProps}\n                ref={setListRef}\n              >\n                {filteredSource.map((value, index) => {\n                  const onMouseDown = (\n                    event: SyntheticEvent<HTMLLIElement>\n                  ) => {\n                    setSelectedItem(event.currentTarget?.dataset.value);\n                    setInputValue(event.currentTarget?.dataset.value);\n                  };\n                  return (\n                    <ListItem\n                      key={index}\n                      value={value}\n                      matchPattern={inputValue}\n                      onMouseDown={onMouseDown}\n                    />\n                  );\n                })}\n              </ListNext>\n            </div>\n          </SaltProvider>\n        </FloatingPortal>\n      )}\n    </>\n  );\n});\n"],"names":["ComboBoxNext","InputProps","comboBoxNextCss"],"mappings":"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"}

package/dist-es/combo-box-next/useComboBox.js

@@ -0,0 +1,133 @@
+import { useState } from 'react';
+import { useList } from '../list-next/useList.js';
+import { useComboboxPortal } from './useComboboxPortal.js';
+
+const useComboBox = ({
+  onFocus,
+  onBlur,
+  onMouseOver,
+  onKeyDown,
+  PortalProps,
+  listProps
+}) => {
+  const { defaultSelected, ...restListProps } = listProps;
+  const [inputValue, setInputValue] = useState(
+    defaultSelected
+  );
+  const {
+    open,
+    setOpen,
+    floating,
+    reference,
+    getPortalProps,
+    getTriggerProps
+  } = useComboboxPortal(PortalProps);
+  const {
+    keyDownHandler: listKeyDownHandler,
+    focusHandler: listFocusHandler,
+    activeDescendant,
+    focusVisibleRef,
+    selectedItem,
+    setSelectedItem,
+    setHighlightedItem,
+    highlightedItem
+  } = useList({
+    ...restListProps
+  });
+  const focusHandler = (event) => {
+    setOpen(true);
+    listFocusHandler(event);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const blurHandler = (event) => {
+    setOpen(false);
+    if (!selectedItem) {
+      setSelectedItem(void 0);
+      setInputValue(void 0);
+      setHighlightedItem(void 0);
+    }
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const mouseOverHandler = (event) => {
+    setHighlightedItem(event.currentTarget.dataset.value);
+    onMouseOver == null ? void 0 : onMouseOver(event);
+  };
+  const keyDownHandler = (event) => {
+    const { key, altKey } = event;
+    switch (key) {
+      case "ArrowDown":
+      case "ArrowUp":
+        if (altKey) {
+          event.preventDefault();
+          if (open && !selectedItem) {
+            setSelectedItem(void 0);
+            setInputValue(void 0);
+          }
+          setOpen(!open);
+          break;
+        }
+        if (!open) {
+          setOpen(true);
+        }
+        listKeyDownHandler(event);
+        break;
+      case "PageDown":
+      case "PageUp":
+      case "Home":
+      case "End":
+        if (open) {
+          listKeyDownHandler(event);
+        }
+        break;
+      case "Enter":
+        if (!open) {
+          setOpen(true);
+        } else {
+          setSelectedItem(highlightedItem);
+          setInputValue(highlightedItem);
+          setOpen(false);
+        }
+        break;
+      case "Escape":
+        if (open) {
+          setOpen(false);
+          if (!selectedItem) {
+            setSelectedItem(void 0);
+            setInputValue(void 0);
+          }
+        }
+        break;
+      case "Backspace":
+        if (!open) {
+          setOpen(true);
+        }
+        break;
+    }
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  return {
+    portalProps: {
+      open,
+      setOpen,
+      floating,
+      reference,
+      getTriggerProps,
+      getPortalProps
+    },
+    inputValue,
+    setInputValue,
+    selectedItem,
+    setSelectedItem,
+    highlightedItem,
+    setHighlightedItem,
+    activeDescendant,
+    focusVisibleRef,
+    keyDownHandler,
+    focusHandler,
+    blurHandler,
+    mouseOverHandler
+  };
+};
+
+export { useComboBox };
+//# sourceMappingURL=useComboBox.js.map

package/dist-es/combo-box-next/useComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboBox.js","sources":["../src/combo-box-next/useComboBox.tsx"],"sourcesContent":["import { FocusEvent, KeyboardEvent, SyntheticEvent, useState } from \"react\";\nimport { useList, UseListProps } from \"../list-next/useList\";\nimport { useComboboxPortal, UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\ninterface UseComboBoxProps {\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  onMouseOver?: (event: SyntheticEvent) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n  PortalProps?: UseComboBoxPortalProps;\n  listProps: UseListProps;\n}\n\nexport const useComboBox = ({\n  onFocus,\n  onBlur,\n  onMouseOver,\n  onKeyDown,\n  PortalProps,\n  listProps,\n}: UseComboBoxProps) => {\n  const { defaultSelected, ...restListProps } = listProps;\n  const [inputValue, setInputValue] = useState<string | undefined>(\n    defaultSelected\n  );\n\n  const {\n    open,\n    setOpen,\n    floating,\n    reference,\n    getPortalProps,\n    getTriggerProps,\n  } = useComboboxPortal(PortalProps);\n\n  const {\n    keyDownHandler: listKeyDownHandler,\n    focusHandler: listFocusHandler,\n    activeDescendant,\n    focusVisibleRef,\n    selectedItem,\n    setSelectedItem,\n    setHighlightedItem,\n    highlightedItem,\n  } = useList({\n    ...restListProps,\n  });\n\n  const focusHandler = (event: FocusEvent<HTMLInputElement>) => {\n    setOpen(true);\n    listFocusHandler(event);\n    onFocus?.(event);\n  };\n\n  const blurHandler = (event: FocusEvent<HTMLInputElement>) => {\n    setOpen(false);\n    if (!selectedItem) {\n      setSelectedItem(undefined);\n      setInputValue(undefined);\n      setHighlightedItem(undefined);\n    }\n    onBlur?.(event);\n  };\n\n  const mouseOverHandler = (event: SyntheticEvent<HTMLElement>) => {\n    setHighlightedItem(event.currentTarget.dataset.value);\n    onMouseOver?.(event);\n  };\n\n  const keyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n    const { key, altKey } = event;\n    switch (key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        if (altKey) {\n          event.preventDefault();\n          if (open && !selectedItem) {\n            setSelectedItem(undefined);\n            setInputValue(undefined);\n          }\n          setOpen(!open);\n          break;\n        }\n        if (!open) {\n          setOpen(true);\n        }\n        listKeyDownHandler(event);\n        break;\n      case \"PageDown\":\n      case \"PageUp\":\n      case \"Home\":\n      case \"End\":\n        if (open) {\n          listKeyDownHandler(event);\n        }\n        break;\n      case \"Enter\":\n        if (!open) {\n          setOpen(true);\n        } else {\n          setSelectedItem(highlightedItem);\n          setInputValue(highlightedItem);\n          setOpen(false);\n        }\n        break;\n      case \"Escape\":\n        if (open) {\n          setOpen(false);\n          if (!selectedItem) {\n            setSelectedItem(undefined);\n            setInputValue(undefined);\n          }\n        }\n        break;\n      case \"Backspace\":\n        if (!open) {\n          setOpen(true);\n        }\n        break;\n      default:\n        break;\n    }\n    onKeyDown?.(event);\n  };\n\n  return {\n    // portal\n    portalProps: {\n      open,\n      setOpen,\n      floating,\n      reference,\n      getTriggerProps,\n      getPortalProps,\n    },\n    // list\n    inputValue,\n    setInputValue,\n    selectedItem,\n    setSelectedItem,\n    highlightedItem,\n    setHighlightedItem,\n    activeDescendant,\n    focusVisibleRef,\n    keyDownHandler,\n    focusHandler,\n    blurHandler,\n    mouseOverHandler,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/combo-box-next/useComboboxPortal.js

@@ -0,0 +1,65 @@
+import { offset, size, flip, shift, limitShift, useInteractions, useRole, useDismiss } from '@floating-ui/react';
+import { useControlled, useFloatingUI } from '@salt-ds/core';
+
+function useComboboxPortal(props) {
+  const {
+    open: openProp,
+    onOpenChange: onOpenChangeProp,
+    placement: placementProp = "bottom"
+  } = props || {};
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: false,
+    name: "Combo Box",
+    state: "open"
+  });
+  const onOpenChange = (open2) => {
+    setOpen(open2);
+    onOpenChangeProp == null ? void 0 : onOpenChangeProp(open2);
+  };
+  const { floating, reference, x, y, strategy, 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 { getReferenceProps, getFloatingProps } = useInteractions([
+    useRole(context, { role: "listbox" }),
+    useDismiss(context)
+  ]);
+  const getPortalProps = () => {
+    return getFloatingProps({
+      ref: floating,
+      style: {
+        top: y != null ? y : 0,
+        left: x != null ? x : 0,
+        position: strategy
+      }
+    });
+  };
+  const getTriggerProps = () => getReferenceProps({
+    ref: reference
+  });
+  return {
+    open,
+    setOpen,
+    floating,
+    reference,
+    getPortalProps,
+    getTriggerProps
+  };
+}
+
+export { useComboboxPortal };
+//# sourceMappingURL=useComboboxPortal.js.map

package/dist-es/combo-box-next/useComboboxPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxPortal.js","sources":["../src/combo-box-next/useComboboxPortal.ts"],"sourcesContent":["import {\n  flip,\n  limitShift,\n  offset,\n  Placement,\n  shift,\n  size,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { HTMLProps } from \"react\";\nimport { useControlled, useFloatingUI } from \"@salt-ds/core\";\n\nexport interface UseComboBoxPortalProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  placement?: Placement;\n}\n\nexport function useComboboxPortal(props?: UseComboBoxPortalProps) {\n  const {\n    open: openProp,\n    onOpenChange: onOpenChangeProp,\n    placement: placementProp = \"bottom\",\n  } = props || {};\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Combo Box\",\n    state: \"open\",\n  });\n\n  const onOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChangeProp?.(open);\n  };\n\n  const { floating, reference, x, y, strategy, context } = useFloatingUI({\n    open,\n    onOpenChange: 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 { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: \"listbox\" }),\n    useDismiss(context),\n  ]);\n\n  const getPortalProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      ref: floating,\n      style: {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n      },\n    });\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  return {\n    open,\n    setOpen,\n    floating,\n    reference,\n    getPortalProps,\n    getTriggerProps,\n  };\n}\n"],"names":["open"],"mappings":";;;AAoBO,SAAS,kBAAkB,KAAgC,EAAA;AAChE,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,WAAW,aAAgB,GAAA,QAAA;AAAA,GAC7B,GAAI,SAAS,EAAC,CAAA;AACd,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,WAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAACA,KAAkB,KAAA;AACtC,IAAA,OAAA,CAAQA,KAAI,CAAA,CAAA;AACZ,IAAmBA,gBAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAAA,CAAAA,KAAAA,CAAAA,CAAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,EAAE,UAAU,SAAW,EAAA,CAAA,EAAG,GAAG,QAAU,EAAA,OAAA,KAAY,aAAc,CAAA;AAAA,IACrE,IAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,OAAO,CAAC,CAAA;AAAA,MACR,IAAK,CAAA;AAAA,QACH,KAAM,CAAA,EAAE,KAAO,EAAA,QAAA,EAAY,EAAA;AACzB,UAAO,MAAA,CAAA,MAAA,CAAO,QAAS,CAAA,QAAA,CAAS,KAAO,EAAA;AAAA,YACrC,KAAA,EAAO,CAAG,EAAA,KAAA,CAAM,SAAU,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,WAC3B,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA;AAAA,MACD,IAAK,EAAA;AAAA,MACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AAAA,KACjC;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,OAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,IACpC,WAAW,OAAO,CAAA;AAAA,GACnB,CAAA,CAAA;AAED,EAAA,MAAM,iBAAiB,MAAiC;AACtD,IAAA,OAAO,gBAAiB,CAAA;AAAA,MACtB,GAAK,EAAA,QAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,QACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,QACX,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,MACtB,iBAAkB,CAAA;AAAA,IAChB,GAAK,EAAA,SAAA;AAAA,GACN,CAAA,CAAA;AAEH,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-es/combo-box-next/utils.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import '../list-next/ListNext.js';
+import { ListItemNext } from '../list-next/ListItemNext.js';
+import { Highlighter } from '../list/Highlighter.js';
+import '../list/ListItem.js';
+import '../list/List.js';
+import 'react';
+import '@salt-ds/core';
+import '../common-hooks/collectionProvider.js';
+import '../common-hooks/keyUtils.js';
+import '../responsive/useResizeObserver.js';
+import '../list/VirtualizedList.js';
+
+const defaultFilter = (source, filterValue) => source.filter(
+  (item) => !filterValue ? item : item.toLowerCase().includes(filterValue.toLowerCase())
+);
+const DefaultListItem = ({
+  value,
+  matchPattern,
+  onMouseDown,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(ListItemNext, {
+    value,
+    onMouseDown,
+    ...rest,
+    children: /* @__PURE__ */ jsx(Highlighter, {
+      matchPattern,
+      text: value
+    })
+  });
+};
+
+export { DefaultListItem, defaultFilter };
+//# sourceMappingURL=utils.js.map