@elliemae/ds-controlled-form 3.0.0-next.14 → 3.0.0-next.18

package/dist/cjs/combobox/parts/controls-input/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/controls-input/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledInput = styled.input<{ withoutCaret: boolean }>`\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  & span {\n    line-height: 13px;\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n`;\n\nexport const StyledInputWrapper = styled.div`\n  position: relative;\n  flex: 1;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI7C,CAAC,EAAE,mBAAmB,gBAAgB;AAAA;AAGnC,MAAM,yBAAyB,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY1C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMzC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledInput = styled.input<{ withoutCaret: boolean }>`\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  & span {\n    line-height: 13px;\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n`;\n\nexport const StyledInputWrapper = styled.div`\n  position: relative;\n  flex: 1;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI7C,CAAC,EAAE,mBAAmB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,yBAAyB,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY1C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMzC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/controls-input/useControlsInput.js

@@ -36,7 +36,7 @@ var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
 var import_listHelper = require("../../utils/listHelper");
 const useControlsInput = () => {
   const {
-    props: { selectedValues, placeholder, onFilter },
+    props: { selectedValues, allOptions, placeholder, onFilter },
     setHasFocus,
     inputValue,
     setInputValue,
@@ -47,16 +47,15 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && (0, import_listHelper.isSelectedValueEmpty)(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, "\xA0");
   (0, import_react.useEffect)(() => {
-    setWidth(spanReference.current?.offsetWidth ? spanReference.current?.offsetWidth + 2 : 1);
+    setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
   }, [inputValue]);
   const handleOnChange = (0, import_useMaskedOnChange.useMaskedOnChange)();
   const handleOnBlur = (0, import_react.useCallback)(() => {
     setInputValue("");
     if (onFilter)
-      onFilter("");
+      onFilter(allOptions, inputValue);
     setHasFocus(false);
-    setShowSelectedOptions(false);
-  }, [setInputValue, setShowSelectedOptions, onFilter, setHasFocus]);
+  }, [setInputValue, onFilter, allOptions, inputValue, setHasFocus, setShowSelectedOptions]);
   const handleOnFocus = (0, import_react.useCallback)(() => {
     setHasFocus(true);
   }, [setHasFocus]);

package/dist/cjs/combobox/parts/controls-input/useControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/controls-input/useControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport { useMaskedOnChange } from './useMaskedOnChange';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n  handleOnBlur: () => void;\n  handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n  handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n  showPlaceholder: string | null | undefined;\n  spanReferenceText: string | undefined;\n  width: number;\n  spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n  const {\n    props: { selectedValues, placeholder, onFilter },\n    setHasFocus,\n    inputValue,\n    setInputValue,\n    setShowSelectedOptions,\n  } = useContext(ComboBoxContext);\n\n  const [width, setWidth] = useState(1);\n  // use span reference to calculate the real width for the input\n  const spanReference = useRef<HTMLSpanElement>(null);\n  const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;\n  const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n  useEffect(() => {\n    setWidth(spanReference.current?.offsetWidth ? spanReference.current?.offsetWidth + 2 : 1);\n  }, [inputValue]);\n\n  // if we se an input mask we configure inside here the proper mask\n  // or a stardard combobox onchange event\n  const handleOnChange = useMaskedOnChange();\n\n  const handleOnBlur = useCallback(() => {\n    setInputValue('');\n    if (onFilter) onFilter('');\n    setHasFocus(false);\n    setShowSelectedOptions(false);\n  }, [setInputValue, setShowSelectedOptions, onFilter, setHasFocus]);\n\n  const handleOnFocus = useCallback(() => {\n    setHasFocus(true);\n  }, [setHasFocus]);\n\n  return useMemo(\n    () => ({\n      handleOnBlur,\n      handleOnChange,\n      handleOnFocus,\n      showPlaceholder,\n      spanReferenceText,\n      width,\n      spanReference,\n    }),\n    [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n  );\n};\n\nexport { useControlsInput };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;AAE9E,+BAAkC;AAClC,yBAA4B;AAC5B,wBAAqC;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,aAAa;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,CAAC,OAAO,YAAY,2BAAS;AAEnC,QAAM,gBAAgB,yBAAwB;AAC9C,QAAM,kBAAkB,CAAC,cAAc,4CAAqB,kBAAkB,cAAc;AAC5F,QAAM,oBAAoB,WAAW,QAAQ,OAAO;AAEpD,8BAAU,MAAM;AACd,aAAS,cAAc,SAAS,cAAc,cAAc,SAAS,cAAc,IAAI;AAAA,KACtF,CAAC;AAIJ,QAAM,iBAAiB;AAEvB,QAAM,eAAe,8BAAY,MAAM;AACrC,kBAAc;AACd,QAAI;AAAU,eAAS;AACvB,gBAAY;AACZ,2BAAuB;AAAA,KACtB,CAAC,eAAe,wBAAwB,UAAU;AAErD,QAAM,gBAAgB,8BAAY,MAAM;AACtC,gBAAY;AAAA,KACX,CAAC;AAEJ,SAAO,0BACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO;AAAA;",
+  "sourcesContent": ["import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport { useMaskedOnChange } from './useMaskedOnChange';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n  handleOnBlur: () => void;\n  handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n  handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n  showPlaceholder: string | null | undefined;\n  spanReferenceText: string | undefined;\n  width: number;\n  spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n  const {\n    props: { selectedValues, allOptions, placeholder, onFilter },\n    setHasFocus,\n    inputValue,\n    setInputValue,\n    setShowSelectedOptions,\n  } = useContext(ComboBoxContext);\n\n  const [width, setWidth] = useState(1);\n  // use span reference to calculate the real width for the input\n  const spanReference = useRef<HTMLSpanElement>(null);\n  const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;\n  const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n  useEffect(() => {\n    setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n  }, [inputValue]);\n\n  // if we se an input mask we configure inside here the proper mask\n  // or a stardard combobox onchange event\n  const handleOnChange = useMaskedOnChange();\n\n  const handleOnBlur = useCallback(() => {\n    setInputValue('');\n    if (onFilter) onFilter(allOptions, inputValue);\n    setHasFocus(false);\n    // setShowSelectedOptions(false);\n  }, [setInputValue, onFilter, allOptions, inputValue, setHasFocus, setShowSelectedOptions]);\n\n  const handleOnFocus = useCallback(() => {\n    setHasFocus(true);\n  }, [setHasFocus]);\n\n  return useMemo(\n    () => ({\n      handleOnBlur,\n      handleOnChange,\n      handleOnFocus,\n      showPlaceholder,\n      spanReferenceText,\n      width,\n      spanReference,\n    }),\n    [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n  );\n};\n\nexport { useControlsInput };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;AAE9E,+BAAkC;AAClC,yBAA4B;AAC5B,wBAAqC;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,CAAC,OAAO,YAAY,2BAAS;AAEnC,QAAM,gBAAgB,yBAAwB;AAC9C,QAAM,kBAAkB,CAAC,cAAc,4CAAqB,kBAAkB,cAAc;AAC5F,QAAM,oBAAoB,WAAW,QAAQ,OAAO;AAEpD,8BAAU,MAAM;AACd,aAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI;AAAA,KACrF,CAAC;AAIJ,QAAM,iBAAiB;AAEvB,QAAM,eAAe,8BAAY,MAAM;AACrC,kBAAc;AACd,QAAI;AAAU,eAAS,YAAY;AACnC,gBAAY;AAAA,KAEX,CAAC,eAAe,UAAU,YAAY,YAAY,aAAa;AAElE,QAAM,gBAAgB,8BAAY,MAAM;AACtC,gBAAY;AAAA,KACX,CAAC;AAEJ,SAAO,0BACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/controls-input/useKeyboardNavigation.js

@@ -38,6 +38,7 @@ const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type)
 const useKeyboardNavigation = () => {
   const {
     props: {
+      allOptions,
       onCancel,
       onKeyDown,
       onChange,
@@ -45,7 +46,7 @@ const useKeyboardNavigation = () => {
       onFilter,
       onSelectAll,
       inline,
-      options,
+      filteredOptions,
       selectedValues,
       withoutPortal
     },
@@ -60,9 +61,9 @@ const useKeyboardNavigation = () => {
     setFocusOptionIdx
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
-  const selectableOptions = (0, import_listHelper.getOptions)(options);
-  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);
-  const currentItem = options.find((item) => item.dsId === focusOptionIdx);
+  const selectableOptions = (0, import_listHelper.getOptions)(filteredOptions);
+  const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);
+  const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);
   const onInputKeyDown = (0, import_react.useCallback)((e) => {
     if (onKeyDown && currentItem?.type === import_constants.MENU_OPTION_TYPES.OPTION)
       onKeyDown(e, currentItem);
@@ -74,7 +75,7 @@ const useKeyboardNavigation = () => {
         onCancel();
       if (inputValue) {
         if (onFilter)
-          onFilter("");
+          onFilter(allOptions, inputValue);
         setInputValue("");
       }
       if (!inline)
@@ -82,39 +83,38 @@ const useKeyboardNavigation = () => {
     }
     if (e.key === "Enter" && currentItem?.type === import_constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
       onCreate(inputValue);
+      setFocusOptionIdx("");
       if (onFilter)
-        onFilter("");
+        onFilter(allOptions, "");
       setInputValue("");
       return;
     }
     if (e.key === "Enter" || e.keyCode === 32 && e.altKey) {
       e.preventDefault();
       e.stopPropagation();
-      if (focusOptionIdx !== "" && showPopover && currentItem?.type === import_constants.MENU_OPTION_TYPES.OPTION) {
-        if (currentItem?.type === "option" && !currentItem.disabled) {
-          if (onFilter)
-            onFilter("");
-          setInputValue("");
-          if (!multiple) {
-            setShowPopover(false);
-          }
-          onChange((0, import_listHelper.getSuggestedValueOnChange)(currentItem, selectedValues), currentItem, e);
+      if (focusOptionIdx !== "" && (showPopover || inline) && currentItem?.type === import_constants.MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
+        if (onFilter)
+          onFilter(allOptions, "");
+        setInputValue("");
+        if (!multiple) {
+          setShowPopover(false);
         }
+        onChange((0, import_listHelper.getSuggestedValueOnChange)(currentItem, selectedValues), currentItem, e);
       }
     }
     if (e.key === "Enter" && e.altKey) {
       setShowPopover(false);
     }
     if (e.key === "a" && e.ctrlKey && multiple && onSelectAll) {
-      onSelectAll(options.filter((option) => option.type === "option" && !option.disabled), e);
+      onSelectAll(filteredOptions.filter((option) => option.type === "option" && !option.disabled), e);
     }
     if (e.key === "ArrowDown") {
       e.preventDefault();
       e.stopPropagation();
       if ((showPopover || inline) && selectableOptions.length) {
-        const nextItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, isOptionFocuseable);
-        setFocusOptionIdx(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
+        const nextItemIndex = (0, import_listHelper.findInCircularList)(filteredOptions, currentItemIndex, isOptionFocuseable);
+        setFocusOptionIdx(filteredOptions[nextItemIndex].dsId);
+        scrollOptionIntoView(filteredOptions[nextItemIndex].dsId);
       }
     }
     if (e.key === "ArrowUp") {
@@ -122,26 +122,26 @@ const useKeyboardNavigation = () => {
       e.stopPropagation();
       if (!selectableOptions.length)
         return;
-      const prevItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, isOptionFocuseable, -1);
+      const prevItemIndex = (0, import_listHelper.findInCircularList)(filteredOptions, currentItemIndex, isOptionFocuseable, -1);
       if (showPopover || inline) {
-        setFocusOptionIdx(options[prevItemIndex].dsId);
-        scrollOptionIntoView(options[prevItemIndex].dsId);
+        setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
+        scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
       } else {
         setShowPopover(true);
         setTimeout(() => {
-          const prevItem = (0, import_listHelper.findInCircularList)(options, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(options[prevItem].dsId);
-          scrollOptionIntoView(options[prevItem].dsId);
+          const prevItem = (0, import_listHelper.findInCircularList)(filteredOptions, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(filteredOptions[prevItem].dsId);
+          scrollOptionIntoView(filteredOptions[prevItem].dsId);
         });
       }
     }
-    if (e.key === "Backspace" && inputValue.length <= 0 && !inline) {
+    if (e.key === "Backspace" && e.currentTarget.value.length <= 0 && !inline) {
       const lastValue = (0, import_listHelper.getLastValueSelected)(selectedValues);
-      if (!inputValue && lastValue) {
+      if (!e.currentTarget.value && lastValue) {
         onChange((0, import_listHelper.getSuggestedValueOnChange)(lastValue, selectedValues), lastValue, e);
       }
       if (onFilter)
-        onFilter("");
+        onFilter(allOptions, inputValue);
     }
     if (e.key === "Tab" && !inline && !withoutPortal) {
       const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;
@@ -150,6 +150,9 @@ const useKeyboardNavigation = () => {
         element.focus();
       }
     }
+    if (e.key === "Tab" && !multiple && showPopover) {
+      setShowPopover(false);
+    }
   }, [
     onKeyDown,
     currentItem,
@@ -165,7 +168,7 @@ const useKeyboardNavigation = () => {
     focusOptionIdx,
     showPopover,
     selectableOptions.length,
-    options,
+    filteredOptions,
     currentItemIndex,
     setFocusOptionIdx,
     selectedValues,

package/dist/cjs/combobox/parts/controls-input/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/controls-input/useKeyboardNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n} from '../../utils/listHelper';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES } from '../../constants';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type) && !opt.disabled;\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      onCancel,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      options,\n      selectedValues,\n      withoutPortal,\n    },\n    inputValue,\n    showPopover,\n    focusOptionIdx,\n    selectAllCheckboxRef,\n    toggleSelectionButtonRef,\n    setShowPopover,\n    setInputValue,\n    scrollOptionIntoView,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const selectableOptions = getOptions(options);\n  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = options.find((item) => item.dsId === focusOptionIdx);\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || (e.keyCode >= 48 && e.keyCode <= 90)) {\n        setShowPopover(true);\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        if (onCancel) onCancel();\n        if (inputValue) {\n          if (onFilter) onFilter('');\n          setInputValue('');\n        }\n        if (!inline) setShowPopover(false);\n      }\n      // =============================================================================\n      // ENTER KEY TO CREATE ELEMENTS\n      // =============================================================================\n      if (e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n        onCreate(inputValue);\n        if (onFilter) onFilter('');\n        setInputValue('');\n        return;\n      }\n\n      // =============================================================================\n      // Enter and space on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.keyCode === 32 && e.altKey)) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (focusOptionIdx !== '' && showPopover && currentItem?.type === MENU_OPTION_TYPES.OPTION) {\n          if (currentItem?.type === 'option' && !currentItem.disabled) {\n            if (onFilter) onFilter('');\n            setInputValue('');\n            if (!multiple) {\n              setShowPopover(false);\n            }\n            onChange(getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);\n          }\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setShowPopover(false);\n      }\n\n      if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n        onSelectAll(\n          options.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n      }\n      // =============================================================================\n      // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n      // =============================================================================\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        if ((showPopover || inline) && selectableOptions.length) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n          setFocusOptionIdx(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        if (!selectableOptions.length) return;\n        const prevItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n\n        if (showPopover || inline) {\n          setFocusOptionIdx(options[prevItemIndex].dsId);\n          scrollOptionIntoView(options[prevItemIndex].dsId);\n        } else {\n          setShowPopover(true);\n          setTimeout(() => {\n            const prevItem = findInCircularList(options, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(options[prevItem].dsId);\n            scrollOptionIntoView(options[prevItem].dsId);\n          });\n        }\n      }\n\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {\n        const lastValue = getLastValueSelected(selectedValues);\n        if (!inputValue && lastValue) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n        }\n        if (onFilter) onFilter('');\n      }\n\n      if (e.key === 'Tab' && !inline && !withoutPortal) {\n        const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;\n        if (element) {\n          e.preventDefault();\n          element.focus();\n        }\n      }\n\n      // waiting for validation from ux\n      // if (e.key === 'Tab' && multiple) {\n      // }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      onKeyDown,\n      currentItem,\n      onCreate,\n      multiple,\n      inputValue,\n      inline,\n      withoutPortal,\n      setShowPopover,\n      onCancel,\n      onFilter,\n      setInputValue,\n      focusOptionIdx,\n      showPopover,\n      selectableOptions.length,\n      options,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n} from '../../utils/listHelper';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES } from '../../constants';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type) && !opt.disabled;\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      allOptions,\n      onCancel,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      filteredOptions,\n      selectedValues,\n      withoutPortal,\n    },\n    inputValue,\n    showPopover,\n    focusOptionIdx,\n    selectAllCheckboxRef,\n    toggleSelectionButtonRef,\n    setShowPopover,\n    setInputValue,\n    scrollOptionIntoView,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const selectableOptions = getOptions(filteredOptions);\n  const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || (e.keyCode >= 48 && e.keyCode <= 90)) {\n        setShowPopover(true);\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        if (onCancel) onCancel();\n        if (inputValue) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n        }\n        if (!inline) setShowPopover(false);\n      }\n      // =============================================================================\n      // ENTER KEY TO CREATE ELEMENTS\n      // =============================================================================\n      if (e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n        onCreate(inputValue);\n        //blank active item to force search last one\n        setFocusOptionIdx('');\n        if (onFilter) onFilter(allOptions, '');\n        setInputValue('');\n        return;\n      }\n\n      // =============================================================================\n      // Enter and space on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.keyCode === 32 && e.altKey)) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (\n          focusOptionIdx !== '' &&\n          (showPopover || inline) &&\n          currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n          !currentItem.disabled\n        ) {\n          if (onFilter) onFilter(allOptions, '');\n          setInputValue('');\n          if (!multiple) {\n            setShowPopover(false);\n          }\n          onChange(getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setShowPopover(false);\n      }\n\n      if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n      }\n      // =============================================================================\n      // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n      // =============================================================================\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        if ((showPopover || inline) && selectableOptions.length) {\n          const nextItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n          setFocusOptionIdx(filteredOptions[nextItemIndex].dsId);\n          scrollOptionIntoView(filteredOptions[nextItemIndex].dsId);\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        if (!selectableOptions.length) return;\n        const prevItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);\n\n        if (showPopover || inline) {\n          setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n          scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n        } else {\n          setShowPopover(true);\n          setTimeout(() => {\n            const prevItem = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(filteredOptions[prevItem].dsId);\n            scrollOptionIntoView(filteredOptions[prevItem].dsId);\n          });\n        }\n      }\n\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {\n        const lastValue = getLastValueSelected(selectedValues);\n        if (!e.currentTarget.value && lastValue) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n        }\n        if (onFilter) onFilter(allOptions, inputValue);\n      }\n\n      if (e.key === 'Tab' && !inline && !withoutPortal) {\n        const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;\n        if (element) {\n          e.preventDefault();\n          element.focus();\n        }\n      }\n\n      if (e.key === 'Tab' && !multiple && showPopover) {\n        setShowPopover(false);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      onKeyDown,\n      currentItem,\n      onCreate,\n      multiple,\n      inputValue,\n      inline,\n      withoutPortal,\n      setShowPopover,\n      onCancel,\n      onFilter,\n      setInputValue,\n      focusOptionIdx,\n      showPopover,\n      selectableOptions.length,\n      filteredOptions,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/combobox/parts/controls-input/useMaskedOnChange.js

@@ -32,9 +32,10 @@ __export(useMaskedOnChange_exports, {
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
+var import_listHelper = require("../../utils/listHelper");
 const useMaskedOnChange = () => {
   const {
-    props: { useMask, onFilter },
+    props: { useMask, onFilter, allOptions },
     setShowPopover,
     setInputValue,
     setShowSelectedOptions
@@ -43,16 +44,18 @@ const useMaskedOnChange = () => {
     setShowSelectedOptions(false);
     setShowPopover(true);
     if (onFilter) {
-      onFilter(e.currentTarget.value);
+      onFilter((0, import_listHelper.filterOptions)(e.currentTarget.value, allOptions), e.currentTarget.value);
       setInputValue(e.currentTarget.value);
     }
-  }, [onFilter, setInputValue, setShowPopover, setShowSelectedOptions]);
+  }, [allOptions, onFilter, setInputValue, setShowPopover, setShowSelectedOptions]);
   const handleOnChangeMask = (0, import_react.useCallback)((_, mask) => {
     setShowSelectedOptions(false);
     setShowPopover(true);
     if (mask && onFilter)
-      onFilter(mask);
-  }, [onFilter, setShowPopover, setShowSelectedOptions]);
+      onFilter((0, import_listHelper.filterOptions)(mask, allOptions), mask);
+    else if (!mask && onFilter)
+      onFilter(allOptions, "");
+  }, [allOptions, onFilter, setShowPopover, setShowSelectedOptions]);
   const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
   return onChangeMask?.onChange || handleOnChange;
 };

package/dist/cjs/combobox/parts/controls-input/useMaskedOnChange.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/controls-input/useMaskedOnChange.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, onFilter },\n    setShowPopover,\n    setInputValue,\n    setShowSelectedOptions,\n  } = useContext(ComboBoxContext);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setShowSelectedOptions(false);\n      setShowPopover(true);\n      if (onFilter) {\n        onFilter(e.currentTarget.value);\n        setInputValue(e.currentTarget.value);\n      }\n    },\n    [onFilter, setInputValue, setShowPopover, setShowSelectedOptions],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (_, mask?: string) => {\n      setShowSelectedOptions(false);\n      setShowPopover(true);\n      if (mask && onFilter) onFilter(mask);\n    },\n    [onFilter, setShowPopover, setShowSelectedOptions],\n  );\n\n  const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n  return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAE5B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAGf,QAAM,iBAAiB,8BACrB,CAAC,MAA2C;AAC1C,2BAAuB;AACvB,mBAAe;AACf,QAAI,UAAU;AACZ,eAAS,EAAE,cAAc;AACzB,oBAAc,EAAE,cAAc;AAAA;AAAA,KAGlC,CAAC,UAAU,eAAe,gBAAgB;AAI5C,QAAM,qBAAqB,8BACzB,CAAC,GAAG,SAAkB;AACpB,2BAAuB;AACvB,mBAAe;AACf,QAAI,QAAQ;AAAU,eAAS;AAAA,KAEjC,CAAC,UAAU,gBAAgB;AAG7B,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU;AAErE,SAAO,cAAc,YAAY;AAAA;",
+  "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { filterOptions } from '../../utils/listHelper';\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, onFilter, allOptions },\n    setShowPopover,\n    setInputValue,\n    setShowSelectedOptions,\n  } = useContext(ComboBoxContext);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setShowSelectedOptions(false);\n      setShowPopover(true);\n      if (onFilter) {\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n        setInputValue(e.currentTarget.value);\n      }\n    },\n    [allOptions, onFilter, setInputValue, setShowPopover, setShowSelectedOptions],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (_, mask?: string) => {\n      setShowSelectedOptions(false);\n      setShowPopover(true);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n    },\n    [allOptions, onFilter, setShowPopover, setShowSelectedOptions],\n  );\n\n  const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n  return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAC9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAGf,QAAM,iBAAiB,8BACrB,CAAC,MAA2C;AAC1C,2BAAuB;AACvB,mBAAe;AACf,QAAI,UAAU;AACZ,eAAS,qCAAc,EAAE,cAAc,OAAO,aAAa,EAAE,cAAc;AAC3E,oBAAc,EAAE,cAAc;AAAA;AAAA,KAGlC,CAAC,YAAY,UAAU,eAAe,gBAAgB;AAIxD,QAAM,qBAAqB,8BACzB,CAAC,GAAG,SAAkB;AACpB,2BAAuB;AACvB,mBAAe;AACf,QAAI,QAAQ;AAAU,eAAS,qCAAc,MAAM,aAAa;AAAA,aACvD,CAAC,QAAQ;AAAU,eAAS,YAAY;AAAA,KAEnD,CAAC,YAAY,UAAU,gBAAgB;AAGzC,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU;AAErE,SAAO,cAAc,YAAY;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/header-list/useHeaderListHandlers.js

@@ -35,13 +35,13 @@ var import_listHelper = require("../../utils/listHelper");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
 const useHeaderListHandlers = () => {
   const {
-    props: { selectedValues, options, onSelectAll, innerRef },
+    props: { selectedValues, filteredOptions, onSelectAll, innerRef },
     showSelectedOptions,
     setShowSelectedOptions,
     setShowPopover
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   const multiSelectedValues = selectedValues;
-  const selectableOptions = (0, import_listHelper.getSelectableOptions)(options);
+  const selectableOptions = (0, import_listHelper.getSelectableOptions)(filteredOptions);
   const getCheckboxStatus = (0, import_react.useMemo)(() => {
     if (multiSelectedValues.length === selectableOptions.length) {
       return true;
@@ -60,13 +60,13 @@ const useHeaderListHandlers = () => {
   }, []);
   const handleSelectAllCheckboxChange = (0, import_react.useCallback)((e) => {
     if ((!checkboxStatus || checkboxStatus === "mixed") && onSelectAll) {
-      onSelectAll(options.filter((option) => option.type === "option" && !option.disabled), e);
+      onSelectAll(filteredOptions.filter((option) => option.type === "option" && !option.disabled), e);
       setCheckboxStatus(true);
     } else if (onSelectAll) {
       onSelectAll([], e);
       setCheckboxStatus(false);
     }
-  }, [checkboxStatus, onSelectAll, options]);
+  }, [checkboxStatus, onSelectAll, filteredOptions]);
   const handleToggleSelectedValuesFilter = (0, import_react.useCallback)((e) => {
     e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);

package/dist/cjs/combobox/parts/header-list/useHeaderListHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/header-list/useHeaderListHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSelectableOptions } from '../../utils/listHelper';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst useHeaderListHandlers = () => {\n  const {\n    props: { selectedValues, options, onSelectAll, innerRef },\n    showSelectedOptions,\n    setShowSelectedOptions,\n    setShowPopover,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const selectableOptions = getSelectableOptions(options);\n\n  const getCheckboxStatus = useMemo(() => {\n    if (multiSelectedValues.length === selectableOptions.length) {\n      return true;\n    }\n    if (multiSelectedValues?.length === 0) {\n      return false;\n    }\n    return 'mixed';\n  }, [multiSelectedValues.length, selectableOptions.length]);\n\n  const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n  useEffect(() => {\n    setCheckboxStatus(getCheckboxStatus);\n  }, [getCheckboxStatus, multiSelectedValues]);\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    // this prevent the input control to lose focus\n  }, []);\n\n  const handleSelectAllCheckboxChange = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n        onSelectAll(\n          options.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n        setCheckboxStatus(true);\n      } else if (onSelectAll) {\n        onSelectAll([], e);\n        setCheckboxStatus(false);\n      }\n    },\n    [checkboxStatus, onSelectAll, options],\n  );\n\n  const handleToggleSelectedValuesFilter: React.MouseEventHandler = useCallback(\n    (e) => {\n      e.preventDefault();\n      setShowSelectedOptions(!showSelectedOptions);\n    },\n    [setShowSelectedOptions, showSelectedOptions],\n  );\n\n  // when pressing escape on each header list button we close the menu\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setShowPopover(false);\n      }\n    },\n    [setShowPopover],\n  );\n\n  // when hitting tab on selected values button filter we target the input again\n  const handleFilterSelectionBtnOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey) {\n        e.preventDefault();\n        innerRef.current?.focus();\n      }\n    },\n    [innerRef],\n  );\n\n  const handleCheckAllOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n        e.preventDefault();\n        innerRef.current?.focus();\n      }\n    },\n    [innerRef, multiSelectedValues],\n  );\n\n  useEffect(() => {\n    // toggle off selected values filter when removing all of them\n    if (multiSelectedValues.length === 0) {\n      setShowSelectedOptions(false);\n    }\n  }, [multiSelectedValues, setShowSelectedOptions]);\n\n  return useMemo(\n    () => ({\n      handleKeyDown,\n      handleToggleSelectedValuesFilter,\n      handleFilterSelectionBtnOnTab,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    }),\n    [\n      handleKeyDown,\n      handleFilterSelectionBtnOnTab,\n      handleToggleSelectedValuesFilter,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    ],\n  );\n};\n\nexport { useHeaderListHandlers };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6E;AAE7E,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS,aAAa;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,sBAAsB;AAC5B,QAAM,oBAAoB,4CAAqB;AAE/C,QAAM,oBAAoB,0BAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA;AAET,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA;AAET,WAAO;AAAA,KACN,CAAC,oBAAoB,QAAQ,kBAAkB;AAElD,QAAM,CAAC,gBAAgB,qBAAqB,2BAA4B;AAExE,8BAAU,MAAM;AACd,sBAAkB;AAAA,KACjB,CAAC,mBAAmB;AAEvB,QAAM,oBAAoB,8BAAY,CAAC,MAAwB;AAC7D,MAAE;AAAA,KAED;AAEH,QAAM,gCAAgC,8BACpC,CAAC,MAA8C;AAC7C,QAAK,EAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE,kBACE,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,WAC/D;AAEF,wBAAkB;AAAA,eACT,aAAa;AACtB,kBAAY,IAAI;AAChB,wBAAkB;AAAA;AAAA,KAGtB,CAAC,gBAAgB,aAAa;AAGhC,QAAM,mCAA4D,8BAChE,CAAC,MAAM;AACL,MAAE;AACF,2BAAuB,CAAC;AAAA,KAE1B,CAAC,wBAAwB;AAI3B,QAAM,gBAAgB,8BACpB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,UAAU;AACtB,qBAAe;AAAA;AAAA,KAGnB,CAAC;AAIH,QAAM,gCAAgC,8BACpC,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,QAAE;AACF,eAAS,SAAS;AAAA;AAAA,KAGtB,CAAC;AAGH,QAAM,sBAAsB,8BAC1B,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,QAAE;AACF,eAAS,SAAS;AAAA;AAAA,KAGtB,CAAC,UAAU;AAGb,8BAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB;AAAA;AAAA,KAExB,CAAC,qBAAqB;AAEzB,SAAO,0BACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "sourcesContent": ["import React, { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSelectableOptions } from '../../utils/listHelper';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst useHeaderListHandlers = () => {\n  const {\n    props: { selectedValues, filteredOptions, onSelectAll, innerRef },\n    showSelectedOptions,\n    setShowSelectedOptions,\n    setShowPopover,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const selectableOptions = getSelectableOptions(filteredOptions);\n\n  const getCheckboxStatus = useMemo(() => {\n    if (multiSelectedValues.length === selectableOptions.length) {\n      return true;\n    }\n    if (multiSelectedValues?.length === 0) {\n      return false;\n    }\n    return 'mixed';\n  }, [multiSelectedValues.length, selectableOptions.length]);\n\n  const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n  useEffect(() => {\n    setCheckboxStatus(getCheckboxStatus);\n  }, [getCheckboxStatus, multiSelectedValues]);\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    // this prevent the input control to lose focus\n  }, []);\n\n  const handleSelectAllCheckboxChange = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n        setCheckboxStatus(true);\n      } else if (onSelectAll) {\n        onSelectAll([], e);\n        setCheckboxStatus(false);\n      }\n    },\n    [checkboxStatus, onSelectAll, filteredOptions],\n  );\n\n  const handleToggleSelectedValuesFilter: React.MouseEventHandler = useCallback(\n    (e) => {\n      e.preventDefault();\n      setShowSelectedOptions(!showSelectedOptions);\n    },\n    [setShowSelectedOptions, showSelectedOptions],\n  );\n\n  // when pressing escape on each header list button we close the menu\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setShowPopover(false);\n      }\n    },\n    [setShowPopover],\n  );\n\n  // when hitting tab on selected values button filter we target the input again\n  const handleFilterSelectionBtnOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey) {\n        e.preventDefault();\n        innerRef.current?.focus();\n      }\n    },\n    [innerRef],\n  );\n\n  const handleCheckAllOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n        e.preventDefault();\n        innerRef.current?.focus();\n      }\n    },\n    [innerRef, multiSelectedValues],\n  );\n\n  useEffect(() => {\n    // toggle off selected values filter when removing all of them\n    if (multiSelectedValues.length === 0) {\n      setShowSelectedOptions(false);\n    }\n  }, [multiSelectedValues, setShowSelectedOptions]);\n\n  return useMemo(\n    () => ({\n      handleKeyDown,\n      handleToggleSelectedValuesFilter,\n      handleFilterSelectionBtnOnTab,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    }),\n    [\n      handleKeyDown,\n      handleFilterSelectionBtnOnTab,\n      handleToggleSelectedValuesFilter,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    ],\n  );\n};\n\nexport { useHeaderListHandlers };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6E;AAE7E,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,aAAa;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,sBAAsB;AAC5B,QAAM,oBAAoB,4CAAqB;AAE/C,QAAM,oBAAoB,0BAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA;AAET,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA;AAET,WAAO;AAAA,KACN,CAAC,oBAAoB,QAAQ,kBAAkB;AAElD,QAAM,CAAC,gBAAgB,qBAAqB,2BAA4B;AAExE,8BAAU,MAAM;AACd,sBAAkB;AAAA,KACjB,CAAC,mBAAmB;AAEvB,QAAM,oBAAoB,8BAAY,CAAC,MAAwB;AAC7D,MAAE;AAAA,KAED;AAEH,QAAM,gCAAgC,8BACpC,CAAC,MAA8C;AAC7C,QAAK,EAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE,kBACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,WACvE;AAEF,wBAAkB;AAAA,eACT,aAAa;AACtB,kBAAY,IAAI;AAChB,wBAAkB;AAAA;AAAA,KAGtB,CAAC,gBAAgB,aAAa;AAGhC,QAAM,mCAA4D,8BAChE,CAAC,MAAM;AACL,MAAE;AACF,2BAAuB,CAAC;AAAA,KAE1B,CAAC,wBAAwB;AAI3B,QAAM,gBAAgB,8BACpB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,UAAU;AACtB,qBAAe;AAAA;AAAA,KAGnB,CAAC;AAIH,QAAM,gCAAgC,8BACpC,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,QAAE;AACF,eAAS,SAAS;AAAA;AAAA,KAGtB,CAAC;AAGH,QAAM,sBAAsB,8BAC1B,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,QAAE;AACF,eAAS,SAAS;AAAA;AAAA,KAGtB,CAAC,UAAU;AAGb,8BAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB;AAAA;AAAA,KAExB,CAAC,qBAAqB;AAEzB,SAAO,0BACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/menu-list/MenuList.js

@@ -31,6 +31,7 @@ __export(MenuList_exports, {
 });
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_styled = require("./styled");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids");
 var import_ComboBoxCTX = require("../../ComboBoxCTX");
@@ -38,16 +39,17 @@ var import_header_list = require("../header-list");
 var import_useItemRenderer = require("./useItemRenderer");
 const MenuList = () => {
   const {
-    props: { menuMinWidth, menuMaxHeight, onCreate, inline, options, selectedValues },
-    referenceElement,
+    props: { menuMinWidth, menuMaxHeight, onCreate, inline, filteredOptions, selectedValues },
+    controlsWrapperRef,
     listRef,
     inputValue,
     wrapperListRef,
     virtualListHelpers
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
-  const withHeader = !inline && multiple && options.length > 0 && inputValue === "";
+  const withHeader = !inline && multiple && filteredOptions.length > 0 && !inputValue;
   const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
+  const { width } = (0, import_ds_utilities.useOnElementResize)(controlsWrapperRef);
   const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
     e.preventDefault();
   }, []);
@@ -55,8 +57,9 @@ const MenuList = () => {
     ref: wrapperListRef,
     inline,
     onMouseDown: preventLoseInputFocus,
-    minWidth: menuMinWidth || `${referenceElement?.offsetWidth || "100%"}`
-  }, withHeader && /* @__PURE__ */ import_react.default.createElement(import_header_list.HeaderList, null), options.length > 0 || onCreate ? /* @__PURE__ */ import_react.default.createElement(import_styled.StyledVirtualListWrapper, {
+    width,
+    minWidth: menuMinWidth
+  }, withHeader && /* @__PURE__ */ import_react.default.createElement(import_header_list.HeaderList, null), filteredOptions.length > 0 || onCreate ? /* @__PURE__ */ import_react.default.createElement(import_styled.StyledVirtualListWrapper, {
     inline,
     maxHeight: menuMaxHeight,
     ref: listRef,
@@ -71,16 +74,16 @@ const MenuList = () => {
   }, "No matches found")), [
     wrapperListRef,
     inline,
+    preventLoseInputFocus,
+    width,
     menuMinWidth,
-    referenceElement?.offsetWidth,
     withHeader,
-    options.length,
+    filteredOptions.length,
+    onCreate,
     menuMaxHeight,
     listRef,
     virtualListHelpers?.totalSize,
-    ItemRenderer,
-    onCreate,
-    preventLoseInputFocus
+    ItemRenderer
   ]);
 };
 module.exports = __toCommonJS(MenuList_exports);

package/dist/cjs/combobox/parts/menu-list/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\n\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { HeaderList } from '../header-list';\nimport { useItemRenderer } from './useItemRenderer';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { menuMinWidth, menuMaxHeight, onCreate, inline, options, selectedValues },\n    referenceElement,\n    listRef,\n    inputValue,\n    wrapperListRef,\n    virtualListHelpers,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const withHeader = !inline && multiple && options.length > 0 && inputValue === '';\n  const ItemRenderer = useItemRenderer();\n\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(\n    () => (\n      <StyledListWrapper\n        ref={wrapperListRef}\n        inline={inline}\n        onMouseDown={preventLoseInputFocus}\n        minWidth={menuMinWidth || `${referenceElement?.offsetWidth || '100%'}`}\n      >\n        {withHeader && <HeaderList />}\n        {options.length > 0 || onCreate ? (\n          <StyledVirtualListWrapper\n            inline={inline}\n            maxHeight={menuMaxHeight as number}\n            ref={listRef}\n            withHeader={withHeader}\n          >\n            <StyledList\n              id=\"combo-listbox\"\n              role=\"listbox\"\n              data-testid={ComboboxDataTestid.LIST}\n              style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n            >\n              {ItemRenderer}\n            </StyledList>\n          </StyledVirtualListWrapper>\n        ) : (\n          <StyledNoResultsWrapper aria-live=\"polite\">No matches found</StyledNoResultsWrapper>\n        )}\n      </StyledListWrapper>\n    ),\n    [\n      wrapperListRef,\n      inline,\n      menuMinWidth,\n      referenceElement?.offsetWidth,\n      withHeader,\n      options.length,\n      menuMaxHeight,\n      listRef,\n      virtualListHelpers?.totalSize,\n      ItemRenderer,\n      onCreate,\n      preventLoseInputFocus,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AAExD,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAEzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,eAAe,UAAU,QAAQ,SAAS;AAAA,IACjE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,WAAW,MAAM,QAAQ;AAC/B,QAAM,aAAa,CAAC,UAAU,YAAY,QAAQ,SAAS,KAAK,eAAe;AAC/E,QAAM,eAAe;AAErB,QAAM,wBAAiD,8BAAY,CAAC,MAAM;AACxE,MAAE;AAAA,KACD;AAEH,SAAO,0BACL,MACE,mDAAC,iCAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,aAAa;AAAA,IACb,UAAU,gBAAgB,GAAG,kBAAkB,eAAe;AAAA,KAE7D,cAAc,mDAAC,+BAAD,OACd,QAAQ,SAAS,KAAK,WACrB,mDAAC,wCAAD;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,KAEA,mDAAC,0BAAD;AAAA,IACE,IAAG;AAAA,IACH,MAAK;AAAA,IACL,eAAa,8CAAmB;AAAA,IAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ;AAAA,KAExE,iBAIL,mDAAC,sCAAD;AAAA,IAAwB,aAAU;AAAA,KAAS,sBAIjD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\n\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { HeaderList } from '../header-list';\nimport { useItemRenderer } from './useItemRenderer';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { menuMinWidth, menuMaxHeight, onCreate, inline, filteredOptions, selectedValues },\n    controlsWrapperRef,\n    listRef,\n    inputValue,\n    wrapperListRef,\n    virtualListHelpers,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n  const withHeader = !inline && multiple && filteredOptions.length > 0 && !inputValue;\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(\n    () => (\n      <StyledListWrapper\n        ref={wrapperListRef}\n        inline={inline}\n        onMouseDown={preventLoseInputFocus}\n        width={width}\n        minWidth={menuMinWidth}\n      >\n        {withHeader && <HeaderList />}\n        {filteredOptions.length > 0 || onCreate ? (\n          <StyledVirtualListWrapper\n            inline={inline}\n            maxHeight={menuMaxHeight as number}\n            ref={listRef}\n            withHeader={withHeader}\n          >\n            <StyledList\n              id=\"combo-listbox\"\n              role=\"listbox\"\n              data-testid={ComboboxDataTestid.LIST}\n              style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n            >\n              {ItemRenderer}\n            </StyledList>\n          </StyledVirtualListWrapper>\n        ) : (\n          <StyledNoResultsWrapper aria-live=\"polite\">No matches found</StyledNoResultsWrapper>\n        )}\n      </StyledListWrapper>\n    ),\n    [\n      wrapperListRef,\n      inline,\n      preventLoseInputFocus,\n      width,\n      menuMinWidth,\n      withHeader,\n      filteredOptions.length,\n      onCreate,\n      menuMaxHeight,\n      listRef,\n      virtualListHelpers?.totalSize,\n      ItemRenderer,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,0BAAmC;AAEnC,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAEzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,eAAe,UAAU,QAAQ,iBAAiB;AAAA,IACzE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,WAAW,MAAM,QAAQ;AAE/B,QAAM,aAAa,CAAC,UAAU,YAAY,gBAAgB,SAAS,KAAK,CAAC;AACzE,QAAM,eAAe;AACrB,QAAM,EAAE,UAAU,4CAAmB;AACrC,QAAM,wBAAiD,8BAAY,CAAC,MAAM;AACxE,MAAE;AAAA,KACD;AAEH,SAAO,0BACL,MACE,mDAAC,iCAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,UAAU;AAAA,KAET,cAAc,mDAAC,+BAAD,OACd,gBAAgB,SAAS,KAAK,WAC7B,mDAAC,wCAAD;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,KAEA,mDAAC,0BAAD;AAAA,IACE,IAAG;AAAA,IACH,MAAK;AAAA,IACL,eAAa,8CAAmB;AAAA,IAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ;AAAA,KAExE,iBAIL,mDAAC,sCAAD;AAAA,IAAwB,aAAU;AAAA,KAAS,sBAIjD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/menu-list/styled.js

@@ -36,7 +36,8 @@ __export(styled_exports, {
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 const StyledListWrapper = import_ds_system.styled.div`
-  min-width: ${(props) => props.inline ? "100%" : `${props.minWidth}px`};
+  min-width: ${({ inline, minWidth }) => inline ? "100%" : `${minWidth}px`};
+  width: ${({ width }) => `${width}px`};
   background-color: #ffffff;
 `;
 const StyledList = import_ds_system.styled.ul`

package/dist/cjs/combobox/parts/menu-list/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledListWrapper = styled.div<{ inline: boolean | undefined; minWidth: string | number }>`\n  min-width: ${(props) => (props.inline ? '100%' : `${props.minWidth}px`)};\n  background-color: #ffffff;\n`;\n\nexport const StyledList = styled.ul`\n  position: relative;\n  padding: 0;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n  inline: boolean | undefined;\n  maxHeight: number;\n  withHeader: boolean;\n}>`\n  overflow-y: auto;\n  margin-top: ${({ withHeader }) => (withHeader ? '28px' : '')};\n\n  max-height: ${({ maxHeight }) => (!maxHeight ? '400px' : `${maxHeight}px`)};\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 16px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,UAAW,MAAM,SAAS,SAAS,GAAG,MAAM;AAAA;AAAA;AAIrD,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,iBAAkB,aAAa,SAAS;AAAA;AAAA,gBAE3C,CAAC,EAAE,gBAAiB,CAAC,YAAY,UAAU,GAAG;AAAA;AAGvD,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n  minWidth: number | string;\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled.div<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${minWidth}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n`;\n\nexport const StyledList = styled.ul`\n  position: relative;\n  padding: 0;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n  inline: boolean | undefined;\n  maxHeight: number;\n  withHeader: boolean;\n}>`\n  overflow-y: auto;\n  margin-top: ${({ withHeader }) => (withHeader ? '28px' : '')};\n\n  max-height: ${({ maxHeight }) => (!maxHeight ? '400px' : `${maxHeight}px`)};\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 16px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAOhB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,eAAgB,SAAS,SAAS,GAAG;AAAA,WACpD,CAAC,EAAE,YAAY,GAAG;AAAA;AAAA;AAItB,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,iBAAkB,aAAa,SAAS;AAAA;AAAA,gBAE3C,CAAC,EAAE,gBAAiB,CAAC,YAAY,UAAU,GAAG;AAAA;AAGvD,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/parts/menu-list/useItemRenderer.js

@@ -57,7 +57,7 @@ var import_ComboboxDataTestids = require("../../ComboboxDataTestids");
 var import_constants = require("../../constants");
 const useItemRenderer = () => {
   const {
-    props: { options, onCreate, onChange, selectedValues, onFilter, innerRef },
+    props: { filteredOptions, onCreate, onChange, selectedValues, onFilter, allOptions },
     setShowPopover,
     inputValue,
     focusOptionIdx,
@@ -71,12 +71,12 @@ const useItemRenderer = () => {
       if (inputValue) {
         onCreate(inputValue);
         setInputValue("");
-        onFilter("");
+        onFilter(allOptions, inputValue);
       }
     } else if (option.type === import_constants.MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
         if (onFilter)
-          onFilter("");
+          onFilter(allOptions, inputValue);
         setInputValue("");
         if (!multiple) {
           setShowPopover(false);
@@ -86,7 +86,7 @@ const useItemRenderer = () => {
     }
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, selectedValues, onChange, setShowPopover, multiple, innerRef]);
+  }, [onFilter, selectedValues, onChange, setShowPopover, multiple]);
   const handleOnMouseDown = (0, import_react.useCallback)((e) => {
     e.preventDefault();
   }, []);
@@ -95,7 +95,7 @@ const useItemRenderer = () => {
       return null;
     }
     return virtualListHelpers.virtualItems.map((vItem) => {
-      const option = options[vItem.index];
+      const option = filteredOptions[vItem.index];
       const generalProps = {
         wrapperStyles: { position: "absolute", top: vItem.start, left: 0, width: "100%" },
         key: `${option.dsId}`,
@@ -132,14 +132,14 @@ const useItemRenderer = () => {
             height: "16px",
             gutter: "xxs",
             alignItems: "center"
-          }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledCreatableLabel, null, "Add:"), /* @__PURE__ */ import_react.default.createElement("span", null, label)),
+          }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledCreatableLabel, null, "Add:"), /* @__PURE__ */ import_react.default.createElement("span", null, `"${label}"`)),
           label: option.label,
           onClick: (e) => handleClick(option, e)
         }));
       }
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
     });
-  }, [options, focusOptionIdx, selectedValues, innerRef, virtualListHelpers?.virtualItems]);
+  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);
 };
 module.exports = __toCommonJS(useItemRenderer_exports);
 //# sourceMappingURL=useItemRenderer.js.map

package/dist/cjs/combobox/parts/menu-list/useItemRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/menu-list/useItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-common';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledCreatableLabel } from './styled';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n  const {\n    props: { options, onCreate, onChange, selectedValues, onFilter, innerRef },\n    setShowPopover,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    virtualListHelpers,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n  const handleClick = useCallback(\n    (option: DSComboboxT.ItemOption | DSComboboxT.ItemCreatableOption, e: React.MouseEvent) => {\n      if (option.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate && onFilter) {\n        if (inputValue) {\n          onCreate(inputValue);\n          setInputValue('');\n          onFilter('');\n        }\n      } else if (option.type === MENU_OPTION_TYPES.OPTION) {\n        if (!option.disabled) {\n          if (onFilter) onFilter('');\n          setInputValue('');\n          if (!multiple) {\n            setShowPopover(false);\n          }\n          onChange(getSuggestedValueOnChange(option, selectedValues), option, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, onChange, setShowPopover, multiple, innerRef],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(() => {\n    if (!virtualListHelpers) {\n      return null;\n    }\n    return virtualListHelpers.virtualItems.map((vItem) => {\n      const option = options[vItem.index];\n      const generalProps = {\n        wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' },\n        key: `${option.dsId}`,\n        innerRef: vItem.measureRef,\n      };\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        return <Section label={option.label} {...generalProps} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={option.disabled}\n            onClick={(e: Event) => handleClick(option, e)}\n            onMouseDown={handleOnMouseDown}\n            isActive={option.dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n          />\n        );\n      }\n      if (option.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <SingleMenuItem\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={option.dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label }: { label: string }) => (\n              <Grid cols={['min-content', 'auto']} height=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <span>{label}</span>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={(e: React.MouseEvent) => handleClick(option, e)}\n          />\n        );\n      }\n      return <></>;\n    });\n  }, [options, focusOptionIdx, selectedValues, innerRef, virtualListHelpers?.virtualItems]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAwD;AACxD,qBAAqB;AACrB,uBAAkE;AAClE,yBAAgC;AAChC,oBAAqC;AACrC,wBAAsD;AACtD,iCAAmC;AAEnC,uBAA8D;AACvD,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,UAAU,gBAAgB,UAAU;AAAA,IAChE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,WAAW,MAAM,QAAQ;AAC/B,QAAM,SAAS,WAAW,iCAAgB;AAE1C,QAAM,cAAc,8BAClB,CAAC,QAAkE,MAAwB;AACzF,QAAI,OAAO,SAAS,4CAA2B,aAAa,YAAY,UAAU;AAChF,UAAI,YAAY;AACd,iBAAS;AACT,sBAAc;AACd,iBAAS;AAAA;AAAA,eAEF,OAAO,SAAS,mCAAkB,QAAQ;AACnD,UAAI,CAAC,OAAO,UAAU;AACpB,YAAI;AAAU,mBAAS;AACvB,sBAAc;AACd,YAAI,CAAC,UAAU;AACb,yBAAe;AAAA;AAEjB,iBAAS,iDAA0B,QAAQ,iBAAiB,QAAQ;AAAA;AAAA;AAIxE,MAAE;AACF,MAAE;AAAA,KAEJ,CAAC,UAAU,gBAAgB,UAAU,gBAAgB,UAAU;AAIjE,QAAM,oBAAoB,8BAAY,CAAC,MAAuC;AAC5E,MAAE;AAAA,KACD;AAEH,SAAO,0BAAQ,MAAM;AACnB,QAAI,CAAC,oBAAoB;AACvB,aAAO;AAAA;AAET,WAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,YAAM,SAAS,QAAQ,MAAM;AAC7B,YAAM,eAAe;AAAA,QACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO;AAAA,QACzE,KAAK,GAAG,OAAO;AAAA,QACf,UAAU,MAAM;AAAA;AAElB,UAAI,OAAO,SAAS,mCAAkB,SAAS;AAC7C,eAAO,mDAAC,0BAAD;AAAA,UAAS,OAAO,OAAO;AAAA,WAAW;AAAA;AAE3C,UAAI,OAAO,SAAS,mCAAkB,WAAW;AAC/C,eAAO,mDAAC,4BAAD,mBAAe;AAAA;AAExB,UAAI,OAAO,SAAS,mCAAkB,QAAQ;AAC5C,eACE,mDAAC,QAAD,iCACM,eADN;AAAA,UAEE,OAAO,OAAO;AAAA,UACd,OAAO,OAAO;AAAA,UACd,YAAY,8CAAmB;AAAA,UAC/B,UAAU,OAAO;AAAA,UACjB,SAAS,CAAC,MAAa,YAAY,QAAQ;AAAA,UAC3C,aAAa;AAAA,UACb,UAAU,OAAO,SAAS;AAAA,UAC1B,YAAY,kCAAW,gBAAgB;AAAA,UACvC,UAAU;AAAA;AAAA;AAIhB,UAAI,OAAO,SAAS,4CAA2B,WAAW;AACxD,eACE,mDAAC,iCAAD;AAAA,UACE,YAAY,8CAAmB;AAAA,UAC/B,UAAU,OAAO,SAAS;AAAA,WACtB,eAHN;AAAA,UAIE,QAAQ,CAAC,EAAE,YACT,mDAAC,qBAAD;AAAA,YAAM,MAAM,CAAC,eAAe;AAAA,YAAS,QAAO;AAAA,YAAO,QAAO;AAAA,YAAM,YAAW;AAAA,aACzE,mDAAC,oCAAD,MAAsB,SACtB,mDAAC,QAAD,MAAO;AAAA,UAGX,OAAO,OAAO;AAAA,UACd,SAAS,CAAC,MAAwB,YAAY,QAAQ;AAAA;AAAA;AAI5D,aAAO;AAAA;AAAA,KAER,CAAC,SAAS,gBAAgB,gBAAgB,UAAU,oBAAoB;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-common';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledCreatableLabel } from './styled';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n  const {\n    props: { filteredOptions, onCreate, onChange, selectedValues, onFilter, allOptions },\n    setShowPopover,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    virtualListHelpers,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n  const handleClick = useCallback(\n    (option: DSComboboxT.ItemOption | DSComboboxT.ItemCreatableOption, e: React.MouseEvent) => {\n      if (option.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate && onFilter) {\n        if (inputValue) {\n          onCreate(inputValue);\n          setInputValue('');\n          onFilter(allOptions, inputValue);\n        }\n      } else if (option.type === MENU_OPTION_TYPES.OPTION) {\n        if (!option.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setShowPopover(false);\n          }\n          onChange(getSuggestedValueOnChange(option, selectedValues), option, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, onChange, setShowPopover, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(() => {\n    if (!virtualListHelpers) {\n      return null;\n    }\n    return virtualListHelpers.virtualItems.map((vItem) => {\n      const option = filteredOptions[vItem.index];\n      const generalProps = {\n        wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' },\n        key: `${option.dsId}`,\n        innerRef: vItem.measureRef,\n      };\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        return <Section label={option.label} {...generalProps} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={option.disabled}\n            onClick={(e: React.MouseEvent) => handleClick(option, e)}\n            onMouseDown={handleOnMouseDown}\n            isActive={option.dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n          />\n        );\n      }\n      if (option.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <SingleMenuItem\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={option.dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label }: { label: string }) => (\n              <Grid cols={['min-content', 'auto']} height=\"16px\" gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <span>{`\"${label}\"`}</span>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={(e: React.MouseEvent) => handleClick(option, e)}\n          />\n        );\n      }\n      return <></>;\n    });\n  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAwD;AACxD,qBAAqB;AACrB,uBAAkE;AAClE,yBAAgC;AAChC,oBAAqC;AACrC,wBAAsD;AACtD,iCAAmC;AAEnC,uBAA8D;AACvD,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,UAAU,UAAU,gBAAgB,UAAU;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,WAAW,MAAM,QAAQ;AAC/B,QAAM,SAAS,WAAW,iCAAgB;AAE1C,QAAM,cAAc,8BAClB,CAAC,QAAkE,MAAwB;AACzF,QAAI,OAAO,SAAS,4CAA2B,aAAa,YAAY,UAAU;AAChF,UAAI,YAAY;AACd,iBAAS;AACT,sBAAc;AACd,iBAAS,YAAY;AAAA;AAAA,eAEd,OAAO,SAAS,mCAAkB,QAAQ;AACnD,UAAI,CAAC,OAAO,UAAU;AACpB,YAAI;AAAU,mBAAS,YAAY;AACnC,sBAAc;AACd,YAAI,CAAC,UAAU;AACb,yBAAe;AAAA;AAEjB,iBAAS,iDAA0B,QAAQ,iBAAiB,QAAQ;AAAA;AAAA;AAIxE,MAAE;AACF,MAAE;AAAA,KAEJ,CAAC,UAAU,gBAAgB,UAAU,gBAAgB;AAIvD,QAAM,oBAAoB,8BAAY,CAAC,MAAuC;AAC5E,MAAE;AAAA,KACD;AAEH,SAAO,0BAAQ,MAAM;AACnB,QAAI,CAAC,oBAAoB;AACvB,aAAO;AAAA;AAET,WAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,YAAM,SAAS,gBAAgB,MAAM;AACrC,YAAM,eAAe;AAAA,QACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO;AAAA,QACzE,KAAK,GAAG,OAAO;AAAA,QACf,UAAU,MAAM;AAAA;AAElB,UAAI,OAAO,SAAS,mCAAkB,SAAS;AAC7C,eAAO,mDAAC,0BAAD;AAAA,UAAS,OAAO,OAAO;AAAA,WAAW;AAAA;AAE3C,UAAI,OAAO,SAAS,mCAAkB,WAAW;AAC/C,eAAO,mDAAC,4BAAD,mBAAe;AAAA;AAExB,UAAI,OAAO,SAAS,mCAAkB,QAAQ;AAC5C,eACE,mDAAC,QAAD,iCACM,eADN;AAAA,UAEE,OAAO,OAAO;AAAA,UACd,OAAO,OAAO;AAAA,UACd,YAAY,8CAAmB;AAAA,UAC/B,UAAU,OAAO;AAAA,UACjB,SAAS,CAAC,MAAwB,YAAY,QAAQ;AAAA,UACtD,aAAa;AAAA,UACb,UAAU,OAAO,SAAS;AAAA,UAC1B,YAAY,kCAAW,gBAAgB;AAAA,UACvC,UAAU;AAAA;AAAA;AAIhB,UAAI,OAAO,SAAS,4CAA2B,WAAW;AACxD,eACE,mDAAC,iCAAD;AAAA,UACE,YAAY,8CAAmB;AAAA,UAC/B,UAAU,OAAO,SAAS;AAAA,WACtB,eAHN;AAAA,UAIE,QAAQ,CAAC,EAAE,YACT,mDAAC,qBAAD;AAAA,YAAM,MAAM,CAAC,eAAe;AAAA,YAAS,QAAO;AAAA,YAAO,QAAO;AAAA,YAAM,YAAW;AAAA,aACzE,mDAAC,oCAAD,MAAsB,SACtB,mDAAC,QAAD,MAAO,IAAI;AAAA,UAGf,OAAO,OAAO;AAAA,UACd,SAAS,CAAC,MAAwB,YAAY,QAAQ;AAAA;AAAA;AAI5D,aAAO;AAAA;AAAA,KAER,CAAC,iBAAiB,gBAAgB,gBAAgB;AAAA;",
   "names": []
 }