npm - @elliemae/ds-controlled-form - Versions diffs - 3.0.0-next.13 → 3.0.0-next.17 - Mend

@elliemae/ds-controlled-form 3.0.0-next.13 → 3.0.0-next.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (203) hide show

package/dist/esm/combobox/parts/controls-input/useKeyboardNavigation.js CHANGED Viewed

@@ -12,6 +12,7 @@ const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type)
 const useKeyboardNavigation = () => {
   const {
     props: {
+      allOptions,
       onCancel,
       onKeyDown,
       onChange,
@@ -19,7 +20,7 @@ const useKeyboardNavigation = () => {
       onFilter,
       onSelectAll,
       inline,
-      options,
+      filteredOptions,
       selectedValues,
       withoutPortal
     },
@@ -34,9 +35,9 @@ const useKeyboardNavigation = () => {
     setFocusOptionIdx
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
-  const selectableOptions = getOptions(options);
-  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);
-  const currentItem = options.find((item) => item.dsId === focusOptionIdx);
+  const selectableOptions = getOptions(filteredOptions);
+  const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);
+  const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);
   const onInputKeyDown = useCallback((e) => {
     if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION)
       onKeyDown(e, currentItem);
@@ -48,7 +49,7 @@ const useKeyboardNavigation = () => {
         onCancel();
       if (inputValue) {
         if (onFilter)
-          onFilter("");
+          onFilter(allOptions, inputValue);
         setInputValue("");
       }
       if (!inline)
@@ -56,39 +57,38 @@ const useKeyboardNavigation = () => {
     }
     if (e.key === "Enter" && currentItem?.type === 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 === MENU_OPTION_TYPES.OPTION) {
-        if (currentItem?.type === "option" && !currentItem.disabled) {
-          if (onFilter)
-            onFilter("");
-          setInputValue("");
-          if (!multiple) {
-            setShowPopover(false);
-          }
-          onChange(getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);
+      if (focusOptionIdx !== "" && (showPopover || inline) && currentItem?.type === MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
+        if (onFilter)
+          onFilter(allOptions, "");
+        setInputValue("");
+        if (!multiple) {
+          setShowPopover(false);
         }
+        onChange(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 = findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setFocusOptionIdx(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
+        const nextItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
+        setFocusOptionIdx(filteredOptions[nextItemIndex].dsId);
+        scrollOptionIntoView(filteredOptions[nextItemIndex].dsId);
       }
     }
     if (e.key === "ArrowUp") {
@@ -96,26 +96,26 @@ const useKeyboardNavigation = () => {
       e.stopPropagation();
       if (!selectableOptions.length)
         return;
-      const prevItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+      const prevItemIndex = 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 = findInCircularList(options, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(options[prevItem].dsId);
-          scrollOptionIntoView(options[prevItem].dsId);
+          const prevItem = 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 = getLastValueSelected(selectedValues);
-      if (!inputValue && lastValue) {
+      if (!e.currentTarget.value && lastValue) {
         onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
       if (onFilter)
-        onFilter("");
+        onFilter(allOptions, inputValue);
     }
     if (e.key === "Tab" && !inline && !withoutPortal) {
       const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;
@@ -124,6 +124,9 @@ const useKeyboardNavigation = () => {
         element.focus();
       }
     }
+    if (e.key === "Tab" && !multiple && showPopover) {
+      setShowPopover(false);
+    }
   }, [
     onKeyDown,
     currentItem,
@@ -139,7 +142,7 @@ const useKeyboardNavigation = () => {
     focusOptionIdx,
     showPopover,
     selectableOptions.length,
-    options,
+    filteredOptions,
     currentItemIndex,
     setFocusOptionIdx,
     selectedValues,

package/dist/esm/combobox/parts/controls-input/useKeyboardNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/combobox/parts/controls-input/useKeyboardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/combobox/parts/controls-input/useMaskedOnChange.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { useContext, useCallback } from "react";
 import ComboBoxContext from "../../ComboBoxCTX";
+import { filterOptions } from "../../utils/listHelper";
 const useMaskedOnChange = () => {
   const {
-    props: { useMask, onFilter },
+    props: { useMask, onFilter, allOptions },
     setShowPopover,
     setInputValue,
     setShowSelectedOptions
@@ -12,16 +13,18 @@ const useMaskedOnChange = () => {
     setShowSelectedOptions(false);
     setShowPopover(true);
     if (onFilter) {
-      onFilter(e.currentTarget.value);
+      onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);
       setInputValue(e.currentTarget.value);
     }
-  }, [onFilter, setInputValue, setShowPopover, setShowSelectedOptions]);
+  }, [allOptions, onFilter, setInputValue, setShowPopover, setShowSelectedOptions]);
   const handleOnChangeMask = useCallback((_, mask) => {
     setShowSelectedOptions(false);
     setShowPopover(true);
     if (mask && onFilter)
-      onFilter(mask);
-  }, [onFilter, setShowPopover, setShowSelectedOptions]);
+      onFilter(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/esm/combobox/parts/controls-input/useMaskedOnChange.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/combobox/parts/controls-input/useMaskedOnChange.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAGf,QAAM,iBAAiB,YACrB,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,YACzB,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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAGf,QAAM,iBAAiB,YACrB,CAAC,MAA2C;AAC1C,2BAAuB;AACvB,mBAAe;AACf,QAAI,UAAU;AACZ,eAAS,cAAc,EAAE,cAAc,OAAO,aAAa,EAAE,cAAc;AAC3E,oBAAc,EAAE,cAAc;AAAA;AAAA,KAGlC,CAAC,YAAY,UAAU,eAAe,gBAAgB;AAIxD,QAAM,qBAAqB,YACzB,CAAC,GAAG,SAAkB;AACpB,2BAAuB;AACvB,mBAAe;AACf,QAAI,QAAQ;AAAU,eAAS,cAAc,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/esm/combobox/parts/header-list/useHeaderListHandlers.js CHANGED Viewed

@@ -4,13 +4,13 @@ import { getSelectableOptions } from "../../utils/listHelper";
 import ComboBoxContext from "../../ComboBoxCTX";
 const useHeaderListHandlers = () => {
   const {
-    props: { selectedValues, options, onSelectAll, innerRef },
+    props: { selectedValues, filteredOptions, onSelectAll, innerRef },
     showSelectedOptions,
     setShowSelectedOptions,
     setShowPopover
   } = useContext(ComboBoxContext);
   const multiSelectedValues = selectedValues;
-  const selectableOptions = getSelectableOptions(options);
+  const selectableOptions = getSelectableOptions(filteredOptions);
   const getCheckboxStatus = useMemo(() => {
     if (multiSelectedValues.length === selectableOptions.length) {
       return true;
@@ -29,13 +29,13 @@ const useHeaderListHandlers = () => {
   }, []);
   const handleSelectAllCheckboxChange = 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 = useCallback((e) => {
     e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);

package/dist/esm/combobox/parts/header-list/useHeaderListHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/combobox/parts/header-list/useHeaderListHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA;ACAA;AAEA;AACA;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS,aAAa;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAEf,QAAM,sBAAsB;AAC5B,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,oBAAoB,QAAQ,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,SAA4B;AAExE,YAAU,MAAM;AACd,sBAAkB;AAAA,KACjB,CAAC,mBAAmB;AAEvB,QAAM,oBAAoB,YAAY,CAAC,MAAwB;AAC7D,MAAE;AAAA,KAED;AAEH,QAAM,gCAAgC,YACpC,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,YAChE,CAAC,MAAM;AACL,MAAE;AACF,2BAAuB,CAAC;AAAA,KAE1B,CAAC,wBAAwB;AAI3B,QAAM,gBAAgB,YACpB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,UAAU;AACtB,qBAAe;AAAA;AAAA,KAGnB,CAAC;AAIH,QAAM,gCAAgC,YACpC,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,QAAE;AACF,eAAS,SAAS;AAAA;AAAA,KAGtB,CAAC;AAGH,QAAM,sBAAsB,YAC1B,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,QAAE;AACF,eAAS,SAAS;AAAA;AAAA,KAGtB,CAAC,UAAU;AAGb,YAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB;AAAA;AAAA,KAExB,CAAC,qBAAqB;AAEzB,SAAO,QACL,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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AAEA;AACA;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,aAAa;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAEf,QAAM,sBAAsB;AAC5B,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,oBAAoB,QAAQ,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,SAA4B;AAExE,YAAU,MAAM;AACd,sBAAkB;AAAA,KACjB,CAAC,mBAAmB;AAEvB,QAAM,oBAAoB,YAAY,CAAC,MAAwB;AAC7D,MAAE;AAAA,KAED;AAEH,QAAM,gCAAgC,YACpC,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,YAChE,CAAC,MAAM;AACL,MAAE;AACF,2BAAuB,CAAC;AAAA,KAE1B,CAAC,wBAAwB;AAI3B,QAAM,gBAAgB,YACpB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,UAAU;AACtB,qBAAe;AAAA;AAAA,KAGnB,CAAC;AAIH,QAAM,gCAAgC,YACpC,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,QAAE;AACF,eAAS,SAAS;AAAA;AAAA,KAGtB,CAAC;AAGH,QAAM,sBAAsB,YAC1B,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,QAAE;AACF,eAAS,SAAS;AAAA;AAAA,KAGtB,CAAC,UAAU;AAGb,YAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB;AAAA;AAAA,KAExB,CAAC,qBAAqB;AAEzB,SAAO,QACL,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/esm/combobox/parts/menu-list/MenuList.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from "react";
 import React2, { useContext, useMemo, useCallback } from "react";
+import { useOnElementResize } from "@elliemae/ds-utilities";
 import { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from "./styled";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids";
 import { ComboBoxContext } from "../../ComboBoxCTX";
@@ -7,16 +8,17 @@ import { HeaderList } from "../header-list";
 import { useItemRenderer } from "./useItemRenderer";
 const MenuList = () => {
   const {
-    props: { menuMinWidth, menuMaxHeight, onCreate, inline, options, selectedValues },
-    referenceElement,
+    props: { menuMinWidth, menuMaxHeight, onCreate, inline, filteredOptions, selectedValues },
+    controlsWrapperRef,
     listRef,
     inputValue,
     wrapperListRef,
     virtualListHelpers
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
-  const withHeader = !inline && multiple && options.length > 0 && inputValue === "";
+  const withHeader = !inline && multiple && filteredOptions.length > 0 && !inputValue;
   const ItemRenderer = useItemRenderer();
+  const { width } = useOnElementResize(controlsWrapperRef);
   const preventLoseInputFocus = useCallback((e) => {
     e.preventDefault();
   }, []);
@@ -24,8 +26,9 @@ const MenuList = () => {
     ref: wrapperListRef,
     inline,
     onMouseDown: preventLoseInputFocus,
-    minWidth: menuMinWidth || `${referenceElement?.offsetWidth || "100%"}`
-  }, withHeader && /* @__PURE__ */ React2.createElement(HeaderList, null), options.length > 0 || onCreate ? /* @__PURE__ */ React2.createElement(StyledVirtualListWrapper, {
+    width,
+    minWidth: menuMinWidth
+  }, withHeader && /* @__PURE__ */ React2.createElement(HeaderList, null), filteredOptions.length > 0 || onCreate ? /* @__PURE__ */ React2.createElement(StyledVirtualListWrapper, {
     inline,
     maxHeight: menuMaxHeight,
     ref: listRef,
@@ -40,16 +43,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
   ]);
 };
 export {

package/dist/esm/combobox/parts/menu-list/MenuList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/combobox/parts/menu-list/MenuList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA;ACAA;AAEA;AACA;AACA;AACA;AACA;AAEO,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,WAAW;AAEf,QAAM,WAAW,MAAM,QAAQ;AAC/B,QAAM,aAAa,CAAC,UAAU,YAAY,QAAQ,SAAS,KAAK,eAAe;AAC/E,QAAM,eAAe;AAErB,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE;AAAA,KACD;AAEH,SAAO,QACL,MACE,qCAAC,mBAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,aAAa;AAAA,IACb,UAAU,gBAAgB,GAAG,kBAAkB,eAAe;AAAA,KAE7D,cAAc,qCAAC,YAAD,OACd,QAAQ,SAAS,KAAK,WACrB,qCAAC,0BAAD;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,KAEA,qCAAC,YAAD;AAAA,IACE,IAAG;AAAA,IACH,MAAK;AAAA,IACL,eAAa,mBAAmB;AAAA,IAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ;AAAA,KAExE,iBAIL,qCAAC,wBAAD;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,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,WAAW;AAEf,QAAM,WAAW,MAAM,QAAQ;AAE/B,QAAM,aAAa,CAAC,UAAU,YAAY,gBAAgB,SAAS,KAAK,CAAC;AACzE,QAAM,eAAe;AACrB,QAAM,EAAE,UAAU,mBAAmB;AACrC,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE;AAAA,KACD;AAEH,SAAO,QACL,MACE,qCAAC,mBAAD;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,UAAU;AAAA,KAET,cAAc,qCAAC,YAAD,OACd,gBAAgB,SAAS,KAAK,WAC7B,qCAAC,0BAAD;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,KAEA,qCAAC,YAAD;AAAA,IACE,IAAG;AAAA,IACH,MAAK;AAAA,IACL,eAAa,mBAAmB;AAAA,IAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ;AAAA,KAExE,iBAIL,qCAAC,wBAAD;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/esm/combobox/parts/menu-list/styled.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 const StyledListWrapper = 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 = styled.ul`

package/dist/esm/combobox/parts/menu-list/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/combobox/parts/menu-list/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,oBAAoB,OAAO;AAAA,eACzB,CAAC,UAAW,MAAM,SAAS,SAAS,GAAG,MAAM;AAAA;AAAA;AAIrD,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,OAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,iBAAkB,aAAa,SAAS;AAAA;AAAA,gBAE3C,CAAC,EAAE,gBAAiB,CAAC,YAAY,UAAU,GAAG;AAAA;AAGvD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,yBAAyB,OAAO;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AAOO,MAAM,oBAAoB,OAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,eAAgB,SAAS,SAAS,GAAG;AAAA,WACpD,CAAC,EAAE,YAAY,GAAG;AAAA;AAAA;AAItB,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,2BAA2B,OAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,iBAAkB,aAAa,SAAS;AAAA;AAAA,gBAE3C,CAAC,EAAE,gBAAiB,CAAC,YAAY,UAAU,GAAG;AAAA;AAGvD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,yBAAyB,OAAO;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/combobox/parts/menu-list/useItemRenderer.js CHANGED Viewed

@@ -28,7 +28,7 @@ import { ComboboxDataTestid } from "../../ComboboxDataTestids";
 import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from "../../constants";
 const useItemRenderer = () => {
   const {
-    props: { options, onCreate, onChange, selectedValues, onFilter, innerRef },
+    props: { filteredOptions, onCreate, onChange, selectedValues, onFilter, allOptions },
     setShowPopover,
     inputValue,
     focusOptionIdx,
@@ -42,12 +42,12 @@ const useItemRenderer = () => {
       if (inputValue) {
         onCreate(inputValue);
         setInputValue("");
-        onFilter("");
+        onFilter(allOptions, inputValue);
       }
     } else if (option.type === MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
         if (onFilter)
-          onFilter("");
+          onFilter(allOptions, inputValue);
         setInputValue("");
         if (!multiple) {
           setShowPopover(false);
@@ -57,7 +57,7 @@ const useItemRenderer = () => {
     }
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, selectedValues, onChange, setShowPopover, multiple, innerRef]);
+  }, [onFilter, selectedValues, onChange, setShowPopover, multiple]);
   const handleOnMouseDown = useCallback((e) => {
     e.preventDefault();
   }, []);
@@ -66,7 +66,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}`,
@@ -103,14 +103,14 @@ const useItemRenderer = () => {
             height: "16px",
             gutter: "xxs",
             alignItems: "center"
-          }, /* @__PURE__ */ React2.createElement(StyledCreatableLabel, null, "Add:"), /* @__PURE__ */ React2.createElement("span", null, label)),
+          }, /* @__PURE__ */ React2.createElement(StyledCreatableLabel, null, "Add:"), /* @__PURE__ */ React2.createElement("span", null, `"${label}"`)),
           label: option.label,
           onClick: (e) => handleClick(option, e)
         }));
       }
       return /* @__PURE__ */ React2.createElement(React2.Fragment, null);
     });
-  }, [options, focusOptionIdx, selectedValues, innerRef, virtualListHelpers?.virtualItems]);
+  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);
 };
 export {
   useItemRenderer

package/dist/esm/combobox/parts/menu-list/useItemRenderer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/combobox/parts/menu-list/useItemRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACO,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,WAAW;AAEf,QAAM,WAAW,MAAM,QAAQ;AAC/B,QAAM,SAAS,WAAW,gBAAgB;AAE1C,QAAM,cAAc,YAClB,CAAC,QAAkE,MAAwB;AACzF,QAAI,OAAO,SAAS,2BAA2B,aAAa,YAAY,UAAU;AAChF,UAAI,YAAY;AACd,iBAAS;AACT,sBAAc;AACd,iBAAS;AAAA;AAAA,eAEF,OAAO,SAAS,kBAAkB,QAAQ;AACnD,UAAI,CAAC,OAAO,UAAU;AACpB,YAAI;AAAU,mBAAS;AACvB,sBAAc;AACd,YAAI,CAAC,UAAU;AACb,yBAAe;AAAA;AAEjB,iBAAS,0BAA0B,QAAQ,iBAAiB,QAAQ;AAAA;AAAA;AAIxE,MAAE;AACF,MAAE;AAAA,KAEJ,CAAC,UAAU,gBAAgB,UAAU,gBAAgB,UAAU;AAIjE,QAAM,oBAAoB,YAAY,CAAC,MAAuC;AAC5E,MAAE;AAAA,KACD;AAEH,SAAO,QAAQ,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,kBAAkB,SAAS;AAC7C,eAAO,qCAAC,SAAD;AAAA,UAAS,OAAO,OAAO;AAAA,WAAW;AAAA;AAE3C,UAAI,OAAO,SAAS,kBAAkB,WAAW;AAC/C,eAAO,qCAAC,WAAD,mBAAe;AAAA;AAExB,UAAI,OAAO,SAAS,kBAAkB,QAAQ;AAC5C,eACE,qCAAC,QAAD,iCACM,eADN;AAAA,UAEE,OAAO,OAAO;AAAA,UACd,OAAO,OAAO;AAAA,UACd,YAAY,mBAAmB;AAAA,UAC/B,UAAU,OAAO;AAAA,UACjB,SAAS,CAAC,MAAa,YAAY,QAAQ;AAAA,UAC3C,aAAa;AAAA,UACb,UAAU,OAAO,SAAS;AAAA,UAC1B,YAAY,WAAW,gBAAgB;AAAA,UACvC,UAAU;AAAA;AAAA;AAIhB,UAAI,OAAO,SAAS,2BAA2B,WAAW;AACxD,eACE,qCAAC,gBAAD;AAAA,UACE,YAAY,mBAAmB;AAAA,UAC/B,UAAU,OAAO,SAAS;AAAA,WACtB,eAHN;AAAA,UAIE,QAAQ,CAAC,EAAE,YACT,qCAAC,MAAD;AAAA,YAAM,MAAM,CAAC,eAAe;AAAA,YAAS,QAAO;AAAA,YAAO,QAAO;AAAA,YAAM,YAAW;AAAA,aACzE,qCAAC,sBAAD,MAAsB,SACtB,qCAAC,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": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACO,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,WAAW;AAEf,QAAM,WAAW,MAAM,QAAQ;AAC/B,QAAM,SAAS,WAAW,gBAAgB;AAE1C,QAAM,cAAc,YAClB,CAAC,QAAkE,MAAwB;AACzF,QAAI,OAAO,SAAS,2BAA2B,aAAa,YAAY,UAAU;AAChF,UAAI,YAAY;AACd,iBAAS;AACT,sBAAc;AACd,iBAAS,YAAY;AAAA;AAAA,eAEd,OAAO,SAAS,kBAAkB,QAAQ;AACnD,UAAI,CAAC,OAAO,UAAU;AACpB,YAAI;AAAU,mBAAS,YAAY;AACnC,sBAAc;AACd,YAAI,CAAC,UAAU;AACb,yBAAe;AAAA;AAEjB,iBAAS,0BAA0B,QAAQ,iBAAiB,QAAQ;AAAA;AAAA;AAIxE,MAAE;AACF,MAAE;AAAA,KAEJ,CAAC,UAAU,gBAAgB,UAAU,gBAAgB;AAIvD,QAAM,oBAAoB,YAAY,CAAC,MAAuC;AAC5E,MAAE;AAAA,KACD;AAEH,SAAO,QAAQ,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,kBAAkB,SAAS;AAC7C,eAAO,qCAAC,SAAD;AAAA,UAAS,OAAO,OAAO;AAAA,WAAW;AAAA;AAE3C,UAAI,OAAO,SAAS,kBAAkB,WAAW;AAC/C,eAAO,qCAAC,WAAD,mBAAe;AAAA;AAExB,UAAI,OAAO,SAAS,kBAAkB,QAAQ;AAC5C,eACE,qCAAC,QAAD,iCACM,eADN;AAAA,UAEE,OAAO,OAAO;AAAA,UACd,OAAO,OAAO;AAAA,UACd,YAAY,mBAAmB;AAAA,UAC/B,UAAU,OAAO;AAAA,UACjB,SAAS,CAAC,MAAwB,YAAY,QAAQ;AAAA,UACtD,aAAa;AAAA,UACb,UAAU,OAAO,SAAS;AAAA,UAC1B,YAAY,WAAW,gBAAgB;AAAA,UACvC,UAAU;AAAA;AAAA;AAIhB,UAAI,OAAO,SAAS,2BAA2B,WAAW;AACxD,eACE,qCAAC,gBAAD;AAAA,UACE,YAAY,mBAAmB;AAAA,UAC/B,UAAU,OAAO,SAAS;AAAA,WACtB,eAHN;AAAA,UAIE,QAAQ,CAAC,EAAE,YACT,qCAAC,MAAD;AAAA,YAAM,MAAM,CAAC,eAAe;AAAA,YAAS,QAAO;AAAA,YAAO,QAAO;AAAA,YAAM,YAAW;AAAA,aACzE,qCAAC,sBAAD,MAAsB,SACtB,qCAAC,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": []
 }

package/dist/esm/combobox/parts/menu-list/useMenuListSetFocusOption.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { useEffect, useCallback, useContext } from "react";
 import ComboBoxContext from "../../ComboBoxCTX";
 const useMenuListSetFocusOption = () => {
   const {
-    props: { selectedValues, options },
+    props: { selectedValues, filteredOptions },
     setFocusOptionIdx,
     hasFocus,
     focusOptionIdx,
@@ -11,17 +11,17 @@ const useMenuListSetFocusOption = () => {
     scrollOptionIntoView
   } = useContext(ComboBoxContext);
   const getFirstOption = useCallback(() => {
-    for (let i = 0; i < options.length; i += 1)
-      if (!["section", "separator"].includes(options[i].type) && !options[i].disabled) {
-        setFocusOptionIdx(options[i].dsId);
+    for (let i = 0; i < filteredOptions.length; i += 1)
+      if (!["section", "separator"].includes(filteredOptions[i].type) && !filteredOptions[i].disabled) {
+        setFocusOptionIdx(filteredOptions[i].dsId);
         break;
       }
-  }, [options, setFocusOptionIdx]);
+  }, [filteredOptions, setFocusOptionIdx]);
   useEffect(() => {
     scrollOptionIntoView(focusOptionIdx);
   }, [focusOptionIdx]);
   useEffect(() => {
-    if (options.length === 0) {
+    if (filteredOptions.length === 0) {
       setFocusOptionIdx("");
     }
     if (hasFocus && inputValue === "") {
@@ -37,7 +37,7 @@ const useMenuListSetFocusOption = () => {
     }
     if (hasFocus)
       getFirstOption();
-  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, options.length]);
+  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, filteredOptions.length]);
 };
 export {
   useMenuListSetFocusOption

package/dist/esm/combobox/parts/menu-list/useMenuListSetFocusOption.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/combobox/parts/menu-list/useMenuListSetFocusOption.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useEffect, useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useMenuListSetFocusOption = (): void => {\n  const {\n    props: { selectedValues, options },\n    setFocusOptionIdx,\n    hasFocus,\n    focusOptionIdx,\n    inputValue,\n    scrollOptionIntoView,\n  } = useContext(ComboBoxContext);\n\n  const getFirstOption = useCallback(() => {\n    for (let i = 0; i < options.length; i += 1)\n      if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n        setFocusOptionIdx(options[i].dsId);\n        break;\n      }\n  }, [options, setFocusOptionIdx]);\n\n  useEffect(() => {\n    scrollOptionIntoView(focusOptionIdx);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusOptionIdx]);\n\n  useEffect(() => {\n    if (options.length === 0) {\n      setFocusOptionIdx('');\n    }\n    if (hasFocus && inputValue === '') {\n      if (Array.isArray(selectedValues)) {\n        if (selectedValues && selectedValues.length > 0) {\n          setFocusOptionIdx(selectedValues[selectedValues.length - 1].dsId);\n          return;\n        }\n      } else if (selectedValues) {\n        setFocusOptionIdx(selectedValues.dsId);\n        return;\n      }\n    }\n    if (hasFocus) getFirstOption();\n  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, options.length]);\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AAEO,MAAM,4BAA4B,MAAY;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAEf,QAAM,iBAAiB,YAAY,MAAM;AACvC,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,UAAI,CAAC,CAAC,WAAW,aAAa,SAAS,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,UAAU;AAC/E,0BAAkB,QAAQ,GAAG;AAC7B;AAAA;AAAA,KAEH,CAAC,SAAS;AAEb,YAAU,MAAM;AACd,yBAAqB;AAAA,KAEpB,CAAC;AAEJ,YAAU,MAAM;AACd,QAAI,QAAQ,WAAW,GAAG;AACxB,wBAAkB;AAAA;AAEpB,QAAI,YAAY,eAAe,IAAI;AACjC,UAAI,MAAM,QAAQ,iBAAiB;AACjC,YAAI,kBAAkB,eAAe,SAAS,GAAG;AAC/C,4BAAkB,eAAe,eAAe,SAAS,GAAG;AAC5D;AAAA;AAAA,iBAEO,gBAAgB;AACzB,0BAAkB,eAAe;AACjC;AAAA;AAAA;AAGJ,QAAI;AAAU;AAAA,KACb,CAAC,gBAAgB,YAAY,gBAAgB,UAAU,mBAAmB,QAAQ;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useEffect, useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useMenuListSetFocusOption = (): void => {\n  const {\n    props: { selectedValues, filteredOptions },\n    setFocusOptionIdx,\n    hasFocus,\n    focusOptionIdx,\n    inputValue,\n    scrollOptionIntoView,\n  } = useContext(ComboBoxContext);\n\n  const getFirstOption = useCallback(() => {\n    for (let i = 0; i < filteredOptions.length; i += 1)\n      if (!['section', 'separator'].includes(filteredOptions[i].type) && !filteredOptions[i].disabled) {\n        setFocusOptionIdx(filteredOptions[i].dsId);\n        break;\n      }\n  }, [filteredOptions, setFocusOptionIdx]);\n\n  useEffect(() => {\n    scrollOptionIntoView(focusOptionIdx);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusOptionIdx]);\n\n  useEffect(() => {\n    if (filteredOptions.length === 0) {\n      setFocusOptionIdx('');\n    }\n    if (hasFocus && inputValue === '') {\n      if (Array.isArray(selectedValues)) {\n        if (selectedValues && selectedValues.length > 0) {\n          setFocusOptionIdx(selectedValues[selectedValues.length - 1].dsId);\n          return;\n        }\n      } else if (selectedValues) {\n        setFocusOptionIdx(selectedValues.dsId);\n        return;\n      }\n    }\n    if (hasFocus) getFirstOption();\n  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, filteredOptions.length]);\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AAEO,MAAM,4BAA4B,MAAY;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAEf,QAAM,iBAAiB,YAAY,MAAM;AACvC,aAAS,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK;AAC/C,UAAI,CAAC,CAAC,WAAW,aAAa,SAAS,gBAAgB,GAAG,SAAS,CAAC,gBAAgB,GAAG,UAAU;AAC/F,0BAAkB,gBAAgB,GAAG;AACrC;AAAA;AAAA,KAEH,CAAC,iBAAiB;AAErB,YAAU,MAAM;AACd,yBAAqB;AAAA,KAEpB,CAAC;AAEJ,YAAU,MAAM;AACd,QAAI,gBAAgB,WAAW,GAAG;AAChC,wBAAkB;AAAA;AAEpB,QAAI,YAAY,eAAe,IAAI;AACjC,UAAI,MAAM,QAAQ,iBAAiB;AACjC,YAAI,kBAAkB,eAAe,SAAS,GAAG;AAC/C,4BAAkB,eAAe,eAAe,SAAS,GAAG;AAC5D;AAAA;AAAA,iBAEO,gBAAgB;AACzB,0BAAkB,eAAe;AACjC;AAAA;AAAA;AAGJ,QAAI;AAAU;AAAA,KACb,CAAC,gBAAgB,YAAY,gBAAgB,UAAU,mBAAmB,gBAAgB;AAAA;",
   "names": []
 }

package/dist/esm/combobox/react-desc-prop-types.js CHANGED Viewed

@@ -23,7 +23,8 @@ function noop(..._args) {
 }
 const ComboboxPropTypes = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
   placeholder: PropTypes.string.description("input's placeholder value").defaultValue(""),
-  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description("List of options").defaultValue([]),
+  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description("List of original options").defaultValue([]),
+  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description("List of filtered options to show in the menu based on the current internal input filter value").defaultValue([]),
   selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description("Array of option or single option selected"),
   disabled: PropTypes.bool.description("wheter or not the input is disabled").defaultValue("false"),
   autoFocus: PropTypes.bool.description("Whether the combo box uses auto focus or not").defaultValue("false"),