@elliemae/ds-form-combobox 3.37.0-rc.4 → 3.37.0

package/dist/cjs/config/useComboBox.js

@@ -36,12 +36,12 @@ var import_react = require("react");
 var import_react_virtual = require("react-virtual");
 var import_uid = require("uid");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ComboBoxCTX = require("../ComboBoxCTX.js");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_useCorrectOptions = require("./useCorrectOptions.js");
 var import_listHelper = require("../utils/listHelper.js");
 var import_theming = require("../theming.js");
+var import_useMakeMutable = require("./useMakeMutable.js");
 const useComboBox = (props) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_ComboBoxCTX.defaultProps);
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.ComboboxPropTypes, import_theming.DSComboBoxName);
@@ -96,7 +96,7 @@ const useComboBox = (props) => {
       scrollOptionIntoView(focusedValue, { align: "center" });
     }
   }, [showPopover, hasFocus, correctOptions, selectedValues]);
-  const correctOptionsRef = (0, import_ds_utilities.useMakeMutable)(correctOptions);
+  const correctOptionsRef = (0, import_useMakeMutable.useMakeMutable)(correctOptions);
   (0, import_react.useEffect)(() => {
     setFocusOptionIdx(correctOptionsRef.current?.[0]?.dsId ?? "");
   }, [correctOptionsRef, inputValue]);

package/dist/cjs/config/useComboBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useComboBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  const correctOptionsRef = useMakeMutable(correctOptions);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptionsRef.current?.[0]?.dsId ?? '');\n  }, [correctOptionsRef, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n      internalRef,\n      instanceUid,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useMakeMutable } from './useMakeMutable.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  const correctOptionsRef = useMakeMutable(correctOptions);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptionsRef.current?.[0]?.dsId ?? '');\n  }, [correctOptionsRef, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n      internalRef,\n      instanceUid,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/config/useMakeMutable.js

@@ -0,0 +1,43 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useMakeMutable_exports = {};
+__export(useMakeMutable_exports, {
+  useMakeMutable: () => useMakeMutable
+});
+module.exports = __toCommonJS(useMakeMutable_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const useMakeMutable = (referenceVar) => {
+  const mutable = (0, import_react.useRef)(referenceVar);
+  (0, import_react.useEffect)(() => {
+    mutable.current = referenceVar;
+  }, [referenceVar]);
+  return mutable;
+};
+//# sourceMappingURL=useMakeMutable.js.map

package/dist/cjs/config/useMakeMutable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useMakeMutable.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\nimport { useRef, useEffect } from 'react';\ntype UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;\n\nexport const useMakeMutable: UseMakeMutable = (referenceVar) => {\n  const mutable = useRef(referenceVar);\n  useEffect(() => {\n    mutable.current = referenceVar;\n  }, [referenceVar]);\n  return mutable;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAG3B,MAAM,iBAAiC,CAAC,iBAAiB;AAC9D,QAAM,cAAU,qBAAO,YAAY;AACnC,8BAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;",
+  "names": []
+}

package/dist/cjs/parts/controls-input/ControlsInput.js

@@ -35,7 +35,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
-var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_styled = require("./styled.js");
@@ -75,7 +75,7 @@ const ControlsInput = () => {
       return `options ${selectedValues.map((item) => item.label).join(", ")} selected`;
     }
     if (typeof selectedValues?.label === "string") {
-      return selectedValues.label;
+      return `option ${selectedValues.label} selected`;
     }
     return placeholder;
   }, [placeholder, selectedValues]);
@@ -106,11 +106,10 @@ const ControlsInput = () => {
         "aria-expanded": menuState,
         "aria-haspopup": "true",
         "aria-describedby": actualAriaDescribedBy,
-        "aria-live": "polite",
         role: "combobox",
         disabled,
         style: { width },
-        innerRef: (0, import_ds_utilities.mergeRefs)(innerRef, internalRef),
+        innerRef: (0, import_ds_system.mergeRefs)(innerRef, internalRef),
         value: inputValue,
         type: "text",
         onKeyDown: onInputKeyDown,

package/dist/cjs/parts/controls-input/ControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, selectedValues, placeholder, disabled, innerRef, isLoading, onlySelectable, ...restProps },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return selectedValues.label;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-haspopup=\"true\"\n        aria-describedby={actualAriaDescribedBy}\n        aria-live=\"polite\"\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEnB;AAlEJ,mBAA2C;AAC3C,uCAA2C;AAC3C,0BAA0B;AAC1B,8BAAuC;AACvC,iCAAmC;AACnC,oBAMO;AACP,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAChC,wBAA+B;AAExB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,gBAAgB,aAAa,UAAU,UAAU,WAAW,gBAAgB,GAAG,UAAU;AAAA,IAC7G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,QAAI,gDAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,EAAE,IAAI,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAAA,IACxF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,YAAI,kCAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC;AAAA,IACvE;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,eAAe;AAAA,IACxB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,SACE,6CAAC,oCACC;AAAA,gDAAC,2CAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC,4CAAC,wCAAuB,eAAY,QAClC,sDAAC,+DAA2B,OAAO,iBAAiB,GACtD;AAAA,IAKD,cAAc,QAAQ,4CAAC,iCAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAMjG,4CAAC,iCAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,iBAAe,iBAAiB,WAAW;AAAA,QAC3C,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,aAAU;AAAA,QACV,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,cAAU,+BAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, selectedValues, placeholder, disabled, innerRef, isLoading, onlySelectable, ...restProps },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-haspopup=\"true\"\n        aria-describedby={actualAriaDescribedBy}\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEnB;AAlEJ,mBAA2C;AAC3C,uCAA2C;AAC3C,uBAA0B;AAC1B,8BAAuC;AACvC,iCAAmC;AACnC,oBAMO;AACP,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAChC,wBAA+B;AAExB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,gBAAgB,aAAa,UAAU,UAAU,WAAW,gBAAgB,GAAG,UAAU;AAAA,IAC7G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,QAAI,gDAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,EAAE,IAAI,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAAA,IACxF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,YAAI,kCAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC;AAAA,IACvE;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,UAAU,eAAe,KAAK;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,SACE,6CAAC,oCACC;AAAA,gDAAC,2CAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC,4CAAC,wCAAuB,eAAY,QAClC,sDAAC,+DAA2B,OAAO,iBAAiB,GACtD;AAAA,IAKD,cAAc,QAAQ,4CAAC,iCAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAMjG,4CAAC,iCAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,iBAAe,iBAAiB,WAAW;AAAA,QAC3C,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,cAAU,4BAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -34,7 +34,6 @@ module.exports = __toCommonJS(MenuList_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_styled = require("./styled.js");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
@@ -42,6 +41,7 @@ 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 },
@@ -56,7 +56,7 @@ const MenuList = () => {
   const multiple = Array.isArray(selectedValues);
   const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;
   const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
-  const { width } = (0, import_ds_utilities.useOnElementResize)(controlsWrapperRef);
+  const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
   const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
     e.preventDefault();
   }, []);

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

@@ -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 { useOnElementResize } from '@elliemae/ds-utilities';\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';\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 />;\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              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 role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\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      id={`combo-listbox-${instanceUid}`}\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,0BAAmC;AACnC,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAE3B,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,wCAAmB,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;AAE1C,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,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,4CAAC,wCAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;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,MACV,IAAI,iBAAiB,WAAW;AAAA,MAE/B;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 { 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 />;\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              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 role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\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      id={`combo-listbox-${instanceUid}`}\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;AAE1C,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,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,4CAAC,wCAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;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,MACV,IAAI,iBAAiB,WAAW;AAAA,MAE/B;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/multi-selected-values-container/useGroupPills.js

@@ -33,7 +33,7 @@ __export(useGroupPills_exports, {
 module.exports = __toCommonJS(useGroupPills_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_useOnElementResize = require("../../utils/useOnElementResize.js");
 var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
 const getGroupedPillWidth = (remainingPills) => {
   if (remainingPills === 0) return 0;
@@ -50,8 +50,8 @@ const useGroupPills = () => {
   const multiSelectedValues = selectedValues;
   const selectedValuesLength = Math.min(30, multiSelectedValues.length);
   const [pillsToShow, setPillsToShow] = (0, import_react.useState)(selectedValuesLength);
-  const { width } = (0, import_ds_utilities.useOnElementResize)(controlsWrapperRef);
-  const { width: widthInput } = (0, import_ds_utilities.useOnElementResize)(innerRef || null);
+  const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
+  const { width: widthInput } = (0, import_useOnElementResize.useOnElementResize)(innerRef || null);
   (0, import_react.useEffect)(() => {
     if (selectedValuesLength !== pillsToShow) {
       setPillsToShow(selectedValuesLength);

package/dist/cjs/parts/multi-selected-values-container/useGroupPills.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/multi-selected-values-container/useGroupPills.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useEffect, useState, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\n\nconst getGroupedPillWidth = (remainingPills: number): number => {\n  if (remainingPills === 0) return 0;\n  const digits = remainingPills.toString().length;\n  return 8 * (digits - 1) + 31;\n};\nconst useGroupPills = (): number => {\n  const {\n    props: { selectedValues, isNonClearable, disabled, innerRef },\n    selectedOptionsRef,\n    controlsWrapperRef,\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n\n  // 30 represent 30 pills maximum to calculate the grouped pill. this fix the load time issue\n  // when combobox is receiving a huge amount of options.\n  const selectedValuesLength = Math.min(30, multiSelectedValues.length);\n\n  const [pillsToShow, setPillsToShow] = useState(selectedValuesLength);\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const { width: widthInput } = useOnElementResize(innerRef || null);\n  useEffect(() => {\n    if (selectedValuesLength !== pillsToShow) {\n      setPillsToShow(selectedValuesLength);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedValuesLength, width, widthInput]);\n\n  useLayoutEffect(() => {\n    if (selectedOptionsRef.current && pillGroupRef.current) {\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';\n      let lastPillFit = -1;\n      let currentWidth = 0;\n      const referenceWidth = selectedOptionsRef.current.offsetWidth;\n      const pills: HTMLDivElement[] = [\n        ...pillGroupRef.current.querySelectorAll(\n          disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable',\n        ),\n      ] as HTMLDivElement[];\n      const pillsWidth = pills.map((pill) => pill?.offsetWidth);\n      pillsWidth.forEach((pillWidth, idx) => {\n        currentWidth += pillWidth;\n        if (currentWidth + getGroupedPillWidth(selectedValuesLength - idx - 1) <= referenceWidth) {\n          lastPillFit = idx;\n        }\n      });\n\n      if (!(selectedValuesLength > 0 && pillsToShow !== selectedValuesLength)) {\n        const nextPillsToShow = lastPillFit + 1;\n\n        if (nextPillsToShow !== pillsToShow) {\n          setPillsToShow(nextPillsToShow);\n        }\n      }\n\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';\n    }\n  }, [\n    selectedOptionsRef,\n    innerRef,\n    multiSelectedValues,\n    pillsToShow,\n    pillGroupRef,\n    width,\n    widthInput,\n    disabled,\n    selectedValuesLength,\n    isNonClearable,\n  ]);\n\n  return pillsToShow || 1;\n};\n\nexport { useGroupPills };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiE;AACjE,0BAAmC;AACnC,yBAAgC;AAGhC,MAAM,sBAAsB,CAAC,mBAAmC;AAC9D,MAAI,mBAAmB,EAAG,QAAO;AACjC,QAAM,SAAS,eAAe,SAAS,EAAE;AACzC,SAAO,KAAK,SAAS,KAAK;AAC5B;AACA,MAAM,gBAAgB,MAAc;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,gBAAgB,UAAU,SAAS;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAI5B,QAAM,uBAAuB,KAAK,IAAI,IAAI,oBAAoB,MAAM;AAEpE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,oBAAoB;AACnE,QAAM,EAAE,MAAM,QAAI,wCAAmB,kBAAkB;AACvD,QAAM,EAAE,OAAO,WAAW,QAAI,wCAAmB,YAAY,IAAI;AACjE,8BAAU,MAAM;AACd,QAAI,yBAAyB,aAAa;AACxC,qBAAe,oBAAoB;AAAA,IACrC;AAAA,EAEF,GAAG,CAAC,sBAAsB,OAAO,UAAU,CAAC;AAE5C,oCAAgB,MAAM;AACpB,QAAI,mBAAmB,WAAW,aAAa,SAAS;AACtD,UAAI,aAAa,QAAS,cAAa,QAAQ,MAAM,QAAQ;AAC7D,UAAI,cAAc;AAClB,UAAI,eAAe;AACnB,YAAM,iBAAiB,mBAAmB,QAAQ;AAClD,YAAM,QAA0B;AAAA,QAC9B,GAAG,aAAa,QAAQ;AAAA,UACtB,YAAY,iBAAiB,2BAA2B;AAAA,QAC1D;AAAA,MACF;AACA,YAAM,aAAa,MAAM,IAAI,CAAC,SAAS,MAAM,WAAW;AACxD,iBAAW,QAAQ,CAAC,WAAW,QAAQ;AACrC,wBAAgB;AAChB,YAAI,eAAe,oBAAoB,uBAAuB,MAAM,CAAC,KAAK,gBAAgB;AACxF,wBAAc;AAAA,QAChB;AAAA,MACF,CAAC;AAED,UAAI,EAAE,uBAAuB,KAAK,gBAAgB,uBAAuB;AACvE,cAAM,kBAAkB,cAAc;AAEtC,YAAI,oBAAoB,aAAa;AACnC,yBAAe,eAAe;AAAA,QAChC;AAAA,MACF;AAEA,UAAI,aAAa,QAAS,cAAa,QAAQ,MAAM,QAAQ;AAAA,IAC/D;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,eAAe;AACxB;",
+  "sourcesContent": ["import { useContext, useEffect, useState, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\n\nconst getGroupedPillWidth = (remainingPills: number): number => {\n  if (remainingPills === 0) return 0;\n  const digits = remainingPills.toString().length;\n  return 8 * (digits - 1) + 31;\n};\nconst useGroupPills = (): number => {\n  const {\n    props: { selectedValues, isNonClearable, disabled, innerRef },\n    selectedOptionsRef,\n    controlsWrapperRef,\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n\n  // 30 represent 30 pills maximum to calculate the grouped pill. this fix the load time issue\n  // when combobox is receiving a huge amount of options.\n  const selectedValuesLength = Math.min(30, multiSelectedValues.length);\n\n  const [pillsToShow, setPillsToShow] = useState(selectedValuesLength);\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const { width: widthInput } = useOnElementResize(innerRef || null);\n  useEffect(() => {\n    if (selectedValuesLength !== pillsToShow) {\n      setPillsToShow(selectedValuesLength);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedValuesLength, width, widthInput]);\n\n  useLayoutEffect(() => {\n    if (selectedOptionsRef.current && pillGroupRef.current) {\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';\n      let lastPillFit = -1;\n      let currentWidth = 0;\n      const referenceWidth = selectedOptionsRef.current.offsetWidth;\n      const pills: HTMLDivElement[] = [\n        ...pillGroupRef.current.querySelectorAll(\n          disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable',\n        ),\n      ] as HTMLDivElement[];\n      const pillsWidth = pills.map((pill) => pill?.offsetWidth);\n      pillsWidth.forEach((pillWidth, idx) => {\n        currentWidth += pillWidth;\n        if (currentWidth + getGroupedPillWidth(selectedValuesLength - idx - 1) <= referenceWidth) {\n          lastPillFit = idx;\n        }\n      });\n\n      if (!(selectedValuesLength > 0 && pillsToShow !== selectedValuesLength)) {\n        const nextPillsToShow = lastPillFit + 1;\n\n        if (nextPillsToShow !== pillsToShow) {\n          setPillsToShow(nextPillsToShow);\n        }\n      }\n\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';\n    }\n  }, [\n    selectedOptionsRef,\n    innerRef,\n    multiSelectedValues,\n    pillsToShow,\n    pillGroupRef,\n    width,\n    widthInput,\n    disabled,\n    selectedValuesLength,\n    isNonClearable,\n  ]);\n\n  return pillsToShow || 1;\n};\n\nexport { useGroupPills };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiE;AACjE,gCAAmC;AACnC,yBAAgC;AAGhC,MAAM,sBAAsB,CAAC,mBAAmC;AAC9D,MAAI,mBAAmB,EAAG,QAAO;AACjC,QAAM,SAAS,eAAe,SAAS,EAAE;AACzC,SAAO,KAAK,SAAS,KAAK;AAC5B;AACA,MAAM,gBAAgB,MAAc;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,gBAAgB,UAAU,SAAS;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAI5B,QAAM,uBAAuB,KAAK,IAAI,IAAI,oBAAoB,MAAM;AAEpE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,oBAAoB;AACnE,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,EAAE,OAAO,WAAW,QAAI,8CAAmB,YAAY,IAAI;AACjE,8BAAU,MAAM;AACd,QAAI,yBAAyB,aAAa;AACxC,qBAAe,oBAAoB;AAAA,IACrC;AAAA,EAEF,GAAG,CAAC,sBAAsB,OAAO,UAAU,CAAC;AAE5C,oCAAgB,MAAM;AACpB,QAAI,mBAAmB,WAAW,aAAa,SAAS;AACtD,UAAI,aAAa,QAAS,cAAa,QAAQ,MAAM,QAAQ;AAC7D,UAAI,cAAc;AAClB,UAAI,eAAe;AACnB,YAAM,iBAAiB,mBAAmB,QAAQ;AAClD,YAAM,QAA0B;AAAA,QAC9B,GAAG,aAAa,QAAQ;AAAA,UACtB,YAAY,iBAAiB,2BAA2B;AAAA,QAC1D;AAAA,MACF;AACA,YAAM,aAAa,MAAM,IAAI,CAAC,SAAS,MAAM,WAAW;AACxD,iBAAW,QAAQ,CAAC,WAAW,QAAQ;AACrC,wBAAgB;AAChB,YAAI,eAAe,oBAAoB,uBAAuB,MAAM,CAAC,KAAK,gBAAgB;AACxF,wBAAc;AAAA,QAChB;AAAA,MACF,CAAC;AAED,UAAI,EAAE,uBAAuB,KAAK,gBAAgB,uBAAuB;AACvE,cAAM,kBAAkB,cAAc;AAEtC,YAAI,oBAAoB,aAAa;AACnC,yBAAe,eAAe;AAAA,QAChC;AAAA,MACF;AAEA,UAAI,aAAa,QAAS,cAAa,QAAQ,MAAM,QAAQ;AAAA,IAC/D;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,eAAe;AACxB;",
   "names": []
 }

package/dist/cjs/utils/useOnElementResize.js

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useOnElementResize_exports = {};
+__export(useOnElementResize_exports, {
+  useOnElementResize: () => useOnElementResize
+});
+module.exports = __toCommonJS(useOnElementResize_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const useOnElementResize = (targetRef) => {
+  const [width, setWidth] = (0, import_react.useState)(targetRef.current?.offsetWidth ?? 0);
+  const [height, setHeight] = (0, import_react.useState)(targetRef.current?.offsetHeight ?? 0);
+  const observer = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    function outputsize() {
+      setWidth(targetRef.current?.offsetWidth ?? 0);
+      setHeight(targetRef.current?.offsetHeight ?? 0);
+    }
+    observer.current = new ResizeObserver(outputsize);
+    const el = targetRef.current;
+    if (el) observer.current.observe(el);
+    return () => {
+      if (el) observer.current?.disconnect();
+    };
+  }, [targetRef]);
+  return (0, import_react.useMemo)(
+    () => ({
+      width,
+      height
+    }),
+    [width, height]
+  );
+};
+//# sourceMappingURL=useOnElementResize.js.map

package/dist/cjs/utils/useOnElementResize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/useOnElementResize.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\nimport { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = <T extends HTMLElement>(\n  targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth ?? 0);\n      setHeight(targetRef.current?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    const el = targetRef.current as Element | null;\n    if (el) observer.current.observe(el);\n\n    return () => {\n      if (el) observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqD;AAI9C,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,eAAW,qBAAuB;AAExC,8BAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI,GAAI,UAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI,GAAI,UAAS,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
+  "names": []
+}

package/dist/esm/config/useComboBox.js

@@ -3,12 +3,12 @@ import { useMemo, useState, useRef, useCallback, useEffect } from "react";
 import { useVirtual } from "react-virtual";
 import { uid } from "uid";
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { useMakeMutable } from "@elliemae/ds-utilities";
 import { defaultProps } from "../ComboBoxCTX.js";
 import { ComboboxPropTypes } from "../react-desc-prop-types.js";
 import { useCorrectOptions } from "./useCorrectOptions.js";
 import { getFirstOption } from "../utils/listHelper.js";
 import { DSComboBoxName } from "../theming.js";
+import { useMakeMutable } from "./useMakeMutable.js";
 const useComboBox = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);

package/dist/esm/config/useComboBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useComboBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  const correctOptionsRef = useMakeMutable(correctOptions);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptionsRef.current?.[0]?.dsId ?? '');\n  }, [correctOptionsRef, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n      internalRef,\n      instanceUid,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useMakeMutable } from './useMakeMutable.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  const correctOptionsRef = useMakeMutable(correctOptions);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptionsRef.current?.[0]?.dsId ?? '');\n  }, [correctOptionsRef, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n      internalRef,\n      instanceUid,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/config/useMakeMutable.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { useRef, useEffect } from "react";
+const useMakeMutable = (referenceVar) => {
+  const mutable = useRef(referenceVar);
+  useEffect(() => {
+    mutable.current = referenceVar;
+  }, [referenceVar]);
+  return mutable;
+};
+export {
+  useMakeMutable
+};
+//# sourceMappingURL=useMakeMutable.js.map

package/dist/esm/config/useMakeMutable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useMakeMutable.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useRef, useEffect } from 'react';\ntype UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;\n\nexport const useMakeMutable: UseMakeMutable = (referenceVar) => {\n  const mutable = useRef(referenceVar);\n  useEffect(() => {\n    mutable.current = referenceVar;\n  }, [referenceVar]);\n  return mutable;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,iBAAiB;AAG3B,MAAM,iBAAiC,CAAC,iBAAiB;AAC9D,QAAM,UAAU,OAAO,YAAY;AACnC,YAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/parts/controls-input/ControlsInput.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { mergeRefs } from "@elliemae/ds-utilities";
+import { mergeRefs } from "@elliemae/ds-system";
 import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
 import {
@@ -48,7 +48,7 @@ const ControlsInput = () => {
       return `options ${selectedValues.map((item) => item.label).join(", ")} selected`;
     }
     if (typeof selectedValues?.label === "string") {
-      return selectedValues.label;
+      return `option ${selectedValues.label} selected`;
     }
     return placeholder;
   }, [placeholder, selectedValues]);
@@ -79,7 +79,6 @@ const ControlsInput = () => {
         "aria-expanded": menuState,
         "aria-haspopup": "true",
         "aria-describedby": actualAriaDescribedBy,
-        "aria-live": "polite",
         role: "combobox",
         disabled,
         style: { width },

package/dist/esm/parts/controls-input/ControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, selectedValues, placeholder, disabled, innerRef, isLoading, onlySelectable, ...restProps },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return selectedValues.label;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-haspopup=\"true\"\n        aria-describedby={actualAriaDescribedBy}\n        aria-live=\"polite\"\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkEnB,SACE,KADF;AAlEJ,SAAgB,YAAY,eAAe;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAExB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,gBAAgB,aAAa,UAAU,UAAU,WAAW,gBAAgB,GAAG,UAAU;AAAA,IAC7G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,IAC5G,iBAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI,uBAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,EAAE,IAAI,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAAA,IACxF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,eAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC;AAAA,IACvE;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,eAAe;AAAA,IACxB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,SACE,qBAAC,sBACC;AAAA,wBAAC,6BAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC,oBAAC,0BAAuB,eAAY,QAClC,8BAAC,8BAA2B,OAAO,iBAAiB,GACtD;AAAA,IAKD,cAAc,QAAQ,oBAAC,mBAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAMjG,oBAAC,mBAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,iBAAe,iBAAiB,WAAW;AAAA,QAC3C,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,aAAU;AAAA,QACV,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,UAAU,UAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, selectedValues, placeholder, disabled, innerRef, isLoading, onlySelectable, ...restProps },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-haspopup=\"true\"\n        aria-describedby={actualAriaDescribedBy}\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkEnB,SACE,KADF;AAlEJ,SAAgB,YAAY,eAAe;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAExB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,gBAAgB,aAAa,UAAU,UAAU,WAAW,gBAAgB,GAAG,UAAU;AAAA,IAC7G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,IAC5G,iBAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI,uBAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,EAAE,IAAI,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAAA,IACxF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,eAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC;AAAA,IACvE;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,UAAU,eAAe,KAAK;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,SACE,qBAAC,sBACC;AAAA,wBAAC,6BAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC,oBAAC,0BAAuB,eAAY,QAClC,8BAAC,8BAA2B,OAAO,iBAAiB,GACtD;AAAA,IAKD,cAAc,QAAQ,oBAAC,mBAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAMjG,oBAAC,mBAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,iBAAe,iBAAiB,WAAW;AAAA,QAC3C,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,UAAU,UAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/menu-list/MenuList.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useCallback, useLayoutEffect } from "react";
-import { useOnElementResize } from "@elliemae/ds-utilities";
 import { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from "./styled.js";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
 import { ComboBoxContext } from "../../ComboBoxCTX.js";
@@ -9,6 +8,7 @@ import { HeaderList } from "../header-list/index.js";
 import { useItemRenderer } from "./useItemRenderer.js";
 import { LoadingContainer } from "./LoadingContainer.js";
 import { SkeletonContainer } from "./SkeletonContainer.js";
+import { useOnElementResize } from "../../utils/useOnElementResize.js";
 const MenuList = () => {
   const {
     props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\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';\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 />;\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              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 role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\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      id={`combo-listbox-${instanceUid}`}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCI,SAKrB,UALqB,KAKrB,YALqB;AAhC3B,SAAgB,YAAY,SAAS,aAAa,uBAAuB;AACzE,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAE3B,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,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,oBAAC,qBAAkB;AAE1C,QAAI,UAAW,QAAO,oBAAC,oBAAiB;AAExC,WACE,iCACG;AAAA,oBAAc,oBAAC,cAAW;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,MAAK;AAAA,cACL,eAAa,mBAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,oBAAC,0BAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;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,kBAAgB,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,MACV,IAAI,iBAAiB,WAAW;AAAA,MAE/B;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 />;\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              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 role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\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      id={`combo-listbox-${instanceUid}`}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCI,SAKrB,UALqB,KAKrB,YALqB;AAhC3B,SAAgB,YAAY,SAAS,aAAa,uBAAuB;AACzE,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;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,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,oBAAC,qBAAkB;AAE1C,QAAI,UAAW,QAAO,oBAAC,oBAAiB;AAExC,WACE,iCACG;AAAA,oBAAc,oBAAC,cAAW;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,MAAK;AAAA,cACL,eAAa,mBAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,oBAAC,0BAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;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,kBAAgB,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,MACV,IAAI,iBAAiB,WAAW;AAAA,MAE/B;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/esm/parts/multi-selected-values-container/useGroupPills.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useContext, useEffect, useState, useLayoutEffect } from "react";
-import { useOnElementResize } from "@elliemae/ds-utilities";
+import { useOnElementResize } from "../../utils/useOnElementResize.js";
 import { ComboBoxContext } from "../../ComboBoxCTX.js";
 const getGroupedPillWidth = (remainingPills) => {
   if (remainingPills === 0) return 0;

package/dist/esm/parts/multi-selected-values-container/useGroupPills.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/useGroupPills.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useState, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\n\nconst getGroupedPillWidth = (remainingPills: number): number => {\n  if (remainingPills === 0) return 0;\n  const digits = remainingPills.toString().length;\n  return 8 * (digits - 1) + 31;\n};\nconst useGroupPills = (): number => {\n  const {\n    props: { selectedValues, isNonClearable, disabled, innerRef },\n    selectedOptionsRef,\n    controlsWrapperRef,\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n\n  // 30 represent 30 pills maximum to calculate the grouped pill. this fix the load time issue\n  // when combobox is receiving a huge amount of options.\n  const selectedValuesLength = Math.min(30, multiSelectedValues.length);\n\n  const [pillsToShow, setPillsToShow] = useState(selectedValuesLength);\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const { width: widthInput } = useOnElementResize(innerRef || null);\n  useEffect(() => {\n    if (selectedValuesLength !== pillsToShow) {\n      setPillsToShow(selectedValuesLength);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedValuesLength, width, widthInput]);\n\n  useLayoutEffect(() => {\n    if (selectedOptionsRef.current && pillGroupRef.current) {\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';\n      let lastPillFit = -1;\n      let currentWidth = 0;\n      const referenceWidth = selectedOptionsRef.current.offsetWidth;\n      const pills: HTMLDivElement[] = [\n        ...pillGroupRef.current.querySelectorAll(\n          disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable',\n        ),\n      ] as HTMLDivElement[];\n      const pillsWidth = pills.map((pill) => pill?.offsetWidth);\n      pillsWidth.forEach((pillWidth, idx) => {\n        currentWidth += pillWidth;\n        if (currentWidth + getGroupedPillWidth(selectedValuesLength - idx - 1) <= referenceWidth) {\n          lastPillFit = idx;\n        }\n      });\n\n      if (!(selectedValuesLength > 0 && pillsToShow !== selectedValuesLength)) {\n        const nextPillsToShow = lastPillFit + 1;\n\n        if (nextPillsToShow !== pillsToShow) {\n          setPillsToShow(nextPillsToShow);\n        }\n      }\n\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';\n    }\n  }, [\n    selectedOptionsRef,\n    innerRef,\n    multiSelectedValues,\n    pillsToShow,\n    pillGroupRef,\n    width,\n    widthInput,\n    disabled,\n    selectedValuesLength,\n    isNonClearable,\n  ]);\n\n  return pillsToShow || 1;\n};\n\nexport { useGroupPills };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useState, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\n\nconst getGroupedPillWidth = (remainingPills: number): number => {\n  if (remainingPills === 0) return 0;\n  const digits = remainingPills.toString().length;\n  return 8 * (digits - 1) + 31;\n};\nconst useGroupPills = (): number => {\n  const {\n    props: { selectedValues, isNonClearable, disabled, innerRef },\n    selectedOptionsRef,\n    controlsWrapperRef,\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n\n  // 30 represent 30 pills maximum to calculate the grouped pill. this fix the load time issue\n  // when combobox is receiving a huge amount of options.\n  const selectedValuesLength = Math.min(30, multiSelectedValues.length);\n\n  const [pillsToShow, setPillsToShow] = useState(selectedValuesLength);\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const { width: widthInput } = useOnElementResize(innerRef || null);\n  useEffect(() => {\n    if (selectedValuesLength !== pillsToShow) {\n      setPillsToShow(selectedValuesLength);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedValuesLength, width, widthInput]);\n\n  useLayoutEffect(() => {\n    if (selectedOptionsRef.current && pillGroupRef.current) {\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';\n      let lastPillFit = -1;\n      let currentWidth = 0;\n      const referenceWidth = selectedOptionsRef.current.offsetWidth;\n      const pills: HTMLDivElement[] = [\n        ...pillGroupRef.current.querySelectorAll(\n          disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable',\n        ),\n      ] as HTMLDivElement[];\n      const pillsWidth = pills.map((pill) => pill?.offsetWidth);\n      pillsWidth.forEach((pillWidth, idx) => {\n        currentWidth += pillWidth;\n        if (currentWidth + getGroupedPillWidth(selectedValuesLength - idx - 1) <= referenceWidth) {\n          lastPillFit = idx;\n        }\n      });\n\n      if (!(selectedValuesLength > 0 && pillsToShow !== selectedValuesLength)) {\n        const nextPillsToShow = lastPillFit + 1;\n\n        if (nextPillsToShow !== pillsToShow) {\n          setPillsToShow(nextPillsToShow);\n        }\n      }\n\n      if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';\n    }\n  }, [\n    selectedOptionsRef,\n    innerRef,\n    multiSelectedValues,\n    pillsToShow,\n    pillGroupRef,\n    width,\n    widthInput,\n    disabled,\n    selectedValuesLength,\n    isNonClearable,\n  ]);\n\n  return pillsToShow || 1;\n};\n\nexport { useGroupPills };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,WAAW,UAAU,uBAAuB;AACjE,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAGhC,MAAM,sBAAsB,CAAC,mBAAmC;AAC9D,MAAI,mBAAmB,EAAG,QAAO;AACjC,QAAM,SAAS,eAAe,SAAS,EAAE;AACzC,SAAO,KAAK,SAAS,KAAK;AAC5B;AACA,MAAM,gBAAgB,MAAc;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,gBAAgB,UAAU,SAAS;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAI5B,QAAM,uBAAuB,KAAK,IAAI,IAAI,oBAAoB,MAAM;AAEpE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,oBAAoB;AACnE,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,EAAE,OAAO,WAAW,IAAI,mBAAmB,YAAY,IAAI;AACjE,YAAU,MAAM;AACd,QAAI,yBAAyB,aAAa;AACxC,qBAAe,oBAAoB;AAAA,IACrC;AAAA,EAEF,GAAG,CAAC,sBAAsB,OAAO,UAAU,CAAC;AAE5C,kBAAgB,MAAM;AACpB,QAAI,mBAAmB,WAAW,aAAa,SAAS;AACtD,UAAI,aAAa,QAAS,cAAa,QAAQ,MAAM,QAAQ;AAC7D,UAAI,cAAc;AAClB,UAAI,eAAe;AACnB,YAAM,iBAAiB,mBAAmB,QAAQ;AAClD,YAAM,QAA0B;AAAA,QAC9B,GAAG,aAAa,QAAQ;AAAA,UACtB,YAAY,iBAAiB,2BAA2B;AAAA,QAC1D;AAAA,MACF;AACA,YAAM,aAAa,MAAM,IAAI,CAAC,SAAS,MAAM,WAAW;AACxD,iBAAW,QAAQ,CAAC,WAAW,QAAQ;AACrC,wBAAgB;AAChB,YAAI,eAAe,oBAAoB,uBAAuB,MAAM,CAAC,KAAK,gBAAgB;AACxF,wBAAc;AAAA,QAChB;AAAA,MACF,CAAC;AAED,UAAI,EAAE,uBAAuB,KAAK,gBAAgB,uBAAuB;AACvE,cAAM,kBAAkB,cAAc;AAEtC,YAAI,oBAAoB,aAAa;AACnC,yBAAe,eAAe;AAAA,QAChC;AAAA,MACF;AAEA,UAAI,aAAa,QAAS,cAAa,QAAQ,MAAM,QAAQ;AAAA,IAC/D;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,eAAe;AACxB;",
   "names": []
 }

package/dist/esm/utils/useOnElementResize.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
+const useOnElementResize = (targetRef) => {
+  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);
+  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);
+  const observer = useRef();
+  useEffect(() => {
+    function outputsize() {
+      setWidth(targetRef.current?.offsetWidth ?? 0);
+      setHeight(targetRef.current?.offsetHeight ?? 0);
+    }
+    observer.current = new ResizeObserver(outputsize);
+    const el = targetRef.current;
+    if (el) observer.current.observe(el);
+    return () => {
+      if (el) observer.current?.disconnect();
+    };
+  }, [targetRef]);
+  return useMemo(
+    () => ({
+      width,
+      height
+    }),
+    [width, height]
+  );
+};
+export {
+  useOnElementResize
+};
+//# sourceMappingURL=useOnElementResize.js.map

package/dist/esm/utils/useOnElementResize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useOnElementResize.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = <T extends HTMLElement>(\n  targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth ?? 0);\n      setHeight(targetRef.current?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    const el = targetRef.current as Element | null;\n    if (el) observer.current.observe(el);\n\n    return () => {\n      if (el) observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,WAAW,QAAQ,eAAe;AAI9C,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,WAAW,OAAuB;AAExC,YAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI,GAAI,UAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI,GAAI,UAAS,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
+  "names": []
+}

package/dist/types/config/useMakeMutable.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+type UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;
+export declare const useMakeMutable: UseMakeMutable;
+export {};

package/dist/types/utils/useOnElementResize.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const useOnElementResize: <T extends HTMLElement>(targetRef: React.RefObject<T>) => Record<'width' | 'height', number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-combobox",
-  "version": "3.37.0-rc.4",
+  "version": "3.37.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Combobox",
   "files": [
@@ -38,26 +38,25 @@
   "dependencies": {
     "react-virtual": "~2.10.4",
     "uid": "~2.0.1",
-    "@elliemae/ds-button-v2": "3.37.0-rc.4",
-    "@elliemae/ds-grid": "3.37.0-rc.4",
-    "@elliemae/ds-icons": "3.37.0-rc.4",
-    "@elliemae/ds-props-helpers": "3.37.0-rc.4",
-    "@elliemae/ds-pills-v2": "3.37.0-rc.4",
-    "@elliemae/ds-system": "3.37.0-rc.4",
-    "@elliemae/ds-utilities": "3.37.0-rc.4",
-    "@elliemae/ds-circular-progress-indicator": "3.37.0-rc.4",
-    "@elliemae/ds-menu-items": "3.37.0-rc.4",
-    "@elliemae/ds-truncated-tooltip-text": "3.37.0-rc.4",
-    "@elliemae/ds-form-checkbox": "3.37.0-rc.4",
-    "@elliemae/ds-popperjs": "3.37.0-rc.4"
+    "@elliemae/ds-button-v2": "3.37.0",
+    "@elliemae/ds-form-checkbox": "3.37.0",
+    "@elliemae/ds-grid": "3.37.0",
+    "@elliemae/ds-circular-progress-indicator": "3.37.0",
+    "@elliemae/ds-icons": "3.37.0",
+    "@elliemae/ds-menu-items": "3.37.0",
+    "@elliemae/ds-pills-v2": "3.37.0",
+    "@elliemae/ds-popperjs": "3.37.0",
+    "@elliemae/ds-props-helpers": "3.37.0",
+    "@elliemae/ds-system": "3.37.0",
+    "@elliemae/ds-truncated-tooltip-text": "3.37.0"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "@elliemae/pui-theme": "~2.9.3",
     "styled-components": "~5.3.9",
     "styled-system": "~5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.37.0-rc.4",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.37.0-rc.4"
+    "@elliemae/ds-form-helpers-mask-hooks": "3.37.0",
+    "@elliemae/ds-monorepo-devops": "3.37.0"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.9.3",