@elliemae/ds-form-combobox 3.61.11 → 3.70.0-alpha.10

package/dist/cjs/ComboBox.js

@@ -56,7 +56,15 @@ const DSComboBox = (props) => {
   const ctx = (0, import_useComboBox.useComboBox)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ComboBoxCTX.ComboBoxContext.Provider, { value: ctx, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_container.Container, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveRegion.Announcer, { message: props.isLoading || props.isSkeleton ? "Loading options please wait" : "" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_LiveRegion.ResultCountStatus,
+      {
+        menuOpen: ctx.menuState,
+        isLoading: !!props.isLoading,
+        isSkeleton: !!props.isSkeleton,
+        resultCount: ctx.correctOptions?.length ?? 0
+      }
+    )
   ] });
 };
 DSComboBox.displayName = "DSComboBox";

package/dist/cjs/ComboBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ComboBox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { ComboBoxContext } from './ComboBoxCTX.js';\nimport { useComboBox } from './config/useComboBox.js';\nimport type { DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { Container } from './parts/container/index.js';\nimport { Announcer } from './parts/LiveRegion.js';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { ComboboxPropTypesSchema } from './react-desc-prop-types.js';\n\nexport const offScreenStyle: React.CSSProperties = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: 0,\n  width: '1px',\n  position: 'absolute',\n};\n\nconst DSComboBox = <\n  T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n    | DSCommonComboboxPropsT.ItemOption\n    | DSCommonComboboxPropsT.ItemOption[],\n>(\n  props: DSComboboxT.Props<T>,\n) => {\n  const ctx = useComboBox<T>(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n      <Announcer message={props.isLoading || props.isSkeleton ? 'Loading options please wait' : ''} />\n    </ComboBoxContext.Provider>\n  );\n};\n\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypesSchema;\n\nexport { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BnB;AA9BJ,8BAAyB;AAEzB,yBAAgC;AAChC,yBAA4B;AAE5B,uBAA0B;AAC1B,wBAA0B;AAE1B,mCAAwC;AAEjC,MAAM,iBAAsC;AAAA,EACjD,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,aAAa,CAKjB,UACG;AACH,QAAM,UAAM,gCAAe,KAAK;AAChC,SACE,6CAAC,mCAAgB,UAAhB,EAAyB,OAAO,KAC/B;AAAA,gDAAC,8BAAU;AAAA,IACX,4CAAC,+BAAU,SAAS,MAAM,aAAa,MAAM,aAAa,gCAAgC,IAAI;AAAA,KAChG;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAEhD,qBAAqB,YAAY;",
+  "sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { ComboBoxContext } from './ComboBoxCTX.js';\nimport { useComboBox } from './config/useComboBox.js';\nimport type { DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { Container } from './parts/container/index.js';\nimport { ResultCountStatus } from './parts/LiveRegion.js';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { ComboboxPropTypesSchema } from './react-desc-prop-types.js';\n\nexport const offScreenStyle: React.CSSProperties = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: 0,\n  width: '1px',\n  position: 'absolute',\n};\n\nconst DSComboBox = <\n  T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n    DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n>(\n  props: DSComboboxT.Props<T>,\n) => {\n  const ctx = useComboBox<T>(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n      <ResultCountStatus\n        menuOpen={ctx.menuState}\n        isLoading={!!props.isLoading}\n        isSkeleton={!!props.isSkeleton}\n        resultCount={ctx.correctOptions?.length ?? 0}\n      />\n    </ComboBoxContext.Provider>\n  );\n};\n\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypesSchema;\n\nexport { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BnB;AA7BJ,8BAAyB;AAEzB,yBAAgC;AAChC,yBAA4B;AAE5B,uBAA0B;AAC1B,wBAAkC;AAElC,mCAAwC;AAEjC,MAAM,iBAAsC;AAAA,EACjD,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,aAAa,CAIjB,UACG;AACH,QAAM,UAAM,gCAAe,KAAK;AAChC,SACE,6CAAC,mCAAgB,UAAhB,EAAyB,OAAO,KAC/B;AAAA,gDAAC,8BAAU;AAAA,IACX;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,IAAI;AAAA,QACd,WAAW,CAAC,CAAC,MAAM;AAAA,QACnB,YAAY,CAAC,CAAC,MAAM;AAAA,QACpB,aAAa,IAAI,gBAAgB,UAAU;AAAA;AAAA,IAC7C;AAAA,KACF;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAEhD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/cjs/DSComboboxMultiT.js

@@ -35,14 +35,16 @@ module.exports = __toCommonJS(DSComboboxMultiT_exports);
 var React = __toESM(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 multiComboboxPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSFormComboboxName, import_constants.FORM_COMBOBOX_MULTI_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   ...import_DSCommonComboboxPropsT.commonComboboxPropTypes,
   onChange: import_ds_props_helpers.PropTypes.func.isRequired.description(
     "Multi-select change callback. Receives the full next selection array; use an empty array when no option remains selected."
   ).signature(
-    "(suggestedValue: ItemOption[], selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void"
+    "(suggestedValue: SelectionableOptions[], selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void"
   ),
   selectedValues: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).isRequired.description(
     "Multi-select values as an array of selectable option objects. Use an empty array for no selection."

package/dist/cjs/DSComboboxMultiT.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSComboboxMultiT.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\n\nexport declare namespace DSComboboxMultiT {\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 interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n    selectedValues: DSCommonComboboxPropsT.ItemOption[];\n    onChange: (\n      suggestedValue: DSCommonComboboxPropsT.ItemOption[],\n      selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n  export interface OptionalProps extends DSCommonComboboxPropsT.OptionalProps {}\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\n/**\n * Multi-select schema variant.\n *\n * - `selectedValues` is always an array of selectable option objects.\n * - empty array indicates no current selection.\n */\nexport const multiComboboxPropTypes: DSPropTypesSchema<DSComboboxMultiT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...commonComboboxPropTypes,\n  onChange: PropTypes.func.isRequired\n    .description(\n      'Multi-select change callback. Receives the full next selection array; use an empty array when no option remains selected.',\n    )\n    .signature(\n      '(suggestedValue: ItemOption[], selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n    ),\n  selectedValues: PropTypes.arrayOf(PropTypes.object).isRequired.description(\n    'Multi-select values as an array of selectable option objects. Use an empty array for no selection.',\n  ),\n};\n\nexport const multiComboboxPropTypesSchema = multiComboboxPropTypes as unknown as ValidationMap<DSComboboxMultiT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAEvE,oCAAqE;AAkD9D,MAAM,yBAAoE;AAAA,EAC/E,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,QAAQ,kCAAU,MAAM,EAAE,WAAW;AAAA,IAC7D;AAAA,EACF;AACF;AAEO,MAAM,+BAA+B;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxMultiT {\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 interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n    selectedValues: DSCommonComboboxPropsT.SelectionableOptions[];\n    onChange: (\n      suggestedValue: DSCommonComboboxPropsT.SelectionableOptions[],\n      selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n  export interface OptionalProps\n    extends\n      DSCommonComboboxPropsT.OptionalProps,\n      TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_MULTI_SLOTS> {}\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\n/**\n * Multi-select schema variant.\n *\n * - `selectedValues` is always an array of selectable option objects.\n * - empty array indicates no current selection.\n */\nexport const multiComboboxPropTypes: DSPropTypesSchema<DSComboboxMultiT.Props> = {\n  ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...commonComboboxPropTypes,\n  onChange: PropTypes.func.isRequired\n    .description(\n      'Multi-select change callback. Receives the full next selection array; use an empty array when no option remains selected.',\n    )\n    .signature(\n      '(suggestedValue: SelectionableOptions[], selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n    ),\n  selectedValues: PropTypes.arrayOf(PropTypes.object).isRequired.description(\n    'Multi-select values as an array of selectable option objects. Use an empty array for no selection.',\n  ),\n};\n\nexport const multiComboboxPropTypesSchema = multiComboboxPropTypes as unknown as ValidationMap<DSComboboxMultiT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAGP,oCAAqE;AACrE,uBAA8D;AAuDvD,MAAM,yBAAoE;AAAA,EAC/E,OAAG,kDAAyB,qCAAoB,0CAAyB;AAAA,EACzE,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,QAAQ,kCAAU,MAAM,EAAE,WAAW;AAAA,IAC7D;AAAA,EACF;AACF;AAEO,MAAM,+BAA+B;",
   "names": []
 }

package/dist/cjs/DSComboboxSingleT.js

@@ -35,7 +35,9 @@ module.exports = __toCommonJS(DSComboboxSingleT_exports);
 var React = __toESM(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 singleComboboxPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSFormComboboxName, import_constants.FORM_COMBOBOX_SINGLE_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   ...import_DSCommonComboboxPropsT.commonComboboxPropTypes,

package/dist/cjs/DSComboboxSingleT.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSComboboxSingleT.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\n\nexport declare namespace DSComboboxSingleT {\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 interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n    selectedValue: DSCommonComboboxPropsT.ItemOption | null;\n    onChange: (\n      suggestedValue: DSCommonComboboxPropsT.ItemOption | null,\n      selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n  export interface OptionalProps extends DSCommonComboboxPropsT.OptionalProps {}\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\ntype SingleComboboxWithSelectedValues = Omit<DSComboboxSingleT.Props, 'selectedValue'> & {\n  selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n};\n\n/**\n * Single-select schema variant.\n *\n * - `selectedValues` is a single selectable option object.\n * - `null` indicates no current selection.\n */\nexport const singleComboboxPropTypes: DSPropTypesSchema<SingleComboboxWithSelectedValues> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...commonComboboxPropTypes,\n  onChange: PropTypes.func.isRequired\n    .description(\n      'Single-select change callback. Receives the next single selected option or null when selection is cleared.',\n    )\n    .signature(\n      '(suggestedValue: ItemOption | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n    ),\n  selectedValues: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]).isRequired.description(\n    'Single-select value. Use a selectable option object for a selected state, or null for no selection.',\n  ),\n};\n\nexport const singleComboboxPropTypesSchema =\n  singleComboboxPropTypes as unknown as ValidationMap<SingleComboboxWithSelectedValues>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AAEvE,oCAAqE;AAsD9D,MAAM,0BAA+E;AAAA,EAC1F,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,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW;AAAA,IAC1F;AAAA,EACF;AACF;AAEO,MAAM,gCACX;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxSingleT {\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 interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n    selectedValue: DSCommonComboboxPropsT.SelectionableOptions | null;\n    onChange: (\n      suggestedValue: DSCommonComboboxPropsT.SelectionableOptions | null,\n      selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n  export interface OptionalProps\n    extends\n      DSCommonComboboxPropsT.OptionalProps,\n      TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_SINGLE_SLOTS> {}\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\ntype SingleComboboxWithSelectedValues = Omit<DSComboboxSingleT.Props, 'selectedValue'> & {\n  selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n};\n\n/**\n * Single-select schema variant.\n *\n * - `selectedValues` is a single selectable option object.\n * - `null` indicates no current selection.\n */\nexport const singleComboboxPropTypes: DSPropTypesSchema<SingleComboboxWithSelectedValues> = {\n  ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...commonComboboxPropTypes,\n  onChange: PropTypes.func.isRequired\n    .description(\n      'Single-select change callback. Receives the next single selected option or null when selection is cleared.',\n    )\n    .signature(\n      '(suggestedValue: ItemOption | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n    ),\n  selectedValues: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]).isRequired.description(\n    'Single-select value. Use a selectable option object for a selected state, or null for no selection.',\n  ),\n};\n\nexport const singleComboboxPropTypesSchema =\n  singleComboboxPropTypes as unknown as ValidationMap<SingleComboboxWithSelectedValues>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAGP,oCAAqE;AACrE,uBAA+D;AA2DxD,MAAM,0BAA+E;AAAA,EAC1F,OAAG,kDAAyB,qCAAoB,2CAA0B;AAAA,EAC1E,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,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW;AAAA,IAC1F;AAAA,EACF;AACF;AAEO,MAAM,gCACX;",
   "names": []
 }

package/dist/cjs/DSCommonComboboxPropsT.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSCommonComboboxPropsT.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSFloatingWrapperT, DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { DSPropTypesSchema, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type React from 'react';\n\nexport declare function noop<T extends unknown[]>(..._args: T): void;\n\nexport declare namespace DSCommonComboboxPropsT {\n  export interface CommonItemOptions extends GlobalAttributesT {\n    dsId: string;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n    options: OptionTypes[];\n  }\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n  export interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n  export type SelectionableOptions = ItemOption | ItemCreatableOption;\n  export type LayoutOptions = ItemSeparatorOptions | ItemSectionOptions;\n  export type OptionTypes = SelectionableOptions | LayoutOptions;\n\n  export interface RequiredProps {\n    allOptions: OptionTypes[];\n  }\n  export interface DefaultProps {\n    startPlacementPreference: DSHookFloatingContextT.PopperPlacementsT;\n    placementOrderPreference: DSHookFloatingContextT.PopperPlacementsT[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    isNonClearable: boolean;\n    disabled: boolean;\n    noOptionsMessage: string;\n    innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n    useMask: DSMaskT.Hook | typeof noop;\n    onlySelectable: boolean;\n    isSkeleton: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    isMenuOpenableWithReadOnly: boolean;\n    forceFocusFirstOptionOnType: boolean;\n    menuMaxHeight: SizingProps['maxHeight'];\n  }\n  export interface OptionalProps {\n    menuMinWidth?: SizingProps['minWidth'];\n    placeholder?: string;\n    autoFocus?: boolean;\n    filteredOptions?: OptionTypes[];\n    isMenuOpen?: boolean;\n    onMenuChange?: (\n      state: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    onCreate?: (label: string) => void;\n    onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n    onCancel?: () => void;\n    onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n    isLoading?: boolean;\n    popperProps?: DSFloatingWrapperT.Props;\n  }\n}\n\ntype CommonComboboxProps = DSCommonComboboxPropsT.RequiredProps &\n  DSCommonComboboxPropsT.DefaultProps &\n  DSCommonComboboxPropsT.OptionalProps;\n\nexport const commonComboboxPropTypes: DSPropTypesSchema<CommonComboboxProps> = {\n  placeholder: PropTypes.string.description(\n    'Input placeholder text. Note: announcement behavior may be handled by component logic for accessibility, while visible placeholder text remains as provided.',\n  ),\n  allOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.string])).isRequired.description(\n    'Full list of options and layout rows used by the combobox before filtering.',\n  ),\n  filteredOptions: PropTypes.arrayOf(PropTypes.object).description(\n    'Filtered list rendered in the menu for the current input value. THIS DOES NOT SUPPORT STRING OPTIONS, ALL OPTIONS MUST BE OBJECTS.',\n  ),\n  disabled: PropTypes.bool\n    .description('Disables user interaction with the combobox input and menu trigger.')\n    .defaultValue('false'),\n  autoFocus: PropTypes.bool.description('Automatically focuses the input on mount when true.'),\n  hasError: PropTypes.bool.description('Applies error styling/state to the combobox.').defaultValue('false'),\n  noOptionsMessage: PropTypes.string\n    .description('Message displayed when no options match the current filter.')\n    .defaultValue('No Matches Found'),\n  onFilter: PropTypes.func\n    .description('Called when input text changes and options are filtered.')\n    .signature('(newOptions: OptionTypes[], inputValue?: string) => void'),\n  onCreate: PropTypes.func\n    .description('Called when the user creates a new option from free-text input.')\n    .signature('(label: string) => void'),\n  onCancel: PropTypes.func\n    .description('Called when Escape dismisses/closes the menu (effectively menu dismiss semantics).')\n    .signature('() => void'),\n  onMenuChange: PropTypes.func\n    .description('Called when the menu open state changes.')\n    .signature(\n      '(state: boolean, reason: string, e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>) => void',\n    ),\n  menuMinWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n    'Minimum menu width. Numeric values are interpreted as px.',\n  ),\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    .description('Maximum menu height. Will always append \"px\" to the provided values.')\n    .defaultValue('300'),\n  withoutPortal: PropTypes.bool\n    .description(\n      'When true the contextual menu DOM will render as part of the same parent element of the input instead of the body tag.',\n    )\n    .defaultValue('false'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.object })])\n    .description('Mutable ref object or callback ref assigned to the underlying input.')\n    .defaultValue('createRef()'),\n  onlySelectable: PropTypes.bool\n    .description('Disables free-text filtering and allows only selectable option values.')\n    .defaultValue('false'),\n  isSkeleton: PropTypes.bool.description('Displays the component in skeleton loading mode.').defaultValue('false'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Applies disabled semantics for accessibility while preserving focusability. Primary action remains blocked.',\n    )\n    .defaultValue('false'),\n  readOnly: PropTypes.bool\n    .description('Makes input content non-editable while keeping the field accessible.')\n    .defaultValue('false'),\n  isMenuOpenableWithReadOnly: PropTypes.bool\n    .description('Controls whether the menu may still open while `readOnly` is true.')\n    .defaultValue('false'),\n  onSelectAll: PropTypes.func\n    .description('Deprecated callback fired when selecting all options.')\n    .signature('(suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => void')\n    .deprecated({ version: '25.2' }),\n  popperProps: PropTypes.object.description(\n    'Pass-through props forwarded to the floating wrapper implementation. Behavior is primarily defined by the floating wrapper contract.',\n  ),\n  forceFocusFirstOptionOnType: PropTypes.bool\n    .description('When typing, moves pseudo focus to the first available option.')\n    .defaultValue('false'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description(\n      'When the floating menu cannot be placed in the preferred start placement, it will attempt placements in the order defined by this array.',\n    )\n    .defaultValue('[\"bottom-start\", \"top-start\"]'),\n  startPlacementPreference: PropTypes.string\n    .description('If possible, the contextual menu will position first and foremost according to this placement.')\n    .defaultValue('bottom-start'),\n  inline: PropTypes.bool.description('Renders menu using inline positioning strategy when true.').defaultValue('false'),\n  isNonClearable: PropTypes.bool\n    .description('Prevents clearing the current selection when true, in a select-like fashion.')\n    .defaultValue('false'),\n  useMask: PropTypes.func\n    .description(\n      'Mask hook/function returning input mask handlers. Designed for the design system masks (e.g. usePhoneMask) but accepts any compatible implementation.',\n    )\n    .defaultValue('() => {}'),\n  isMenuOpen: PropTypes.bool.description('Controlled open state for the menu.'),\n  isLoading: PropTypes.bool.description('Shows loading state while options are being fetched.'),\n  onKeyDown: PropTypes.func\n    .description(\n      'Callback for key down events on the input text element only (not a root-level/global keyboard handler). This is intentionally narrower than generic global onKeyDown behavior.',\n    )\n    .signature('(e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSFloatingWrapperT, DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { DSPropTypesSchema, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type React from 'react';\n\nexport declare function noop<T extends unknown[]>(..._args: T): void;\n\nexport declare namespace DSCommonComboboxPropsT {\n  export interface CommonItemOptions extends GlobalAttributesT {\n    dsId: string;\n    disabled?: boolean;\n    applyAriaDisabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n    options: OptionTypes[];\n  }\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n  export interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n  export type SelectionableOptions = ItemOption | ItemCreatableOption;\n  export type LayoutOptions = ItemSeparatorOptions | ItemSectionOptions;\n  export type OptionTypes = SelectionableOptions | LayoutOptions;\n\n  export interface RequiredProps {\n    allOptions: OptionTypes[];\n  }\n  export interface DefaultProps {\n    startPlacementPreference: DSHookFloatingContextT.PopperPlacementsT;\n    placementOrderPreference: DSHookFloatingContextT.PopperPlacementsT[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    isNonClearable: boolean;\n    disabled: boolean;\n    noOptionsMessage: string;\n    innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n    useMask: DSMaskT.Hook | typeof noop;\n    onlySelectable: boolean;\n    isSkeleton: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n    isMenuOpenableWithReadOnly: boolean;\n    forceFocusFirstOptionOnType: boolean;\n    menuMaxHeight: SizingProps['maxHeight'];\n  }\n  export interface OptionalProps {\n    menuMinWidth?: SizingProps['minWidth'];\n    placeholder?: string;\n    autoFocus?: boolean;\n    filteredOptions?: OptionTypes[];\n    isMenuOpen?: boolean;\n    onMenuChange?: (\n      state: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    onCreate?: (label: string) => void;\n    onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n    onCancel?: () => void;\n    onSelectAll?: (suggestedValue: SelectionableOptions[] | [], event: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n    isLoading?: boolean;\n    popperProps?: DSFloatingWrapperT.Props;\n  }\n}\n\ntype CommonComboboxProps = DSCommonComboboxPropsT.RequiredProps &\n  DSCommonComboboxPropsT.DefaultProps &\n  DSCommonComboboxPropsT.OptionalProps;\n\nexport const commonComboboxPropTypes: DSPropTypesSchema<CommonComboboxProps> = {\n  placeholder: PropTypes.string.description(\n    'Input placeholder text. Note: announcement behavior may be handled by component logic for accessibility, while visible placeholder text remains as provided.',\n  ),\n  allOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.string])).isRequired.description(\n    'Full list of options and layout rows used by the combobox before filtering.',\n  ),\n  filteredOptions: PropTypes.arrayOf(PropTypes.object).description(\n    'Filtered list rendered in the menu for the current input value. THIS DOES NOT SUPPORT STRING OPTIONS, ALL OPTIONS MUST BE OBJECTS.',\n  ),\n  disabled: PropTypes.bool\n    .description('Disables user interaction with the combobox input and menu trigger.')\n    .defaultValue('false'),\n  autoFocus: PropTypes.bool.description('Automatically focuses the input on mount when true.'),\n  hasError: PropTypes.bool.description('Applies error styling/state to the combobox.').defaultValue('false'),\n  noOptionsMessage: PropTypes.string\n    .description('Message displayed when no options match the current filter.')\n    .defaultValue('No Matches Found'),\n  onFilter: PropTypes.func\n    .description('Called when input text changes and options are filtered.')\n    .signature('(newOptions: OptionTypes[], inputValue?: string) => void'),\n  onCreate: PropTypes.func\n    .description('Called when the user creates a new option from free-text input.')\n    .signature('(label: string) => void'),\n  onCancel: PropTypes.func\n    .description('Called when Escape dismisses/closes the menu (effectively menu dismiss semantics).')\n    .signature('() => void'),\n  onMenuChange: PropTypes.func\n    .description('Called when the menu open state changes.')\n    .signature(\n      '(state: boolean, reason: string, e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>) => void',\n    ),\n  menuMinWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n    'Minimum menu width. Numeric values are interpreted as px.',\n  ),\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    .description('Maximum menu height. Will always append \"px\" to the provided values.')\n    .defaultValue('300'),\n  withoutPortal: PropTypes.bool\n    .description(\n      'When true the contextual menu DOM will render as part of the same parent element of the input instead of the body tag.',\n    )\n    .defaultValue('false'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.object })])\n    .description('Mutable ref object or callback ref assigned to the underlying input.')\n    .defaultValue('createRef()'),\n  onlySelectable: PropTypes.bool\n    .description('Disables free-text filtering and allows only selectable option values.')\n    .defaultValue('false'),\n  isSkeleton: PropTypes.bool.description('Displays the component in skeleton loading mode.').defaultValue('false'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Applies disabled semantics for accessibility while preserving focusability. Primary action remains blocked.',\n    )\n    .defaultValue('false'),\n  readOnly: PropTypes.bool\n    .description('Makes input content non-editable while keeping the field accessible.')\n    .defaultValue('false'),\n  isMenuOpenableWithReadOnly: PropTypes.bool\n    .description('Controls whether the menu may still open while `readOnly` is true.')\n    .defaultValue('false'),\n  onSelectAll: PropTypes.func\n    .description('Deprecated callback fired when selecting all options.')\n    .signature('(suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => void')\n    .deprecated({ version: '25.2' }),\n  popperProps: PropTypes.object.description(\n    'Pass-through props forwarded to the floating wrapper implementation. Behavior is primarily defined by the floating wrapper contract.',\n  ),\n  forceFocusFirstOptionOnType: PropTypes.bool\n    .description('When typing, moves pseudo focus to the first available option.')\n    .defaultValue('false'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description(\n      'When the floating menu cannot be placed in the preferred start placement, it will attempt placements in the order defined by this array.',\n    )\n    .defaultValue('[\"bottom-start\", \"top-start\"]'),\n  startPlacementPreference: PropTypes.string\n    .description('If possible, the contextual menu will position first and foremost according to this placement.')\n    .defaultValue('bottom-start'),\n  inline: PropTypes.bool.description('Renders menu using inline positioning strategy when true.').defaultValue('false'),\n  isNonClearable: PropTypes.bool\n    .description('Prevents clearing the current selection when true, in a select-like fashion.')\n    .defaultValue('false'),\n  useMask: PropTypes.func\n    .description(\n      'Mask hook/function returning input mask handlers. Designed for the design system masks (e.g. usePhoneMask) but accepts any compatible implementation.',\n    )\n    .defaultValue('() => {}'),\n  isMenuOpen: PropTypes.bool.description('Controlled open state for the menu.'),\n  isLoading: PropTypes.bool.description('Shows loading state while options are being fetched.'),\n  onKeyDown: PropTypes.func\n    .description(\n      'Callback for key down events on the input text element only (not a root-level/global keyboard handler). This is intentionally narrower than generic global onKeyDown behavior.',\n    )\n    .signature('(e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []
 }

package/dist/cjs/{config/useClickOutside.js → TruncatedText.js}

@@ -26,27 +26,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useClickOutside_exports = {};
-__export(useClickOutside_exports, {
-  useOnClickOutside: () => useOnClickOutside
+var TruncatedText_exports = {};
+__export(TruncatedText_exports, {
+  TruncatedText: () => TruncatedText,
+  default: () => TruncatedText_default
 });
-module.exports = __toCommonJS(useClickOutside_exports);
+module.exports = __toCommonJS(TruncatedText_exports);
 var React = __toESM(require("react"));
-var import_react = require("react");
-function useOnClickOutside(ref, cb, excludeNode) {
-  (0, import_react.useEffect)(() => {
-    const listener = (event) => {
-      if (!ref || ref?.contains?.(event.target) || excludeNode && excludeNode.contains(event.target)) {
-        return;
-      }
-      cb(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, cb, excludeNode]);
-}
-//# sourceMappingURL=useClickOutside.js.map
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_system = require("@elliemae/ds-system");
+const TruncatedSpan = import_ds_system.styled.span`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+`;
+const TruncatedText = ({ value = "" }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncatedSpan, { children: value });
+var TruncatedText_default = TruncatedText;
+//# sourceMappingURL=TruncatedText.js.map

package/dist/cjs/TruncatedText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TruncatedText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nconst TruncatedSpan = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\ninterface TruncatedTextProps {\n  value?: string;\n}\n\n/**\n * PUI-18660: this used to render its own hand-rolled hover tooltip on truncation.\n * That internal tooltip was removed \u2014 truncation is visual-only here. Consumers who\n * need the full value on hover/focus (e.g. readOnly/aria-disabled states where the\n * menu can't be opened) wrap the combobox in DSTooltipV3 themselves; see the\n * \"WithTooltip\" examples in ds-form-single-combobox / ds-form-multi-combobox.\n */\nconst TruncatedText = ({ value = '' }: TruncatedTextProps) => <TruncatedSpan>{value}</TruncatedSpan>;\n\nexport { TruncatedText };\nexport default TruncatedText;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBuC;AArB9D,uBAAuB;AAEvB,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7B,MAAM,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAA0B,4CAAC,iBAAe,iBAAM;AAGpF,IAAO,wBAAQ;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useComboBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { type DSFastListT } from '@elliemae/ds-fast-list';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport type { DSCommonComboboxPropsT } from '../DSCommonComboboxPropsT.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\ntype ActionRefVirtualized = {\n  scrollTo: (index: number, opts?: DSFastListT.ScrollToOptions) => void;\n};\n\nexport const useComboBox = <\n  T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n    | DSCommonComboboxPropsT.ItemOption\n    | DSCommonComboboxPropsT.ItemOption[],\n>(\n  props: DSComboboxT.Props<T>,\n) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.Props<T>>(\n    props,\n    // we have a weird inference going on in this component\n    // weird because we are even renaming selectedValues to selectedValue for the single combobox,\n    //   type safety here is flanky, we need to cast this, as a one ad-hoc exception\n    defaultProps as DSComboboxT.Props<T>,\n  );\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const {\n    id,\n    selectedValues,\n    isMenuOpen,\n    onMenuChange,\n    applyAriaDisabled,\n    forceFocusFirstOptionOnType,\n    inline,\n    readOnly,\n    isMenuOpenableWithReadOnly,\n  } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n  const optionsPerSection = useOptionsPerSection(correctOptions);\n\n  const actionRef: ActionRefVirtualized = {\n    scrollTo: () => {},\n  };\n\n  const listRef = useRef<ActionRefVirtualized>(actionRef);\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: DSFastListT.ScrollToOptions = { align: 'center' } as DSFastListT.ScrollToOptions) => {\n      listRef.current.scrollTo(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n      requestAnimationFrame(() => {\n        listRef.current.scrollTo(\n          correctOptions.findIndex((opt) => opt.dsId === dsId),\n          opts,\n        );\n      });\n    },\n    [correctOptions],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    if (inputValue && forceFocusFirstOptionOnType) {\n      const focusedValue = getFirstOption(correctOptions);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n  }, [correctOptions, inputValue, forceFocusFirstOptionOnType, scrollOptionIntoView, selectedValues]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (applyAriaDisabled) return;\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n      if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n        const focusedValue = getFirstOption(correctOptions, selectedValues);\n        setFocusOptionIdx(focusedValue);\n        scrollOptionIntoView(focusedValue, { align: 'center' });\n      } else {\n        setFocusOptionIdx('');\n      }\n    },\n    [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n  );\n\n  // We need to force the auto focus for the inline since we dont control the floating wrapper.\n  useEffect(() => {\n    if (inline) {\n      setMenuState(true, 'inline');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const shouldPreventContextMenuOpening = readOnly && !isMenuOpenableWithReadOnly;\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      pillGroupRef,\n      wrapperListRef,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n      optionsPerSection,\n      shouldPreventContextMenuOpening,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      listRef,\n      internalRef,\n      instanceUid,\n      optionsPerSection,\n      shouldPreventContextMenuOpening,\n    ],\n  );\n\n  return ctx;\n};\n\nexport type UseComboBoxReturnType = ReturnType<typeof useComboBox>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,8BAA6E;AAC7E,mBAAkE;AAClE,iBAAoB;AAGpB,mCAAgD;AAChD,qBAA+B;AAC/B,wBAAqD;AACrD,+BAAkC;AAClC,kCAAqC;AAM9B,MAAM,cAAc,CAKzB,UACG;AACH,QAAM,wBAAoB;AAAA,IACxB;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACF;AACA,8DAA+B,mBAAmB,gDAAmB,6BAAc;AACnF,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAA6B,IAAI;AAEjF,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAiB,EAAE;AACvD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAkB,KAAK;AAEvD,QAAM,kBAAc,qBAAyB,IAAI;AACjD,QAAM,qBAAiB,qBAAuB,IAAI;AAElD,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,mBAAe,qBAAuB,IAAI;AAEhD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,kBAAc,sBAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,eAAe,OAAW,QAAO;AACrC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,UAAU,CAAC;AAM5B,QAAM,qBAAiB,4CAAkB,mBAAmB,UAAU;AAEtE,QAAM,wBAAoB,kDAAqB,cAAc;AAE7D,QAAM,YAAkC;AAAA,IACtC,UAAU,MAAM;AAAA,IAAC;AAAA,EACnB;AAEA,QAAM,cAAU,qBAA6B,SAAS;AAKtD,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAAc,OAAoC,EAAE,OAAO,SAAS,MAAqC;AACxG,cAAQ,QAAQ;AAAA,QACd,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QACnD;AAAA,MACF;AACA,4BAAsB,MAAM;AAC1B,gBAAQ,QAAQ;AAAA,UACd,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,UACnD;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAMA,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAiB,EAAE;AAE/D,8BAAU,MAAM;AACd,QAAI,cAAc,6BAA6B;AAC7C,YAAM,mBAAe,kCAAe,cAAc;AAClD,wBAAkB,YAAY;AAC9B,2BAAqB,cAAc,EAAE,OAAO,SAAS,CAAC;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,gBAAgB,YAAY,6BAA6B,sBAAsB,cAAc,CAAC;AAElG,QAAM,mBAAe;AAAA,IACnB,CACE,UACA,QACA,MACG;AACH,UAAI,kBAAmB;AACvB,UAAI,iBAAiB,OAAW,cAAa,UAAU,QAAQ,CAAC;AAChE,qBAAe,QAAQ;AACvB,UAAI,CAAC,cAAc,YAAY,CAAC,kBAAkB,KAAC,wCAAqB,cAAc,GAAG;AACvF,cAAM,mBAAe,kCAAe,gBAAgB,cAAc;AAClE,0BAAkB,YAAY;AAC9B,6BAAqB,cAAc,EAAE,OAAO,SAAS,CAAC;AAAA,MACxD,OAAO;AACL,0BAAkB,EAAE;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,cAAc,YAAY,gBAAgB,gBAAgB,gBAAgB,oBAAoB;AAAA,EACpH;AAGA,8BAAU,MAAM;AACd,QAAI,QAAQ;AACV,mBAAa,MAAM,QAAQ;AAAA,IAC7B;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,QAAM,kCAAkC,YAAY,CAAC;AAErD,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,kBAAkB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { type DSFastListT } from '@elliemae/ds-fast-list';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport type { DSCommonComboboxPropsT } from '../DSCommonComboboxPropsT.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\ntype ActionRefVirtualized = {\n  scrollTo: (index: number, opts?: DSFastListT.ScrollToOptions) => void;\n};\n\nexport const useComboBox = <\n  T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n    DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n>(\n  props: DSComboboxT.Props<T>,\n) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.Props<T>>(\n    props,\n    // we have a weird inference going on in this component\n    // weird because we are even renaming selectedValues to selectedValue for the single combobox,\n    //   type safety here is flanky, we need to cast this, as a one ad-hoc exception\n    defaultProps as DSComboboxT.Props<T>,\n  );\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const {\n    id,\n    selectedValues,\n    isMenuOpen,\n    onMenuChange,\n    applyAriaDisabled,\n    forceFocusFirstOptionOnType,\n    inline,\n    readOnly,\n    isMenuOpenableWithReadOnly,\n  } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n  const optionsPerSection = useOptionsPerSection(correctOptions);\n\n  const actionRef: ActionRefVirtualized = {\n    scrollTo: () => {},\n  };\n\n  const listRef = useRef<ActionRefVirtualized>(actionRef);\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: DSFastListT.ScrollToOptions = { align: 'center' } as DSFastListT.ScrollToOptions) => {\n      listRef.current.scrollTo(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n      requestAnimationFrame(() => {\n        listRef.current.scrollTo(\n          correctOptions.findIndex((opt) => opt.dsId === dsId),\n          opts,\n        );\n      });\n    },\n    [correctOptions],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    if (inputValue && forceFocusFirstOptionOnType) {\n      const focusedValue = getFirstOption(correctOptions);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n  }, [correctOptions, inputValue, forceFocusFirstOptionOnType, scrollOptionIntoView, selectedValues]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (applyAriaDisabled) return;\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n      if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n        const focusedValue = getFirstOption(correctOptions, selectedValues);\n        setFocusOptionIdx(focusedValue);\n        scrollOptionIntoView(focusedValue, { align: 'center' });\n      } else {\n        setFocusOptionIdx('');\n      }\n    },\n    [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n  );\n\n  // We need to force the auto focus for the inline since we dont control the floating wrapper.\n  useEffect(() => {\n    if (inline) {\n      setMenuState(true, 'inline');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const shouldPreventContextMenuOpening = readOnly && !isMenuOpenableWithReadOnly;\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      pillGroupRef,\n      wrapperListRef,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n      optionsPerSection,\n      shouldPreventContextMenuOpening,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      listRef,\n      internalRef,\n      instanceUid,\n      optionsPerSection,\n      shouldPreventContextMenuOpening,\n    ],\n  );\n\n  return ctx;\n};\n\nexport type UseComboBoxReturnType = ReturnType<typeof useComboBox>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/constants/index.js

@@ -30,14 +30,15 @@ var constants_exports = {};
 __export(constants_exports, {
   DSFormComboboxName: () => DSFormComboboxName,
   FORM_COMBOBOX_DATA_TESTID: () => FORM_COMBOBOX_DATA_TESTID,
+  FORM_COMBOBOX_MULTI_SLOTS: () => FORM_COMBOBOX_MULTI_SLOTS,
+  FORM_COMBOBOX_SINGLE_SLOTS: () => FORM_COMBOBOX_SINGLE_SLOTS,
   FORM_COMBOBOX_SLOTS: () => FORM_COMBOBOX_SLOTS
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 const DSFormComboboxName = "DSCombobox";
-const FORM_COMBOBOX_SLOTS = {
-  // Same as old container
+const FORM_COMBOBOX_COMMON_SLOTS = {
   ROOT: "root",
   INPUT_WRAPPER: "input-wrapper",
   INPUT: "input",
@@ -45,11 +46,38 @@ const FORM_COMBOBOX_SLOTS = {
   FAST_LIST: "fast-list",
   SECTION_WRAPPER: "section-wrapper",
   SECTION_LABEL: "section-label",
+  // Single-select: regular menu items. Both modes: creatable items (when `onCreate` is provided).
   SINGLE_MENU_ITEM: "single-menu-item",
-  MULTI_MENU_ITEM: "multi-menu-item",
   LOADING_INDICATOR: "loading-indicator",
   SKELETON_MENU_ITEM: "skeleton-menu-item",
-  PILL: "pill"
+  POPPER_WRAPPER: "popper-wrapper",
+  SELECTION: "selection",
+  HEADER_ACTIONS: "header-actions",
+  HEADER_ACTIONS_SEPARATOR: "header-actions-separator",
+  INPUT_PLACEHOLDER: "input-placeholder",
+  INPUT_FIELD_WRAPPER: "input-field-wrapper",
+  LIST_WRAPPER: "list-wrapper",
+  NO_MATCHES_FOUND: "no-results",
+  // legacy data-testid: combobox-no-matches-found — breaking change if removed
+  CREATABLE_LABEL: "creatable-label",
+  CREATABLE_VALUE: "creatable-value",
+  MENU_ITEMS_WRAPPER: "menu-items-wrapper",
+  LOADING_WRAPPER: "loading-wrapper"
+};
+const FORM_COMBOBOX_SINGLE_SLOTS = {
+  ...FORM_COMBOBOX_COMMON_SLOTS,
+  SELECTED_VALUES: "single-value-wrapper"
+  // legacy data-testid: combobox-selected-values — breaking change if removed
+};
+const FORM_COMBOBOX_MULTI_SLOTS = {
+  ...FORM_COMBOBOX_COMMON_SLOTS,
+  PILL: "pill",
+  PILL_GROUP: "pill-group",
+  MULTI_MENU_ITEM: "multi-menu-item"
+};
+const FORM_COMBOBOX_SLOTS = {
+  ...FORM_COMBOBOX_SINGLE_SLOTS,
+  ...FORM_COMBOBOX_MULTI_SLOTS
 };
 const FORM_COMBOBOX_DATA_TESTID = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSFormComboboxName, FORM_COMBOBOX_SLOTS),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n  // Same as old container\n  ROOT: 'root',\n  INPUT_WRAPPER: 'input-wrapper',\n  INPUT: 'input',\n  DROPDOWN_BUTTON: 'dropdown-button',\n  FAST_LIST: 'fast-list',\n  SECTION_WRAPPER: 'section-wrapper',\n  SECTION_LABEL: 'section-label',\n  SINGLE_MENU_ITEM: 'single-menu-item',\n  MULTI_MENU_ITEM: 'multi-menu-item',\n  LOADING_INDICATOR: 'loading-indicator',\n  SKELETON_MENU_ITEM: 'skeleton-menu-item',\n  PILL: 'pill',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n  // legacy data-testid\n  CONTROLS_WRAPPER: 'combobox-controls-wrapper',\n  CONTAINER: 'combobox-container',\n  INPUT: 'combobox-input',\n  LIST: 'combobox-menu-list',\n  NO_MATCHES_FOUND: 'combobox-no-matches-found',\n  SELECTED_VALUES: 'combobox-selected-values',\n  DROPDOWN: 'combobox-dropdown-btn',\n  OPTION: 'combobox-option',\n  ALLY_SELECTED_VALUES: 'combobox-ally-selected-values',\n  PILL: 'ds-pill-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,MAAM;AACR;AAGO,MAAM,4BAA4B;AAAA,EACvC,OAAG,0CAAwB,oBAAoB,mBAAmB;AAAA;AAAA,EAElE,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,sBAAsB;AAAA,EACtB,MAAM;AACR;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// Slots available in both single and multi-select modes\nconst FORM_COMBOBOX_COMMON_SLOTS = {\n  ROOT: 'root',\n  INPUT_WRAPPER: 'input-wrapper',\n  INPUT: 'input',\n  DROPDOWN_BUTTON: 'dropdown-button',\n  FAST_LIST: 'fast-list',\n  SECTION_WRAPPER: 'section-wrapper',\n  SECTION_LABEL: 'section-label',\n  // Single-select: regular menu items. Both modes: creatable items (when `onCreate` is provided).\n  SINGLE_MENU_ITEM: 'single-menu-item',\n  LOADING_INDICATOR: 'loading-indicator',\n  SKELETON_MENU_ITEM: 'skeleton-menu-item',\n  POPPER_WRAPPER: 'popper-wrapper',\n  SELECTION: 'selection',\n  HEADER_ACTIONS: 'header-actions',\n  HEADER_ACTIONS_SEPARATOR: 'header-actions-separator',\n  INPUT_PLACEHOLDER: 'input-placeholder',\n  INPUT_FIELD_WRAPPER: 'input-field-wrapper',\n  LIST_WRAPPER: 'list-wrapper',\n  NO_MATCHES_FOUND: 'no-results', // legacy data-testid: combobox-no-matches-found \u2014 breaking change if removed\n  CREATABLE_LABEL: 'creatable-label',\n  CREATABLE_VALUE: 'creatable-value',\n  MENU_ITEMS_WRAPPER: 'menu-items-wrapper',\n  LOADING_WRAPPER: 'loading-wrapper',\n} as const;\n\n// Slots available in single-select mode only\nexport const FORM_COMBOBOX_SINGLE_SLOTS = {\n  ...FORM_COMBOBOX_COMMON_SLOTS,\n  SELECTED_VALUES: 'single-value-wrapper', // legacy data-testid: combobox-selected-values \u2014 breaking change if removed\n} as const;\n\n// Slots available in multi-select mode only\nexport const FORM_COMBOBOX_MULTI_SLOTS = {\n  ...FORM_COMBOBOX_COMMON_SLOTS,\n  PILL: 'pill',\n  PILL_GROUP: 'pill-group',\n  MULTI_MENU_ITEM: 'multi-menu-item',\n} as const;\n\n// Full slot set \u2014 union of both modes. Used for slot declarations in styled components and runtime helpers.\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n  ...FORM_COMBOBOX_SINGLE_SLOTS,\n  ...FORM_COMBOBOX_MULTI_SLOTS,\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n  // legacy data-testid\n  CONTROLS_WRAPPER: 'combobox-controls-wrapper',\n  CONTAINER: 'combobox-container',\n  INPUT: 'combobox-input',\n  LIST: 'combobox-menu-list',\n  NO_MATCHES_FOUND: 'combobox-no-matches-found',\n  SELECTED_VALUES: 'combobox-selected-values',\n  DROPDOWN: 'combobox-dropdown-btn',\n  OPTION: 'combobox-option',\n  ALLY_SELECTED_VALUES: 'combobox-ally-selected-values',\n  PILL: 'ds-pill-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,qBAAqB;AAGlC,MAAM,6BAA6B;AAAA,EACjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA;AAAA,EAEf,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,kBAAkB;AAAA;AAAA,EAClB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,iBAAiB;AACnB;AAGO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,iBAAiB;AAAA;AACnB;AAGO,MAAM,4BAA4B;AAAA,EACvC,GAAG;AAAA,EACH,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,iBAAiB;AACnB;AAIO,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,GAAG;AACL;AAGO,MAAM,4BAA4B;AAAA,EACvC,OAAG,0CAAwB,oBAAoB,mBAAmB;AAAA;AAAA,EAElE,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,sBAAsB;AAAA,EACtB,MAAM;AACR;",
   "names": []
 }

package/dist/cjs/parts/DropdownIndicator.js

@@ -41,7 +41,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ComboBoxCTX = __toESM(require("../ComboBoxCTX.js"));
 var import_ComboboxDataTestids = require("../ComboboxDataTestids.js");
 var import_constants = require("../constants/index.js");
-const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
+const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
   name: import_constants.DSFormComboboxName,
   slot: import_constants.FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON
 })`
@@ -53,7 +53,7 @@ const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DS
   }
 
   & svg {
-    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) => disabled || readOnly || applyAriaDisabled ? theme.colors.neutral["400"] : theme.colors.brand["600"]};
+    fill: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.brand["600"]};
   }
 
   ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/DropdownIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\nconst StyledDropDownButton = styled(DSButtonV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON,\n})<{ applyAriaDisabled: boolean | undefined }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n      disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['600']};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props,\n    props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DjB;AA7DN,mBAA+C;AAC/C,uBAAuB;AACvB,0BAA2B;AAC3B,sBAAiC;AACjC,8BAA8B;AAC9B,yBAA4B;AAC5B,iCAAmC;AACnC,uBAAwD;AAExD,MAAM,2BAAuB,yBAAO,gCAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,OAAO,UAAU,UAAU,kBAAkB,MACtD,YAAY,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,UAAU,2BAA2B;AAAA,IAC3E;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,oBACJ,0BAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,eAAa,8CAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe,YAAY,CAAC;AAAA,MAC5B,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,sDAAC,oCAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\nconst StyledDropDownButton = styled(DSButtonV3, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON,\n})<{ applyAriaDisabled: boolean | undefined }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['600'])};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props,\n    props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DjB;AA5DN,mBAA+C;AAC/C,uBAAuB;AACvB,0BAA2B;AAC3B,sBAAiC;AACjC,8BAA8B;AAC9B,yBAA4B;AAC5B,iCAAmC;AACnC,uBAAwD;AAExD,MAAM,2BAAuB,yBAAO,gCAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAE;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,UAAU,2BAA2B;AAAA,IAC3E;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,oBACJ,0BAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,eAAa,8CAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe,YAAY,CAAC;AAAA,MAC5B,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,sDAAC,oCAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
   "names": ["ComboBoxContext"]
 }

package/dist/cjs/parts/LiveRegion.js

@@ -29,7 +29,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var LiveRegion_exports = {};
 __export(LiveRegion_exports, {
   Announcer: () => Announcer,
-  LiveRegion: () => LiveRegion
+  LiveRegion: () => LiveRegion,
+  ResultCountStatus: () => ResultCountStatus
 });
 module.exports = __toCommonJS(LiveRegion_exports);
 var React = __toESM(require("react"));
@@ -56,4 +57,15 @@ const LiveRegion = () => {
   );
 };
 const Announcer = import_react.default.memo(({ message }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledA11yNotVisible, { "aria-live": "assertive", "aria-relevant": "all", children: message }));
+const ResultCountStatus = import_react.default.memo(
+  ({
+    menuOpen,
+    isLoading,
+    isSkeleton,
+    resultCount
+  }) => {
+    const message = !menuOpen || isLoading || isSkeleton || resultCount === 0 ? "" : `${resultCount} options available`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledA11yNotVisible, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: message });
+  }
+);
 //# sourceMappingURL=LiveRegion.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/LiveRegion.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { StyledA11yNotVisible } from './styled.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nexport const LiveRegion = (): JSX.Element => {\n  const {\n    props: { onCreate },\n    hasFocus,\n  } = useContext(ComboBoxContext);\n\n  const ScreenReaderText = onCreate ? <span id=\"aria-creatable\">press enter to create the option</span> : '';\n\n  return (\n    <StyledA11yNotVisible\n      data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      aria-relevant=\"additions text\"\n    >\n      {hasFocus && ScreenReaderText}\n    </StyledA11yNotVisible>\n  );\n};\n\nexport const Announcer = React.memo(({ message }: { message: string }) => (\n  <StyledA11yNotVisible aria-live=\"assertive\" aria-relevant=\"all\">\n    {message}\n  </StyledA11yNotVisible>\n));\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUe;AAVtC,mBAAkC;AAClC,yBAA4B;AAC5B,oBAAqC;AACrC,iCAAmC;AAC5B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,mBAAmB,WAAW,4CAAC,UAAK,IAAG,kBAAiB,8CAAgC,IAAU;AAExG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,8CAAmB;AAAA,MAChC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAc;AAAA,MAEb,sBAAY;AAAA;AAAA,EACf;AAEJ;AAEO,MAAM,YAAY,aAAAC,QAAM,KAAK,CAAC,EAAE,QAAQ,MAC7C,4CAAC,sCAAqB,aAAU,aAAY,iBAAc,OACvD,mBACH,CACD;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { StyledA11yNotVisible } from './styled.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nexport const LiveRegion = (): JSX.Element => {\n  const {\n    props: { onCreate },\n    hasFocus,\n  } = useContext(ComboBoxContext);\n\n  const ScreenReaderText = onCreate ? <span id=\"aria-creatable\">press enter to create the option</span> : '';\n\n  return (\n    <StyledA11yNotVisible\n      data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      aria-relevant=\"additions text\"\n    >\n      {hasFocus && ScreenReaderText}\n    </StyledA11yNotVisible>\n  );\n};\n\n/**\n * PUI-18034 \u2014 Previously used in ComboBox.tsx for the \"Loading options please wait\"\n * announcement; replaced by aria-busy + aria-label on Loading/Skeleton containers (which\n * carry the listbox role during async states) plus a polite ResultCountStatus for the\n * post-load count. No internal callers remain and not re-exported from index.tsx \u2014\n * evaluate removing.\n */\nexport const Announcer = React.memo(({ message }: { message: string }) => (\n  <StyledA11yNotVisible aria-live=\"assertive\" aria-relevant=\"all\">\n    {message}\n  </StyledA11yNotVisible>\n));\n\n/**\n * PUI-18034 \u2014 Polite live region for post-load result count. Replaces the previous\n * assertive Announcer that raced with the SR's aria-expanded announcement.\n *\n * WCAG 2.2 SC 4.1.3 Status Messages \u2014 announce changes without shifting focus.\n * WAI-ARIA APG combobox: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * WCAG: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html\n */\nexport const ResultCountStatus = React.memo(\n  ({\n    menuOpen,\n    isLoading,\n    isSkeleton,\n    resultCount,\n  }: {\n    menuOpen: boolean;\n    isLoading: boolean;\n    isSkeleton: boolean;\n    resultCount: number;\n  }) => {\n    const message = !menuOpen || isLoading || isSkeleton || resultCount === 0 ? '' : `${resultCount} options available`;\n    return (\n      <StyledA11yNotVisible role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {message}\n      </StyledA11yNotVisible>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUe;AAVtC,mBAAkC;AAClC,yBAA4B;AAC5B,oBAAqC;AACrC,iCAAmC;AAC5B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,mBAAmB,WAAW,4CAAC,UAAK,IAAG,kBAAiB,8CAAgC,IAAU;AAExG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,8CAAmB;AAAA,MAChC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAc;AAAA,MAEb,sBAAY;AAAA;AAAA,EACf;AAEJ;AASO,MAAM,YAAY,aAAAC,QAAM,KAAK,CAAC,EAAE,QAAQ,MAC7C,4CAAC,sCAAqB,aAAU,aAAY,iBAAc,OACvD,mBACH,CACD;AAUM,MAAM,oBAAoB,aAAAA,QAAM;AAAA,EACrC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAKM;AACJ,UAAM,UAAU,CAAC,YAAY,aAAa,cAAc,gBAAgB,IAAI,KAAK,GAAG,WAAW;AAC/F,WACE,4CAAC,sCAAqB,MAAK,UAAS,aAAU,UAAS,eAAY,QAChE,mBACH;AAAA,EAEJ;AACF;",
   "names": ["ComboBoxContext", "React"]
 }

package/dist/cjs/parts/Section.js

@@ -36,29 +36,23 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react2 = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_ds_menu_items = require("@elliemae/ds-menu-items");
 var import_constants = require("../constants.js");
 var import_ComboboxDataTestids = require("../ComboboxDataTestids.js");
 var import_listHelper = require("../utils/listHelper.js");
 var import_constants2 = require("../constants/index.js");
+var import_styled = require("./menu-list/styled.js");
 const StyledSectionWrapper = (0, import_ds_system.styled)("section", { name: import_constants2.DSFormComboboxName, slot: import_constants2.FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`
   list-style: none;
-  min-height: 24px;
   display: grid;
   align-items: center;
 `;
-const StyledSectionLabel = (0, import_ds_system.styled)("header", { name: import_constants2.DSFormComboboxName, slot: import_constants2.FORM_COMBOBOX_SLOTS.SECTION_LABEL })`
+const StyledSectionLabel = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants2.DSFormComboboxName, slot: import_constants2.FORM_COMBOBOX_SLOTS.SECTION_LABEL })`
   display: flex;
   align-items: center;
-  padding: 0px 16px;
-  min-height: 24px;
-  font-size: 1rem;
-  color: neutral-500;
+  padding: 8px 16px;
 `;
-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
-})``;
 const Section = import_react2.default.memo((props) => {
   const {
     label,
@@ -73,7 +67,7 @@ const Section = import_react2.default.memo((props) => {
     getOwnerPropsArguments
   } = props;
   const id = `${label.replace(/ /g, "")}-section`;
-  const CBItem = Array.isArray(selectedValues) ? import_ds_menu_items.MultiMenuItem : StyledSingleMenuItem;
+  const CBItem = Array.isArray(selectedValues) ? import_styled.StyledMultiMenuItem : import_styled.StyledSingleMenuItem;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     StyledSectionWrapper,
     {
@@ -87,6 +81,8 @@ const Section = import_react2.default.memo((props) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           StyledSectionLabel,
           {
+            component: "header",
+            variant: "b3-strong",
             id,
             role: "presentation",
             getOwnerProps,
@@ -125,7 +121,7 @@ const Section = import_react2.default.memo((props) => {
               },
               onMouseDown: handleOnMouseDown,
               isActive: dsId === focusOptionIdx,
-              isSelected: (0, import_listHelper.isSelected)(selectedValues, option),
+              isSelected: option.type === import_constants.MENU_OPTION_TYPES.OPTION && (0, import_listHelper.isSelected)(selectedValues, option),
               tabIndex: -1,
               ...rest,
               key: option.dsId,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Section.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\n\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles: React.CSSProperties;\n  innerRef: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.ItemOption[] | DSComboboxT.ItemSeparatorOptions[];\n  handleClick: (option: DSComboboxT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments?: () => { index: number };\n}\n\nconst StyledSectionWrapper = styled('section', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`\n  display: flex;\n  align-items: center;\n  padding: 0px 16px;\n  min-height: 24px;\n  font-size: 1rem;\n  color: neutral-500;\n`;\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n})``;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const {\n    label,\n    wrapperStyles,\n    focusOptionIdx,\n    selectedValues,\n    innerRef,\n    handleOnMouseDown,\n    options,\n    handleClick,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  const CBItem = Array.isArray(selectedValues) ? MultiMenuItem : StyledSingleMenuItem;\n\n  return (\n    <StyledSectionWrapper\n      role=\"group\"\n      aria-labelledby={id}\n      style={wrapperStyles}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSectionLabel\n        id={id}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const {\n          dsId,\n          type,\n          value,\n          label: optionLabel,\n          readOnly,\n          disabled,\n          applyAriaDisabled,\n          render,\n          ...rest\n        } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DnB;AAkCM;AAhGV,IAAAA,gBAAkB;AAClB,uBAAuB;AACvB,2BAAyD;AAEzD,uBAAkC;AAElC,iCAAmC;AAEnC,wBAA2B;AAC3B,IAAAC,oBAAwD;AAexD,MAAM,2BAAuB,yBAAO,WAAW,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtH,MAAM,yBAAqB,yBAAO,UAAU,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASjH,MAAM,2BAAuB,yBAAO,qCAAgB;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAoB;AAC5B,CAAC;AAEM,MAAM,UAAU,cAAAC,QAAM,KAAK,CAAC,UAAwB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,SAAS,MAAM,QAAQ,cAAc,IAAI,qCAAgB;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,SAAS,IAAI,CAAC,WAAW;AACxB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,GAAG;AAAA,UACL,IAAI;AAEJ,cAAI,SAAS,mCAAkB,WAAW;AACxC,mBAAO,4CAAC,oCAAe,IAAM;AAAA,UAC/B;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,YAAY,8CAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAA0C;AAClD,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,gBAAY,8BAAW,gBAAgB,MAAM;AAAA,cAC7C,UAAU;AAAA,cACT,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA;AAAA,UACf;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { Separator } from '@elliemae/ds-menu-items';\n\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nimport { StyledSingleMenuItem, StyledMultiMenuItem } from './menu-list/styled.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles?: React.CSSProperties;\n  innerRef?: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.OptionTypes[];\n  handleClick: (option: DSComboboxT.OptionTypes, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments?: () => { index: number };\n}\n\nconst StyledSectionWrapper = styled('section', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`\n  list-style: none;\n  display: grid;\n  align-items: center;\n`;\n\n/**\n * The 32px group-label row height comes from this label alone: 8px top + 8px bottom padding +\n * the b3-strong line-height (~16px) = 32px. No min-height needed here.\n *\n * This is one of four independent reimplementations of the section/group-label row \u2014 the menu-items\n * path (ds-menu-items-commons StyledSectionWrapper) and ds-menu-button reach the same 32px via a\n * wrapper min-height instead. Keep all four aligned (PUI-18609); see KNOWN_INTENTIONAL_DEVIATIONS.md.\n */\nconst StyledSectionLabel = styled(DSTypography, { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const {\n    label,\n    wrapperStyles,\n    focusOptionIdx,\n    selectedValues,\n    innerRef,\n    handleOnMouseDown,\n    options,\n    handleClick,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = Array.isArray(selectedValues)\n    ? StyledMultiMenuItem\n    : StyledSingleMenuItem;\n\n  return (\n    <StyledSectionWrapper\n      role=\"group\"\n      aria-labelledby={id}\n      style={wrapperStyles}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSectionLabel\n        component=\"header\"\n        variant=\"b3-strong\"\n        id={id}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const {\n          dsId,\n          type,\n          value,\n          label: optionLabel,\n          readOnly,\n          disabled,\n          applyAriaDisabled,\n          render,\n          ...rest\n        } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiEnB;AAoCM;AArGV,IAAAA,gBAAkB;AAClB,uBAAuB;AACvB,2BAA6B;AAC7B,2BAA0B;AAE1B,uBAAkC;AAElC,iCAAmC;AAEnC,wBAA2B;AAC3B,IAAAC,oBAAwD;AACxD,oBAA0D;AAe1D,MAAM,2BAAuB,yBAAO,WAAW,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AActH,MAAM,yBAAqB,yBAAO,mCAAc,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAM9G,MAAM,UAAU,cAAAC,QAAM,KAAK,CAAC,UAAwB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,SAAiF,MAAM,QAAQ,cAAc,IAC/G,oCACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR;AAAA,YACA,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,SAAS,IAAI,CAAC,WAAW;AACxB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,GAAG;AAAA,UACL,IAAI;AAEJ,cAAI,SAAS,mCAAkB,WAAW;AACxC,mBAAO,4CAAC,oCAAe,IAAM;AAAA,UAC/B;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,YAAY,8CAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAA0C;AAClD,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,YAAY,OAAO,SAAS,mCAAkB,cAAU,8BAAW,gBAAgB,MAAM;AAAA,cACzF,UAAU;AAAA,cACT,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA;AAAA,UACf;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": ["import_react", "import_constants", "React"]
 }