@elliemae/ds-form-combobox 3.56.0-rc.1 → 3.57.0-next.2

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

@@ -35,22 +35,13 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
 var import_listHelper = require("../../utils/listHelper.js");
-const useMaskedOnChange = ({
-  mutableUpdateStyles
-} = {}) => {
+const useMaskedOnChange = () => {
   const {
     props: { useMask, onFilter, allOptions, applyAriaDisabled },
     setMenuState,
     setInputValue,
     setFocusOptionIdx
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
-  const repositionFloatingWrapper = (0, import_react.useCallback)(() => {
-    if (mutableUpdateStyles && mutableUpdateStyles.current) {
-      requestAnimationFrame(() => {
-        mutableUpdateStyles.current();
-      });
-    }
-  }, [mutableUpdateStyles]);
   const handleOnChange = (0, import_react.useCallback)(
     (e) => {
       if (applyAriaDisabled) return;
@@ -60,26 +51,16 @@ const useMaskedOnChange = ({
       }
       setFocusOptionIdx("");
       setInputValue(e.currentTarget.value);
-      repositionFloatingWrapper();
     },
-    [
-      applyAriaDisabled,
-      setMenuState,
-      onFilter,
-      setFocusOptionIdx,
-      setInputValue,
-      repositionFloatingWrapper,
-      allOptions
-    ]
+    [applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions]
   );
   const handleOnChangeMask = (0, import_react.useCallback)(
     (e, mask) => {
       setMenuState(true, "filter", e);
       if (mask && onFilter) onFilter((0, import_listHelper.filterOptions)(mask, allOptions), mask);
       else if (!mask && onFilter) onFilter(allOptions, "");
-      repositionFloatingWrapper();
     },
-    [setMenuState, onFilter, allOptions, repositionFloatingWrapper]
+    [setMenuState, onFilter, allOptions]
   );
   const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
   return onChangeMask?.onChange || handleOnChange;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/useMaskedOnChange.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\n\nconst useMaskedOnChange = ({\n  mutableUpdateStyles,\n}: {\n  mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;\n} = {}) => {\n  const {\n    props: { useMask, onFilter, allOptions, applyAriaDisabled },\n    setMenuState,\n    setInputValue,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const repositionFloatingWrapper = useCallback(() => {\n    if (mutableUpdateStyles && mutableUpdateStyles.current) {\n      requestAnimationFrame(() => {\n        mutableUpdateStyles.current();\n      });\n    }\n  }, [mutableUpdateStyles]);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (applyAriaDisabled) return;\n      setMenuState(true, 'filter', e);\n      if (onFilter) {\n        // when filtering is controlled we suggest the basic filtering but let the user decide\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n      }\n      setFocusOptionIdx('');\n      setInputValue(e.currentTarget.value);\n      repositionFloatingWrapper();\n    },\n    [\n      applyAriaDisabled,\n      setMenuState,\n      onFilter,\n      setFocusOptionIdx,\n      setInputValue,\n      repositionFloatingWrapper,\n      allOptions,\n    ],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n      setMenuState(true, 'filter', e);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n      repositionFloatingWrapper();\n    },\n    [setMenuState, onFilter, allOptions, repositionFloatingWrapper],\n  );\n\n  const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n  return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAG9B,MAAM,oBAAoB,CAAC;AAAA,EACzB;AACF,IAEI,CAAC,MAAM;AACT,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,gCAA4B,0BAAY,MAAM;AAClD,QAAI,uBAAuB,oBAAoB,SAAS;AACtD,4BAAsB,MAAM;AAC1B,4BAAoB,QAAQ;AAAA,MAC9B,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAGxB,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,qBAAS,iCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,wBAAkB,EAAE;AACpB,oBAAc,EAAE,cAAc,KAAK;AACnC,gCAA0B;AAAA,IAC5B;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,cAAS,iCAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AACnD,gCAA0B;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,UAAU,YAAY,yBAAyB;AAAA,EAChE;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
+  "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\n\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, onFilter, allOptions, applyAriaDisabled },\n    setMenuState,\n    setInputValue,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (applyAriaDisabled) return;\n      setMenuState(true, 'filter', e);\n      if (onFilter) {\n        // when filtering is controlled we suggest the basic filtering but let the user decide\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n      }\n      setFocusOptionIdx('');\n      setInputValue(e.currentTarget.value);\n    },\n    [applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n      setMenuState(true, 'filter', e);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n    },\n    [setMenuState, onFilter, allOptions],\n  );\n\n  const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n  return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,qBAAS,iCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,wBAAkB,EAAE;AACpB,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,mBAAmB,cAAc,UAAU,mBAAmB,eAAe,UAAU;AAAA,EAC1F;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,cAAS,iCAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,cAAc,UAAU,UAAU;AAAA,EACrC;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
   "names": ["ComboBoxContext"]
 }

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

@@ -69,26 +69,32 @@ const MenuList = () => {
   const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
     e.preventDefault();
   }, []);
-  const menuListRender = (0, import_react.useMemo)(() => {
-    if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, getOwnerProps });
-    if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { getOwnerProps });
-    if (filteredOptions && filteredOptions.length > 0 || onCreate) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        StyledFastList,
-        {
-          dsFastlistWrapperList: { role: "listbox", "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST, "aria-label": "listbox" },
-          dsFastlistItem: { role: "none" },
-          actionRef: listRef,
-          count: filteredOptions.length,
-          ItemRenderer: import_useItemRenderer.ItemRenderer,
-          extraItemProps: { itemList: filteredOptions },
-          getId: (index) => filteredOptions[index].dsId,
-          estimateSize: estimatedSize,
-          getOwnerProps
-        }
-      ) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  let content;
+  if (isSkeleton) {
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, getOwnerProps });
+  } else if (isLoading) {
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { getOwnerProps });
+  } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledFastList,
+      {
+        dsFastlistWrapperList: {
+          role: "listbox",
+          "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST,
+          "aria-label": "listbox"
+        },
+        dsFastlistItem: { role: "none" },
+        actionRef: listRef,
+        count: filteredOptions.length,
+        ItemRenderer: import_useItemRenderer.ItemRenderer,
+        extraItemProps: { itemList: filteredOptions },
+        getId: (index) => filteredOptions[index].dsId,
+        estimateSize: estimatedSize,
+        getOwnerProps
+      }
+    ) });
+  } else {
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styled.StyledNoResultsWrapper,
       {
         id: `combo-listbox-${instanceUid}`,
@@ -97,17 +103,7 @@ const MenuList = () => {
         children: noOptionsMessage
       }
     );
-  }, [
-    isSkeleton,
-    instanceUid,
-    isLoading,
-    filteredOptions,
-    onCreate,
-    noOptionsMessage,
-    menuMaxHeight,
-    listRef,
-    getOwnerProps
-  ]);
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledListWrapper,
     {
@@ -116,7 +112,7 @@ const MenuList = () => {
       onMouseDown: preventLoseInputFocus,
       width,
       minWidth: menuMinWidth,
-      children: menuListRender
+      children: content
     }
   );
 };

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 } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\nexport const MenuList = (): JSX.Element => {\n  const {\n    props,\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    wrapperListRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { getOwnerProps } = useOwnerProps(props);\n\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n\n    if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n    if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n      return (\n        <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n          <StyledFastList\n            dsFastlistWrapperList={{ role: 'listbox', 'data-testid': ComboboxDataTestid.LIST, 'aria-label': 'listbox' }}\n            dsFastlistItem={{ role: 'none' }}\n            actionRef={listRef}\n            count={filteredOptions.length}\n            ItemRenderer={ItemRenderer}\n            extraItemProps={{ itemList: filteredOptions }}\n            getId={(index: number) => filteredOptions[index].dsId}\n            estimateSize={estimatedSize}\n            getOwnerProps={getOwnerProps}\n          />\n        </StyledItemsWrapper>\n      );\n    }\n\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n  }, [\n    isSkeleton,\n    instanceUid,\n    isLoading,\n    filteredOptions,\n    onCreate,\n    noOptionsMessage,\n    menuMaxHeight,\n    listRef,\n    getOwnerProps,\n  ]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CI;AA9C3B,mBAAwD;AACxD,0BAA2B;AAC3B,uBAAyC;AACzC,qBAAqB;AACrB,8BAA8B;AAC9B,oBAA0D;AAC1D,iCAAmC;AACnC,yBAAgC;AAChC,6BAA6B;AAC7B,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AACnC,uBAAwD;AAExD,MAAM,qBAAiB,yBAAO,gCAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,yBAAqB,yBAAO,mBAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AACrB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAI7C,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B,eAA8B;AAElG,QAAI,UAAW,QAAO,4CAAC,4CAAiB,eAA8B;AAEtE,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,8CAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB,cAAc;AAAA,UACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,UAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,UACjD,cAAc;AAAA,UACd;AAAA;AAAA,MACF,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props,\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    wrapperListRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const { width } = useOnElementResize(controlsWrapperRef);\n\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  let content: JSX.Element;\n\n  if (isSkeleton) {\n    content = <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n  } else if (isLoading) {\n    content = <LoadingContainer getOwnerProps={getOwnerProps} />;\n  } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {\n    content = (\n      <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n        <StyledFastList\n          dsFastlistWrapperList={{\n            role: 'listbox',\n            'data-testid': ComboboxDataTestid.LIST,\n            'aria-label': 'listbox',\n          }}\n          dsFastlistItem={{ role: 'none' }}\n          actionRef={listRef}\n          count={filteredOptions.length}\n          ItemRenderer={ItemRenderer}\n          extraItemProps={{ itemList: filteredOptions }}\n          getId={(index: number) => filteredOptions[index].dsId}\n          estimateSize={estimatedSize}\n          getOwnerProps={getOwnerProps}\n        />\n      </StyledItemsWrapper>\n    );\n  } else {\n    content = (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n  }\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {content}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDT;AAhDd,mBAA+C;AAC/C,0BAA2B;AAC3B,uBAAyC;AACzC,qBAAqB;AACrB,8BAA8B;AAC9B,oBAA0D;AAC1D,iCAAmC;AACnC,yBAAgC;AAChC,6BAA6B;AAC7B,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AACnC,uBAAwD;AAExD,MAAM,qBAAiB,yBAAO,gCAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,yBAAqB,yBAAO,mBAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AAErB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AAEvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,MAAI;AAEJ,MAAI,YAAY;AACd,cAAU,4CAAC,8CAAkB,aAA0B,eAA8B;AAAA,EACvF,WAAW,WAAW;AACpB,cAAU,4CAAC,4CAAiB,eAA8B;AAAA,EAC5D,YAAY,iBAAiB,UAAU,KAAK,KAAK,UAAU;AACzD,cACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,MAAC;AAAA;AAAA,QACC,uBAAuB;AAAA,UACrB,MAAM;AAAA,UACN,eAAe,8CAAmB;AAAA,UAClC,cAAc;AAAA,QAChB;AAAA,QACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,QAC/B,WAAW;AAAA,QACX,OAAO,gBAAgB;AAAA,QACvB,cAAc;AAAA,QACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,QAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,QACjD,cAAc;AAAA,QACd;AAAA;AAAA,IACF,GACF;AAAA,EAEJ,OAAO;AACL,cACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

@@ -51,6 +51,6 @@ const StyledCreatableValue = import_ds_system.styled.span`
   word-break: break-all;
 `;
 const StyledNoResultsWrapper = import_ds_system.styled.div`
-  padding: 16px;
+  padding: 14px;
 `;
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid)<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 16px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid)<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 14px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,qBAAqB;AAQd,MAAM,wBAAoB,yBAAO,mBAAI;AAAA,eAC7B,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
   "names": []
 }

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

@@ -50,6 +50,11 @@ const StyledSingleMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.S
   slot: import_constants2.FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
   preserveLegacyDataTestId: true
 })``;
+const StyledMultiMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.MultiMenuItem, {
+  name: import_constants2.DSFormComboboxName,
+  slot: import_constants2.FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,
+  preserveLegacyDataTestId: true
+})``;
 const ItemRenderer = ({ index, extraItemProps }) => {
   const {
     props,
@@ -69,7 +74,7 @@ const ItemRenderer = ({ index, extraItemProps }) => {
   );
   const option = extraItemProps?.itemList?.[index];
   const multiple = Array.isArray(selectedValues);
-  const CBItem = multiple ? import_ds_menu_items.MultiMenuItem : StyledSingleMenuItem;
+  const CBItem = multiple ? StyledMultiMenuItem : StyledSingleMenuItem;
   const handleOnCreateClick = (0, import_react.useCallback)(() => {
     if (inputValue && onCreate) {
       onCreate(inputValue);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { styled } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): JSX.Element => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable), currentOption, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            // @ts-expect-error - this needs to be rewritten, broken typescript typings?\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { styled } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nconst StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): JSX.Element => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? StyledMultiMenuItem : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable), currentOption, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            // @ts-expect-error - this needs to be rewritten, broken typescript typings?\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["import_constants"]
 }

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

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

package/dist/esm/constants/index.js

@@ -11,10 +11,23 @@ const FORM_COMBOBOX_SLOTS = {
   SECTION_WRAPPER: "section-wrapper",
   SECTION_LABEL: "section-label",
   SINGLE_MENU_ITEM: "single-menu-item",
+  MULTI_MENU_ITEM: "multi-menu-item",
   LOADING_INDICATOR: "loading-indicator",
   SKELETON_MENU_ITEM: "skeleton-menu-item"
 };
-const FORM_COMBOBOX_DATA_TESTID = slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS);
+const FORM_COMBOBOX_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),
+  // legacy data-testid
+  CONTROLS_WRAPPER: "combobox-controls-wrapper",
+  CONTAINER: "combobox-container",
+  INPUT: "combobox-input",
+  LIST: "combobox-menu-list",
+  NO_MATCHES_FOUND: "combobox-no-matches-found",
+  SELECTED_VALUES: "combobox-selected-values",
+  DROPDOWN: "combobox-dropdown-btn",
+  OPTION: "combobox-option",
+  ALLY_SELECTED_VALUES: "combobox-ally-selected-values"
+};
 export {
   DSFormComboboxName,
   FORM_COMBOBOX_DATA_TESTID,

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n  // Same as old container\n  ROOT: 'root',\n  INPUT_WRAPPER: 'input-wrapper',\n  INPUT: 'input',\n  DROPDOWN_BUTTON: 'dropdown-button',\n  FAST_LIST: 'fast-list',\n  SECTION_WRAPPER: 'section-wrapper',\n  SECTION_LABEL: 'section-label',\n  SINGLE_MENU_ITEM: 'single-menu-item',\n  LOADING_INDICATOR: 'loading-indicator',\n  SKELETON_MENU_ITEM: 'skeleton-menu-item',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,4BAA4B,wBAAwB,oBAAoB,mBAAmB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n  // Same as old container\n  ROOT: 'root',\n  INPUT_WRAPPER: 'input-wrapper',\n  INPUT: 'input',\n  DROPDOWN_BUTTON: 'dropdown-button',\n  FAST_LIST: 'fast-list',\n  SECTION_WRAPPER: 'section-wrapper',\n  SECTION_LABEL: 'section-label',\n  SINGLE_MENU_ITEM: 'single-menu-item',\n  MULTI_MENU_ITEM: 'multi-menu-item',\n  LOADING_INDICATOR: 'loading-indicator',\n  SKELETON_MENU_ITEM: 'skeleton-menu-item',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n  // legacy data-testid\n  CONTROLS_WRAPPER: 'combobox-controls-wrapper',\n  CONTAINER: 'combobox-container',\n  INPUT: 'combobox-input',\n  LIST: 'combobox-menu-list',\n  NO_MATCHES_FOUND: 'combobox-no-matches-found',\n  SELECTED_VALUES: 'combobox-selected-values',\n  DROPDOWN: 'combobox-dropdown-btn',\n  OPTION: 'combobox-option',\n  ALLY_SELECTED_VALUES: 'combobox-ally-selected-values',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,4BAA4B;AAAA,EACvC,GAAG,wBAAwB,oBAAoB,mBAAmB;AAAA;AAAA,EAElE,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,sBAAsB;AACxB;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,9 +1,20 @@
 import * as React from "react";
-export * from "./ComboBox.js";
-export * from "./theming.js";
-export * from "./ComboboxDataTestids.js";
+import { DSComboBox, DSComboBoxV3, DSComboBoxWithSchema, offScreenStyle } from "./ComboBox.js";
+import { DSComboBoxName, DSComboboxSlots } from "./theming.js";
+import { DSFormComboboxName, FORM_COMBOBOX_DATA_TESTID, FORM_COMBOBOX_SLOTS } from "./constants/index.js";
+import { ComboboxDataTestid } from "./ComboboxDataTestids.js";
 import { ComboboxPropTypes } from "./react-desc-prop-types.js";
 export {
-  ComboboxPropTypes
+  ComboboxDataTestid,
+  ComboboxPropTypes,
+  DSComboBox,
+  DSComboBoxName,
+  DSComboBoxV3,
+  DSComboBoxWithSchema,
+  DSComboboxSlots,
+  DSFormComboboxName,
+  FORM_COMBOBOX_DATA_TESTID,
+  FORM_COMBOBOX_SLOTS,
+  offScreenStyle
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ComboBox.js';\nexport * from './theming.js';\nexport * from './ComboboxDataTestids.js';\nexport { type DSComboboxT, ComboboxPropTypes } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAA2B,yBAAyB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSComboBox, DSComboBoxV3, DSComboBoxWithSchema, offScreenStyle } from './ComboBox.js';\nexport { DSComboBoxName, DSComboboxSlots } from './theming.js';\nexport { DSFormComboboxName, FORM_COMBOBOX_DATA_TESTID, FORM_COMBOBOX_SLOTS } from './constants/index.js';\nexport { ComboboxDataTestid } from './ComboboxDataTestids.js';\nexport { type DSComboboxT, ComboboxPropTypes } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,cAAc,sBAAsB,sBAAsB;AAC/E,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,oBAAoB,2BAA2B,2BAA2B;AACnF,SAAS,0BAA0B;AACnC,SAA2B,yBAAyB;",
   "names": []
 }

package/dist/esm/parts/container/Container.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React2, { useCallback, useMemo, useEffect, useContext } from "react";
+import { createElement } from "react";
+import { useCallback, useMemo, useEffect, useContext } from "react";
 import { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from "@elliemae/ds-props-helpers";
-import { mergeRefs } from "@elliemae/ds-system";
 import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
 import ComboBoxContext from "../../ComboBoxCTX.js";
 import { StyledContainer, StyledPopperWrapper } from "./styled.js";
@@ -12,9 +12,8 @@ import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
 import { LiveRegion } from "../LiveRegion.js";
 import { useOnClickOutside } from "../../config/useClickOutside.js";
 const Container = () => {
-  const [referenceElement, setReferenceElement] = React2.useState(null);
   const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);
-  const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;
+  const { inline, startPlacementPreference, placementOrderPreference, isLoading, isSkeleton, applyAriaDisabled } = props;
   const globalAttributes = useGetGlobalAttributes(props);
   const { zIndex, ...xStyledProps } = useGetXstyledProps(props);
   const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
@@ -50,17 +49,16 @@ const Container = () => {
     }),
     [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState]
   );
-  const { refs, floatingStyles, context, mutableUpdateStyles } = useFloatingContext(config);
-  const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);
+  const { refs, floatingStyles, context } = useFloatingContext(config);
   const hideTooltip = useCallback(() => {
     setMenuState(false, "blur");
   }, [setMenuState]);
-  useOnClickOutside(referenceElement, hideTooltip, refs.floating);
+  useOnClickOutside(refs.reference, hideTooltip, refs.floating);
   return /* @__PURE__ */ jsxs(
     StyledContainer,
     {
       "data-testid": dataTestId ?? ComboboxDataTestid.CONTAINER,
-      innerRef: comboboxRef,
+      innerRef: refs.setReference,
       className,
       applyAriaDisabled,
       ...xStyledProps,
@@ -68,9 +66,9 @@ const Container = () => {
       getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ jsx(LiveRegion, {}),
-        /* @__PURE__ */ jsx(Controls, { mutableUpdateStyles }),
+        /* @__PURE__ */ jsx(Controls, {}),
         menuState && inline ? /* @__PURE__ */ jsx(MenuList, {}) : null,
-        menuState && !inline && referenceElement ? /* @__PURE__ */ jsx(
+        menuState && !inline && refs.reference ? /* @__PURE__ */ createElement(
           FloatingWrapper,
           {
             innerRef: refs.setFloating,
@@ -78,8 +76,9 @@ const Container = () => {
             isOpen: menuState,
             context,
             ...props.popperProps,
-            children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ jsx(MenuList, {}) })
-          }
+            key: `${isLoading}${isSkeleton}`
+          },
+          /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ jsx(MenuList, {}) })
         ) : null
       ]
     }

package/dist/esm/parts/container/Container.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n  const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (internalRef?.current) internalRef.current.blur();\n  }, [internalRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n      externallyControlledIsOpen: menuState,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n  );\n\n  const { refs, floatingStyles, context, mutableUpdateStyles } = useFloatingContext(config);\n\n  const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setMenuState(false, 'blur');\n  }, [setMenuState]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  return (\n    <StyledContainer\n      data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n      innerRef={comboboxRef}\n      className={className}\n      applyAriaDisabled={applyAriaDisabled}\n      {...xStyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <LiveRegion />\n      <Controls mutableUpdateStyles={mutableUpdateStyles} />\n\n      {menuState && inline ? <MenuList /> : null}\n      {menuState && !inline && referenceElement ? (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          floatingStyles={floatingStyles}\n          isOpen={menuState}\n          context={context}\n          {...props.popperProps}\n        >\n          <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n            <MenuList />\n          </StyledPopperWrapper>\n        </FloatingWrapper>\n      ) : null}\n    </StyledContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0EnB,SASE,KATF;AAzEJ,OAAOA,UAAS,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,uBAAoD;AACjF,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,IAAI,WAAW,eAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,SAAS,oBAAoB,IAAI,mBAAmB,MAAM;AAExF,QAAM,cAAc,UAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,oBAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,YAAS,qBAA0C;AAAA,QAEnD,aAAa,SAAS,oBAAC,YAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,mBACvB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG,MAAM;AAAA,YAEV,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
-  "names": ["React"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable consistent-return */\n/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, isLoading, isSkeleton, applyAriaDisabled } =\n    props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (internalRef?.current) internalRef.current.blur();\n  }, [internalRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n      externallyControlledIsOpen: menuState,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const hideTooltip = useCallback(() => {\n    setMenuState(false, 'blur');\n  }, [setMenuState]);\n\n  useOnClickOutside(refs.reference, hideTooltip, refs.floating);\n\n  return (\n    <StyledContainer\n      data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n      innerRef={refs.setReference}\n      className={className}\n      applyAriaDisabled={applyAriaDisabled}\n      {...xStyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <LiveRegion />\n      <Controls />\n\n      {menuState && inline ? <MenuList /> : null}\n      {menuState && !inline && refs.reference ? (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          floatingStyles={floatingStyles}\n          isOpen={menuState}\n          context={context}\n          {...props.popperProps}\n          key={`${isLoading}${isSkeleton}`} // to force remount when loading/skeleton changes\n        >\n          <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n            <MenuList />\n          </StyledPopperWrapper>\n        </FloatingWrapper>\n      ) : null}\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwEnB,SASE,KATF;AAcI;AApFR,SAAgB,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,oBAAoB,uBAAoD;AACjF,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,IAAI,WAAW,eAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,WAAW,YAAY,kBAAkB,IAC3G;AACF,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,IAAI,mBAAmB,MAAM;AAEnE,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,oBAAkB,KAAK,WAAW,aAAa,KAAK,QAAQ;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,UAAU,KAAK;AAAA,MACf;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,YAAS;AAAA,QAET,aAAa,SAAS,oBAAC,YAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,KAAK,YAC5B;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG,MAAM;AAAA,YACV,KAAK,GAAG,SAAS,GAAG,UAAU;AAAA;AAAA,UAE9B,oBAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "names": []
 }

package/dist/esm/parts/controls/Controls.js

@@ -16,9 +16,7 @@ import {
   StyleHeaderActionsSeparator
 } from "./styled.js";
 import { useOnPillsNavigation } from "./useOnPillsNavigation.js";
-const Controls = ({
-  mutableUpdateStyles
-}) => {
+const Controls = () => {
   const {
     props,
     props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },
@@ -114,7 +112,7 @@ const Controls = ({
             children: selectedValues && inputValue === "" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: selectedValues.label }) : null
           }
         ) }),
-        /* @__PURE__ */ jsx(ControlsInput, { mutableUpdateStyles }),
+        /* @__PURE__ */ jsx(ControlsInput, {}),
         /* @__PURE__ */ jsx("div", {}),
         !inline && /* @__PURE__ */ jsxs(
           StyledHeaderActionsWrapper,

package/dist/esm/parts/controls/Controls.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport {\n  StyledControlsWrapper,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n  StyledSingleSelectWraper,\n  StyleHeaderActionsSeparator,\n} from './styled.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\n\nexport const Controls = ({\n  mutableUpdateStyles,\n}: {\n  mutableUpdateStyles: DSComboboxT.PopperMutableUpdateStylesT;\n}): JSX.Element => {\n  const {\n    props,\n    props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    inputValue,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n    shouldPreventContextMenuOpening,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (applyAriaDisabled || shouldPreventContextMenuOpening) {\n      internalRef.current?.focus();\n      return;\n    }\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false, 'click');\n      setFocusOptionIdx('');\n      internalRef.current?.blur();\n      return;\n    }\n    internalRef.current?.focus();\n    setMenuState(true, 'click');\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    disabled,\n    listRef,\n    hasFocus,\n    menuState,\n    inline,\n    setMenuState,\n    focusOptionIdx,\n    readOnly,\n    applyAriaDisabled,\n    isMenuOpenableWithReadOnly,\n  ]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      if (menuState || disabled || shouldPreventContextMenuOpening) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true, 'pill-click');\n      }\n    },\n    [applyAriaDisabled, menuState, disabled, internalRef, setMenuState, shouldPreventContextMenuOpening],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === internalRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [internalRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '8px', '2.231rem'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      innerRef={controlsWrapperRef}\n      readOnly={readOnly}\n      cols={cols}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      aria-disabled={applyAriaDisabled}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <StyledSingleSelectWraper\n              readOnly={readOnly}\n              data-testid={ComboboxDataTestid.SELECTED_VALUES}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n            >\n              {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n            </StyledSingleSelectWraper>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput mutableUpdateStyles={mutableUpdateStyles} />\n      {/** This empty div is a gap between the input and the drop down indicator  */}\n      <div />\n      {!inline && (\n        <StyledHeaderActionsWrapper\n          justifyItems=\"center\"\n          cols={['min-content', 'minmax(28px,max-content)']}\n          justifyContent=\"flex-end\"\n        >\n          <StyleHeaderActionsSeparator disabled={disabled} applyAriaDisabled={applyAriaDisabled} readOnly={readOnly} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport {\n  StyledControlsWrapper,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n  StyledSingleSelectWraper,\n  StyleHeaderActionsSeparator,\n} from './styled.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\n\nexport const Controls = (): JSX.Element => {\n  const {\n    props,\n    props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    inputValue,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n    shouldPreventContextMenuOpening,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (applyAriaDisabled || shouldPreventContextMenuOpening) {\n      internalRef.current?.focus();\n      return;\n    }\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false, 'click');\n      setFocusOptionIdx('');\n      internalRef.current?.blur();\n      return;\n    }\n    internalRef.current?.focus();\n    setMenuState(true, 'click');\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    disabled,\n    listRef,\n    hasFocus,\n    menuState,\n    inline,\n    setMenuState,\n    focusOptionIdx,\n    readOnly,\n    applyAriaDisabled,\n    isMenuOpenableWithReadOnly,\n  ]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      if (menuState || disabled || shouldPreventContextMenuOpening) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true, 'pill-click');\n      }\n    },\n    [applyAriaDisabled, menuState, disabled, internalRef, setMenuState, shouldPreventContextMenuOpening],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === internalRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [internalRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '8px', '2.231rem'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      innerRef={controlsWrapperRef}\n      readOnly={readOnly}\n      cols={cols}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      aria-disabled={applyAriaDisabled}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <StyledSingleSelectWraper\n              readOnly={readOnly}\n              data-testid={ComboboxDataTestid.SELECTED_VALUES}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n            >\n              {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n            </StyledSingleSelectWraper>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {/** This empty div is a gap between the input and the drop down indicator  */}\n      <div />\n      {!inline && (\n        <StyledHeaderActionsWrapper\n          justifyItems=\"center\"\n          cols={['min-content', 'minmax(28px,max-content)']}\n          justifyContent=\"flex-end\"\n        >\n          <StyleHeaderActionsSeparator disabled={disabled} applyAriaDisabled={applyAriaDisabled} readOnly={readOnly} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }