@salt-ds/lab 1.0.0-alpha.8 → 1.0.0-alpha.81

package/dist-es/combo-box-deprecated/ComboBoxDeprecated.js

@@ -0,0 +1,109 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import '../form-field-context-legacy/FormFieldLegacyContext.js';
+import { useFormFieldLegacyProps } from '../form-field-context-legacy/useFormFieldLegacyProps.js';
+import { useWidth } from '../list-deprecated/internal/useWidth.js';
+import css_248z from './ComboBox.css.js';
+import { DefaultComboBox } from './internal/DefaultComboBox.js';
+import { MultiSelectComboBox } from './internal/MultiSelectComboBox.js';
+
+const withBaseName = makePrefixer("saltComboBox");
+function getMultiSelect({
+  multiSelect,
+  initialSelectedItem,
+  selectedItem
+}) {
+  return multiSelect || Array.isArray(initialSelectedItem) || Array.isArray(selectedItem);
+}
+const validateProps = ({
+  isMultiSelect,
+  delimiter
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (!isMultiSelect && delimiter) {
+      console.warn("Delimiter can only be used for a multi-select combo-box.");
+    }
+  }
+};
+const ComboBoxDeprecated = forwardRef(function ComboBox(props, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-combo-box-deprecated",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    inFormField,
+    a11yProps: {
+      "aria-labelledby": ariaLabelledBy,
+      "aria-required": ariaRequired,
+      disabled: formFieldDisabled
+    } = {}
+  } = useFormFieldLegacyProps();
+  const { current: isMultiSelect } = useRef(getMultiSelect(props));
+  validateProps({ isMultiSelect, ...props });
+  const {
+    inputRef,
+    listRef,
+    className,
+    disabled = formFieldDisabled,
+    source = [],
+    multiSelect: _multiSelect,
+    initialSelectedItem,
+    selectedItem,
+    width,
+    listWidth,
+    id: idProp,
+    "aria-label": ariaLabel,
+    ...restProps
+  } = props;
+  const id = useId(idProp);
+  const [rootRef, rootWidth] = useWidth(
+    width == null && listWidth == null
+  );
+  const ComboBoxComponent = isMultiSelect ? MultiSelectComboBox : DefaultComboBox;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("field")]: inFormField
+        },
+        className
+      ),
+      id,
+      ref: useForkRef(ref, rootRef),
+      style: { width },
+      children: /* @__PURE__ */ jsx(
+        ComboBoxComponent,
+        {
+          ...{
+            ...restProps,
+            id,
+            source,
+            disabled,
+            rootRef,
+            rootWidth,
+            inputRef,
+            listRef,
+            listWidth,
+            initialSelectedItem,
+            selectedItem,
+            "aria-label": clsx(ariaLabel),
+            "aria-labelledby": ariaLabelledBy,
+            "aria-required": ariaRequired
+          }
+        }
+      )
+    }
+  );
+});
+
+export { ComboBoxDeprecated };
+//# sourceMappingURL=ComboBoxDeprecated.js.map

package/dist-es/combo-box-deprecated/ComboBoxDeprecated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxDeprecated.js","sources":["../src/combo-box-deprecated/ComboBoxDeprecated.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, forwardRef, type Ref, useRef } from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { useWidth } from \"../list-deprecated/internal/useWidth\";\nimport comboBoxCss from \"./ComboBox.css\";\nimport {\n  DefaultComboBox,\n  type DefaultComboBoxProps,\n} from \"./internal/DefaultComboBox\";\nimport {\n  MultiSelectComboBox,\n  type MultiSelectComboBoxProps,\n} from \"./internal/MultiSelectComboBox\";\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nfunction getMultiSelect<Item>({\n  multiSelect,\n  initialSelectedItem,\n  selectedItem,\n}: {\n  multiSelect?: boolean;\n  initialSelectedItem?: Item | Item[];\n  selectedItem?: Item | Item[];\n}) {\n  return (\n    multiSelect ||\n    Array.isArray(initialSelectedItem) ||\n    Array.isArray(selectedItem)\n  );\n}\n\nconst validateProps = ({\n  isMultiSelect,\n  delimiter,\n}: {\n  isMultiSelect: boolean;\n  delimiter?: string | string[];\n}) => {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!isMultiSelect && delimiter) {\n      console.warn(\"Delimiter can only be used for a multi-select combo-box.\");\n    }\n  }\n};\n\nexport type ComboBoxDeprecatedProps = Omit<\n  DefaultComboBoxProps<any> | MultiSelectComboBoxProps<any>,\n  \"rootRef\"\n> & {\n  rootRef?: Ref<HTMLElement>;\n  delimiter?: string | string[];\n};\n\nexport const ComboBoxDeprecated = forwardRef<\n  HTMLDivElement,\n  ComboBoxDeprecatedProps\n>(function ComboBox(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box-deprecated\",\n    css: comboBoxCss,\n    window: targetWindow,\n  });\n\n  const {\n    inFormField,\n    a11yProps: {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-required\": ariaRequired,\n      disabled: formFieldDisabled,\n    } = {},\n  } = useFormFieldLegacyProps();\n\n  const { current: isMultiSelect } = useRef(getMultiSelect(props));\n  validateProps({ isMultiSelect, ...props });\n\n  const {\n    inputRef,\n    listRef,\n    className,\n    disabled = formFieldDisabled,\n    source = [],\n    multiSelect: _multiSelect,\n    initialSelectedItem,\n    selectedItem,\n    width,\n    listWidth,\n    id: idProp,\n    \"aria-label\": ariaLabel,\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n  const [rootRef, rootWidth] = useWidth<HTMLDivElement>(\n    width == null && listWidth == null,\n  );\n\n  const ComboBoxComponent = (\n    isMultiSelect ? MultiSelectComboBox : DefaultComboBox\n  ) as ComponentType<ComboBoxDeprecatedProps>;\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"field\")]: inFormField,\n        },\n        className,\n      )}\n      id={id}\n      ref={useForkRef(ref, rootRef)}\n      style={{ width }}\n    >\n      <ComboBoxComponent\n        {...{\n          ...restProps,\n          id,\n          source,\n          disabled,\n          rootRef,\n          rootWidth,\n          inputRef,\n          listRef,\n          listWidth,\n          initialSelectedItem,\n          selectedItem,\n          \"aria-label\": clsx(ariaLabel),\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-required\": ariaRequired,\n        }}\n      />\n    </div>\n  );\n});\n"],"names":["comboBoxCss"],"mappings":"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"}

package/dist-es/combo-box-deprecated/filterHelpers.js

@@ -0,0 +1,10 @@
+import { escapeRegExp } from '../utils/escapeRegExp.js';
+import 'react';
+import '@salt-ds/core';
+
+const leftTrim = (value) => value ? value.replace(/^\s+/g, "") : value;
+const getDefaultFilterRegex = (value) => new RegExp(`(${escapeRegExp(leftTrim(value))})`, "gi");
+const getDefaultFilter = (inputValue = "", getFilterRegex = getDefaultFilterRegex) => (itemValue = "") => Boolean(itemValue.length) && Boolean(inputValue.length) && itemValue.match(getFilterRegex(inputValue)) !== null;
+
+export { getDefaultFilter, getDefaultFilterRegex };
+//# sourceMappingURL=filterHelpers.js.map

package/dist-es/combo-box-deprecated/filterHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterHelpers.js","sources":["../src/combo-box-deprecated/filterHelpers.ts"],"sourcesContent":["import { escapeRegExp } from \"../utils\";\n\nexport type GetFilterRegex = (inputValue: string) => RegExp;\n\nconst leftTrim = (value: string) =>\n  value ? value.replace(/^\\s+/g, \"\") : value;\n\nexport const getDefaultFilterRegex: GetFilterRegex = (value) =>\n  new RegExp(`(${escapeRegExp(leftTrim(value))})`, \"gi\");\n\nexport const getDefaultFilter =\n  (inputValue = \"\", getFilterRegex: GetFilterRegex = getDefaultFilterRegex) =>\n  (itemValue = \"\"): boolean =>\n    Boolean(itemValue.length) &&\n    Boolean(inputValue.length) &&\n    itemValue.match(getFilterRegex(inputValue)) !== null;\n"],"names":[],"mappings":";;;;AAIA,MAAM,QAAA,GAAW,CAAC,KAAA,KAChB,KAAA,GAAQ,MAAM,OAAA,CAAQ,OAAA,EAAS,EAAE,CAAA,GAAI,KAAA;AAEhC,MAAM,qBAAA,GAAwC,CAAC,KAAA,KACpD,IAAI,MAAA,CAAO,CAAA,CAAA,EAAI,YAAA,CAAa,QAAA,CAAS,KAAK,CAAC,CAAC,CAAA,CAAA,CAAA,EAAK,IAAI;AAEhD,MAAM,gBAAA,GACX,CAAC,UAAA,GAAa,EAAA,EAAI,iBAAiC,qBAAA,KACnD,CAAC,SAAA,GAAY,EAAA,KACX,OAAA,CAAQ,SAAA,CAAU,MAAM,CAAA,IACxB,OAAA,CAAQ,WAAW,MAAM,CAAA,IACzB,UAAU,KAAA,CAAM,cAAA,CAAe,UAAU,CAAC,CAAA,KAAM;;;;"}

package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js

@@ -0,0 +1,114 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { flip, shift, size, limitShift } from '@floating-ui/react';
+import { useForkRef, useAriaAnnouncer, useFloatingUI } from '@salt-ds/core';
+import { useRef, useEffect, useState } from 'react';
+import { InputLegacy } from '../../input-legacy/InputLegacy.js';
+import '../../input-legacy/StaticInputAdornment.js';
+import '../../list-deprecated/List.js';
+import { ListBase } from '../../list-deprecated/ListBase.js';
+import '../../list-deprecated/ListItem.js';
+import '../../list-deprecated/ListItemBase.js';
+import '../../list-deprecated/ListItemContext.js';
+import { ListStateContext } from '../../list-deprecated/ListStateContext.js';
+import { Portal } from '../../portal/Portal.js';
+import '../../window/ElectronWindow.js';
+import { isDesktop, Window } from '../../window/WindowContext.js';
+import { useComboBox } from './useComboBox.js';
+
+const DefaultComboBox = function DefaultComboBox2(props) {
+  const {
+    ListItem,
+    WindowProps = {},
+    rootRef,
+    listRef: listRefProp,
+    inputRef: inputRefProp,
+    rootWidth,
+    listWidth,
+    ...restProps
+  } = props;
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const setInputRef = useForkRef(inputRef, inputRefProp);
+  const setListRef = useForkRef(listRef, listRefProp);
+  const { announce } = useAriaAnnouncer({ debounce: 1e3 });
+  const {
+    inputRef: setHookInputRef,
+    listContext,
+    inputProps,
+    listProps
+  } = useComboBox(restProps);
+  const { allowAnnouncement, disabled, value, ...restInputProps } = inputProps;
+  const { isListOpen, itemCount, itemToString, source, ...restListProps } = listProps;
+  const allowAnnouncementRef = useRef(allowAnnouncement);
+  useEffect(() => {
+    allowAnnouncementRef.current = allowAnnouncement;
+  }, [allowAnnouncement]);
+  useEffect(() => {
+  }, [value, itemCount, announce]);
+  const [maxListHeight, setMaxListHeight] = useState(
+    void 0
+  );
+  const middleware = isDesktop ? [] : [
+    flip({
+      fallbackPlacements: ["bottom-start", "top-start"]
+    }),
+    shift({ limiter: limitShift() }),
+    size({
+      apply({ availableHeight }) {
+        setMaxListHeight(availableHeight);
+      }
+    })
+  ];
+  const { reference, floating, x, y, strategy } = useFloatingUI({
+    placement: "bottom-start",
+    middleware
+  });
+  useEffect(() => {
+    if (rootRef.current) {
+      reference(rootRef.current);
+    }
+  }, [rootRef, reference]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      InputLegacy,
+      {
+        disabled,
+        ref: useForkRef(setInputRef, setHookInputRef),
+        value,
+        ...restInputProps
+      }
+    ),
+    rootRef.current && isListOpen && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      Window,
+      {
+        style: {
+          top: y ?? 0,
+          left: x ?? 0,
+          position: strategy,
+          maxHeight: maxListHeight ?? ""
+        },
+        ...WindowProps,
+        ref: floating,
+        children: /* @__PURE__ */ jsx(ListStateContext.Provider, { value: listContext, children: /* @__PURE__ */ jsx(
+          ListBase,
+          {
+            ...{
+              ListItem,
+              disabled,
+              itemCount,
+              itemToString,
+              width: listWidth || rootWidth,
+              source,
+              ...restListProps,
+              listRef: setListRef
+            },
+            maxHeight: maxListHeight || listProps.maxHeight
+          }
+        ) })
+      }
+    ) })
+  ] });
+};
+
+export { DefaultComboBox };
+//# sourceMappingURL=DefaultComboBox.js.map

package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultComboBox.js","sources":["../src/combo-box-deprecated/internal/DefaultComboBox.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport { useAriaAnnouncer, useFloatingUI, useForkRef } from \"@salt-ds/core\";\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n} from \"../../input-legacy\";\nimport {\n  type IndexedListItemProps,\n  ListBase,\n  type ListProps,\n  type ListSelectionVariant,\n  ListStateContext,\n} from \"../../list-deprecated\";\nimport { Portal } from \"../../portal\";\nimport { isDesktop, Window, type WindowProps } from \"../../window\";\nimport type { GetFilterRegex } from \"../filterHelpers\";\nimport { getAnnouncement } from \"./getAnnouncement\";\nimport { useComboBox } from \"./useComboBox\";\n\nexport type BaseComboBoxProps<\n  Item,\n  Variant extends ListSelectionVariant = \"default\",\n> = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"onChange\" | \"onSelect\" | \"onFocus\" | \"onBlur\" | \"onClick\"\n> &\n  Pick<\n    ListProps<Item, Variant>,\n    | \"displayedItemCount\"\n    | \"itemToString\"\n    | \"listRef\"\n    | \"onChange\"\n    | \"onSelect\"\n    | \"overscanCount\"\n    | \"virtualized\"\n    | \"width\"\n  > & {\n    ListItem?: ComponentType<IndexedListItemProps<Item>>;\n    ListProps?: Partial<ListProps<Item, Variant>>;\n    WindowProps?: Partial<WindowProps>;\n    allowFreeText?: boolean;\n    disabled?: boolean;\n    getFilterRegex?: GetFilterRegex;\n    initialOpen?: boolean;\n    inputRef?: Ref<HTMLInputElement>;\n    inputValue?: string;\n    listWidth?: number | string;\n\n    rootWidth?: string | number;\n    rootRef: RefObject<HTMLElement>;\n    disabledPortal?: boolean;\n    source: ReadonlyArray<Item>;\n  };\n\nexport interface DefaultComboBoxProps<Item>\n  extends BaseComboBoxProps<Item>,\n    Pick<InputProps, \"onFocus\" | \"onBlur\"> {\n  InputProps?: InputProps;\n  initialSelectedItem?: Item;\n  selectedItem?: Item;\n  multiSelect?: false;\n  onInputFocus?: InputProps[\"onFocus\"];\n  onInputBlur?: InputProps[\"onBlur\"];\n  onInputChange?: InputProps[\"onChange\"];\n  onInputSelect?: InputProps[\"onSelect\"];\n  stringToItem?: (value?: string) => Item | null | undefined;\n}\n\nexport const DefaultComboBox = function DefaultComboBox<Item>(\n  props: DefaultComboBoxProps<Item>,\n): ReactNode {\n  const {\n    ListItem,\n    WindowProps = {},\n    rootRef,\n    listRef: listRefProp,\n    inputRef: inputRefProp,\n    rootWidth,\n    listWidth,\n    ...restProps\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef(null);\n\n  const setInputRef = useForkRef(inputRef, inputRefProp);\n  // Use callback ref as listRef could be null when it's closed\n  const setListRef = useForkRef(listRef, listRefProp);\n\n  const { announce } = useAriaAnnouncer({ debounce: 1000 });\n\n  const {\n    inputRef: setHookInputRef,\n    listContext,\n    inputProps,\n    listProps,\n  } = useComboBox(restProps);\n\n  const { allowAnnouncement, disabled, value, ...restInputProps } = inputProps;\n  const { isListOpen, itemCount, itemToString, source, ...restListProps } =\n    listProps;\n\n  const firstItem = null;\n\n  const allowAnnouncementRef = useRef(allowAnnouncement);\n  useEffect(() => {\n    allowAnnouncementRef.current = allowAnnouncement;\n  }, [allowAnnouncement]);\n\n  useEffect(() => {\n    if (allowAnnouncementRef.current && value && firstItem) {\n      announce(getAnnouncement(itemCount, firstItem));\n    }\n  }, [value, itemCount, announce]);\n\n  const [maxListHeight, setMaxListHeight] = useState<number | undefined>(\n    undefined,\n  );\n  const middleware = isDesktop\n    ? []\n    : [\n        flip({\n          fallbackPlacements: [\"bottom-start\", \"top-start\"],\n        }),\n        shift({ limiter: limitShift() }),\n        size({\n          apply({ availableHeight }) {\n            setMaxListHeight(availableHeight);\n          },\n        }),\n      ];\n  const { reference, floating, x, y, strategy } = useFloatingUI({\n    placement: \"bottom-start\",\n    middleware,\n  });\n\n  useEffect(() => {\n    if (rootRef.current) {\n      reference(rootRef.current);\n    }\n  }, [rootRef, reference]);\n\n  return (\n    <>\n      <Input\n        disabled={disabled}\n        ref={useForkRef(setInputRef, setHookInputRef)}\n        value={value}\n        {...restInputProps}\n      />\n      {rootRef.current && isListOpen && (\n        <Portal>\n          <Window\n            style={{\n              top: y ?? 0,\n              left: x ?? 0,\n              position: strategy,\n              maxHeight: maxListHeight ?? \"\",\n            }}\n            {...WindowProps}\n            ref={floating}\n          >\n            <ListStateContext.Provider value={listContext}>\n              <ListBase\n                {...{\n                  ListItem,\n                  disabled,\n                  itemCount,\n                  itemToString,\n                  width: listWidth || rootWidth,\n                  source,\n                  ...restListProps,\n                  listRef: setListRef,\n                }}\n                maxHeight={maxListHeight || listProps.maxHeight}\n              />\n            </ListStateContext.Provider>\n          </Window>\n        </Portal>\n      )}\n    </>\n  );\n};\n"],"names":["DefaultComboBox","Input"],"mappings":"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"}

package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js

@@ -0,0 +1,113 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { flip, shift, size, limitShift } from '@floating-ui/react';
+import { useForkRef, useFloatingUI } from '@salt-ds/core';
+import { useRef, useEffect, useState } from 'react';
+import '../../list-deprecated/List.js';
+import { ListBase } from '../../list-deprecated/ListBase.js';
+import '../../list-deprecated/ListItem.js';
+import '../../list-deprecated/ListItemBase.js';
+import '../../list-deprecated/ListItemContext.js';
+import { ListStateContext } from '../../list-deprecated/ListStateContext.js';
+import { Portal } from '../../portal/Portal.js';
+import '../../tokenized-input/TokenizedInput.js';
+import { TokenizedInputBase } from '../../tokenized-input/TokenizedInputBase.js';
+import 'clipboard-copy';
+import '../../form-field-context-legacy/FormFieldLegacyContext.js';
+import '../../window/ElectronWindow.js';
+import { isDesktop, useWindow } from '../../window/WindowContext.js';
+import { useMultiSelectComboBox } from './useMultiSelectComboBox.js';
+
+function MultiSelectComboBox(props) {
+  const {
+    ListItem,
+    WindowProps,
+    rootRef,
+    listRef: listRefProp,
+    rootWidth,
+    listWidth,
+    inputRef: inputRefProp,
+    ...restProps
+  } = props;
+  const expandButtonRef = useRef(null);
+  const listRef = useRef(null);
+  const setListRef = useForkRef(listRef, listRefProp);
+  const { inputRef, listContext, inputProps, listProps, inputHelpers } = useMultiSelectComboBox({
+    ...restProps,
+    expandButtonRef
+  });
+  const { allowAnnouncement, disabled, value, ...restInputProps } = inputProps;
+  const { isListOpen, itemCount, itemToString, source, ...restListProps } = listProps;
+  const allowAnnouncementRef = useRef(allowAnnouncement);
+  useEffect(() => {
+    allowAnnouncementRef.current = allowAnnouncement;
+  }, [allowAnnouncement]);
+  const [maxListHeight, setMaxListHeight] = useState(
+    void 0
+  );
+  const middleware = isDesktop ? [] : [
+    flip({
+      fallbackPlacements: ["bottom-start", "top-start"]
+    }),
+    shift({ limiter: limitShift() }),
+    size({
+      apply({ availableHeight }) {
+        setMaxListHeight(availableHeight);
+      }
+    })
+  ];
+  const { reference, floating, x, y, strategy } = useFloatingUI({
+    placement: "bottom-start",
+    middleware
+  });
+  useEffect(() => {
+    if (rootRef.current) {
+      reference(rootRef.current);
+    }
+  }, [rootRef, reference]);
+  const Window = useWindow();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TokenizedInputBase,
+      {
+        disabled,
+        expandButtonRef,
+        inputRef: useForkRef(inputRef, inputRefProp),
+        value,
+        helpers: inputHelpers,
+        ...restInputProps
+      }
+    ),
+    rootRef.current && isListOpen && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      Window,
+      {
+        style: {
+          top: y ?? 0,
+          left: x ?? 0,
+          position: strategy,
+          maxHeight: maxListHeight ?? ""
+        },
+        ...WindowProps,
+        ref: floating,
+        children: /* @__PURE__ */ jsx(ListStateContext.Provider, { value: listContext, children: /* @__PURE__ */ jsx(
+          ListBase,
+          {
+            ...{
+              ListItem,
+              disabled,
+              itemCount,
+              itemToString,
+              width: listWidth || rootWidth,
+              source,
+              ...restListProps,
+              listRef: setListRef
+            },
+            maxHeight: maxListHeight || listProps.maxHeight
+          }
+        ) })
+      }
+    ) })
+  ] });
+}
+
+export { MultiSelectComboBox };
+//# sourceMappingURL=MultiSelectComboBox.js.map

package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectComboBox.js","sources":["../src/combo-box-deprecated/internal/MultiSelectComboBox.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport { useFloatingUI, useForkRef } from \"@salt-ds/core\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { ListBase, ListStateContext } from \"../../list-deprecated\";\nimport { Portal } from \"../../portal\";\nimport {\n  TokenizedInputBase,\n  type TokenizedInputProps,\n} from \"../../tokenized-input\";\nimport { isDesktop, useWindow } from \"../../window\";\nimport type { BaseComboBoxProps } from \"./DefaultComboBox\";\nimport { useMultiSelectComboBox } from \"./useMultiSelectComboBox\";\n\nexport type MultiSelectComboBoxProps<Item> = BaseComboBoxProps<\n  Item,\n  \"multiple\"\n> &\n  Pick<\n    TokenizedInputProps<Item>,\n    | \"onFocus\"\n    | \"onBlur\"\n    | \"onInputFocus\"\n    | \"onInputBlur\"\n    | \"onInputChange\"\n    | \"onInputSelect\"\n    | \"stringToItem\"\n  > & {\n    InputProps?: Partial<TokenizedInputProps<Item>>;\n    initialSelectedItem?: Item[];\n    selectedItem?: Item[];\n    multiSelect: true;\n    delimiter?: string | string[];\n  };\n\nexport function MultiSelectComboBox<Item>(\n  props: MultiSelectComboBoxProps<Item>,\n) {\n  const {\n    ListItem,\n    WindowProps,\n    rootRef,\n    listRef: listRefProp,\n    rootWidth,\n    listWidth,\n    inputRef: inputRefProp,\n    ...restProps\n  } = props;\n\n  // const { announce } = useAriaAnnouncer({ debounce: 1000 });\n\n  const expandButtonRef = useRef(null);\n  const listRef = useRef(null);\n  // Use callback ref as listRef could be null when it's closed\n  const setListRef = useForkRef(listRef, listRefProp);\n\n  const { inputRef, listContext, inputProps, listProps, inputHelpers } =\n    useMultiSelectComboBox({\n      ...restProps,\n      expandButtonRef,\n    });\n\n  const { allowAnnouncement, disabled, value, ...restInputProps } = inputProps;\n  const { isListOpen, itemCount, itemToString, source, ...restListProps } =\n    listProps;\n\n  // const firstItem = null;\n\n  const allowAnnouncementRef = useRef(allowAnnouncement);\n  useEffect(() => {\n    allowAnnouncementRef.current = allowAnnouncement;\n  }, [allowAnnouncement]);\n\n  // useEffect(() => {\n  //   if (allowAnnouncementRef.current && value && firstItem) {\n  //     announce(getAnnouncement(itemCount, firstItem));\n  //   }\n  // }, [value, firstItem, itemCount, announce]);\n\n  const [maxListHeight, setMaxListHeight] = useState<number | undefined>(\n    undefined,\n  );\n  const middleware = isDesktop\n    ? []\n    : [\n        flip({\n          fallbackPlacements: [\"bottom-start\", \"top-start\"],\n        }),\n        shift({ limiter: limitShift() }),\n        size({\n          apply({ availableHeight }) {\n            setMaxListHeight(availableHeight);\n          },\n        }),\n      ];\n  const { reference, floating, x, y, strategy } = useFloatingUI({\n    placement: \"bottom-start\",\n    middleware,\n  });\n\n  useEffect(() => {\n    if (rootRef.current) {\n      reference(rootRef.current);\n    }\n  }, [rootRef, reference]);\n\n  const Window = useWindow();\n\n  return (\n    <>\n      <TokenizedInputBase\n        disabled={disabled}\n        expandButtonRef={expandButtonRef}\n        inputRef={useForkRef(inputRef, inputRefProp)}\n        value={value}\n        helpers={inputHelpers}\n        {...restInputProps}\n      />\n      {rootRef.current && isListOpen && (\n        <Portal>\n          <Window\n            style={{\n              top: y ?? 0,\n              left: x ?? 0,\n              position: strategy,\n              maxHeight: maxListHeight ?? \"\",\n            }}\n            {...WindowProps}\n            ref={floating}\n          >\n            <ListStateContext.Provider value={listContext}>\n              <ListBase\n                {...{\n                  ListItem,\n                  disabled,\n                  itemCount,\n                  itemToString,\n                  width: listWidth || rootWidth,\n                  source,\n                  ...restListProps,\n                  listRef: setListRef,\n                }}\n                maxHeight={maxListHeight || listProps.maxHeight}\n              />\n            </ListStateContext.Provider>\n          </Window>\n        </Portal>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist-es/combo-box-deprecated/internal/useComboBox.js

@@ -0,0 +1,277 @@
+import { useId, useControlled, useIsFocusVisible, useForkRef } from '@salt-ds/core';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import '../../list-deprecated/List.js';
+import '../../list-deprecated/ListBase.js';
+import '../../list-deprecated/ListItem.js';
+import '../../list-deprecated/ListItemBase.js';
+import '../../list-deprecated/ListItemContext.js';
+import '../../list-deprecated/ListStateContext.js';
+import { useList } from '../../list-deprecated/useList.js';
+import { defaultItemToString } from '../../tokenized-input/internal/defaultItemToString.js';
+import { getDefaultFilter, getDefaultFilterRegex } from '../filterHelpers.js';
+import { usePopperStatus, isToggleList } from './usePopperStatus.js';
+
+const useComboBox = (props) => {
+  const {
+    initialOpen,
+    initialSelectedItem,
+    allowFreeText,
+    displayedItemCount,
+    virtualized,
+    disabled,
+    onBlur,
+    onFocus,
+    onChange,
+    onSelect,
+    onInputChange,
+    onInputFocus,
+    onInputBlur,
+    onInputSelect,
+    id: idProp,
+    source: sourceProp = [],
+    selectedItem: selectedItemProp,
+    inputValue: inputValueProp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    getFilterRegex = getDefaultFilterRegex,
+    itemToString = defaultItemToString,
+    stringToItem: stringToItemProp = (value) => value ? value.trim() : value,
+    InputProps: inputProps = {
+      onBlur: onBlur || onInputBlur,
+      onFocus: onFocus || onInputFocus,
+      onChange: onInputChange,
+      onSelect: onInputSelect
+    },
+    ListProps = {},
+    ...restProps
+  } = props;
+  const id = useId(idProp);
+  const inputId = `${id}-input`;
+  const listId = `${id}-list`;
+  const [inputValue, setInputValue] = useControlled({
+    controlled: inputValueProp,
+    default: "",
+    name: "ComboBox",
+    state: "inputValue"
+  });
+  const [selectionChanged, setSelectionChanged] = useState(false);
+  const inputRef = useRef(null);
+  const [allowAnnouncement, setAllowAnnouncement] = useState(false);
+  const labels = useMemo(
+    () => sourceProp.map(itemToString),
+    [sourceProp, itemToString]
+  );
+  const source = useMemo(() => {
+    if (inputValue == null ? void 0 : inputValue.trim().length) {
+      const itemFilter = getDefaultFilter(inputValue, getFilterRegex);
+      return sourceProp.filter((item) => itemFilter(itemToString(item)));
+    }
+    return sourceProp;
+  }, [inputValue, sourceProp, getFilterRegex, itemToString]);
+  const itemTextHighlightPattern = useMemo(
+    () => (inputValue == null ? void 0 : inputValue.trim().length) ? getFilterRegex(inputValue) : void 0,
+    [inputValue, getFilterRegex]
+  );
+  const { focusedRef, state, helpers, listProps } = useList({
+    ...ListProps,
+    source,
+    disabled,
+    virtualized,
+    itemToString,
+    initialSelectedItem,
+    selectedItem: selectedItemProp,
+    displayedItemCount,
+    onChange,
+    onSelect,
+    id: listId,
+    tabToSelect: true,
+    disableFocus: true,
+    disableMouseDown: true,
+    "aria-labelledby": ariaLabelledBy
+  });
+  const {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref: focusVisibleRef
+  } = useIsFocusVisible();
+  const handleFocusVisibleRef = useForkRef(
+    focusVisibleRef,
+    focusedRef
+  );
+  const handleInputRef = useForkRef(inputRef, handleFocusVisibleRef);
+  const { "aria-activedescendant": ariaActiveDescendant, ...restListProps } = listProps;
+  const { selectedItem, highlightedIndex } = state;
+  const [quickSelection, setQuickSelection] = useState(false);
+  const { setFocusVisible, setSelectedItem, setHighlightedIndex } = helpers;
+  const reconcileInput = useCallback(() => {
+    setInputValue(selectedItem == null ? "" : itemToString(selectedItem));
+  }, [selectedItem, itemToString]);
+  const selectInputValue = (event) => {
+    const nextIndex = inputValue ? labels.indexOf(inputValue.trim()) : -1;
+    const nextItem = nextIndex >= 0 ? sourceProp[nextIndex] : stringToItemProp(inputValue);
+    if (onSelect) {
+      onSelect(event, nextItem);
+    }
+    if (nextItem !== selectedItem) {
+      setSelectedItem(nextItem);
+      onChange == null ? void 0 : onChange(event, nextItem);
+    }
+  };
+  const { isOpen: isListOpen, notifyPopper } = usePopperStatus({
+    initialOpen
+  });
+  useEffect(() => {
+    reconcileInput();
+  }, [reconcileInput]);
+  useEffect(() => {
+    if (!isListOpen) {
+      setHighlightedIndex(void 0);
+      setQuickSelection(false);
+    }
+  }, [isListOpen, setHighlightedIndex]);
+  const initHighlightedIndex = () => {
+    setHighlightedIndex(selectedItem ? source.indexOf(selectedItem) : -1);
+  };
+  const handleInputFocus = (event) => {
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current) {
+      setFocusVisible(true);
+    }
+    if (highlightedIndex == null) {
+      initHighlightedIndex();
+    }
+    if (inputProps.onFocus) {
+      inputProps.onFocus(event);
+    }
+    notifyPopper(event);
+  };
+  const handleInputBlur = (event) => {
+    console.log("BLUR");
+    handleBlurVisible();
+    setAllowAnnouncement(false);
+    if (allowFreeText) {
+      selectInputValue(event);
+    } else {
+      reconcileInput();
+    }
+    if (restListProps.onBlur) {
+      restListProps.onBlur(event);
+    }
+    if (inputProps.onBlur) {
+      inputProps.onBlur(event);
+    }
+    notifyPopper(event);
+  };
+  const handleInputChange = (event) => {
+    const newValue = event.target.value;
+    setInputValue(newValue);
+    setHighlightedIndex(void 0);
+    setQuickSelection(newValue.length > 0 && !allowFreeText);
+    if (newValue.length === 0) {
+      setSelectedItem(void 0);
+      onChange == null ? void 0 : onChange(event, null);
+    }
+    if (inputProps.onChange) {
+      inputProps.onChange(event, "");
+    }
+  };
+  const handleInputSelect = (event) => {
+    console.log("handleInputSelect setSelectionChanged = true");
+    setSelectionChanged(true);
+    if (inputProps.onSelect) {
+      inputProps.onSelect(event);
+    }
+  };
+  const handleInputKeyDown = (event) => {
+    if ("Escape" === event.key) {
+      setHighlightedIndex(void 0);
+      if (allowFreeText) {
+        setInputValue("");
+      } else {
+        reconcileInput();
+      }
+    }
+    if (inputProps.onKeyDown) {
+      inputProps.onKeyDown(event);
+    }
+  };
+  const handleFirstItemSelection = (event) => {
+    if (!allowFreeText && event.key === "Enter" && quickSelection) {
+      setSelectedItem(source[0]);
+      onSelect == null ? void 0 : onSelect(event, source[0]);
+      onChange == null ? void 0 : onChange(event, source[0]);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (isToggleList(event)) {
+      notifyPopper(event);
+      return;
+    }
+    if (["ArrowUp", "ArrowDown"].indexOf(event.key) !== -1 && highlightedIndex == null) {
+      initHighlightedIndex();
+    }
+    handleFirstItemSelection(event);
+    if ([" ", "Home", "End"].indexOf(event.key) === -1) {
+      if (restListProps.onKeyDown) {
+        restListProps.onKeyDown(event);
+      }
+      console.log(`handleKeyDown ${event.key} setSelectionCHanged = false`);
+      setSelectionChanged(false);
+    }
+    setAllowAnnouncement("Backspace" !== event.key);
+    handleInputKeyDown(event);
+    notifyPopper(event);
+  };
+  const handleListClick = (event) => {
+    console.log("handle list click");
+    const inputEl = inputRef.current;
+    if (inputEl != null) {
+      inputEl.focus();
+    }
+    if (restListProps.onClick) {
+      restListProps.onClick(event);
+    }
+    notifyPopper(event);
+  };
+  const mergedInputProps = {
+    ...inputProps.inputProps,
+    role: "combobox",
+    "aria-owns": listId,
+    "aria-label": ariaLabel,
+    "aria-expanded": isListOpen,
+    "aria-activedescendant": isListOpen && selectionChanged ? null : ariaActiveDescendant
+  };
+  return {
+    inputRef: handleInputRef,
+    listContext: {
+      state,
+      helpers
+    },
+    inputProps: {
+      ...restProps,
+      ...inputProps,
+      disabled,
+      allowAnnouncement,
+      id: inputId,
+      value: inputValue,
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur,
+      onChange: handleInputChange,
+      onKeyDown: handleKeyDown,
+      onSelect: handleInputSelect,
+      inputProps: mergedInputProps
+    },
+    listProps: {
+      ...restListProps,
+      source,
+      itemToString,
+      itemTextHighlightPattern,
+      onClick: handleListClick,
+      isListOpen: isListOpen && Boolean(source.length)
+    }
+  };
+};
+
+export { useComboBox };
+//# sourceMappingURL=useComboBox.js.map