@elliemae/ds-form-combobox 3.70.0-next.2 → 3.70.0-next.4

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

@@ -36,7 +36,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_menu_items = require("@elliemae/ds-menu-items");
-var import_ds_system = require("@elliemae/ds-system");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_Section = require("../Section.js");
 var import_ComboBoxCTX = require("../../ComboBoxCTX.js");
@@ -44,17 +43,6 @@ var import_styled = require("./styled.js");
 var import_listHelper = require("../../utils/listHelper.js");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_constants = require("../../constants.js");
-var import_constants2 = require("../../constants/index.js");
-const StyledSingleMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.SingleMenuItem, {
-  name: import_constants2.DSFormComboboxName,
-  slot: import_constants2.FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
-  preserveLegacyDataTestId: true
-})``;
-const StyledMultiMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.MultiMenuItem, {
-  name: import_constants2.DSFormComboboxName,
-  slot: import_constants2.FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,
-  preserveLegacyDataTestId: true
-})``;
 const ItemRenderer = ({ index, extraItemProps }) => {
   const {
     props,
@@ -74,7 +62,7 @@ const ItemRenderer = ({ index, extraItemProps }) => {
   );
   const option = extraItemProps?.itemList?.[index];
   const multiple = Array.isArray(selectedValues);
-  const CBItem = multiple ? StyledMultiMenuItem : StyledSingleMenuItem;
+  const CBItem = multiple ? import_styled.StyledMultiMenuItem : import_styled.StyledSingleMenuItem;
   const handleOnCreateClick = (0, import_react.useCallback)(() => {
     if (inputValue && onCreate) {
       onCreate(inputValue);
@@ -92,7 +80,11 @@ const ItemRenderer = ({ index, extraItemProps }) => {
           if (!multiple) {
             setMenuState(false, "selectOption", e);
           }
-          onChange((0, import_listHelper.getSuggestedValueOnChange)(currentOption, selectedValues, isNonClearable), currentOption, e);
+          onChange(
+            (0, import_listHelper.getSuggestedValueOnChange)(currentOption, selectedValues, isNonClearable),
+            currentOption,
+            e
+          );
         }
       }
       e.stopPropagation();
@@ -113,7 +105,7 @@ const ItemRenderer = ({ index, extraItemProps }) => {
         dsId: dsId.toString(),
         ...rest
       };
-      if (type === import_constants.MENU_OPTION_TYPES.SECTION) {
+      if (option.type === import_constants.MENU_OPTION_TYPES.SECTION) {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_Section.Section,
           {
@@ -133,34 +125,31 @@ const ItemRenderer = ({ index, extraItemProps }) => {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_menu_items.Separator, { ...generalProps, render: void 0 });
       }
       if (option.type === import_constants.MENU_OPTION_TYPES.OPTION) {
-        return (
-          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            CBItem,
-            {
-              ...generalProps,
-              value: option.value,
-              label: option.label,
-              dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
-              disabled,
-              applyAriaDisabled: applyAriaDisabled || itemReadOnly,
-              onClick: (e) => {
-                if (applyAriaDisabled) return;
-                handleClick(option, e);
-              },
-              onMouseDown: handleOnMouseDown,
-              isActive: dsId === focusOptionIdx,
-              tabIndex: -1,
-              isSelected: (0, import_listHelper.isSelected)(selectedValues, option),
-              getOwnerProps,
-              getOwnerPropsArguments
-            }
-          )
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CBItem,
+          {
+            ...generalProps,
+            value: option.value,
+            label: option.label,
+            dataTestid: import_ComboboxDataTestids.ComboboxDataTestid.OPTION,
+            disabled,
+            applyAriaDisabled: applyAriaDisabled || itemReadOnly,
+            onClick: (e) => {
+              if (applyAriaDisabled) return;
+              handleClick(option, e);
+            },
+            onMouseDown: handleOnMouseDown,
+            isActive: dsId === focusOptionIdx,
+            tabIndex: -1,
+            isSelected: (0, import_listHelper.isSelected)(selectedValues, option),
+            getOwnerProps,
+            getOwnerPropsArguments
+          }
         );
       }
       if (type === import_constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE) {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          StyledSingleMenuItem,
+          import_styled.StyledSingleMenuItem,
           {
             getOwnerProps,
             getOwnerPropsArguments,
@@ -168,8 +157,8 @@ const ItemRenderer = ({ index, extraItemProps }) => {
             isActive: dsId === focusOptionIdx,
             ...generalProps,
             render: ({ label: labelCreatable }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { p: "8px", cols: ["min-content", "auto"], gutter: "xxs", alignItems: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCreatableLabel, { children: "Add:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCreatableValue, { children: `"${labelCreatable}"` })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCreatableLabel, { getOwnerProps, children: "Add:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCreatableValue, { getOwnerProps, children: `"${labelCreatable}"` })
             ] }),
             label: option.label,
             onClick: handleOnCreateClick,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { styled } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nconst StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): JSX.Element => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? StyledMultiMenuItem : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable), currentOption, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            // @ts-expect-error - this needs to be rewritten, broken typescript typings?\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            tabIndex={-1}\n            isSelected={isSelected(selectedValues, option)}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n            tabIndex={-1}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Gb;AAvGV,mBAAwD;AACxD,qBAAqB;AACrB,2BAAyD;AACzD,uBAAuB;AACvB,8BAA8B;AAC9B,qBAAwB;AACxB,yBAAgC;AAChC,oBAA2D;AAC3D,wBAAsD;AACtD,iCAAmC;AAEnC,uBAA8D;AAC9D,IAAAA,oBAAwD;AASxD,MAAM,2BAAuB,yBAAO,qCAAgB;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAED,MAAM,0BAAsB,yBAAO,oCAAe;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,eAAe,CAAC,EAAE,OAAO,eAAe,MAAkC;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,UAAU,gBAAgB,gBAAgB,UAAU,YAAY,SAAS;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAC7C,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,SAAS,gBAAgB,WAAW,KAAK;AAE/C,QAAM,WAAW,MAAM,QAAQ,cAAc;AAC7C,QAAM,SAAS,WAAW,sBAAsB;AAEhD,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,QAAI,cAAc,UAAU;AAC1B,eAAS,UAAU;AACnB,oBAAc,EAAE;AAChB,UAAI,SAAU,UAAS,YAAY,UAAU;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,YAAY,YAAY,aAAa,CAAC;AAE9D,QAAM,kBAAc;AAAA,IAClB,CAAC,eAAuC,MAAwB;AAC9D,UAAI,SAAU;AACd,UAAI,cAAc,SAAS,mCAAkB,QAAQ;AACnD,YAAI,CAAC,cAAc,UAAU;AAC3B,cAAI,SAAU,UAAS,YAAY,UAAU;AAC7C,wBAAc,EAAE;AAChB,cAAI,CAAC,UAAU;AACb,yBAAa,OAAO,gBAAgB,CAAC;AAAA,UACvC;AACA,uBAAS,6CAA0B,eAAe,gBAAgB,cAAc,GAAG,eAAe,CAAC;AAAA,QACrG;AAAA,MACF;AAEA,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,gBAAgB,YAAY,UAAU,cAAc,QAAQ;AAAA,EACzE;AAGA,QAAM,wBAAoB,0BAAY,CAAC,MAAuC;AAC5E,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAGL,aAAO,sBAAQ,MAAM;AACnB,QAAI,QAAQ;AACV,YAAM,EAAE,MAAM,MAAM,UAAU,mBAAmB,UAAU,cAAc,GAAG,KAAK,IAAI;AACrF,YAAM,eAAe;AAAA;AAAA;AAAA,QAGnB,KAAK,GAAG,IAAI;AAAA,QACZ,MAAM,KAAK,SAAS;AAAA,QACpB,GAAG;AAAA,MACL;AACA,UAAI,SAAS,mCAAkB,SAAS;AACtC,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,OAAO;AAAA,YACb,GAAG;AAAA,YAEJ,SAAS,OAAO;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,MAEJ;AACA,UAAI,SAAS,mCAAkB,WAAW;AACxC,eAAO,4CAAC,kCAAW,GAAG,cAAc,QAAQ,QAAW;AAAA,MACzD;AACA,UAAI,OAAO,SAAS,mCAAkB,QAAQ;AAC5C;AAAA;AAAA,UAEE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,OAAO,OAAO;AAAA,cACd,OAAO,OAAO;AAAA,cACd,YAAY,8CAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAAwB;AAChC,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,UAAU;AAAA,cACV,gBAAY,8BAAW,gBAAgB,MAAM;AAAA,cAC7C;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MAEJ;AACA,UAAI,SAAS,4CAA2B,WAAW;AACjD,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,YAAY,8CAAmB;AAAA,YAC/B,UAAU,SAAS;AAAA,YAClB,GAAG;AAAA,YACJ,QAAQ,CAAC,EAAE,OAAO,eAAe,MAC/B,6CAAC,uBAAK,GAAE,OAAM,MAAM,CAAC,eAAe,MAAM,GAAG,QAAO,OAAM,YAAW,UACnE;AAAA,0DAAC,sCAAqB,kBAAI;AAAA,cAC1B,4CAAC,sCAAsB,cAAI,cAAc,KAAI;AAAA,eAC/C;AAAA,YAEF,OAAO,OAAO;AAAA,YACd,SAAS;AAAA,YACT,UAAU;AAAA;AAAA,QACZ;AAAA,MAEJ;AACA,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,gBAAgB,gBAAgB,YAAY,UAAU,YAAY,QAAQ,CAAC;AACpG;",
-  "names": ["import_constants"]
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Separator } from '@elliemae/ds-menu-items';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue, StyledSingleMenuItem, StyledMultiMenuItem } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): React.ReactElement | null => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = multiple\n    ? StyledMultiMenuItem\n    : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.OptionTypes, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n            getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable),\n            currentOption,\n            e,\n          );\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            tabIndex={-1}\n            isSelected={isSelected(selectedValues, option)}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel getOwnerProps={getOwnerProps}>Add:</StyledCreatableLabel>\n                <StyledCreatableValue getOwnerProps={getOwnerProps}>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n            tabIndex={-1}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
 }

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

@@ -55,7 +55,7 @@ const MultiSelectedValuesContainer = () => {
       {
         style: { width: multiSelectedValue.length > 0 ? "max-content" : "0px" },
         "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledDSPillGroupV2, { innerRef: pillGroupRef, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledDSPillGroupV2, { innerRef: pillGroupRef, getOwnerProps: ownerProps.getOwnerProps, children: [
           multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((pill, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_RemovableSelectedValuePill.RemovableSelectedValuePill,
             {

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 { 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 { StyledDSPillGroupV2, 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        <StyledDSPillGroupV2 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        </StyledDSPillGroupV2>\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;AD2Bf;AA3BR,8BAA8B;AAC9B,mBAAoC;AACpC,yBAA4B;AAC5B,iCAAmC;AAEnC,oBAAoD;AACpD,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,qCAAoB,UAAU,cAC5B;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;",
+  "sourcesContent": ["import { 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 { StyledDSPillGroupV2, 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  // useOwnerProps returns () => {} for getOwnerPropsArguments, but OwnerInterface expects () => object.\n  // The cast is safe \u2014 the actual return is always a plain object at runtime.\n  const ownerProps = useOwnerProps(props) as {\n    getOwnerProps: () => object;\n    getOwnerPropsArguments: () => object;\n  };\n\n  return useMemo(\n    () => (\n      <div\n        style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n        data-testid={ComboboxDataTestid.SELECTED_VALUES}\n      >\n        <StyledDSPillGroupV2 innerRef={pillGroupRef} getOwnerProps={ownerProps.getOwnerProps}>\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        </StyledDSPillGroupV2>\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;ADgCf;AAhCR,8BAA8B;AAC9B,mBAAoC;AACpC,yBAA4B;AAC5B,iCAAmC;AAEnC,oBAAoD;AACpD,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;AAGzC,QAAM,iBAAa,uCAAc,KAAK;AAKtC,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,8CAAmB;AAAA,QAEhC,uDAAC,qCAAoB,UAAU,cAAc,eAAe,WAAW,eACpE;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

@@ -76,7 +76,11 @@ const RemovableSelectedValuePill = (props) => {
       onRemove: (e) => {
         if (readOnly) return;
         e.stopPropagation();
-        onChange((0, import_listHelper.getSuggestedValueOnChange)(pill, selectedValues), pill, e);
+        onChange(
+          (0, import_listHelper.getSuggestedValueOnChange)(pill, selectedValues),
+          pill,
+          e
+        );
         internalRef.current?.focus();
       },
       ...ownerProps

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 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      labelTruncated\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,gBAAc;AAAA,MACd,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,IAjBC,KAAK;AAAA,EAkBZ;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: () => object;\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      labelTruncated\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n          getSuggestedValueOnChange(pill, selectedValues),\n          pill,\n          e,\n        );\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,gBAAc;AAAA,MACd,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,QAAC;AAAA,cACC,6CAA0B,MAAM,cAAc;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AACA,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IArBC,KAAK;AAAA,EAsBZ;AAEJ;",
   "names": ["ComboBoxContext", "React"]
 }

package/dist/cjs/parts/styled.js

@@ -62,7 +62,10 @@ const StyledDSPillV2 = (0, import_ds_system.styled)(import_ds_pills_v2.DSPillV2,
 
   color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
 `;
-const StyledDSPillGroupV2 = (0, import_ds_system.styled)(import_ds_pills_v2.DSPillGroupV2)`
+const StyledDSPillGroupV2 = (0, import_ds_system.styled)(import_ds_pills_v2.DSPillGroupV2, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.PILL_GROUP
+})`
   display: grid;
 `;
 //# 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 { DSPillV2, DSPillGroupV2 } 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\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n *\n * Not adding the slot, because this a regression.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2)`\n  display: grid;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAwC;AACxC,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;AAY9E,MAAM,0BAAsB,yBAAO,gCAAa;AAAA;AAAA;",
+  "sourcesContent": ["import { DSPillV2, DSPillGroupV2 } 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\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP,\n})`\n  display: grid;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAwC;AACxC,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;AAU9E,MAAM,0BAAsB,yBAAO,kCAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;",
   "names": []
 }

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

@@ -37,6 +37,7 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_DSCommonComboboxPropsT = require("./DSCommonComboboxPropsT.js");
+var import_constants = require("./constants/index.js");
 const defaultProps = {
   hasError: false,
   inline: false,
@@ -59,6 +60,7 @@ const defaultProps = {
   menuMaxHeight: 300
 };
 const ComboboxPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSFormComboboxName, import_constants.FORM_COMBOBOX_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   ...import_DSCommonComboboxPropsT.commonComboboxPropTypes,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createRef } from 'react';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSComboboxMultiT } from './DSComboboxMultiT.js';\nimport type { DSComboboxSingleT } from './DSComboboxSingleT.js';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\n\nexport declare namespace DSComboboxT {\n  export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n  export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n  export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n  export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n  export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n  export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n  export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n  export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  type SingleComboboxRequirePropsRenameInterface = Omit<DSComboboxSingleT.RequiredProps, 'selectedValue'> & {\n    selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n  };\n\n  export type RequiredProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.RequiredProps\n    : SingleComboboxRequirePropsRenameInterface;\n\n  export type DefaultProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.DefaultProps : DSComboboxSingleT.DefaultProps;\n  export type OptionalProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.OptionalProps : DSComboboxSingleT.OptionalProps;\n  export type PropsOptional = OptionalProps; // alias for backwards compatibility\n\n  export type Props<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.Props\n    : Omit<DSComboboxSingleT.Props, 'selectedValue'> & { selectedValues: DSComboboxSingleT.Props['selectedValue'] };\n  export type InternalProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.InternalProps\n    : Omit<DSComboboxSingleT.InternalProps, 'selectedValue'> & {\n        selectedValues: DSComboboxSingleT.InternalProps['selectedValue'];\n      };\n}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: () => {},\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n  readOnly: false,\n  isMenuOpenableWithReadOnly: false,\n  forceFocusFirstOptionOnType: false,\n  menuMaxHeight: 300,\n};\n\n/**\n * Unified public schema used by polymorphic combobox consumption.\n *\n * `selectedValues` shape determines effective usage mode:\n * - object or null => single-select contract\n * - array => multi-select contract\n */\nexport const ComboboxPropTypes: DSPropTypesSchema<DSComboboxT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...commonComboboxPropTypes,\n  onChange: PropTypes.func.isRequired\n    .description(\n      'Polymorphic change callback. For single-select, suggestedValue is ItemOption | null; for multi-select, suggestedValue is ItemOption[].',\n    )\n    .signature(\n      '(suggestedValue: ItemOption | ItemOption[] | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n    ),\n  selectedValues: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])),\n    PropTypes.object,\n    PropTypes.oneOf([null]),\n  ]).isRequired.description(\n    'Either a single selectable option or an array of selectable options. This shape determines single vs multi selection behavior. Null is valid only for single-select with no selection; an empty array is valid only for multi-select with no selection.',\n  ),\n};\n\nexport const ComboboxPropTypesSchema = ComboboxPropTypes as unknown as ValidationMap<DSComboboxT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAE1B,8BAAuE;AAGvE,oCAAqE;AAyD9D,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,cAAU,wBAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,eAAe;AACjB;AASO,MAAM,oBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,kCAAU,UAAU;AAAA,IAClC,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,MAAM,CAAC,CAAC;AAAA,IACzD,kCAAU;AAAA,IACV,kCAAU,MAAM,CAAC,IAAI,CAAC;AAAA,EACxB,CAAC,EAAE,WAAW;AAAA,IACZ;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import { createRef } from 'react';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSComboboxMultiT } from './DSComboboxMultiT.js';\nimport type { DSComboboxSingleT } from './DSComboboxSingleT.js';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxT {\n  export type SlotFunctionArguments = {\n    dsComboboxRoot: () => object;\n    dsComboboxInputWrapper: () => object;\n    dsComboboxInput: () => object;\n    dsComboboxDropdownButton: () => object;\n    dsComboboxFastList: () => object;\n    dsComboboxSectionWrapper: () => object;\n    dsComboboxSectionLabel: () => object;\n    dsComboboxSingleMenuItem: () => object;\n    dsComboboxMultiMenuItem: () => object;\n    dsComboboxLoadingIndicator: () => object;\n    dsComboboxSkeletonMenuItem: () => object;\n    dsComboboxPill: () => object;\n    dsComboboxPillGroup: () => object;\n    dsComboboxPopperWrapper: () => object;\n    dsComboboxSelection: () => object;\n    dsComboboxSingleValueWrapper: () => object;\n    dsComboboxHeaderActions: () => object;\n    dsComboboxHeaderActionsSeparator: () => object;\n    dsComboboxInputPlaceholder: () => object;\n    dsComboboxInputFieldWrapper: () => object;\n    dsComboboxListWrapper: () => object;\n    dsComboboxNoResults: () => object;\n    dsComboboxCreatableLabel: () => object;\n    dsComboboxCreatableValue: () => object;\n    dsComboboxMenuItemsWrapper: () => object;\n    dsComboboxLoadingWrapper: () => object;\n  };\n\n  export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n  export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n  export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n  export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n  export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n  export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n  export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n  export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n  type SingleComboboxRequirePropsRenameInterface = Omit<DSComboboxSingleT.RequiredProps, 'selectedValue'> & {\n    selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n  };\n\n  export type RequiredProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.RequiredProps\n    : SingleComboboxRequirePropsRenameInterface;\n\n  export type DefaultProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.DefaultProps : DSComboboxSingleT.DefaultProps;\n  export type OptionalProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.OptionalProps : DSComboboxSingleT.OptionalProps;\n  export type PropsOptional = OptionalProps; // alias for backwards compatibility\n\n  export type Props<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.Props\n    : Omit<DSComboboxSingleT.Props, 'selectedValue'> & { selectedValues: DSComboboxSingleT.Props['selectedValue'] };\n  export type InternalProps<\n    T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n      | DSCommonComboboxPropsT.ItemOption\n      | DSCommonComboboxPropsT.ItemOption[],\n  > = T extends DSCommonComboboxPropsT.ItemOption[]\n    ? DSComboboxMultiT.InternalProps\n    : Omit<DSComboboxSingleT.InternalProps, 'selectedValue'> & {\n        selectedValues: DSComboboxSingleT.InternalProps['selectedValue'];\n      };\n}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: () => {},\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n  readOnly: false,\n  isMenuOpenableWithReadOnly: false,\n  forceFocusFirstOptionOnType: false,\n  menuMaxHeight: 300,\n};\n\n/**\n * Unified public schema used by polymorphic combobox consumption.\n *\n * `selectedValues` shape determines effective usage mode:\n * - object or null => single-select contract\n * - array => multi-select contract\n */\nexport const ComboboxPropTypes: DSPropTypesSchema<DSComboboxT.Props> = {\n  ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...commonComboboxPropTypes,\n  onChange: PropTypes.func.isRequired\n    .description(\n      'Polymorphic change callback. For single-select, suggestedValue is ItemOption | null; for multi-select, suggestedValue is ItemOption[].',\n    )\n    .signature(\n      '(suggestedValue: ItemOption | ItemOption[] | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n    ),\n  selectedValues: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])),\n    PropTypes.object,\n    PropTypes.oneOf([null]),\n  ]).isRequired.description(\n    'Either a single selectable option or an array of selectable options. This shape determines single vs multi selection behavior. Null is valid only for single-select with no selection; an empty array is valid only for multi-select with no selection.',\n  ),\n};\n\nexport const ComboboxPropTypesSchema = ComboboxPropTypes as unknown as ValidationMap<DSComboboxT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAE1B,8BAKO;AAGP,oCAAqE;AACrE,uBAAwD;AAsFjD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,cAAU,wBAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,eAAe;AACjB;AASO,MAAM,oBAA0D;AAAA,EACrE,OAAG,kDAAyB,qCAAoB,oCAAmB;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,kCAAU,UAAU;AAAA,IAClC,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,MAAM,CAAC,CAAC;AAAA,IACzD,kCAAU;AAAA,IACV,kCAAU,MAAM,CAAC,IAAI,CAAC;AAAA,EACxB,CAAC,EAAE,WAAW;AAAA,IACZ;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/cjs/typescript-testing/slot-props.js

@@ -0,0 +1,82 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+const SlotPropsAsObj = {
+  dsComboboxRoot: { "aria-label": "just a typescript test" },
+  dsComboboxInputWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxInput: { "aria-label": "just a typescript test" },
+  dsComboboxDropdownButton: { "aria-label": "just a typescript test" },
+  dsComboboxFastList: { "aria-label": "just a typescript test" },
+  dsComboboxSectionWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxSectionLabel: { "aria-label": "just a typescript test" },
+  dsComboboxSingleMenuItem: { "aria-label": "just a typescript test" },
+  dsComboboxMultiMenuItem: { "aria-label": "just a typescript test" },
+  dsComboboxLoadingIndicator: { "aria-label": "just a typescript test" },
+  dsComboboxSkeletonMenuItem: { "aria-label": "just a typescript test" },
+  dsComboboxPill: { "aria-label": "just a typescript test" },
+  dsComboboxPillGroup: { "aria-label": "just a typescript test" },
+  dsComboboxPopperWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxSelection: { "aria-label": "just a typescript test" },
+  dsComboboxSingleValueWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxHeaderActions: { "aria-label": "just a typescript test" },
+  dsComboboxHeaderActionsSeparator: { "aria-label": "just a typescript test" },
+  dsComboboxInputPlaceholder: { "aria-label": "just a typescript test" },
+  dsComboboxInputFieldWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxListWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxNoResults: { "aria-label": "just a typescript test" },
+  dsComboboxCreatableLabel: { "aria-label": "just a typescript test" },
+  dsComboboxCreatableValue: { "aria-label": "just a typescript test" },
+  dsComboboxMenuItemsWrapper: { "aria-label": "just a typescript test" },
+  dsComboboxLoadingWrapper: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsComboboxRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxInputWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxInput: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxDropdownButton: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxFastList: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSectionWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSectionLabel: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSingleMenuItem: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxMultiMenuItem: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxLoadingIndicator: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSkeletonMenuItem: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxPill: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxPillGroup: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxPopperWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSelection: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxSingleValueWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxHeaderActions: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxHeaderActionsSeparator: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxInputPlaceholder: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxInputFieldWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxListWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxNoResults: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxCreatableLabel: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxCreatableValue: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxMenuItemsWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsComboboxLoadingWrapper: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/cjs/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\n\n// Object form \u2014 static slot props (validates slot keys exist on Props)\nconst SlotPropsAsObj: Partial<DSComboboxT.Props> = {\n  dsComboboxRoot: { 'aria-label': 'just a typescript test' },\n  dsComboboxInputWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxInput: { 'aria-label': 'just a typescript test' },\n  dsComboboxDropdownButton: { 'aria-label': 'just a typescript test' },\n  dsComboboxFastList: { 'aria-label': 'just a typescript test' },\n  dsComboboxSectionWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxSectionLabel: { 'aria-label': 'just a typescript test' },\n  dsComboboxSingleMenuItem: { 'aria-label': 'just a typescript test' },\n  dsComboboxMultiMenuItem: { 'aria-label': 'just a typescript test' },\n  dsComboboxLoadingIndicator: { 'aria-label': 'just a typescript test' },\n  dsComboboxSkeletonMenuItem: { 'aria-label': 'just a typescript test' },\n  dsComboboxPill: { 'aria-label': 'just a typescript test' },\n  dsComboboxPillGroup: { 'aria-label': 'just a typescript test' },\n  dsComboboxPopperWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxSelection: { 'aria-label': 'just a typescript test' },\n  dsComboboxSingleValueWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxHeaderActions: { 'aria-label': 'just a typescript test' },\n  dsComboboxHeaderActionsSeparator: { 'aria-label': 'just a typescript test' },\n  dsComboboxInputPlaceholder: { 'aria-label': 'just a typescript test' },\n  dsComboboxInputFieldWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxListWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxNoResults: { 'aria-label': 'just a typescript test' },\n  dsComboboxCreatableLabel: { 'aria-label': 'just a typescript test' },\n  dsComboboxCreatableValue: { 'aria-label': 'just a typescript test' },\n  dsComboboxMenuItemsWrapper: { 'aria-label': 'just a typescript test' },\n  dsComboboxLoadingWrapper: { 'aria-label': 'just a typescript test' },\n};\n\n// Function form \u2014 dynamic slot props (validates SlotFunctionArguments is complete)\nconst SlotPropsAsFunctions: DSComboboxT.SlotFunctionArguments = {\n  dsComboboxRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxInputWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxInput: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxDropdownButton: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxFastList: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSectionWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSectionLabel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSingleMenuItem: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxMultiMenuItem: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxLoadingIndicator: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSkeletonMenuItem: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxPill: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxPillGroup: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxPopperWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSelection: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxSingleValueWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxHeaderActions: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxHeaderActionsSeparator: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxInputPlaceholder: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxInputFieldWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxListWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxNoResults: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxCreatableLabel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxCreatableValue: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxMenuItemsWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsComboboxLoadingWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if any slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/typescript-testing/typescript-combobox-multi-valid.js

@@ -0,0 +1,158 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import__ = require("../index.js");
+const noop = (..._args) => {
+};
+const inputRef = import_react.default.createRef();
+const testRequiredProps = {
+  allOptions: [],
+  selectedValues: [],
+  onChange: noop
+};
+const testOptionalProps = {
+  placeholder: "Select options",
+  autoFocus: false,
+  filteredOptions: [],
+  isMenuOpen: false,
+  onMenuChange: noop,
+  onCreate: noop,
+  onFilter: noop,
+  onCancel: noop,
+  onSelectAll: noop,
+  onKeyDown: noop,
+  isLoading: false,
+  menuMinWidth: 200
+  // popperProps omitted — DSFloatingWrapperT.Props requires children/innerRef/isOpen/floatingStyles
+};
+const testPartialDefaults = {
+  hasError: false,
+  inline: false,
+  disabled: false,
+  applyAriaDisabled: false,
+  readOnly: false,
+  isNonClearable: false,
+  onlySelectable: false
+};
+const testCompleteDefaults = {
+  startPlacementPreference: "bottom-start",
+  placementOrderPreference: ["bottom-start", "top-start"],
+  hasError: false,
+  inline: false,
+  withoutPortal: false,
+  isNonClearable: false,
+  disabled: false,
+  noOptionsMessage: "No Matches Found",
+  innerRef: inputRef,
+  useMask: noop,
+  onlySelectable: false,
+  isSkeleton: false,
+  applyAriaDisabled: false,
+  readOnly: false,
+  isMenuOpenableWithReadOnly: false,
+  forceFocusFirstOptionOnType: false,
+  menuMaxHeight: 300
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testCompleteDefaults
+};
+const testProps = {
+  allOptions: [],
+  selectedValues: [],
+  onChange: noop,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  allOptions: [],
+  selectedValues: [],
+  onChange: noop,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testExplicitDefinition = {
+  allOptions: [],
+  selectedValues: [],
+  onChange: noop,
+  placeholder: "Select options",
+  autoFocus: false,
+  hasError: false,
+  inline: false,
+  disabled: false,
+  applyAriaDisabled: false,
+  readOnly: false,
+  isNonClearable: false,
+  onlySelectable: false,
+  noOptionsMessage: "No Matches Found",
+  withoutPortal: false,
+  isSkeleton: false,
+  isMenuOpenableWithReadOnly: false,
+  forceFocusFirstOptionOnType: false,
+  menuMaxHeight: 300,
+  innerRef: inputRef,
+  useMask: noop,
+  startPlacementPreference: "bottom-start",
+  placementOrderPreference: ["bottom-start", "top-start"],
+  menuMinWidth: 200,
+  isLoading: false,
+  onFilter: noop,
+  onCancel: noop
+};
+const testInferredTypeCompatibility = {
+  allOptions: [],
+  selectedValues: [],
+  onChange: noop,
+  hasError: false,
+  disabled: false,
+  placeholder: "Select options",
+  menuMaxHeight: 300
+};
+const ExampleUsageMulti = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSComboBox, { allOptions: [], selectedValues: [], onChange: noop }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.DSComboBox,
+    {
+      allOptions: [],
+      selectedValues: [],
+      onChange: noop,
+      placeholder: "Select options",
+      hasError: false,
+      disabled: false,
+      applyAriaDisabled: false,
+      readOnly: false,
+      isNonClearable: false,
+      onlySelectable: false,
+      noOptionsMessage: "No Matches Found"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSComboBox, { allOptions: [], selectedValues: [], onChange: noop, ...testOptionalProps, ...testPartialDefaults })
+] });
+//# sourceMappingURL=typescript-combobox-multi-valid.js.map