npm - @elliemae/ds-form-combobox - Versions diffs - 3.70.0-next.2 → 3.70.0-next.20 - Mend

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

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

Files changed (146) hide show

package/dist/cjs/ComboBox.js CHANGED Viewed

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

package/dist/cjs/ComboBox.js.map CHANGED Viewed

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

package/dist/cjs/DSComboboxMultiT.js CHANGED Viewed

@@ -35,7 +35,9 @@ module.exports = __toCommonJS(DSComboboxMultiT_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_DSCommonComboboxPropsT = require("./DSCommonComboboxPropsT.js");
+var import_constants = require("./constants/index.js");
 const multiComboboxPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSFormComboboxName, import_constants.FORM_COMBOBOX_MULTI_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   ...import_DSCommonComboboxPropsT.commonComboboxPropTypes,

package/dist/cjs/DSComboboxMultiT.js.map CHANGED Viewed

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

package/dist/cjs/DSComboboxSingleT.js CHANGED Viewed

@@ -35,7 +35,9 @@ module.exports = __toCommonJS(DSComboboxSingleT_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_DSCommonComboboxPropsT = require("./DSCommonComboboxPropsT.js");
+var import_constants = require("./constants/index.js");
 const singleComboboxPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSFormComboboxName, import_constants.FORM_COMBOBOX_SINGLE_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   ...import_DSCommonComboboxPropsT.commonComboboxPropTypes,

package/dist/cjs/DSComboboxSingleT.js.map CHANGED Viewed

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

package/dist/cjs/TruncatedTooltipText.js ADDED Viewed

@@ -0,0 +1,96 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TruncatedTooltipText_exports = {};
+__export(TruncatedTooltipText_exports, {
+  TruncatedTooltipText: () => TruncatedTooltipText,
+  default: () => TruncatedTooltipText_default
+});
+module.exports = __toCommonJS(TruncatedTooltipText_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+const TruncatedSpan = import_ds_system.styled.span`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+`;
+const TooltipContainer = import_ds_system.styled.div`
+  text-align: center;
+  min-width: ${({ theme }) => theme.space.l};
+  max-width: 250px;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  min-height: 30px;
+  display: grid;
+  align-items: center;
+  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
+  position: relative;
+  background-color: white;
+  border-radius: 2px;
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.neutral[600]};
+  pointer-events: none;
+`;
+const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
+  const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
+  const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
+    placement,
+    externallyControlledIsOpen: showTooltip,
+    withoutAnimation: true
+  });
+  const handleMouseEnter = (0, import_react.useCallback)((e) => {
+    const el = e.currentTarget;
+    setShowTooltip(el.offsetWidth < el.scrollWidth);
+  }, []);
+  const handleMouseLeave = (0, import_react.useCallback)(() => {
+    setShowTooltip(false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncatedSpan, { innerRef: refs.setReference, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: value }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_floating_context.FloatingWrapper,
+      {
+        innerRef: refs.setFloating,
+        isOpen: showTooltip,
+        floatingStyles,
+        context,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { children: [
+          value,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
+        ] })
+      }
+    )
+  ] });
+};
+var TruncatedTooltipText_default = TruncatedTooltipText;
+//# sourceMappingURL=TruncatedTooltipText.js.map

package/dist/cjs/TruncatedTooltipText.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TruncatedTooltipText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\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\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\n  pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n  value?: string;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          {value}\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DnB;AA5DJ,mBAA6C;AAC7C,uBAAuB;AACvB,iCAKO;AAEP,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AASnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,oBACE;AAAA;AAAA,UACD,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
+  "names": []
+}

package/dist/cjs/constants/index.js CHANGED Viewed

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

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

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

package/dist/cjs/parts/LiveRegion.js CHANGED Viewed

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

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

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

package/dist/cjs/parts/Section.js CHANGED Viewed

@@ -41,6 +41,7 @@ var import_constants = require("../constants.js");
 var import_ComboboxDataTestids = require("../ComboboxDataTestids.js");
 var import_listHelper = require("../utils/listHelper.js");
 var import_constants2 = require("../constants/index.js");
+var import_styled = require("./menu-list/styled.js");
 const StyledSectionWrapper = (0, import_ds_system.styled)("section", { name: import_constants2.DSFormComboboxName, slot: import_constants2.FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`
   list-style: none;
   min-height: 24px;
@@ -55,10 +56,6 @@ const StyledSectionLabel = (0, import_ds_system.styled)("header", { name: import
   font-size: 1rem;
   color: neutral-500;
 `;
-const StyledSingleMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.SingleMenuItem, {
-  name: import_constants2.DSFormComboboxName,
-  slot: import_constants2.FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM
-})``;
 const Section = import_react2.default.memo((props) => {
   const {
     label,
@@ -73,7 +70,7 @@ const Section = import_react2.default.memo((props) => {
     getOwnerPropsArguments
   } = props;
   const id = `${label.replace(/ /g, "")}-section`;
-  const CBItem = Array.isArray(selectedValues) ? import_ds_menu_items.MultiMenuItem : StyledSingleMenuItem;
+  const CBItem = Array.isArray(selectedValues) ? import_styled.StyledMultiMenuItem : import_styled.StyledSingleMenuItem;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     StyledSectionWrapper,
     {
@@ -125,7 +122,7 @@ const Section = import_react2.default.memo((props) => {
               },
               onMouseDown: handleOnMouseDown,
               isActive: dsId === focusOptionIdx,
-              isSelected: (0, import_listHelper.isSelected)(selectedValues, option),
+              isSelected: option.type === import_constants.MENU_OPTION_TYPES.OPTION && (0, import_listHelper.isSelected)(selectedValues, option),
               tabIndex: -1,
               ...rest,
               key: option.dsId,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Section.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\n\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles: React.CSSProperties;\n  innerRef: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.ItemOption[] | DSComboboxT.ItemSeparatorOptions[];\n  handleClick: (option: DSComboboxT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments?: () => { index: number };\n}\n\nconst StyledSectionWrapper = styled('section', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`\n  display: flex;\n  align-items: center;\n  padding: 0px 16px;\n  min-height: 24px;\n  font-size: 1rem;\n  color: neutral-500;\n`;\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n})``;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const {\n    label,\n    wrapperStyles,\n    focusOptionIdx,\n    selectedValues,\n    innerRef,\n    handleOnMouseDown,\n    options,\n    handleClick,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  const CBItem = Array.isArray(selectedValues) ? MultiMenuItem : StyledSingleMenuItem;\n\n  return (\n    <StyledSectionWrapper\n      role=\"group\"\n      aria-labelledby={id}\n      style={wrapperStyles}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSectionLabel\n        id={id}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const {\n          dsId,\n          type,\n          value,\n          label: optionLabel,\n          readOnly,\n          disabled,\n          applyAriaDisabled,\n          render,\n          ...rest\n        } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DnB;AAkCM;AAhGV,IAAAA,gBAAkB;AAClB,uBAAuB;AACvB,2BAAyD;AAEzD,uBAAkC;AAElC,iCAAmC;AAEnC,wBAA2B;AAC3B,IAAAC,oBAAwD;AAexD,MAAM,2BAAuB,yBAAO,WAAW,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtH,MAAM,yBAAqB,yBAAO,UAAU,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASjH,MAAM,2BAAuB,yBAAO,qCAAgB;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,sCAAoB;AAC5B,CAAC;AAEM,MAAM,UAAU,cAAAC,QAAM,KAAK,CAAC,UAAwB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,SAAS,MAAM,QAAQ,cAAc,IAAI,qCAAgB;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,SAAS,IAAI,CAAC,WAAW;AACxB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,GAAG;AAAA,UACL,IAAI;AAEJ,cAAI,SAAS,mCAAkB,WAAW;AACxC,mBAAO,4CAAC,oCAAe,IAAM;AAAA,UAC/B;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,YAAY,8CAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAA0C;AAClD,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,gBAAY,8BAAW,gBAAgB,MAAM;AAAA,cAC7C,UAAU;AAAA,cACT,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA;AAAA,UACf;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { 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;",
   "names": ["import_react", "import_constants", "React"]
 }

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

@@ -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,23 +82,20 @@ 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,
     {
       "data-testid": dataTestId ?? import_ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
       innerRef: refs.setReference,
       className,
-      applyAriaDisabled,
+      applyAriaDisabled: applyAriaDisabled ?? false,
       ...xStyledProps,
       getOwnerProps,
       getOwnerPropsArguments,
@@ -117,7 +113,17 @@ const Container = () => {
             ...popperProps,
             key: `${isLoading}${isSkeleton}`
           },
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_styled.StyledPopperWrapper,
+            {
+              tabIndex: -1,
+              onMouseDown: handleMouseDown,
+              applyAriaDisabled: applyAriaDisabled ?? false,
+              getOwnerProps,
+              getOwnerPropsArguments,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {})
+            }
+          )
         ) : null
       ]
     }

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

@@ -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}\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 tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\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;AAAA,MACC,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,4CAAC,qCAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,sDAAC,6BAAS,GACZ;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/container/styled.js CHANGED Viewed

@@ -34,10 +34,10 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_theming = require("../../theming.js");
+var import_constants = require("../../constants/index.js");
 const StyledContainer = (0, import_ds_system.styled)("div", {
-  name: import_theming.DSComboBoxName,
-  slot: import_theming.DSComboboxSlots.CONTAINER
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.ROOT
 })`
   position: relative;
   cursor: ${({ disabled }) => disabled ? "not-allowed" : "default"};
@@ -45,7 +45,10 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
   min-width: 64px;
   ${import_ds_system.xStyledCommonProps}
 `;
-const StyledPopperWrapper = (0, import_ds_system.styled)("div")`
+const StyledPopperWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.POPPER_WRAPPER
+})`
   position: relative;
   cursor: ${({ disabled }) => disabled ? "not-allowed" : "default"};
   cursor: ${({ applyAriaDisabled }) => applyAriaDisabled ? "not-allowed" : "default"};

package/dist/cjs/parts/container/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/container/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nimport type {} from '@xstyled/system';\n\nexport const StyledContainer = styled('div', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.CONTAINER,\n})<XstyledProps & { disabled?: boolean; applyAriaDisabled: boolean }>`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n  min-width: 64px;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledPopperWrapper = styled('div')<{ disabled?: boolean; applyAriaDisabled: boolean }>`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n  overflow: auto;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAE3C,qBAAgD;AAIzC,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA;AAAA,IAElF,mCAAkB;AAAA;AAGf,MAAM,0BAAsB,yBAAO,KAAK;AAAA;AAAA,YAEnC,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA;AAAA;",
+  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nimport type {} from '@xstyled/system';\n\nexport const StyledContainer = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.ROOT,\n})<XstyledProps & { disabled?: boolean; applyAriaDisabled: boolean }>`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n  min-width: 64px;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledPopperWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.POPPER_WRAPPER,\n})<{ disabled?: boolean; applyAriaDisabled: boolean }>`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  cursor: ${({ applyAriaDisabled }) => (applyAriaDisabled ? 'not-allowed' : 'default')};\n  overflow: auto;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAE3C,uBAAwD;AAIjD,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA;AAAA,IAElF,mCAAkB;AAAA;AAGf,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB,SAAU;AAAA,YACxD,CAAC,EAAE,kBAAkB,MAAO,oBAAoB,gBAAgB,SAAU;AAAA;AAAA;",
   "names": []
 }