@elliemae/ds-form-combobox 3.70.0-next.6 → 3.70.0-next.60

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 { 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\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      <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;AD8BnB;AA9BJ,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,CAKjB,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;",
+  "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.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 {\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.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\n    extends DSCommonComboboxPropsT.OptionalProps,\n      TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_MULTI_SLOTS> {}\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  ...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: 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,8BAKO;AAGP,oCAAqE;AACrE,uBAA8D;AAoDvD,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;",
+  "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.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\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: 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,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.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 {\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.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\n    extends DSCommonComboboxPropsT.OptionalProps,\n      TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_SINGLE_SLOTS> {}\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  ...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;AAwDxD,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;",
+  "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.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\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/{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/package.json

@@ -3,8 +3,5 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }

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/Section.js

@@ -36,6 +36,7 @@ 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");
@@ -44,17 +45,13 @@ 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 Section = import_react2.default.memo((props) => {
   const {
@@ -84,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,

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 { 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  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\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        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;AD4DnB;AAkCM;AA9FV,IAAAA,gBAAkB;AAClB,uBAAuB;AACvB,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;AAAA;AAOtH,MAAM,yBAAqB,yBAAO,UAAU,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1G,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;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;",
+  "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"]
 }

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

@@ -39,13 +39,12 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react2 = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
-var import_useClickOutside = require("../../config/useClickOutside.js");
 var import_controls = require("../controls/index.js");
 var import_LiveRegion = require("../LiveRegion.js");
 var import_menu_list = require("../menu-list/index.js");
 var import_styled = require("./styled.js");
 const Container = () => {
-  const { props, internalRef, setMenuState, menuState } = (0, import_react2.useContext)(import_ComboBoxCTX.default);
+  const { props, setMenuState, menuState } = (0, import_react2.useContext)(import_ComboBoxCTX.default);
   const {
     inline,
     startPlacementPreference,
@@ -63,10 +62,6 @@ const Container = () => {
   const handleMouseDown = (0, import_react2.useCallback)((e) => {
     e.preventDefault();
   }, []);
-  const handleCloseMenu = (0, import_react2.useCallback)(() => {
-    setMenuState(false, "blur");
-    if (internalRef?.current) internalRef.current.blur();
-  }, [internalRef, setMenuState]);
   (0, import_react2.useEffect)(() => {
     const closeMenuOnWindowBlur = () => {
       if (menuState) setMenuState(false, "blur");
@@ -76,6 +71,10 @@ const Container = () => {
       window.removeEventListener("blur", closeMenuOnWindowBlur);
     };
   }, [menuState, setMenuState]);
+  const handleClickOutside = (0, import_react2.useCallback)(() => {
+    if (inline) return;
+    setMenuState(false, "blur");
+  }, [setMenuState, inline]);
   const config = (0, import_react2.useMemo)(
     () => ({
       placement: startPlacementPreference,
@@ -83,16 +82,13 @@ const Container = () => {
       placementOrderPreference,
       zIndex: correctZIndex,
       customOffset: [0, 5],
-      handleCloseMenu,
-      externallyControlledIsOpen: menuState
+      externallyControlledIsOpen: menuState,
+      // Gate on `!inline` — in inline mode the consumer's outer wrapper handles dismissal.
+      onClickOutside: inline ? void 0 : handleClickOutside
     }),
-    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState]
+    [startPlacementPreference, placementOrderPreference, correctZIndex, menuState, inline, handleClickOutside]
   );
   const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)(config);
-  const hideTooltip = (0, import_react2.useCallback)(() => {
-    setMenuState(false, "blur");
-  }, [setMenuState]);
-  (0, import_useClickOutside.useOnClickOutside)(refs.reference, hideTooltip, refs.floating);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledContainer,
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable consistent-return */\n/* eslint-disable complexity */\nimport { FloatingWrapper, useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useContext, useEffect, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\nimport { Controls } from '../controls/index.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n  const {\n    inline,\n    startPlacementPreference,\n    placementOrderPreference,\n    isLoading,\n    isSkeleton,\n    applyAriaDisabled,\n    popperProps,\n  } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (internalRef?.current) internalRef.current.blur();\n  }, [internalRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  const config = useMemo(\n    () => ({\n      placement: startPlacementPreference,\n      withoutAnimation: true,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      externallyControlledIsOpen: menuState,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const hideTooltip = useCallback(() => {\n    setMenuState(false, 'blur');\n  }, [setMenuState]);\n\n  useOnClickOutside(refs.reference, hideTooltip, refs.floating);\n\n  return (\n    <StyledContainer\n      data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n      innerRef={refs.setReference}\n      className={className}\n      applyAriaDisabled={applyAriaDisabled ?? false}\n      {...xStyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <LiveRegion />\n      <Controls />\n\n      {menuState && inline ? <MenuList /> : null}\n      {menuState && !inline && refs.reference ? (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          floatingStyles={floatingStyles}\n          isOpen={menuState}\n          context={context}\n          {...popperProps}\n          key={`${isLoading}${isSkeleton}`} // to force remount when loading/skeleton changes\n        >\n          <StyledPopperWrapper\n            tabIndex={-1}\n            onMouseDown={handleMouseDown}\n            applyAriaDisabled={applyAriaDisabled ?? false}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <MenuList />\n          </StyledPopperWrapper>\n        </FloatingWrapper>\n      ) : null}\n    </StyledContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EnB;AAcI;AAzFR,iCAAoD;AACpD,8BAA0E;AAC1E,IAAAA,gBAAmE;AACnE,yBAA4B;AAC5B,iCAAmC;AACnC,6BAAkC;AAClC,sBAAyB;AACzB,wBAA2B;AAC3B,uBAAyB;AACzB,oBAAqD;AAE9C,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,QAAI,0BAAW,mBAAAC,OAAe;AAElF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,uBAAmB,gDAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,QAAI,4CAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,sBAAkB,2BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,2BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,+BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB,MAAM;AAEnE,QAAM,kBAAc,2BAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,gDAAkB,KAAK,WAAW,aAAa,KAAK,QAAQ;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,UAAU,KAAK;AAAA,MACf;AAAA,MACA,mBAAmB,qBAAqB;AAAA,MACvC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,gCAAW;AAAA,QACZ,4CAAC,4BAAS;AAAA,QAET,aAAa,SAAS,4CAAC,6BAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,KAAK,YAC5B;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG;AAAA,YACJ,KAAK,GAAG,SAAS,GAAG,UAAU;AAAA;AAAA,UAE9B;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,aAAa;AAAA,cACb,mBAAmB,qBAAqB;AAAA,cACxC;AAAA,cACA;AAAA,cAEA,sDAAC,6BAAS;AAAA;AAAA,UACZ;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["/* eslint-disable consistent-return */\n/* eslint-disable complexity */\nimport { FloatingWrapper, useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useContext, useEffect, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { Controls } from '../controls/index.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\n\nexport const Container = (): JSX.Element => {\n  const { props, setMenuState, menuState } = useContext(ComboBoxContext);\n\n  const {\n    inline,\n    startPlacementPreference,\n    placementOrderPreference,\n    isLoading,\n    isSkeleton,\n    applyAriaDisabled,\n    popperProps,\n  } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  // In inline mode the combobox is rendered inside a consumer-controlled FloatingWrapper.\n  // The consumer owns dismissal; if we closed the internal menuState here, the outer wrapper\n  // would stay open and the user would see the input without options (\"weird state\").\n  const handleClickOutside = useCallback(() => {\n    if (inline) return;\n    setMenuState(false, 'blur');\n  }, [setMenuState, inline]);\n\n  const config = useMemo(\n    () => ({\n      placement: startPlacementPreference,\n      withoutAnimation: true,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      externallyControlledIsOpen: menuState,\n      // Gate on `!inline` \u2014 in inline mode the consumer's outer wrapper handles dismissal.\n      onClickOutside: inline ? undefined : handleClickOutside,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, menuState, inline, handleClickOutside],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  return (\n    <StyledContainer\n      data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n      innerRef={refs.setReference}\n      className={className}\n      applyAriaDisabled={applyAriaDisabled ?? false}\n      {...xStyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <LiveRegion />\n      <Controls />\n\n      {menuState && inline ? <MenuList /> : null}\n      {menuState && !inline && refs.reference ? (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          floatingStyles={floatingStyles}\n          isOpen={menuState}\n          context={context}\n          {...popperProps}\n          key={`${isLoading}${isSkeleton}`} // to force remount when loading/skeleton changes\n        >\n          <StyledPopperWrapper\n            tabIndex={-1}\n            onMouseDown={handleMouseDown}\n            applyAriaDisabled={applyAriaDisabled ?? false}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <MenuList />\n          </StyledPopperWrapper>\n        </FloatingWrapper>\n      ) : null}\n    </StyledContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AAcI;AAtFR,iCAAoD;AACpD,8BAA0E;AAC1E,IAAAA,gBAAmE;AACnE,yBAA4B;AAC5B,iCAAmC;AACnC,sBAAyB;AACzB,wBAA2B;AAC3B,uBAAyB;AACzB,oBAAqD;AAE9C,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,UAAU,QAAI,0BAAW,mBAAAC,OAAe;AAErE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,uBAAmB,gDAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,QAAI,4CAAmB,KAAK;AAC5D,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,sBAAkB,2BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAK5B,QAAM,yBAAqB,2BAAY,MAAM;AAC3C,QAAI,OAAQ;AACZ,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB,4BAA4B;AAAA;AAAA,MAE5B,gBAAgB,SAAS,SAAY;AAAA,IACvC;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,WAAW,QAAQ,kBAAkB;AAAA,EAC3G;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,UAAU,KAAK;AAAA,MACf;AAAA,MACA,mBAAmB,qBAAqB;AAAA,MACvC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,gCAAW;AAAA,QACZ,4CAAC,4BAAS;AAAA,QAET,aAAa,SAAS,4CAAC,6BAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,KAAK,YAC5B;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG;AAAA,YACJ,KAAK,GAAG,SAAS,GAAG,UAAU;AAAA;AAAA,UAE9B;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,aAAa;AAAA,cACb,mBAAmB,qBAAqB;AAAA,cACxC;AAAA,cACA;AAAA,cAEA,sDAAC,6BAAS;AAAA;AAAA,UACZ;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
   "names": ["import_react", "ComboBoxContext"]
 }

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

@@ -37,7 +37,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
-var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
+var import_TruncatedText = require("../../TruncatedText.js");
 var import_ControlsInput = require("../controls-input/ControlsInput.js");
 var import_DropdownIndicator = require("../DropdownIndicator.js");
 var import_multi_selected_values_container = require("../multi-selected-values-container/index.js");
@@ -60,32 +60,37 @@ const Controls = () => {
     shouldPreventContextMenuOpening
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
-  const handleOnClick = (0, import_react.useCallback)(() => {
-    if (disabled) return;
-    if (applyAriaDisabled || shouldPreventContextMenuOpening) {
+  const handleOnClick = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      if (applyAriaDisabled || shouldPreventContextMenuOpening) {
+        internalRef.current?.focus();
+        return;
+      }
+      if (e.target === internalRef.current && hasFocus && menuState) return;
+      if (hasFocus && menuState && !inline) {
+        setMenuState(false, "click");
+        setFocusOptionIdx("");
+        internalRef.current?.blur();
+        return;
+      }
       internalRef.current?.focus();
-      return;
-    }
-    if (hasFocus && menuState && !inline) {
-      setMenuState(false, "click");
-      setFocusOptionIdx("");
-      internalRef.current?.blur();
-      return;
-    }
-    internalRef.current?.focus();
-    setMenuState(true, "click");
-  }, [
-    disabled,
-    listRef,
-    hasFocus,
-    menuState,
-    inline,
-    setMenuState,
-    focusOptionIdx,
-    readOnly,
-    applyAriaDisabled,
-    isMenuOpenableWithReadOnly
-  ]);
+      setMenuState(true, "click");
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      disabled,
+      listRef,
+      hasFocus,
+      menuState,
+      inline,
+      setMenuState,
+      focusOptionIdx,
+      readOnly,
+      applyAriaDisabled,
+      isMenuOpenableWithReadOnly
+    ]
+  );
   const handleOnPillsClick = (0, import_react.useCallback)(
     (e) => {
       if (applyAriaDisabled) return;
@@ -100,6 +105,7 @@ const Controls = () => {
   );
   const handleOnMouseDown = (0, import_react.useCallback)(
     (e) => {
+      if (e.target === internalRef.current) return;
       if (document.activeElement === internalRef.current || inline) {
         e.preventDefault();
       }
@@ -129,17 +135,27 @@ const Controls = () => {
       "aria-disabled": applyAriaDisabled,
       "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.CONTROLS_WRAPPER,
       children: [
-        !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSelection, { innerRef: selectedOptionsRef, onClick: handleOnPillsClick, getOwnerProps, children: Array.isArray(selectedValues) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_multi_selected_values_container.MultiSelectedValuesContainer, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_styled.StyledSingleSelectWraper,
+        !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledSelection,
           {
-            readOnly: readOnly ?? false,
-            "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES,
-            disabled: disabled ?? false,
-            applyAriaDisabled: applyAriaDisabled ?? false,
+            variant: "b2",
+            component: "div",
+            innerRef: selectedOptionsRef,
+            onClick: handleOnPillsClick,
             getOwnerProps,
-            children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: selectedValues.label }) : null
+            children: Array.isArray(selectedValues) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_multi_selected_values_container.MultiSelectedValuesContainer, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_styled.StyledSingleSelectWraper,
+              {
+                readOnly: readOnly ?? false,
+                "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES,
+                disabled: disabled ?? false,
+                applyAriaDisabled: applyAriaDisabled ?? false,
+                getOwnerProps,
+                children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedText.TruncatedText, { value: selectedValues.label }) : null
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
         !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport {\n  StyledControlsWrapper,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n  StyledSingleSelectWraper,\n  StyleHeaderActionsSeparator,\n} from './styled.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\n\nexport const Controls = (): JSX.Element => {\n  const {\n    props,\n    props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    inputValue,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n    shouldPreventContextMenuOpening,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (applyAriaDisabled || shouldPreventContextMenuOpening) {\n      internalRef.current?.focus();\n      return;\n    }\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false, 'click');\n      setFocusOptionIdx('');\n      internalRef.current?.blur();\n      return;\n    }\n    internalRef.current?.focus();\n    setMenuState(true, 'click');\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    disabled,\n    listRef,\n    hasFocus,\n    menuState,\n    inline,\n    setMenuState,\n    focusOptionIdx,\n    readOnly,\n    applyAriaDisabled,\n    isMenuOpenableWithReadOnly,\n  ]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      if (menuState || disabled || shouldPreventContextMenuOpening) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true, 'pill-click');\n      }\n    },\n    [applyAriaDisabled, menuState, disabled, internalRef, setMenuState, shouldPreventContextMenuOpening],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === internalRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [internalRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '8px', '2.231rem'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      innerRef={controlsWrapperRef}\n      readOnly={readOnly ?? false}\n      cols={cols}\n      disabled={disabled ?? false}\n      applyAriaDisabled={applyAriaDisabled ?? false}\n      hasError={hasError ?? false}\n      inline={inline ?? false}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      aria-disabled={applyAriaDisabled}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick} getOwnerProps={getOwnerProps}>\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <StyledSingleSelectWraper\n              readOnly={readOnly ?? false}\n              // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n              data-testid={ComboboxDataTestid.SELECTED_VALUES}\n              disabled={disabled ?? false}\n              applyAriaDisabled={applyAriaDisabled ?? false}\n              getOwnerProps={getOwnerProps}\n            >\n              {selectedValues && inputValue === '' ? <TruncatedTooltipText value={selectedValues.label} /> : null}\n            </StyledSingleSelectWraper>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {/** This empty div is a gap between the input and the drop down indicator  */}\n      <div />\n      {!inline && (\n        <StyledHeaderActionsWrapper\n          justifyItems=\"center\"\n          cols={['min-content', 'minmax(28px,max-content)']}\n          justifyContent=\"flex-end\"\n          getOwnerProps={getOwnerProps}\n        >\n          <StyleHeaderActionsSeparator\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled}\n            readOnly={readOnly}\n            getOwnerProps={getOwnerProps}\n          />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { TruncatedText } from '../../TruncatedText.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport {\n  StyledControlsWrapper,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n  StyledSingleSelectWraper,\n  StyleHeaderActionsSeparator,\n} from './styled.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\n\nexport const Controls = (): JSX.Element => {\n  const {\n    props,\n    props: { inline, disabled, hasError, selectedValues, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    inputValue,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n    shouldPreventContextMenuOpening,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (disabled) return;\n      if (applyAriaDisabled || shouldPreventContextMenuOpening) {\n        internalRef.current?.focus();\n        return;\n      }\n      /** A click on the input itself while already focused with the menu open is caret\n       * placement, not a wrapper toggle \u2014 leave state untouched so it doesn't blur (and\n       * clear, via handleOnBlur) the value being edited. */\n      if (e.target === internalRef.current && hasFocus && menuState) return;\n      if (hasFocus && menuState && !inline) {\n        setMenuState(false, 'click');\n        setFocusOptionIdx('');\n        internalRef.current?.blur();\n        return;\n      }\n      internalRef.current?.focus();\n      setMenuState(true, 'click');\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      disabled,\n      listRef,\n      hasFocus,\n      menuState,\n      inline,\n      setMenuState,\n      focusOptionIdx,\n      readOnly,\n      applyAriaDisabled,\n      isMenuOpenableWithReadOnly,\n    ],\n  );\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      if (menuState || disabled || shouldPreventContextMenuOpening) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true, 'pill-click');\n      }\n    },\n    [applyAriaDisabled, menuState, disabled, internalRef, setMenuState, shouldPreventContextMenuOpening],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      /** A click on the input itself must keep native caret placement and double-click\n       * word selection \u2014 only suppress the default (to avoid blur) for clicks elsewhere\n       * in the wrapper (pills, dropdown indicator, empty space). */\n      if (e.target === internalRef.current) return;\n      if (document.activeElement === internalRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [internalRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '8px', '2.231rem'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      innerRef={controlsWrapperRef}\n      readOnly={readOnly ?? false}\n      cols={cols}\n      disabled={disabled ?? false}\n      applyAriaDisabled={applyAriaDisabled ?? false}\n      hasError={hasError ?? false}\n      inline={inline ?? false}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      aria-disabled={applyAriaDisabled}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection\n          variant=\"b2\"\n          component=\"div\"\n          innerRef={selectedOptionsRef}\n          onClick={handleOnPillsClick}\n          getOwnerProps={getOwnerProps}\n        >\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <StyledSingleSelectWraper\n              readOnly={readOnly ?? false}\n              // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n              data-testid={ComboboxDataTestid.SELECTED_VALUES}\n              disabled={disabled ?? false}\n              applyAriaDisabled={applyAriaDisabled ?? false}\n              getOwnerProps={getOwnerProps}\n            >\n              {selectedValues && inputValue === '' ? <TruncatedText value={selectedValues.label} /> : null}\n            </StyledSingleSelectWraper>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {/** This empty div is a gap between the input and the drop down indicator  */}\n      <div />\n      {!inline && (\n        <StyledHeaderActionsWrapper\n          justifyItems=\"center\"\n          cols={['min-content', 'minmax(28px,max-content)']}\n          justifyContent=\"flex-end\"\n          getOwnerProps={getOwnerProps}\n        >\n          <StyleHeaderActionsSeparator\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled}\n            readOnly={readOnly}\n            getOwnerProps={getOwnerProps}\n          />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["ComboBoxContext"]
 }