npm - @elliemae/ds-form-combobox - Versions diffs - 3.62.1 → 3.70.0-alpha.9 - Mend

@elliemae/ds-form-combobox 3.62.1 → 3.70.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

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

@@ -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 { 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"],
-  "mappings": "AAAA,YAAY,WAAW;AC2Bf,SAKQ,KALR;AA3BR,SAAS,qBAAqB;AAC9B,SAAS,YAAY,eAAe;AACpC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,SAAS,qBAAqB,sBAAsB;AACpD,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,uBAAoB,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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCf,SAKQ,KALR;AAhCR,SAAS,qBAAqB;AAC9B,SAAS,YAAY,eAAe;AACpC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,SAAS,qBAAqB,sBAAsB;AACpD,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;AAGzC,QAAM,aAAa,cAAc,KAAK;AAKtC,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,mBAAmB;AAAA,QAEhC,+BAAC,uBAAoB,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": []
 }

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

@@ -40,10 +40,15 @@ const RemovableSelectedValuePill = (props) => {
       trailingComma,
       tabIndex: -1,
       labelTruncated: true,
+      disableTruncationTooltip: true,
       onRemove: (e) => {
         if (readOnly) return;
         e.stopPropagation();
-        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);
+        onChange(
+          getSuggestedValueOnChange(pill, selectedValues),
+          pill,
+          e
+        );
         internalRef.current?.focus();
       },
       ...ownerProps

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

@@ -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 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"],
-  "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,gBAAc;AAAA,MACd,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,IAjBC,KAAK;AAAA,EAkBZ;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: () => 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      /**\n       * PUI-18660: intentionally unconditional for every pill type (removable/labelOnly/value),\n       * not a bug. The pill never shows its own hover tooltip on truncation here \u2014 consumers who\n       * need the full value in readOnly/aria-disabled states (where the menu can't be opened)\n       * are expected to wrap the combobox itself in DSTooltipV3. See the Heads Up entry in the\n       * v27.1 Incoming Changes release notes and the \"WithTooltip\" example in ds-form-multi-combobox.\n       */\n      disableTruncationTooltip\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"],
+  "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,gBAAc;AAAA,MAQd,0BAAwB;AAAA,MACxB,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,QAAC;AAAA,UACC,0BAA0B,MAAM,cAAc;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AACA,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IA7BC,KAAK;AAAA,EA8BZ;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/styled.js CHANGED Viewed

@@ -25,9 +25,16 @@ const StyledDSPillV2 = styled(DSPillV2, {
   return theme.colors.brand[250];
 }};
-  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
+  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {
+  if (disabled) return theme.colors.neutral["600"];
+  if (applyAriaDisabled || readOnly) return theme.colors.neutral["700"];
+  return theme.colors.brand["800"];
+}};
 `;
-const StyledDSPillGroupV2 = styled(DSPillGroupV2)`
+const StyledDSPillGroupV2 = styled(DSPillGroupV2, {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP
+})`
   display: grid;
 `;
 export {

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

@@ -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 { 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,qBAAqB;AACxC,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;AAY9E,MAAM,sBAAsB,OAAO,aAAa;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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    if (disabled) return theme.colors.neutral['600'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['700'];\n    return theme.colors.brand['800'];\n  }};\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,qBAAqB;AACxC,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,MAAM;AAC7D,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC,CAAC;AAAA;AAUI,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { createRef } from "react";
-import { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+import {
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  PropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
 import { commonComboboxPropTypes } from "./DSCommonComboboxPropsT.js";
+import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "./constants/index.js";
 const defaultProps = {
   hasError: false,
   inline: false,
@@ -24,6 +30,7 @@ const defaultProps = {
   menuMaxHeight: 300
 };
 const ComboboxPropTypes = {
+  ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SLOTS),
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
   ...commonComboboxPropTypes,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B,WAAW,wBAAwB;AAGvE,SAAS,+BAA4D;AAyD9D,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU,UAAU;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,UAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,UAAU,UAAU;AAAA,IAClC,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,MAAM,CAAC,CAAC;AAAA,IACzD,UAAU;AAAA,IACV,UAAU,MAAM,CAAC,IAAI,CAAC;AAAA,EACxB,CAAC,EAAE,WAAW;AAAA,IACZ;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 = SelectionableOptions[] | SelectionableOptions | 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 | 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 | 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 | 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 | 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 | 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,+BAA4D;AACrE,SAAS,oBAAoB,2BAA2B;AAiFjD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU,UAAU;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,yBAAyB,oBAAoB,mBAAmB;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,UAAU,UAAU;AAAA,IAClC,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,MAAM,CAAC,CAAC;AAAA,IACzD,UAAU;AAAA,IACV,UAAU,MAAM,CAAC,IAAI,CAAC;AAAA,EACxB,CAAC,EAAE,WAAW;AAAA,IACZ;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
   "names": []
 }

package/dist/esm/typescript-testing/slot-props.js ADDED Viewed

@@ -0,0 +1,59 @@
+import * as React from "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/esm/typescript-testing/slot-props.js.map ADDED Viewed

@@ -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/esm/typescript-testing/typescript-combobox-multi-valid.js ADDED Viewed

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { DSComboBox } from "../index.js";
+const noop = (..._args) => {
+};
+const inputRef = React2.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__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSComboBox, { allOptions: [], selectedValues: [], onChange: noop }),
+  /* @__PURE__ */ jsx(
+    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__ */ jsx(DSComboBox, { allOptions: [], selectedValues: [], onChange: noop, ...testOptionalProps, ...testPartialDefaults })
+] });
+//# sourceMappingURL=typescript-combobox-multi-valid.js.map

package/dist/esm/typescript-testing/typescript-combobox-multi-valid.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-combobox-multi-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSComboBox } from '../index.js';\nimport type { DSComboboxMultiT } from '../index.js';\n\n// Verify namespace exports are correctly shaped\ntype ComponentProps = DSComboboxMultiT.Props;\ntype ComponentInternalProps = DSComboboxMultiT.InternalProps;\ntype ComponentDefaultProps = DSComboboxMultiT.DefaultProps;\ntype ComponentOptionalProps = DSComboboxMultiT.OptionalProps;\ntype ComponentRequiredProps = DSComboboxMultiT.RequiredProps;\n\nconst noop = (..._args: unknown[]): void => {};\nconst inputRef = React.createRef() as React.MutableRefObject<HTMLInputElement | null>;\n\n// \u2500\u2500\u2500 Required props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testRequiredProps: ComponentRequiredProps = {\n  allOptions: [],\n  selectedValues: [],\n  onChange: noop,\n};\n\n// \u2500\u2500\u2500 Optional props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testOptionalProps: ComponentOptionalProps = {\n  placeholder: 'Select options',\n  autoFocus: false,\n  filteredOptions: [],\n  isMenuOpen: false,\n  onMenuChange: noop,\n  onCreate: noop,\n  onFilter: noop,\n  onCancel: noop,\n  onSelectAll: noop,\n  onKeyDown: noop,\n  isLoading: false,\n  menuMinWidth: 200,\n  // popperProps omitted \u2014 DSFloatingWrapperT.Props requires children/innerRef/isOpen/floatingStyles\n};\n\n// \u2500\u2500\u2500 Partial defaults (consumer usage simulation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testPartialDefaults: Partial<ComponentDefaultProps> = {\n  hasError: false,\n  inline: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  isNonClearable: false,\n  onlySelectable: false,\n};\n\n// \u2500\u2500\u2500 Complete defaults (all defaults required) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testCompleteDefaults: Required<ComponentDefaultProps> = {\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  isNonClearable: false,\n  disabled: false,\n  noOptionsMessage: 'No Matches Found',\n  innerRef: inputRef,\n  useMask: noop,\n  onlySelectable: false,\n  isSkeleton: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  isMenuOpenableWithReadOnly: false,\n  forceFocusFirstOptionOnType: false,\n  menuMaxHeight: 300,\n};\n\n// \u2500\u2500\u2500 Internal props (all defaults filled in) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testInternalProps: ComponentInternalProps = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentInternalProps;\n\n// \u2500\u2500\u2500 Public Props (defaults optional) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testProps: ComponentProps = {\n  allOptions: [],\n  selectedValues: [],\n  onChange: noop,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  allOptions: [],\n  selectedValues: [],\n  onChange: noop,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentProps;\n\n// \u2500\u2500\u2500 Explicit full definition (error pinpoints the wrong key) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testExplicitDefinition: ComponentProps = {\n  allOptions: [],\n  selectedValues: [],\n  onChange: noop,\n  placeholder: 'Select options',\n  autoFocus: false,\n  hasError: false,\n  inline: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  isNonClearable: false,\n  onlySelectable: false,\n  noOptionsMessage: 'No Matches Found',\n  withoutPortal: false,\n  isSkeleton: false,\n  isMenuOpenableWithReadOnly: false,\n  forceFocusFirstOptionOnType: false,\n  menuMaxHeight: 300,\n  innerRef: inputRef,\n  useMask: noop,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  menuMinWidth: 200,\n  isLoading: false,\n  onFilter: noop,\n  onCancel: noop,\n};\n\n// \u2500\u2500\u2500 As-syntax (error marks whole object) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testInferredTypeCompatibility = {\n  allOptions: [],\n  selectedValues: [],\n  onChange: noop,\n  hasError: false,\n  disabled: false,\n  placeholder: 'Select options',\n  menuMaxHeight: 300,\n} as ComponentProps;\n\n// \u2500\u2500\u2500 JSX usage \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst ExampleUsageMulti = () => (\n  <>\n    {/* minimum required props */}\n    <DSComboBox allOptions={[]} selectedValues={[]} onChange={noop} />\n    {/* with optional props */}\n    <DSComboBox\n      allOptions={[]}\n      selectedValues={[]}\n      onChange={noop}\n      placeholder=\"Select options\"\n      hasError={false}\n      disabled={false}\n      applyAriaDisabled={false}\n      readOnly={false}\n      isNonClearable={false}\n      onlySelectable={false}\n      noOptionsMessage=\"No Matches Found\"\n    />\n    {/* with spread optional + partial defaults */}\n    <DSComboBox allOptions={[]} selectedValues={[]} onChange={noop} {...testOptionalProps} {...testPartialDefaults} />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8IrB,mBAEE,KAFF;AA7IF,OAAOA,YAAW;AAClB,SAAS,kBAAkB;AAU3B,MAAM,OAAO,IAAI,UAA2B;AAAC;AAC7C,MAAM,WAAWA,OAAM,UAAU;AAGjC,MAAM,oBAA4C;AAAA,EAChD,YAAY,CAAC;AAAA,EACb,gBAAgB,CAAC;AAAA,EACjB,UAAU;AACZ;AAGA,MAAM,oBAA4C;AAAA,EAChD,aAAa;AAAA,EACb,WAAW;AAAA,EACX,iBAAiB,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,WAAW;AAAA,EACX,WAAW;AAAA,EACX,cAAc;AAAA;AAEhB;AAGA,MAAM,sBAAsD;AAAA,EAC1D,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;AAGA,MAAM,uBAAwD;AAAA,EAC5D,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,eAAe;AACjB;AAGA,MAAM,oBAA4C;AAAA,EAChD,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,YAA4B;AAAA,EAChC,YAAY,CAAC;AAAA,EACb,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,YAAY,CAAC;AAAA,EACb,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAAyC;AAAA,EAC7C,YAAY,CAAC;AAAA,EACb,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,aAAa;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,cAAc;AAAA,EACd,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,gCAAgC;AAAA,EACpC,YAAY,CAAC;AAAA,EACb,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,eAAe;AACjB;AAGA,MAAM,oBAAoB,MACxB,iCAEE;AAAA,sBAAC,cAAW,YAAY,CAAC,GAAG,gBAAgB,CAAC,GAAG,UAAU,MAAM;AAAA,EAEhE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,CAAC;AAAA,MACb,gBAAgB,CAAC;AAAA,MACjB,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,kBAAiB;AAAA;AAAA,EACnB;AAAA,EAEA,oBAAC,cAAW,YAAY,CAAC,GAAG,gBAAgB,CAAC,GAAG,UAAU,MAAO,GAAG,mBAAoB,GAAG,qBAAqB;AAAA,GAClH;",
+  "names": ["React"]
+}

package/dist/esm/typescript-testing/typescript-combobox-single-valid.js ADDED Viewed

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { DSComboBox } from "../index.js";
+const noop = (..._args) => {
+};
+const inputRef = React2.createRef();
+const testRequiredProps = {
+  allOptions: [],
+  selectedValue: null,
+  onChange: noop
+};
+const testOptionalProps = {
+  placeholder: "Select an option",
+  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: [],
+  selectedValue: null,
+  onChange: noop,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  allOptions: [],
+  selectedValue: null,
+  onChange: noop,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testExplicitDefinition = {
+  allOptions: [],
+  selectedValue: null,
+  onChange: noop,
+  placeholder: "Select an option",
+  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: [],
+  selectedValue: null,
+  onChange: noop,
+  hasError: false,
+  disabled: false,
+  placeholder: "Select an option",
+  menuMaxHeight: 300
+};
+const ExampleUsageSingle = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSComboBox, { allOptions: [], selectedValues: null, onChange: noop }),
+  /* @__PURE__ */ jsx(
+    DSComboBox,
+    {
+      allOptions: [],
+      selectedValues: null,
+      onChange: noop,
+      placeholder: "Select...",
+      hasError: false,
+      disabled: false,
+      applyAriaDisabled: false,
+      readOnly: false,
+      isNonClearable: false,
+      onlySelectable: false,
+      noOptionsMessage: "No Matches Found"
+    }
+  ),
+  /* @__PURE__ */ jsx(DSComboBox, { allOptions: [], selectedValues: null, onChange: noop, ...testOptionalProps, ...testPartialDefaults })
+] });
+//# sourceMappingURL=typescript-combobox-single-valid.js.map

package/dist/esm/typescript-testing/typescript-combobox-single-valid.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-combobox-single-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSComboBox } from '../index.js';\nimport type { DSComboboxSingleT } from '../index.js';\n\n// Verify namespace exports are correctly shaped\ntype ComponentProps = DSComboboxSingleT.Props;\ntype ComponentInternalProps = DSComboboxSingleT.InternalProps;\ntype ComponentDefaultProps = DSComboboxSingleT.DefaultProps;\ntype ComponentOptionalProps = DSComboboxSingleT.OptionalProps;\ntype ComponentRequiredProps = DSComboboxSingleT.RequiredProps;\n\nconst noop = (..._args: unknown[]): void => {};\nconst inputRef = React.createRef() as React.MutableRefObject<HTMLInputElement | null>;\n\n// \u2500\u2500\u2500 Required props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testRequiredProps: ComponentRequiredProps = {\n  allOptions: [],\n  selectedValue: null,\n  onChange: noop,\n};\n\n// \u2500\u2500\u2500 Optional props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testOptionalProps: ComponentOptionalProps = {\n  placeholder: 'Select an option',\n  autoFocus: false,\n  filteredOptions: [],\n  isMenuOpen: false,\n  onMenuChange: noop,\n  onCreate: noop,\n  onFilter: noop,\n  onCancel: noop,\n  onSelectAll: noop,\n  onKeyDown: noop,\n  isLoading: false,\n  menuMinWidth: 200,\n  // popperProps omitted \u2014 DSFloatingWrapperT.Props requires children/innerRef/isOpen/floatingStyles\n};\n\n// \u2500\u2500\u2500 Partial defaults (consumer usage simulation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testPartialDefaults: Partial<ComponentDefaultProps> = {\n  hasError: false,\n  inline: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  isNonClearable: false,\n  onlySelectable: false,\n};\n\n// \u2500\u2500\u2500 Complete defaults (all defaults required) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testCompleteDefaults: Required<ComponentDefaultProps> = {\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  isNonClearable: false,\n  disabled: false,\n  noOptionsMessage: 'No Matches Found',\n  innerRef: inputRef,\n  useMask: noop,\n  onlySelectable: false,\n  isSkeleton: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  isMenuOpenableWithReadOnly: false,\n  forceFocusFirstOptionOnType: false,\n  menuMaxHeight: 300,\n};\n\n// \u2500\u2500\u2500 Internal props (all defaults filled in) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testInternalProps: ComponentInternalProps = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentInternalProps;\n\n// \u2500\u2500\u2500 Public Props (defaults optional) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testProps: ComponentProps = {\n  allOptions: [],\n  selectedValue: null,\n  onChange: noop,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  allOptions: [],\n  selectedValue: null,\n  onChange: noop,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentProps;\n\n// \u2500\u2500\u2500 Explicit full definition (error pinpoints the wrong key) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testExplicitDefinition: ComponentProps = {\n  allOptions: [],\n  selectedValue: null,\n  onChange: noop,\n  placeholder: 'Select an option',\n  autoFocus: false,\n  hasError: false,\n  inline: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n  isNonClearable: false,\n  onlySelectable: false,\n  noOptionsMessage: 'No Matches Found',\n  withoutPortal: false,\n  isSkeleton: false,\n  isMenuOpenableWithReadOnly: false,\n  forceFocusFirstOptionOnType: false,\n  menuMaxHeight: 300,\n  innerRef: inputRef,\n  useMask: noop,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  menuMinWidth: 200,\n  isLoading: false,\n  onFilter: noop,\n  onCancel: noop,\n};\n\n// \u2500\u2500\u2500 As-syntax (error marks whole object) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst testInferredTypeCompatibility = {\n  allOptions: [],\n  selectedValue: null,\n  onChange: noop,\n  hasError: false,\n  disabled: false,\n  placeholder: 'Select an option',\n  menuMaxHeight: 300,\n} as ComponentProps;\n\n// \u2500\u2500\u2500 JSX usage \u2014 DSComboBox with single-select explicit generic \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Note: DSComboBox is the underlying polymorphic component; consumers use DSSingleComboBox from\n// ds-form-single-combobox which accepts DSComboboxSingleT.Props (selectedValue).\n// Here we verify DSComboBox accepts single-select props via explicit generic.\nconst ExampleUsageSingle = () => (\n  <>\n    {/* minimum required props */}\n    <DSComboBox allOptions={[]} selectedValues={null} onChange={noop} />\n    {/* with optional props */}\n    <DSComboBox\n      allOptions={[]}\n      selectedValues={null}\n      onChange={noop}\n      placeholder=\"Select...\"\n      hasError={false}\n      disabled={false}\n      applyAriaDisabled={false}\n      readOnly={false}\n      isNonClearable={false}\n      onlySelectable={false}\n      noOptionsMessage=\"No Matches Found\"\n    />\n    {/* with spread testExplicitDefinition (using unified selectedValues API) */}\n    <DSComboBox allOptions={[]} selectedValues={null} onChange={noop} {...testOptionalProps} {...testPartialDefaults} />\n  </>\n);\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/utils/listHelper.js CHANGED Viewed

@@ -36,7 +36,7 @@ const getLastValueSelected = (selectedValues) => {
 const getFirstOption = (options, selectedValues) => {
   if (selectedValues) {
     const lastValue = getLastValueSelected(selectedValues);
-    if (lastValue) return lastValue.dsId;
+    if (lastValue && options.some((option) => option.dsId === lastValue.dsId)) return lastValue.dsId;
   }
   for (let i = 0; i < options.length; i += 1)
     if (!["section", "separator"].includes(options[i].type) && !options[i].disabled) {
@@ -46,6 +46,7 @@ const getFirstOption = (options, selectedValues) => {
 };
 const getSuggestedValueOnChange = (selectedOption, selectedValues, isNonClearable) => {
   if (Array.isArray(selectedValues)) {
+    if (selectedOption === null) return selectedValues;
     const isFound = selectedValues.find((item) => item.type === "option" && item.value === selectedOption.value);
     if (isFound) {
       if (isNonClearable) return selectedValues;