@elliemae/ds-form-combobox 3.60.0-next.2 → 3.60.0-next.20

package/dist/cjs/constants/index.js

@@ -48,7 +48,8 @@ const FORM_COMBOBOX_SLOTS = {
   SINGLE_MENU_ITEM: "single-menu-item",
   MULTI_MENU_ITEM: "multi-menu-item",
   LOADING_INDICATOR: "loading-indicator",
-  SKELETON_MENU_ITEM: "skeleton-menu-item"
+  SKELETON_MENU_ITEM: "skeleton-menu-item",
+  PILL: "pill"
 };
 const FORM_COMBOBOX_DATA_TESTID = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSFormComboboxName, FORM_COMBOBOX_SLOTS),
@@ -61,6 +62,7 @@ const FORM_COMBOBOX_DATA_TESTID = {
   SELECTED_VALUES: "combobox-selected-values",
   DROPDOWN: "combobox-dropdown-btn",
   OPTION: "combobox-option",
-  ALLY_SELECTED_VALUES: "combobox-ally-selected-values"
+  ALLY_SELECTED_VALUES: "combobox-ally-selected-values",
+  PILL: "ds-pill-wrapper"
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;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,OAAG,0CAAwB,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;",
+  "sourcesContent": ["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  PILL: 'pill',\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  PILL: 'ds-pill-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;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;AAAA,EACpB,MAAM;AACR;AAGO,MAAM,4BAA4B;AAAA,EACvC,OAAG,0CAAwB,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;AAAA,EACtB,MAAM;AACR;",
   "names": []
 }

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

@@ -54,47 +54,21 @@ const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
 `;
 const estimatedSize = () => 32;
-const MenuList = () => {
+const ContentComp = () => {
   const {
     props,
-    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },
-    controlsWrapperRef,
+    props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton, selectedValues },
     listRef,
-    wrapperListRef,
     correctOptions: filteredOptions,
     instanceUid
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
   const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
-  const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
-  const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
-    e.preventDefault();
-  }, []);
-  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)(
+  const isMulti = Array.isArray(selectedValues);
+  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 });
+  const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;
+  if (shouldShowNoResults)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styled.StyledNoResultsWrapper,
       {
         id: `combo-listbox-${instanceUid}`,
@@ -103,7 +77,36 @@ const MenuList = () => {
         children: noOptionsMessage
       }
     );
-  }
+  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",
+        "aria-multiselectable": isMulti,
+        "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
+    }
+  ) });
+};
+const MenuList = () => {
+  const {
+    props: { menuMinWidth, inline },
+    controlsWrapperRef,
+    wrapperListRef
+  } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
+  const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
+  const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledListWrapper,
     {
@@ -112,7 +115,7 @@ const MenuList = () => {
       onMouseDown: preventLoseInputFocus,
       width,
       minWidth: menuMinWidth,
-      children: content
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentComp, {})
     }
   );
 };

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, 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;",
+  "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\nconst ContentComp = () => {\n  const {\n    props,\n    props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton, selectedValues },\n    listRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const isMulti = Array.isArray(selectedValues);\n\n  if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n  if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n  const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;\n  if (shouldShowNoResults)\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  return (\n    <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n      <StyledFastList\n        dsFastlistWrapperList={{\n          role: 'listbox',\n          'aria-multiselectable': isMulti,\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};\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { menuMinWidth, inline },\n    controlsWrapperRef,\n    wrapperListRef,\n  } = useContext(ComboBoxContext);\n\n  const { width } = useOnElementResize(controlsWrapperRef);\n\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      <ContentComp />\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCE;AAvCzB,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;AAE5B,MAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,kBAAkB,eAAe,UAAU,YAAY,eAAe;AAAA,IAC1F;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAC7C,QAAM,UAAU,MAAM,QAAQ,cAAc;AAE5C,MAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B,eAA8B;AAClG,MAAI,UAAW,QAAO,4CAAC,4CAAiB,eAA8B;AAEtE,QAAM,sBAAsB,CAAC,aAAa,iBAAiB,UAAU,OAAO;AAC5E,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAGJ,SACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,IAAC;AAAA;AAAA,MACC,uBAAuB;AAAA,QACrB,MAAM;AAAA,QACN,wBAAwB;AAAA,QACxB,eAAe,8CAAmB;AAAA,QAClC,cAAc;AAAA,MAChB;AAAA,MACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,MAC/B,WAAW;AAAA,MACX,OAAO,gBAAgB;AAAA,MACvB,cAAc;AAAA,MACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,MAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,MACjD,cAAc;AAAA,MACd;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AAEvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAEV,sDAAC,eAAY;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

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

@@ -33,19 +33,23 @@ __export(MultiSelectedValuesContainer_exports, {
 module.exports = __toCommonJS(MultiSelectedValuesContainer_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_ds_pills_v2 = require("@elliemae/ds-pills-v2");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
-var import_useGroupPills = require("./useGroupPills.js");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
+var import_styled = require("../styled.js");
 var import_RemovableSelectedValuePill = require("./RemovableSelectedValuePill.js");
+var import_useGroupPills = require("./useGroupPills.js");
 const MultiSelectedValuesContainer = () => {
   const {
+    props,
     props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },
     pillGroupRef
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   const multiSelectedValue = selectedValues;
   const correctPillsToShow = (0, import_useGroupPills.useGroupPills)();
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
   return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
@@ -57,12 +61,13 @@ const MultiSelectedValuesContainer = () => {
             import_RemovableSelectedValuePill.RemovableSelectedValuePill,
             {
               pill,
-              trailingComma: (disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length
+              trailingComma: (disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length,
+              ownerProps
             },
             pill.dsId
           )),
           multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ds_pills_v2.DSPillV2,
+            import_styled.StyledDSPillV2,
             {
               size: "s",
               labelTruncated: false,
@@ -70,14 +75,24 @@ const MultiSelectedValuesContainer = () => {
               type: "value",
               disabled,
               applyAriaDisabled: applyAriaDisabledToContainer,
-              readOnly
+              readOnly,
+              className: "ds-pill-wrapper ds-pill-wrapper-value",
+              ...ownerProps
             },
             "grouped"
           )
         ] })
       }
     ),
-    [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer, readOnly]
+    [
+      pillGroupRef,
+      multiSelectedValue,
+      correctPillsToShow,
+      disabled,
+      applyAriaDisabledToContainer,
+      readOnly,
+      ownerProps
+    ]
   );
 };
 //# sourceMappingURL=MultiSelectedValuesContainer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n  const {\n    props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  // this is always an array because logic in controls component\n  const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n  const correctPillsToShow = useGroupPills();\n\n  return useMemo(\n    () => (\n      <div\n        style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n        data-testid={ComboboxDataTestid.SELECTED_VALUES}\n      >\n        <DSPillGroupV2 innerRef={pillGroupRef}>\n          {multiSelectedValue.length > 0 &&\n            multiSelectedValue\n              .slice(0, correctPillsToShow)\n              .map((pill, idx) => (\n                <RemovableSelectedValuePill\n                  key={pill.dsId}\n                  pill={pill}\n                  trailingComma={\n                    ((disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow) ||\n                    (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n                  }\n                />\n              ))}\n          {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n            <DSPillV2\n              size=\"s\"\n              labelTruncated={false}\n              key=\"grouped\"\n              label={`+${multiSelectedValue.length - correctPillsToShow}`}\n              type=\"value\"\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabledToContainer}\n              readOnly={readOnly}\n            />\n          )}\n        </DSPillGroupV2>\n      </div>\n    ),\n\n    [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer, readOnly],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBf;AAxBR,mBAA2C;AAC3C,yBAAwC;AACxC,yBAA4B;AAC5B,2BAA8B;AAE9B,iCAAmC;AACnC,wCAA2C;AAEpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,8BAA8B,SAAS;AAAA,IAC7F;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,yBAAqB,oCAAc;AAEzC,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,8CAAmB;AAAA,QAEhC,uDAAC,oCAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,MAAM,QACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,gBACI,YAAY,gCAAgC,aAAa,MAAM,IAAI,sBACpE,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB;AAAA;AAAA,YAJzE,KAAK;AAAA,UAMZ,CACD;AAAA,UACJ,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS,kBAAkB;AAAA,cACzD,MAAK;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA;AAAA,YALI;AAAA,UAMN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,UAAU,8BAA8B,QAAQ;AAAA,EACzG;AACF;",
+  "sourcesContent": ["import { DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { StyledDSPillV2 } from '../styled.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nimport { useGroupPills } from './useGroupPills.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n  const {\n    props,\n    props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  // this is always an array because logic in controls component\n  const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n  const correctPillsToShow = useGroupPills();\n  const ownerProps = useOwnerProps(props);\n\n  return useMemo(\n    () => (\n      <div\n        style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n        data-testid={ComboboxDataTestid.SELECTED_VALUES}\n      >\n        <DSPillGroupV2 innerRef={pillGroupRef}>\n          {multiSelectedValue.length > 0 &&\n            multiSelectedValue\n              .slice(0, correctPillsToShow)\n              .map((pill, idx) => (\n                <RemovableSelectedValuePill\n                  key={pill.dsId}\n                  pill={pill}\n                  trailingComma={\n                    ((disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow) ||\n                    (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n                  }\n                  ownerProps={ownerProps}\n                />\n              ))}\n          {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n            <StyledDSPillV2\n              size=\"s\"\n              labelTruncated={false}\n              key=\"grouped\"\n              label={`+${multiSelectedValue.length - correctPillsToShow}`}\n              type=\"value\"\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabledToContainer}\n              readOnly={readOnly}\n              className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n              {...ownerProps}\n            />\n          )}\n        </DSPillGroupV2>\n      </div>\n    ),\n\n    [\n      pillGroupRef,\n      multiSelectedValue,\n      correctPillsToShow,\n      disabled,\n      applyAriaDisabledToContainer,\n      readOnly,\n      ownerProps,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4Bf;AA5BR,yBAA8B;AAC9B,8BAA8B;AAC9B,mBAAoC;AACpC,yBAA4B;AAC5B,iCAAmC;AAEnC,oBAA+B;AAC/B,wCAA2C;AAC3C,2BAA8B;AAEvB,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,8BAA8B,SAAS;AAAA,IAC7F;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,yBAAqB,oCAAc;AACzC,QAAM,iBAAa,uCAAc,KAAK;AAEtC,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,8CAAmB;AAAA,QAEhC,uDAAC,oCAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,MAAM,QACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,gBACI,YAAY,gCAAgC,aAAa,MAAM,IAAI,sBACpE,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB;AAAA,cAE9E;AAAA;AAAA,YANK,KAAK;AAAA,UAOZ,CACD;AAAA,UACJ,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS,kBAAkB;AAAA,cACzD,MAAK;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,cACA,WAAU;AAAA,cACT,GAAG;AAAA;AAAA,YAPA;AAAA,UAQN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["ComboBoxContext"]
 }

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

@@ -34,11 +34,11 @@ module.exports = __toCommonJS(RemovableSelectedValuePill_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_ds_pills_v2 = require("@elliemae/ds-pills-v2");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
 var import_listHelper = require("../../utils/listHelper.js");
+var import_styled = require("../styled.js");
 const RemovableSelectedValuePill = (props) => {
-  const { pill, trailingComma } = props;
+  const { pill, trailingComma, ownerProps } = props;
   const {
     props: {
       onChange,
@@ -55,13 +55,19 @@ const RemovableSelectedValuePill = (props) => {
     if (applyAriaDisabledToContainer || readOnly) return "labelOnly";
     return "removable";
   }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);
+  const className = import_react.default.useMemo(() => {
+    if (type === "removable") return "ds-pill-wrapper ds-pill-wrapper-removable";
+    if (type === "labelOnly") return "ds-pill-wrapper ds-pill-wrapper-label";
+    return "ds-pill-wrapper ds-pill-wrapper-value";
+  }, [type]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_pills_v2.DSPillV2,
+    import_styled.StyledDSPillV2,
     {
       size: "s",
       label: pill.label,
-      disabled,
+      disabled: disabled || pill.disabled,
       type,
+      className,
       applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled,
       readOnly,
       trailingComma,
@@ -71,7 +77,8 @@ const RemovableSelectedValuePill = (props) => {
         e.stopPropagation();
         onChange((0, import_listHelper.getSuggestedValueOnChange)(pill, selectedValues), pill, e);
         internalRef.current?.focus();
-      }
+      },
+      ...ownerProps
     },
     pill.value
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n  trailingComma?: boolean;\n}> = (props) => {\n  const { pill, trailingComma } = props;\n  const {\n    props: {\n      onChange,\n      isNonClearable,\n      disabled,\n      selectedValues,\n      applyAriaDisabled: applyAriaDisabledToContainer,\n      readOnly,\n    },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const type = React.useMemo(() => {\n    if (disabled || isNonClearable) return 'value';\n    if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n    return 'removable';\n  }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={type}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n      readOnly={readOnly}\n      trailingComma={trailingComma}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        internalRef.current?.focus();\n      }}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAkC;AAClC,yBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AAEnC,MAAM,6BAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,cAAc,IAAI;AAChC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,OAAO,aAAAC,QAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,qBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA;AAAA,IAdK,KAAK;AAAA,EAeZ;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n  trailingComma?: boolean;\n  ownerProps?: {\n    getOwnerProps: () => DSComboboxT.InternalProps;\n    getOwnerPropsArguments: () => object;\n  };\n}> = (props) => {\n  const { pill, trailingComma, ownerProps } = props;\n  const {\n    props: {\n      onChange,\n      isNonClearable,\n      disabled,\n      selectedValues,\n      applyAriaDisabled: applyAriaDisabledToContainer,\n      readOnly,\n    },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const type = React.useMemo(() => {\n    if (disabled || isNonClearable) return 'value';\n    if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n    return 'removable';\n  }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n  /**\n   * WORKAROUND: Manual className management\n   *\n   * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n   * When using the slot system (ownerProps), the internal component's className\n   * is overridden by the styled-component's generated className, causing\n   * DSPillV2's variant-specific classes to be lost.\n   *\n   * These classes are required for correct styling of different pill types:\n   * - ds-pill-wrapper-removable: Interactive pills with remove button\n   * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n   * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n   *\n   * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n   * when styled(InnerComponent) is used. Current implementation overwrites className\n   * instead of merging it.\n   *\n   * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n   * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n   *\n   *\n   * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n   */\n  const className = React.useMemo(() => {\n    if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n    if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n    return 'ds-pill-wrapper ds-pill-wrapper-value';\n  }, [type]);\n\n  return (\n    <StyledDSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled || pill.disabled}\n      type={type}\n      className={className}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n      readOnly={readOnly}\n      trailingComma={trailingComma}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        internalRef.current?.focus();\n      }}\n      {...ownerProps}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DnB;AA/DJ,mBAAkC;AAClC,yBAA4B;AAE5B,wBAA0C;AAC1C,oBAA+B;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,OAAO,aAAAC,QAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAY,aAAAA,QAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,qBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IAhBC,KAAK;AAAA,EAiBZ;AAEJ;",
   "names": ["ComboBoxContext", "React"]
 }

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

@@ -51,7 +51,7 @@ const useGroupPills = () => {
   const selectedValuesLength = Math.min(30, multiSelectedValues.length);
   const [pillsToShow, setPillsToShow] = (0, import_react.useState)(selectedValuesLength);
   const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
-  const { width: widthInput } = (0, import_useOnElementResize.useOnElementResize)(innerRef || null);
+  const { width: widthInput } = (0, import_useOnElementResize.useOnElementResize)(innerRef);
   (0, import_react.useEffect)(() => {
     if (selectedValuesLength !== pillsToShow) {
       setPillsToShow(selectedValuesLength);

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

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

package/dist/cjs/parts/styled.js

@@ -28,11 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
-  StyledA11yNotVisible: () => StyledA11yNotVisible
+  StyledA11yNotVisible: () => StyledA11yNotVisible,
+  StyledDSPillV2: () => StyledDSPillV2
 });
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
+var import_ds_pills_v2 = require("@elliemae/ds-pills-v2");
 var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../constants/index.js");
 const StyledA11yNotVisible = import_ds_system.styled.span`
   position: absolute;
   width: 1px;
@@ -45,4 +48,17 @@ const StyledA11yNotVisible = import_ds_system.styled.span`
   clip-path: inset(100%);
   white-space: nowrap;
 `;
+const StyledDSPillV2 = (0, import_ds_system.styled)(import_ds_pills_v2.DSPillV2, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.PILL,
+  preserveLegacyDataTestId: true
+})`
+  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {
+  if (disabled) return theme.colors.neutral["080"];
+  if (applyAriaDisabled || readOnly) return theme.colors.neutral["050"];
+  return theme.colors.brand[250];
+}};
+
+  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
+`;
 //# sourceMappingURL=styled.js.map

package/dist/cjs/parts/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAyB;AACzB,uBAAuB;AACvB,uBAAwD;AACjD,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,qBAAiB,yBAAO,6BAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MACvD,YAAY,qBAAqB,WAAW,YAAY,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;",
   "names": []
 }

package/dist/cjs/sharedTypes.js.map

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

package/dist/esm/constants/index.js

@@ -13,7 +13,8 @@ const FORM_COMBOBOX_SLOTS = {
   SINGLE_MENU_ITEM: "single-menu-item",
   MULTI_MENU_ITEM: "multi-menu-item",
   LOADING_INDICATOR: "loading-indicator",
-  SKELETON_MENU_ITEM: "skeleton-menu-item"
+  SKELETON_MENU_ITEM: "skeleton-menu-item",
+  PILL: "pill"
 };
 const FORM_COMBOBOX_DATA_TESTID = {
   ...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),
@@ -26,7 +27,8 @@ const FORM_COMBOBOX_DATA_TESTID = {
   SELECTED_VALUES: "combobox-selected-values",
   DROPDOWN: "combobox-dropdown-btn",
   OPTION: "combobox-option",
-  ALLY_SELECTED_VALUES: "combobox-ally-selected-values"
+  ALLY_SELECTED_VALUES: "combobox-ally-selected-values",
+  PILL: "ds-pill-wrapper"
 };
 export {
   DSFormComboboxName,

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  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;",
+  "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  PILL: 'pill',\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  PILL: 'ds-pill-wrapper',\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;AAAA,EACpB,MAAM;AACR;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;AAAA,EACtB,MAAM;AACR;",
   "names": []
 }

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

@@ -21,47 +21,21 @@ const StyledItemsWrapper = styled(Grid)`
   max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
 `;
 const estimatedSize = () => 32;
-const MenuList = () => {
+const ContentComp = () => {
   const {
     props,
-    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },
-    controlsWrapperRef,
+    props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton, selectedValues },
     listRef,
-    wrapperListRef,
     correctOptions: filteredOptions,
     instanceUid
   } = useContext(ComboBoxContext);
   const { getOwnerProps } = useOwnerProps(props);
-  const { width } = useOnElementResize(controlsWrapperRef);
-  const preventLoseInputFocus = useCallback((e) => {
-    e.preventDefault();
-  }, []);
-  let content;
-  if (isSkeleton) {
-    content = /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid, getOwnerProps });
-  } else if (isLoading) {
-    content = /* @__PURE__ */ jsx(LoadingContainer, { getOwnerProps });
-  } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {
-    content = /* @__PURE__ */ jsx(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ jsx(
-      StyledFastList,
-      {
-        dsFastlistWrapperList: {
-          role: "listbox",
-          "data-testid": ComboboxDataTestid.LIST,
-          "aria-label": "listbox"
-        },
-        dsFastlistItem: { role: "none" },
-        actionRef: listRef,
-        count: filteredOptions.length,
-        ItemRenderer,
-        extraItemProps: { itemList: filteredOptions },
-        getId: (index) => filteredOptions[index].dsId,
-        estimateSize: estimatedSize,
-        getOwnerProps
-      }
-    ) });
-  } else {
-    content = /* @__PURE__ */ jsx(
+  const isMulti = Array.isArray(selectedValues);
+  if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid, getOwnerProps });
+  if (isLoading) return /* @__PURE__ */ jsx(LoadingContainer, { getOwnerProps });
+  const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;
+  if (shouldShowNoResults)
+    return /* @__PURE__ */ jsx(
       StyledNoResultsWrapper,
       {
         id: `combo-listbox-${instanceUid}`,
@@ -70,7 +44,36 @@ const MenuList = () => {
         children: noOptionsMessage
       }
     );
-  }
+  return /* @__PURE__ */ jsx(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ jsx(
+    StyledFastList,
+    {
+      dsFastlistWrapperList: {
+        role: "listbox",
+        "aria-multiselectable": isMulti,
+        "data-testid": ComboboxDataTestid.LIST,
+        "aria-label": "listbox"
+      },
+      dsFastlistItem: { role: "none" },
+      actionRef: listRef,
+      count: filteredOptions.length,
+      ItemRenderer,
+      extraItemProps: { itemList: filteredOptions },
+      getId: (index) => filteredOptions[index].dsId,
+      estimateSize: estimatedSize,
+      getOwnerProps
+    }
+  ) });
+};
+const MenuList = () => {
+  const {
+    props: { menuMinWidth, inline },
+    controlsWrapperRef,
+    wrapperListRef
+  } = useContext(ComboBoxContext);
+  const { width } = useOnElementResize(controlsWrapperRef);
+  const preventLoseInputFocus = useCallback((e) => {
+    e.preventDefault();
+  }, []);
   return /* @__PURE__ */ jsx(
     StyledListWrapper,
     {
@@ -79,7 +82,7 @@ const MenuList = () => {
       onMouseDown: preventLoseInputFocus,
       width,
       minWidth: menuMinWidth,
-      children: content
+      children: /* @__PURE__ */ jsx(ContentComp, {})
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACgDT;AAhDd,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,kBAAkB;AAC3B,SAA2B,cAAc;AACzC,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,qBAAqB,OAAO,IAAI;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,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AAEvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,MAAI;AAEJ,MAAI,YAAY;AACd,cAAU,oBAAC,qBAAkB,aAA0B,eAA8B;AAAA,EACvF,WAAW,WAAW;AACpB,cAAU,oBAAC,oBAAiB,eAA8B;AAAA,EAC5D,YAAY,iBAAiB,UAAU,KAAK,KAAK,UAAU;AACzD,cACE,oBAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,MAAC;AAAA;AAAA,QACC,uBAAuB;AAAA,UACrB,MAAM;AAAA,UACN,eAAe,mBAAmB;AAAA,UAClC,cAAc;AAAA,QAChB;AAAA,QACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,QAC/B,WAAW;AAAA,QACX,OAAO,gBAAgB;AAAA,QACvB;AAAA,QACA,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,mBAAmB;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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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\nconst ContentComp = () => {\n  const {\n    props,\n    props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton, selectedValues },\n    listRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const isMulti = Array.isArray(selectedValues);\n\n  if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n  if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n  const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;\n  if (shouldShowNoResults)\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  return (\n    <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n      <StyledFastList\n        dsFastlistWrapperList={{\n          role: 'listbox',\n          'aria-multiselectable': isMulti,\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};\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { menuMinWidth, inline },\n    controlsWrapperRef,\n    wrapperListRef,\n  } = useContext(ComboBoxContext);\n\n  const { width } = useOnElementResize(controlsWrapperRef);\n\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      <ContentComp />\n    </StyledListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuCE;AAvCzB,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,kBAAkB;AAC3B,SAA2B,cAAc;AACzC,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,qBAAqB,OAAO,IAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AAE5B,MAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,kBAAkB,eAAe,UAAU,YAAY,eAAe;AAAA,IAC1F;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,UAAU,MAAM,QAAQ,cAAc;AAE5C,MAAI,WAAY,QAAO,oBAAC,qBAAkB,aAA0B,eAA8B;AAClG,MAAI,UAAW,QAAO,oBAAC,oBAAiB,eAA8B;AAEtE,QAAM,sBAAsB,CAAC,aAAa,iBAAiB,UAAU,OAAO;AAC5E,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,mBAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAGJ,SACE,oBAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,IAAC;AAAA;AAAA,MACC,uBAAuB;AAAA,QACrB,MAAM;AAAA,QACN,wBAAwB;AAAA,QACxB,eAAe,mBAAmB;AAAA,QAClC,cAAc;AAAA,MAChB;AAAA,MACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,MAC/B,WAAW;AAAA,MACX,OAAO,gBAAgB;AAAA,MACvB;AAAA,MACA,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,MAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,MACjD,cAAc;AAAA,MACd;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AAEvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAEV,8BAAC,eAAY;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

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

@@ -1,18 +1,22 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useContext } from "react";
-import { DSPillGroupV2, DSPillV2 } from "@elliemae/ds-pills-v2";
+import { DSPillGroupV2 } from "@elliemae/ds-pills-v2";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
+import { useContext, useMemo } from "react";
 import ComboBoxContext from "../../ComboBoxCTX.js";
-import { useGroupPills } from "./useGroupPills.js";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
+import { StyledDSPillV2 } from "../styled.js";
 import { RemovableSelectedValuePill } from "./RemovableSelectedValuePill.js";
+import { useGroupPills } from "./useGroupPills.js";
 const MultiSelectedValuesContainer = () => {
   const {
+    props,
     props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },
     pillGroupRef
   } = useContext(ComboBoxContext);
   const multiSelectedValue = selectedValues;
   const correctPillsToShow = useGroupPills();
+  const ownerProps = useOwnerProps(props);
   return useMemo(
     () => /* @__PURE__ */ jsx(
       "div",
@@ -24,12 +28,13 @@ const MultiSelectedValuesContainer = () => {
             RemovableSelectedValuePill,
             {
               pill,
-              trailingComma: (disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length
+              trailingComma: (disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length,
+              ownerProps
             },
             pill.dsId
           )),
           multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /* @__PURE__ */ jsx(
-            DSPillV2,
+            StyledDSPillV2,
             {
               size: "s",
               labelTruncated: false,
@@ -37,14 +42,24 @@ const MultiSelectedValuesContainer = () => {
               type: "value",
               disabled,
               applyAriaDisabled: applyAriaDisabledToContainer,
-              readOnly
+              readOnly,
+              className: "ds-pill-wrapper ds-pill-wrapper-value",
+              ...ownerProps
             },
             "grouped"
           )
         ] })
       }
     ),
-    [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer, readOnly]
+    [
+      pillGroupRef,
+      multiSelectedValue,
+      correctPillsToShow,
+      disabled,
+      applyAriaDisabledToContainer,
+      readOnly,
+      ownerProps
+    ]
   );
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n  const {\n    props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  // this is always an array because logic in controls component\n  const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n  const correctPillsToShow = useGroupPills();\n\n  return useMemo(\n    () => (\n      <div\n        style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n        data-testid={ComboboxDataTestid.SELECTED_VALUES}\n      >\n        <DSPillGroupV2 innerRef={pillGroupRef}>\n          {multiSelectedValue.length > 0 &&\n            multiSelectedValue\n              .slice(0, correctPillsToShow)\n              .map((pill, idx) => (\n                <RemovableSelectedValuePill\n                  key={pill.dsId}\n                  pill={pill}\n                  trailingComma={\n                    ((disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow) ||\n                    (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n                  }\n                />\n              ))}\n          {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n            <DSPillV2\n              size=\"s\"\n              labelTruncated={false}\n              key=\"grouped\"\n              label={`+${multiSelectedValue.length - correctPillsToShow}`}\n              type=\"value\"\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabledToContainer}\n              readOnly={readOnly}\n            />\n          )}\n        </DSPillGroupV2>\n      </div>\n    ),\n\n    [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer, readOnly],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwBf,SAKQ,KALR;AAxBR,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,eAAe,gBAAgB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AAEpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,8BAA8B,SAAS;AAAA,IAC7F;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,qBAAqB,cAAc;AAEzC,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,mBAAmB;AAAA,QAEhC,+BAAC,iBAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,MAAM,QACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,gBACI,YAAY,gCAAgC,aAAa,MAAM,IAAI,sBACpE,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB;AAAA;AAAA,YAJzE,KAAK;AAAA,UAMZ,CACD;AAAA,UACJ,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS,kBAAkB;AAAA,cACzD,MAAK;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA;AAAA,YALI;AAAA,UAMN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,UAAU,8BAA8B,QAAQ;AAAA,EACzG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { StyledDSPillV2 } from '../styled.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nimport { useGroupPills } from './useGroupPills.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n  const {\n    props,\n    props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },\n    pillGroupRef,\n  } = useContext(ComboBoxContext);\n\n  // this is always an array because logic in controls component\n  const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n  const correctPillsToShow = useGroupPills();\n  const ownerProps = useOwnerProps(props);\n\n  return useMemo(\n    () => (\n      <div\n        style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n        data-testid={ComboboxDataTestid.SELECTED_VALUES}\n      >\n        <DSPillGroupV2 innerRef={pillGroupRef}>\n          {multiSelectedValue.length > 0 &&\n            multiSelectedValue\n              .slice(0, correctPillsToShow)\n              .map((pill, idx) => (\n                <RemovableSelectedValuePill\n                  key={pill.dsId}\n                  pill={pill}\n                  trailingComma={\n                    ((disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow) ||\n                    (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n                  }\n                  ownerProps={ownerProps}\n                />\n              ))}\n          {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n            <StyledDSPillV2\n              size=\"s\"\n              labelTruncated={false}\n              key=\"grouped\"\n              label={`+${multiSelectedValue.length - correctPillsToShow}`}\n              type=\"value\"\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabledToContainer}\n              readOnly={readOnly}\n              className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n              {...ownerProps}\n            />\n          )}\n        </DSPillGroupV2>\n      </div>\n    ),\n\n    [\n      pillGroupRef,\n      multiSelectedValue,\n      correctPillsToShow,\n      disabled,\n      applyAriaDisabledToContainer,\n      readOnly,\n      ownerProps,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4Bf,SAKQ,KALR;AA5BR,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,YAAY,eAAe;AACpC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAEvB,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,8BAA8B,SAAS;AAAA,IAC7F;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,qBAAqB,cAAc;AACzC,QAAM,aAAa,cAAc,KAAK;AAEtC,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,mBAAmB;AAAA,QAEhC,+BAAC,iBAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,MAAM,QACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,gBACI,YAAY,gCAAgC,aAAa,MAAM,IAAI,sBACpE,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB;AAAA,cAE9E;AAAA;AAAA,YANK,KAAK;AAAA,UAOZ,CACD;AAAA,UACJ,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS,kBAAkB;AAAA,cACzD,MAAK;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,cACA,WAAU;AAAA,cACT,GAAG;AAAA;AAAA,YAPA;AAAA,UAQN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { useContext } from "react";
-import { DSPillV2 } from "@elliemae/ds-pills-v2";
 import ComboBoxContext from "../../ComboBoxCTX.js";
 import { getSuggestedValueOnChange } from "../../utils/listHelper.js";
+import { StyledDSPillV2 } from "../styled.js";
 const RemovableSelectedValuePill = (props) => {
-  const { pill, trailingComma } = props;
+  const { pill, trailingComma, ownerProps } = props;
   const {
     props: {
       onChange,
@@ -22,13 +22,19 @@ const RemovableSelectedValuePill = (props) => {
     if (applyAriaDisabledToContainer || readOnly) return "labelOnly";
     return "removable";
   }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);
+  const className = React2.useMemo(() => {
+    if (type === "removable") return "ds-pill-wrapper ds-pill-wrapper-removable";
+    if (type === "labelOnly") return "ds-pill-wrapper ds-pill-wrapper-label";
+    return "ds-pill-wrapper ds-pill-wrapper-value";
+  }, [type]);
   return /* @__PURE__ */ jsx(
-    DSPillV2,
+    StyledDSPillV2,
     {
       size: "s",
       label: pill.label,
-      disabled,
+      disabled: disabled || pill.disabled,
       type,
+      className,
       applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled,
       readOnly,
       trailingComma,
@@ -38,7 +44,8 @@ const RemovableSelectedValuePill = (props) => {
         e.stopPropagation();
         onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);
         internalRef.current?.focus();
-      }
+      },
+      ...ownerProps
     },
     pill.value
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n  trailingComma?: boolean;\n}> = (props) => {\n  const { pill, trailingComma } = props;\n  const {\n    props: {\n      onChange,\n      isNonClearable,\n      disabled,\n      selectedValues,\n      applyAriaDisabled: applyAriaDisabledToContainer,\n      readOnly,\n    },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const type = React.useMemo(() => {\n    if (disabled || isNonClearable) return 'value';\n    if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n    return 'removable';\n  }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={type}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n      readOnly={readOnly}\n      trailingComma={trailingComma}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        internalRef.current?.focus();\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+BnB;AA/BJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAEnC,MAAM,6BAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,cAAc,IAAI;AAChC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,iBAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA;AAAA,IAdK,KAAK;AAAA,EAeZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n  trailingComma?: boolean;\n  ownerProps?: {\n    getOwnerProps: () => DSComboboxT.InternalProps;\n    getOwnerPropsArguments: () => object;\n  };\n}> = (props) => {\n  const { pill, trailingComma, ownerProps } = props;\n  const {\n    props: {\n      onChange,\n      isNonClearable,\n      disabled,\n      selectedValues,\n      applyAriaDisabled: applyAriaDisabledToContainer,\n      readOnly,\n    },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const type = React.useMemo(() => {\n    if (disabled || isNonClearable) return 'value';\n    if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n    return 'removable';\n  }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n  /**\n   * WORKAROUND: Manual className management\n   *\n   * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n   * When using the slot system (ownerProps), the internal component's className\n   * is overridden by the styled-component's generated className, causing\n   * DSPillV2's variant-specific classes to be lost.\n   *\n   * These classes are required for correct styling of different pill types:\n   * - ds-pill-wrapper-removable: Interactive pills with remove button\n   * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n   * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n   *\n   * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n   * when styled(InnerComponent) is used. Current implementation overwrites className\n   * instead of merging it.\n   *\n   * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n   * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n   *\n   *\n   * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n   */\n  const className = React.useMemo(() => {\n    if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n    if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n    return 'ds-pill-wrapper ds-pill-wrapper-value';\n  }, [type]);\n\n  return (\n    <StyledDSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled || pill.disabled}\n      type={type}\n      className={className}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n      readOnly={readOnly}\n      trailingComma={trailingComma}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        internalRef.current?.focus();\n      }}\n      {...ownerProps}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+DnB;AA/DJ,OAAOA,UAAS,kBAAkB;AAClC,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAYA,OAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,iBAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IAhBC,KAAK;AAAA,EAiBZ;AAEJ;",
   "names": ["React"]
 }

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

@@ -18,7 +18,7 @@ const useGroupPills = () => {
   const selectedValuesLength = Math.min(30, multiSelectedValues.length);
   const [pillsToShow, setPillsToShow] = useState(selectedValuesLength);
   const { width } = useOnElementResize(controlsWrapperRef);
-  const { width: widthInput } = useOnElementResize(innerRef || null);
+  const { width: widthInput } = useOnElementResize(innerRef);
   useEffect(() => {
     if (selectedValuesLength !== pillsToShow) {
       setPillsToShow(selectedValuesLength);

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

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

package/dist/esm/parts/styled.js

@@ -1,5 +1,7 @@
 import * as React from "react";
+import { DSPillV2 } from "@elliemae/ds-pills-v2";
 import { styled } from "@elliemae/ds-system";
+import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../constants/index.js";
 const StyledA11yNotVisible = styled.span`
   position: absolute;
   width: 1px;
@@ -12,7 +14,21 @@ const StyledA11yNotVisible = styled.span`
   clip-path: inset(100%);
   white-space: nowrap;
 `;
+const StyledDSPillV2 = styled(DSPillV2, {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.PILL,
+  preserveLegacyDataTestId: true
+})`
+  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {
+  if (disabled) return theme.colors.neutral["080"];
+  if (applyAriaDisabled || readOnly) return theme.colors.neutral["050"];
+  return theme.colors.brand[250];
+}};
+
+  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
+`;
 export {
-  StyledA11yNotVisible
+  StyledA11yNotVisible,
+  StyledDSPillV2
 };
 //# sourceMappingURL=styled.js.map

package/dist/esm/parts/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AACjD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MACvD,YAAY,qBAAqB,WAAW,YAAY,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;",
   "names": []
 }

package/dist/esm/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/sharedTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\n\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    internalRef: React.RefObject<HTMLInputElement>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string, opts: DSFastListT.ScrollToOptions) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.MutableRefObject<DSComboboxT.ActionRefVirtualized>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    setMenuState: (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\n    optionsPerSection: DSComboboxT.OptionTypes[];\n    shouldPreventContextMenuOpening: boolean;\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\n\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    internalRef: React.RefObject<HTMLInputElement>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string, opts?: DSFastListT.ScrollToOptions) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.MutableRefObject<DSComboboxT.ActionRefVirtualized>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    setMenuState: (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\n    optionsPerSection: DSComboboxT.OptionTypes[];\n    shouldPreventContextMenuOpening: boolean;\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,yBAAyB;AAgC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -11,6 +11,7 @@ export declare const FORM_COMBOBOX_SLOTS: {
     readonly MULTI_MENU_ITEM: "multi-menu-item";
     readonly LOADING_INDICATOR: "loading-indicator";
     readonly SKELETON_MENU_ITEM: "skeleton-menu-item";
+    readonly PILL: "pill";
 };
 export declare const FORM_COMBOBOX_DATA_TESTID: {
     CONTROLS_WRAPPER: string;
@@ -22,6 +23,7 @@ export declare const FORM_COMBOBOX_DATA_TESTID: {
     DROPDOWN: string;
     OPTION: string;
     ALLY_SELECTED_VALUES: string;
+    PILL: string;
     ROOT: "ds-combobox-root";
     INPUT_WRAPPER: "ds-combobox-input-wrapper";
     DROPDOWN_BUTTON: "ds-combobox-dropdown-button";

package/dist/types/parts/multi-selected-values-container/RemovableSelectedValuePill.d.ts

@@ -4,4 +4,8 @@ export declare const RemovableSelectedValuePill: React.ComponentType<{
     pill: DSComboboxT.ItemOption;
     applyAriaDisabled?: boolean;
     trailingComma?: boolean;
+    ownerProps?: {
+        getOwnerProps: () => DSComboboxT.InternalProps;
+        getOwnerPropsArguments: () => object;
+    };
 }>;

package/dist/types/parts/styled.d.ts

@@ -1 +1,13 @@
 export declare const StyledA11yNotVisible: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+/**
+ * Combobox-specific pill styling with stateful behavior
+ *
+ * DSPillV2 is stateless by design, but Combobox requires pills to visually
+ * reflect container state (disabled/aria-disabled/readOnly). This wrapper
+ * applies context-aware colors based on Combobox's interaction state.
+ *
+ * These styles were previously part of the Pills component but have been
+ * moved here as Pills were refactored to be stateless. Combobox maintains
+ * this stateful behavior as a specific use case requirement.
+ */
+export declare const StyledDSPillV2: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-pills-v2").DSPillT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-pills-v2").DSPillT.Props>>, never>;

package/dist/types/sharedTypes.d.ts

@@ -8,7 +8,7 @@ export declare namespace DSComboboxInternalsT {
         menuState: boolean;
         setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;
         pillGroupRef: React.RefObject<HTMLDivElement>;
-        scrollOptionIntoView: (dsId: string, opts: DSFastListT.ScrollToOptions) => void;
+        scrollOptionIntoView: (dsId: string, opts?: DSFastListT.ScrollToOptions) => void;
         setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
         hasFocus: boolean;
         listRef: React.MutableRefObject<DSComboboxT.ActionRefVirtualized>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-combobox",
-  "version": "3.60.0-next.2",
+  "version": "3.60.0-next.20",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Combobox",
   "files": [
@@ -35,51 +35,47 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
-    "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
-    "lint": "node ../../../scripts/lint.mjs --fix",
-    "lint:strict": "node ../../../scripts/lint-strict.mjs",
-    "dts": "node ../../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
-    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
-  },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.60.0-next.2",
-    "@elliemae/ds-circular-progress-indicator": "3.60.0-next.2",
-    "@elliemae/ds-fast-list": "3.60.0-next.2",
-    "@elliemae/ds-floating-context": "3.60.0-next.2",
-    "@elliemae/ds-form-checkbox": "3.60.0-next.2",
-    "@elliemae/ds-grid": "3.60.0-next.2",
-    "@elliemae/ds-icons": "3.60.0-next.2",
-    "@elliemae/ds-menu-items": "3.60.0-next.2",
-    "@elliemae/ds-pills-v2": "3.60.0-next.2",
-    "@elliemae/ds-props-helpers": "3.60.0-next.2",
-    "@elliemae/ds-system": "3.60.0-next.2",
-    "@elliemae/ds-truncated-tooltip-text": "3.60.0-next.2",
-    "react-virtual": "catalog:",
-    "uid": "catalog:"
+    "uid": "^2.0.2",
+    "@elliemae/ds-button-v2": "3.60.0-next.20",
+    "@elliemae/ds-fast-list": "3.60.0-next.20",
+    "@elliemae/ds-circular-progress-indicator": "3.60.0-next.20",
+    "@elliemae/ds-menu-items": "3.60.0-next.20",
+    "@elliemae/ds-floating-context": "3.60.0-next.20",
+    "@elliemae/ds-icons": "3.60.0-next.20",
+    "@elliemae/ds-grid": "3.60.0-next.20",
+    "@elliemae/ds-props-helpers": "3.60.0-next.20",
+    "@elliemae/ds-truncated-tooltip-text": "3.60.0-next.20",
+    "@elliemae/ds-system": "3.60.0-next.20",
+    "@elliemae/ds-pills-v2": "3.60.0-next.20"
   },
   "devDependencies": {
-    "@elliemae/ds-form-helpers-mask-hooks": "3.60.0-next.2",
-    "@elliemae/ds-monorepo-devops": "3.60.0-next.2",
-    "@elliemae/ds-test-utils": "3.60.0-next.2",
-    "@elliemae/pui-cli": "catalog:",
-    "@elliemae/pui-theme": "catalog:",
-    "jest": "catalog:",
-    "styled-components": "catalog:",
-    "styled-system": "catalog:"
+    "@elliemae/pui-theme": "~2.13.0",
+    "jest": "^30.0.0",
+    "styled-components": "~5.3.9",
+    "styled-system": "^5.1.5",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.60.0-next.20",
+    "@elliemae/ds-monorepo-devops": "3.60.0-next.20",
+    "@elliemae/ds-test-utils": "3.60.0-next.20"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "styled-components": "catalog:",
-    "styled-system": "catalog:"
+    "@elliemae/pui-theme": "~2.13.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "~5.3.9",
+    "styled-system": "^5.1.5"
   },
   "publishConfig": {
     "access": "public",
     "typeSafety": false
   },
-  "gitHead": "a9ff7492ac8a5acc283cb1f59cb8c153823b24ec"
-}
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "lint:strict": "node ../../../scripts/lint-strict.mjs",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}