npm - @elliemae/ds-form-combobox - Versions diffs - 3.51.0-next.1 → 3.51.0-next.11 - Mend

@elliemae/ds-form-combobox 3.51.0-next.1 → 3.51.0-next.11

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 (116) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/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 type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n} from '../../utils/listHelper.js';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES, MENU_CONTROL_REASONS } from '../../constants.js';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean =>\n  !['section', 'separator'].includes(opt.type) && !opt.disabled;\n\nconst optionHasFirstLetter = (opt: DSComboboxT.OptionTypes, letter: string): boolean =>\n  opt.label !== undefined && opt.label.toLowerCase().startsWith(letter.toLowerCase());\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      allOptions,\n      isNonClearable,\n      onCancel,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      selectedValues,\n      withoutPortal,\n      onlySelectable,\n      applyAriaDisabled,\n    },\n    inputValue,\n    correctOptions: filteredOptions,\n    menuState,\n    focusOptionIdx,\n    listRef,\n    selectAllCheckboxRef,\n    toggleSelectionButtonRef,\n    setMenuState,\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      if (applyAriaDisabled) return;\n\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (\n        (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || /^[a-zA-Z0-9]$/.test(e.key)) &&\n        !menuState\n      ) {\n        setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\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) setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);\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, space and Tab on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.key === ' ' && e.altKey) || (e.key === 'Tab' && !multiple && !inline)) {\n        if (currentItem?.applyAriaDisabled) return;\n\n        if (e.key !== 'Tab') e.preventDefault();\n        e.stopPropagation();\n\n        if (\n          focusOptionIdx !== '' &&\n          (menuState || inline) &&\n          currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n          !currentItem.disabled\n        ) {\n          if (onFilter) onFilter(allOptions, '');\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);\n          }\n          onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), currentItem, e);\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setMenuState(false, 'selectOption', e);\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 ((menuState || inline) && selectableOptions.length) {\n          const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n          if (nextItemIndexIndex > -1) {\n            setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n            scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n          }\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        if (prevItemIndex > -1) {\n          if (menuState || inline) {\n            setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n            scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n          } else {\n            // open menu and search last item to focused\n            setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n            const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);\n            setTimeout(() => {\n              scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);\n            });\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 && !isNonClearable && !lastValue.applyAriaDisabled) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n        }\n      }\n\n      if (e.key === 'Tab' && !inline && menuState) {\n        const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;\n        if (element) {\n          e.preventDefault();\n          element.focus();\n        } else {\n          setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);\n        }\n      }\n\n      // =============================================================================\n      // ONLYSELECTABLE LETTER/NUMBER KEYS TO FOCUS OPTIONS\n      // =============================================================================\n\n      if (onlySelectable && /^[a-zA-Z\\d]$/.test(e.key)) {\n        if (!menuState) {\n          setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n        }\n\n        const isOptionFocusableByLetter = (opt: DSComboboxT.OptionTypes): boolean =>\n          isOptionFocuseable(opt) && optionHasFirstLetter(opt, e.key);\n\n        const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocusableByLetter);\n        const nextItem = filteredOptions[nextItemIndexIndex];\n        if (!nextItem) return;\n        setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n        scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\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      setMenuState,\n      onCancel,\n      onFilter,\n      setInputValue,\n      listRef,\n      focusOptionIdx,\n      menuState,\n      selectableOptions.length,\n      filteredOptions,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      isNonClearable,\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 type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n} from '../../utils/listHelper.js';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES, MENU_CONTROL_REASONS } from '../../constants.js';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nconst optionHasFirstLetter = (opt: DSComboboxT.OptionTypes, letter: string): boolean =>\n  opt.label !== undefined && opt.label.toLowerCase().startsWith(letter.toLowerCase());\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      allOptions,\n      isNonClearable,\n      onCancel,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      selectedValues,\n      withoutPortal,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n    },\n    inputValue,\n    correctOptions: filteredOptions,\n    menuState,\n    focusOptionIdx,\n    listRef,\n    setMenuState,\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      if (applyAriaDisabled || readOnly) return;\n\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (\n        (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || /^[a-zA-Z0-9]$/.test(e.key)) &&\n        !menuState\n      ) {\n        setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\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) setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);\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, space and Tab on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.key === ' ' && e.altKey) || (e.key === 'Tab' && !multiple && !inline)) {\n        if (readOnly || currentItem?.applyAriaDisabled) return;\n\n        if (e.key !== 'Tab') e.preventDefault();\n        e.stopPropagation();\n\n        if (\n          focusOptionIdx !== '' &&\n          (menuState || inline) &&\n          currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n          !currentItem.disabled\n        ) {\n          if (onFilter) onFilter(allOptions, '');\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);\n          }\n          onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), currentItem, e);\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setMenuState(false, 'selectOption', e);\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 ((menuState || inline) && (selectableOptions.length || onCreate)) {\n          const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n          if (nextItemIndexIndex > -1) {\n            setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n            scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n          }\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        if (!selectableOptions.length && !onCreate) return;\n        const prevItemIndex = findInCircularList(\n          filteredOptions,\n          currentItemIndex === -1 ? 0 : currentItemIndex,\n          isOptionFocuseable,\n          -1,\n        );\n        if (prevItemIndex > -1) {\n          if (menuState || inline) {\n            setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n            scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n          } else {\n            // open menu and search last item to focused\n            setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n            const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);\n            setTimeout(() => {\n              scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);\n            });\n          }\n        }\n      }\n\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {\n        if (readOnly) return;\n        const lastValue = getLastValueSelected(selectedValues);\n        if (!e.currentTarget.value && lastValue && !isNonClearable && !lastValue.applyAriaDisabled) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n        }\n      }\n\n      if (e.key === 'Tab' && !inline && menuState) {\n        setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);\n      }\n\n      // =============================================================================\n      // ONLYSELECTABLE LETTER/NUMBER KEYS TO FOCUS OPTIONS\n      // =============================================================================\n\n      if (onlySelectable && /^[a-zA-Z\\d]$/.test(e.key)) {\n        if (!menuState) {\n          setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n        }\n\n        const isOptionFocusableByLetter = (opt: DSComboboxT.OptionTypes): boolean =>\n          isOptionFocuseable(opt) && optionHasFirstLetter(opt, e.key);\n\n        const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocusableByLetter);\n        const nextItem = filteredOptions[nextItemIndexIndex];\n        if (!nextItem) return;\n        setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n        scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\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      setMenuState,\n      onCancel,\n      onFilter,\n      setInputValue,\n      listRef,\n      focusOptionIdx,\n      menuState,\n      selectableOptions.length,\n      filteredOptions,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      isNonClearable,\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/parts/controls-input/useMaskedOnChange.js CHANGED Viewed

@@ -40,28 +40,27 @@ const useMaskedOnChange = () => {
     props: { useMask, onFilter, allOptions, applyAriaDisabled },
     setMenuState,
     setInputValue,
-    setShowSelectedOptions
+    setFocusOptionIdx
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   const handleOnChange = (0, import_react.useCallback)(
     (e) => {
       if (applyAriaDisabled) return;
-      setShowSelectedOptions(false);
       setMenuState(true, "filter", e);
       if (onFilter) {
         onFilter((0, import_listHelper.filterOptions)(e.currentTarget.value, allOptions), e.currentTarget.value);
       }
+      setFocusOptionIdx("");
       setInputValue(e.currentTarget.value);
     },
-    [allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions, applyAriaDisabled]
+    [applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions]
   );
   const handleOnChangeMask = (0, import_react.useCallback)(
     (e, mask) => {
-      setShowSelectedOptions(false);
       setMenuState(true, "filter", e);
       if (mask && onFilter) onFilter((0, import_listHelper.filterOptions)(mask, allOptions), mask);
       else if (!mask && onFilter) onFilter(allOptions, "");
     },
-    [allOptions, onFilter, setMenuState, setShowSelectedOptions]
+    [allOptions, onFilter, setMenuState]
   );
   const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
   return onChangeMask?.onChange || handleOnChange;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/useMaskedOnChange.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\n\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, onFilter, allOptions, applyAriaDisabled },\n    setMenuState,\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      if (applyAriaDisabled) return;\n      setShowSelectedOptions(false);\n      setMenuState(true, 'filter', e);\n      if (onFilter) {\n        // when filtering is controlled we suggest the basic filtering but let the user decide\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n      }\n      setInputValue(e.currentTarget.value);\n    },\n    [allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions, applyAriaDisabled],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n      setShowSelectedOptions(false);\n      setMenuState(true, 'filter', e);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n    },\n    [allOptions, onFilter, setMenuState, 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;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,qBAAS,iCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,YAAY,UAAU,eAAe,cAAc,wBAAwB,iBAAiB;AAAA,EAC/F;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,cAAS,iCAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,YAAY,UAAU,cAAc,sBAAsB;AAAA,EAC7D;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
+  "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\n\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, onFilter, allOptions, applyAriaDisabled },\n    setMenuState,\n    setInputValue,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (applyAriaDisabled) return;\n      setMenuState(true, 'filter', e);\n      if (onFilter) {\n        // when filtering is controlled we suggest the basic filtering but let the user decide\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n      }\n      setFocusOptionIdx('');\n      setInputValue(e.currentTarget.value);\n    },\n    [applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n      setMenuState(true, 'filter', e);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n    },\n    [allOptions, onFilter, setMenuState],\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;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,qBAAS,iCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,wBAAkB,EAAE;AACpB,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,mBAAmB,cAAc,UAAU,mBAAmB,eAAe,UAAU;AAAA,EAC1F;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,cAAS,iCAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,YAAY,UAAU,YAAY;AAAA,EACrC;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
   "names": ["ComboBoxContext"]
 }

package/dist/cjs/parts/menu-list/MenuList.js CHANGED Viewed

@@ -37,24 +37,20 @@ var import_react = require("react");
 var import_styled = require("./styled.js");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
-var import_header_list = require("../header-list/index.js");
 var import_useItemRenderer = require("./useItemRenderer.js");
 var import_LoadingContainer = require("./LoadingContainer.js");
 var import_SkeletonContainer = require("./SkeletonContainer.js");
 var import_useOnElementResize = require("../../utils/useOnElementResize.js");
 const MenuList = () => {
   const {
-    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },
+    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },
     controlsWrapperRef,
     listRef,
-    inputValue,
     wrapperListRef,
     virtualListHelpers,
     correctOptions: filteredOptions,
     instanceUid
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
-  const multiple = Array.isArray(selectedValues);
-  const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;
   const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
   const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
   const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
@@ -63,43 +59,32 @@ const MenuList = () => {
   const menuListRender = (0, import_react.useMemo)(() => {
     if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid });
     if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, {});
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_header_list.HeaderList, {}),
-      filteredOptions && filteredOptions.length > 0 || onCreate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styled.StyledVirtualListWrapper,
-        {
-          tabIndex: -1,
-          inline,
-          maxHeight: menuMaxHeight,
-          innerRef: listRef,
-          withHeader,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styled.StyledList,
-            {
-              "aria-label": "listbox",
-              id: `combo-listbox-${instanceUid}`,
-              role: "listbox",
-              "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST,
-              style: { height: virtualListHelpers?.totalSize, margin: inline ? "0px" : "8px 0px" },
-              children: ItemRenderer
-            }
-          )
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styled.StyledNoResultsWrapper,
+    if (filteredOptions && filteredOptions.length > 0 || onCreate) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, { tabIndex: -1, inline, maxHeight: menuMaxHeight, innerRef: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styled.StyledList,
         {
+          "aria-label": "listbox",
           id: `combo-listbox-${instanceUid}`,
-          "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.NO_MATCHES_FOUND,
-          role: "alert",
-          children: noOptionsMessage
+          role: "listbox",
+          "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST,
+          style: { height: virtualListHelpers?.totalSize, margin: inline ? "0px" : "8px 0px" },
+          children: ItemRenderer
         }
-      )
-    ] });
+      ) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled.StyledNoResultsWrapper,
+      {
+        id: `combo-listbox-${instanceUid}`,
+        "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.NO_MATCHES_FOUND,
+        role: "alert",
+        children: noOptionsMessage
+      }
+    );
   }, [
     instanceUid,
     isSkeleton,
     isLoading,
-    withHeader,
     filteredOptions,
     onCreate,
     inline,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    inputValue,\n    wrapperListRef,\n    virtualListHelpers,\n    correctOptions: filteredOptions,\n    instanceUid,\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 && 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  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n    if (isLoading) return <LoadingContainer />;\n\n    return (\n      <>\n        {withHeader && <HeaderList />}\n        {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n          <StyledVirtualListWrapper\n            tabIndex={-1}\n            inline={inline}\n            maxHeight={menuMaxHeight}\n            innerRef={listRef}\n            withHeader={withHeader}\n          >\n            <StyledList\n              aria-label=\"listbox\"\n              id={`combo-listbox-${instanceUid}`}\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\n            id={`combo-listbox-${instanceUid}`}\n            data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n            role=\"alert\"\n          >\n            {noOptionsMessage}\n          </StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\n    instanceUid,\n    isSkeleton,\n    isLoading,\n    withHeader,\n    filteredOptions,\n    onCreate,\n    inline,\n    menuMaxHeight,\n    listRef,\n    virtualListHelpers?.totalSize,\n    ItemRenderer,\n    noOptionsMessage,\n  ]);\n\n  useLayoutEffect(() => {\n    virtualListHelpers?.measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCI;AAhC3B,mBAAyE;AACzE,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,4CAAC,4CAAiB;AAExC,WACE,4EACG;AAAA,oBAAc,4CAAC,iCAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,IAAI,iBAAiB,WAAW;AAAA,cAChC,MAAK;AAAA,cACL,eAAa,8CAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,iBAAiB,WAAW;AAAA,UAChC,eAAa,8CAAmB;AAAA,UAChC,MAAK;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    wrapperListRef,\n    virtualListHelpers,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n    if (isLoading) return <LoadingContainer />;\n\n    if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n      return (\n        <StyledVirtualListWrapper tabIndex={-1} inline={inline} maxHeight={menuMaxHeight} innerRef={listRef}>\n          <StyledList\n            aria-label=\"listbox\"\n            id={`combo-listbox-${instanceUid}`}\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    }\n\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n  }, [\n    instanceUid,\n    isSkeleton,\n    isLoading,\n    filteredOptions,\n    onCreate,\n    inline,\n    menuMaxHeight,\n    listRef,\n    virtualListHelpers?.totalSize,\n    ItemRenderer,\n    noOptionsMessage,\n  ]);\n\n  useLayoutEffect(() => {\n    virtualListHelpers?.measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BI;AA5B3B,mBAAyE;AACzE,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAG9B,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,4CAAC,4CAAiB;AAExC,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,4CAAC,0CAAyB,UAAU,IAAI,QAAgB,WAAW,eAAe,UAAU,SAC1F;AAAA,QAAC;AAAA;AAAA,UACC,cAAW;AAAA,UACX,IAAI,iBAAiB,WAAW;AAAA,UAChC,MAAK;AAAA,UACL,eAAa,8CAAmB;AAAA,UAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,UAElF;AAAA;AAAA,MACH,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled.div<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n  z-index: 100;\n`;\n\nexport const StyledList = styled.ul`\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n  overflow: hidden;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n  inline: boolean | undefined;\n  maxHeight: SizingProps['maxHeight'];\n  withHeader?: boolean;\n}>`\n  overflow-y: auto;\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\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;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA,gBAEtB,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAAA;AAIpD,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAG5E,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled.div<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n  z-index: 100;\n`;\n\nexport const StyledList = styled.ul`\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n  overflow: hidden;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n  inline: boolean | undefined;\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  overflow-y: auto;\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\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;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA,gBAEtB,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAAA;AAIpD,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAK/B,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAG5E,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
   "names": []
 }

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

@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_menu_items = require("@elliemae/ds-menu-items");
+var import_Section = require("../Section.js");
 var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
 var import_styled = require("./styled.js");
 var import_listHelper = require("../../utils/listHelper.js");
@@ -43,13 +44,13 @@ var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_constants = require("../../constants.js");
 const useItemRenderer = () => {
   const {
-    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },
+    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },
     setMenuState,
     inputValue,
     focusOptionIdx,
     setInputValue,
     virtualListHelpers,
-    correctOptions: filteredOptions
+    optionsPerSection
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const CBItem = multiple ? import_ds_menu_items.MultiMenuItem : import_ds_menu_items.SingleMenuItem;
@@ -62,6 +63,7 @@ const useItemRenderer = () => {
   }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);
   const handleClick = (0, import_react.useCallback)(
     (option, e) => {
+      if (readOnly) return;
       if (option.type === import_constants.MENU_OPTION_TYPES.OPTION) {
         if (!option.disabled) {
           if (onFilter) onFilter(allOptions, inputValue);
@@ -85,8 +87,8 @@ const useItemRenderer = () => {
       return null;
     }
     return virtualListHelpers.virtualItems.map((vItem) => {
-      const option = filteredOptions[vItem.index];
-      const { dsId, type, disabled, applyAriaDisabled, ...rest } = option;
+      const option = optionsPerSection[vItem.index];
+      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;
       const generalProps = {
         wrapperStyles: {
           position: "absolute",
@@ -95,58 +97,75 @@ const useItemRenderer = () => {
           width: "100%",
           transform: `translateY(${vItem.start}px)`
         },
-        "aria-setsize": `${filteredOptions.length}`,
-        "aria-posinset": `${vItem.index + 1}`,
+        // 'aria-setsize': `${allOptions.length}`,
+        // 'aria-posinset': `${vItem.index + 1}`,
         key: `${dsId}`,
         innerRef: vItem.measureRef,
         dsId: dsId.toString(),
         ...rest
       };
       if (type === import_constants.MENU_OPTION_TYPES.SECTION) {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items.Section, { label: option.label, ...generalProps, render: void 0 });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Section.Section,
+          {
+            label: option.label,
+            ...generalProps,
+            options: option.options,
+            handleClick,
+            focusOptionIdx,
+            handleOnMouseDown,
+            selectedValues
+          }
+        );
       }
       if (type === import_constants.MENU_OPTION_TYPES.SEPARATOR) {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items.Separator, { ...generalProps, render: void 0 });
       }
       if (option.type === import_constants.MENU_OPTION_TYPES.OPTION) {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          CBItem,
-          {
-            ...generalProps,
-            value: option.value,
-            label: option.label,
-            dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
-            disabled,
-            applyAriaDisabled,
-            onClick: (e) => {
-              if (applyAriaDisabled) return;
-              handleClick(option, e);
-            },
-            onMouseDown: handleOnMouseDown,
-            isActive: dsId === focusOptionIdx,
-            isSelected: (0, import_listHelper.isSelected)(selectedValues, option),
-            tabIndex: -1
-          }
+        return (
+          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CBItem,
+            {
+              ...generalProps,
+              value: option.value,
+              label: option.label,
+              dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
+              disabled,
+              applyAriaDisabled: applyAriaDisabled || itemReadOnly,
+              onClick: (e) => {
+                if (applyAriaDisabled) return;
+                handleClick(option, e);
+              },
+              onMouseDown: handleOnMouseDown,
+              isActive: dsId === focusOptionIdx,
+              isSelected: (0, import_listHelper.isSelected)(selectedValues, option),
+              tabIndex: -1
+            }
+          )
         );
       }
       if (type === import_constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE) {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ds_menu_items.SingleMenuItem,
-          {
-            dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
-            isActive: dsId === focusOptionIdx,
-            ...generalProps,
-            render: ({ label: labelCreatable }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { p: "8px", cols: ["min-content", "auto"], gutter: "xxs", alignItems: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCreatableLabel, { children: "Add:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCreatableValue, { children: `"${labelCreatable}"` })
-            ] }),
-            label: option.label,
-            onClick: handleOnCreateClick
-          }
+        return (
+          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_menu_items.SingleMenuItem,
+            {
+              dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
+              isActive: dsId === focusOptionIdx,
+              ...generalProps,
+              render: ({ label: labelCreatable }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { p: "8px", cols: ["min-content", "auto"], gutter: "xxs", alignItems: "center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCreatableLabel, { children: "Add:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCreatableValue, { children: `"${labelCreatable}"` })
+              ] }),
+              label: option.label,
+              onClick: handleOnCreateClick
+            }
+          )
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+      return null;
     });
-  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);
+  }, [focusOptionIdx, selectedValues, virtualListHelpers]);
 };
 //# sourceMappingURL=useItemRenderer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/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-menu-items';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n  const {\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    virtualListHelpers,\n    correctOptions: filteredOptions,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (option: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        if (!option.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, 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 { dsId, type, disabled, applyAriaDisabled, ...rest } = option;\n      const generalProps = {\n        wrapperStyles: {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          transform: `translateY(${vItem.start}px)`,\n        },\n        'aria-setsize': `${filteredOptions.length}`,\n        'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        innerRef: vItem.measureRef,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (type === MENU_OPTION_TYPES.SECTION) {\n        return <Section label={option.label} {...generalProps} render={undefined} />;\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\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={disabled}\n            applyAriaDisabled={applyAriaDisabled}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <SingleMenuItem\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n          />\n        );\n      }\n      return <></>;\n    });\n  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "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, Separator } from '@elliemae/ds-menu-items';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n  const {\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    virtualListHelpers,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (option: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        if (!option.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n  return useMemo(() => {\n    if (!virtualListHelpers) {\n      return null;\n    }\n    return virtualListHelpers.virtualItems.map((vItem) => {\n      const option = optionsPerSection[vItem.index];\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        wrapperStyles: {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          transform: `translateY(${vItem.start}px)`,\n        },\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        innerRef: vItem.measureRef,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            // @ts-expect-error - this needs to be rewritten, broken typescript typings?\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n          <SingleMenuItem\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n          />\n        );\n      }\n      return null;\n    });\n  }, [focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js CHANGED Viewed

@@ -40,7 +40,14 @@ var import_listHelper = require("../../utils/listHelper.js");
 const RemovableSelectedValuePill = (props) => {
   const { pill } = props;
   const {
-    props: { onChange, isNonClearable, disabled, selectedValues, applyAriaDisabled: applyAriaDisabledToContainer },
+    props: {
+      onChange,
+      isNonClearable,
+      disabled,
+      selectedValues,
+      applyAriaDisabled: applyAriaDisabledToContainer,
+      readOnly
+    },
     internalRef
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -50,9 +57,10 @@ const RemovableSelectedValuePill = (props) => {
       label: pill.label,
       disabled,
       type: disabled || applyAriaDisabledToContainer || isNonClearable ? "value" : "removable",
-      applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled,
+      applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled || readOnly,
       tabIndex: -1,
       onRemove: (e) => {
+        if (readOnly) return;
         e.stopPropagation();
         onChange((0, import_listHelper.getSuggestedValueOnChange)(pill, selectedValues), pill, e);
         internalRef.current?.focus();

package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n}> = (props) => {\n  const { pill } = props;\n  const {\n    props: { onChange, isNonClearable, disabled, selectedValues, applyAriaDisabled: applyAriaDisabledToContainer },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={disabled || applyAriaDisabledToContainer || isNonClearable ? 'value' : 'removable'}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        internalRef.current?.focus();\n      }}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAhBJ,mBAAkC;AAClC,yBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AACnC,MAAM,6BAGR,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,gBAAgB,mBAAmB,6BAA6B;AAAA,IAC7G;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA,MAAM,YAAY,gCAAgC,iBAAiB,UAAU;AAAA,MAC7E,mBAAmB,gCAAgC,KAAK;AAAA,MACxD,UAAU;AAAA,MACV,UAAU,CAAC,MAA8C;AAEvD,UAAE,gBAAgB;AAClB,qBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA;AAAA,IAXK,KAAK;AAAA,EAYZ;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n}> = (props) => {\n  const { pill } = props;\n  const {\n    props: {\n      onChange,\n      isNonClearable,\n      disabled,\n      selectedValues,\n      applyAriaDisabled: applyAriaDisabledToContainer,\n      readOnly,\n    },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={disabled || applyAriaDisabledToContainer || isNonClearable ? 'value' : 'removable'}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled || readOnly}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        internalRef.current?.focus();\n      }}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBnB;AAvBJ,mBAAkC;AAClC,yBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AACnC,MAAM,6BAGR,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA,MAAM,YAAY,gCAAgC,iBAAiB,UAAU;AAAA,MAC7E,mBAAmB,gCAAgC,KAAK,qBAAqB;AAAA,MAC7E,UAAU;AAAA,MACV,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,qBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA;AAAA,IAZK,KAAK;AAAA,EAaZ;AAEJ;",
   "names": ["ComboBoxContext"]
 }

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

@@ -66,6 +66,8 @@ const ComboboxPropTypes = {
   isSkeleton: import_ds_props_helpers.PropTypes.bool.description("whether or not the component is in skeleton state").defaultValue(false),
   applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
     "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
-  ).defaultValue(false)
+  ).defaultValue(false),
+  readOnly: import_ds_props_helpers.PropTypes.bool.description("Makes the component non-editable while remaining accessible.").defaultValue(false),
+  onSelectAll: import_ds_props_helpers.PropTypes.func.description("function triggered when user select all the options").defaultValue("() => {}").deprecated({ version: "25.2" })
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n  export interface CommonItemOptions extends GlobalAttributesT {\n    dsId: string;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    inputMinWidth?: number;\n    menuMinWidth?: SizingProps['minWidth'];\n    menuMaxHeight?: SizingProps['maxHeight'];\n    placeholder?: string;\n    autoFocus?: boolean;\n    filteredOptions?: OptionTypes[];\n    isMenuOpen?: boolean;\n    onMenuChange?: (\n      state: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    onCreate?: (label: string) => void;\n    onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n    onCancel?: () => void;\n    onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n    isLoading?: boolean;\n  }\n\n  export interface RequiredProps {\n    allOptions: OptionTypes[];\n    selectedValues: SelectedOptionsT;\n    onChange: (\n      suggestedValue: SelectedOptionsT,\n      selectedOption: ItemOption,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: DSPopperJST.PopperPlacementsT;\n    placementOrderPreference: DSPopperJST.PopperPlacementsT[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    isNonClearable: boolean;\n    disabled: boolean;\n    noOptionsMessage: string;\n    innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n    useMask: DSMaskT.Hook | typeof noop;\n    onlySelectable: boolean;\n    isSkeleton: boolean;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      PropsOptional,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      PropsOptional,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n      XstyledProps {}\n}\n\nexport const ComboboxPropTypes = {\n  ...globalAttributesPropTypes,\n  placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of original options')\n    .defaultValue([]),\n  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .description('List of filtered options to show in the menu based on the current internal input filter value')\n    .defaultValue([]),\n  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n    'Array of option or single option selected',\n  ),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n  noOptionsMessage: PropTypes.string\n    .description('Custome message to be display when no matches found after filtering')\n    .defaultValue('No Matches Found'),\n  onChange: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue('() => {}'),\n  onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n  onCreate: PropTypes.func\n    .description(\n      'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n    )\n    .defaultValue(''),\n  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n  onMenuChange: PropTypes.func\n    .description('function triggered when user open or close the menu list')\n    .defaultValue('() => {}'),\n  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  withoutPortal: PropTypes.bool\n    .description('Whether the combobox menu is rendered in a portal or not')\n    .defaultValue(false),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'reference to the component',\n  ),\n  onlySelectable: PropTypes.bool.description('filtering is disabled'),\n  isSkeleton: PropTypes.bool.description('whether or not the component is in skeleton state').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAqD;AAK9C,SAAS,QAA6B,OAAgB;AAAC;AA6FvD,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,aAAa,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,GAAG,kCAAU,MAAM,CAAC,EAAE,WAAW;AAAA,IACtG;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,kCAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,kCAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,kCAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,kCAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,eAAe,kCAAU,IAAI,YAAY,kDAAkD,EAAE,aAAa,MAAS;AAAA,EACnH,cAAc,kCAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,kCAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,kCAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK,YAAY,uBAAuB;AAAA,EAClE,YAAY,kCAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,KAAK;AAAA,EAC9G,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n  export interface CommonItemOptions extends GlobalAttributesT {\n    dsId: string;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n    options: OptionTypes[];\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    inputMinWidth?: number;\n    menuMinWidth?: SizingProps['minWidth'];\n    menuMaxHeight?: SizingProps['maxHeight'];\n    placeholder?: string;\n    autoFocus?: boolean;\n    filteredOptions?: OptionTypes[];\n    isMenuOpen?: boolean;\n    onMenuChange?: (\n      state: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    onCreate?: (label: string) => void;\n    onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n    onCancel?: () => void;\n    onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n    isLoading?: boolean;\n  }\n\n  export interface RequiredProps {\n    allOptions: OptionTypes[];\n    selectedValues: SelectedOptionsT;\n    onChange: (\n      suggestedValue: SelectedOptionsT,\n      selectedOption: ItemOption,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: DSPopperJST.PopperPlacementsT;\n    placementOrderPreference: DSPopperJST.PopperPlacementsT[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    isNonClearable: boolean;\n    disabled: boolean;\n    noOptionsMessage: string;\n    innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n    useMask: DSMaskT.Hook | typeof noop;\n    onlySelectable: boolean;\n    isSkeleton: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      PropsOptional,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      PropsOptional,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n      XstyledProps {}\n}\n\nexport const ComboboxPropTypes = {\n  ...globalAttributesPropTypes,\n  placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of original options')\n    .defaultValue([]),\n  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .description('List of filtered options to show in the menu based on the current internal input filter value')\n    .defaultValue([]),\n  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n    'Array of option or single option selected',\n  ),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n  noOptionsMessage: PropTypes.string\n    .description('Custome message to be display when no matches found after filtering')\n    .defaultValue('No Matches Found'),\n  onChange: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue('() => {}'),\n  onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n  onCreate: PropTypes.func\n    .description(\n      'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n    )\n    .defaultValue(''),\n  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n  onMenuChange: PropTypes.func\n    .description('function triggered when user open or close the menu list')\n    .defaultValue('() => {}'),\n  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  withoutPortal: PropTypes.bool\n    .description('Whether the combobox menu is rendered in a portal or not')\n    .defaultValue(false),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'reference to the component',\n  ),\n  onlySelectable: PropTypes.bool.description('filtering is disabled'),\n  isSkeleton: PropTypes.bool.description('whether or not the component is in skeleton state').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool\n    .description('Makes the component non-editable while remaining accessible.')\n    .defaultValue(false),\n  onSelectAll: PropTypes.func\n    .description('function triggered when user select all the options')\n    .defaultValue('() => {}')\n    .deprecated({ version: '25.2' }),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAqD;AAK9C,SAAS,QAA6B,OAAgB;AAAC;AA+FvD,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,aAAa,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,GAAG,kCAAU,MAAM,CAAC,EAAE,WAAW;AAAA,IACtG;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,kCAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,kCAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,kCAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,kCAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,eAAe,kCAAU,IAAI,YAAY,kDAAkD,EAAE,aAAa,MAAS;AAAA,EACnH,cAAc,kCAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,kCAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,kCAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK,YAAY,uBAAuB;AAAA,EAClE,YAAY,kCAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,KAAK;AAAA,EAC9G,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB,YAAY,8DAA8D,EAC1E,aAAa,KAAK;AAAA,EACrB,aAAa,kCAAU,KACpB,YAAY,qDAAqD,EACjE,aAAa,UAAU,EACvB,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;",
   "names": []
 }

package/dist/cjs/sharedTypes.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    internalRef: React.RefObject<HTMLInputElement>;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.RefObject<HTMLDivElement>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n    toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    showSelectedOptions: boolean;\n    setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n    setMenuState: (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;AAoC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
+  "sourcesContent": ["import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    internalRef: React.RefObject<HTMLInputElement>;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.RefObject<HTMLDivElement>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    setMenuState: (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\n    optionsPerSection: DSComboboxT.OptionTypes[];\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;AAiC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
   "names": []
 }