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

package/dist/cjs/DSComboboxMultiT.js

@@ -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

@@ -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

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

package/dist/cjs/DSComboboxSingleT.js.map

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

@@ -0,0 +1,94 @@
+"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: left;
+  min-width: ${({ theme }) => theme.space.l};
+  max-width: 250px;
+  min-height: 30px;
+  display: grid;
+  align-items: center;
+  padding: ${({ theme }) => `${theme.space.xxxs} ${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

@@ -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: left;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxxs} ${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;AD0DnB;AA1DJ,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,aAK9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxD,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

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

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

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

package/dist/cjs/parts/Section.js

@@ -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

@@ -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

@@ -99,7 +99,7 @@ const Container = () => {
       "data-testid": dataTestId ?? import_ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
       innerRef: refs.setReference,
       className,
-      applyAriaDisabled,
+      applyAriaDisabled: applyAriaDisabled ?? false,
       ...xStyledProps,
       getOwnerProps,
       getOwnerPropsArguments,
@@ -117,7 +117,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

@@ -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 { 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;",
   "names": ["import_react", "ComboBoxContext"]
 }

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

@@ -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

@@ -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": []
 }

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

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(Controls_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
 var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
@@ -117,26 +117,27 @@ const Controls = () => {
       getOwnerProps,
       getOwnerPropsArguments,
       innerRef: controlsWrapperRef,
-      readOnly,
+      readOnly: readOnly ?? false,
       cols,
-      disabled,
-      applyAriaDisabled,
-      hasError,
-      inline,
+      disabled: disabled ?? false,
+      applyAriaDisabled: applyAriaDisabled ?? false,
+      hasError: hasError ?? false,
+      inline: inline ?? false,
       onClick: handleOnClick,
       onMouseDown: handleOnMouseDown,
       onKeyDown: onKeyDownPills,
       "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, children: Array.isArray(selectedValues) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_multi_selected_values_container.MultiSelectedValuesContainer, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        !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,
           {
-            readOnly,
+            readOnly: readOnly ?? false,
             "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES,
-            disabled,
-            applyAriaDisabled,
-            children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: selectedValues.label }) : null
+            disabled: disabled ?? false,
+            applyAriaDisabled: applyAriaDisabled ?? false,
+            getOwnerProps,
+            children: selectedValues && inputValue === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: selectedValues.label }) : null
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlsInput.ControlsInput, {}),
@@ -147,8 +148,17 @@ const Controls = () => {
             justifyItems: "center",
             cols: ["min-content", "minmax(28px,max-content)"],
             justifyContent: "flex-end",
+            getOwnerProps,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyleHeaderActionsSeparator, { disabled, applyAriaDisabled, readOnly }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styled.StyleHeaderActionsSeparator,
+                {
+                  disabled,
+                  applyAriaDisabled,
+                  readOnly,
+                  getOwnerProps
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownIndicator.DropdownIndicator, {})
             ]
           }

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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.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}\n      cols={cols}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      hasError={hasError}\n      inline={inline}\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}>\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <StyledSingleSelectWraper\n              readOnly={readOnly}\n              data-testid={ComboboxDataTestid.SELECTED_VALUES}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n            >\n              {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText 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        >\n          <StyleHeaderActionsSeparator disabled={disabled} applyAriaDisabled={applyAriaDisabled} readOnly={readOnly} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqHX;AAnHZ,8BAA8B;AAC9B,uCAA2C;AAC3C,mBAAwD;AACxD,yBAA4B;AAC5B,iCAAmC;AACnC,2BAA8B;AAC9B,+BAAkC;AAClC,6CAA6C;AAC7C,oBAMO;AACP,kCAAqC;AAE9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,QAAQ,UAAU,UAAU,gBAAgB,mBAAmB,UAAU,2BAA2B;AAAA,IAC7G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI,SAAU;AACd,QAAI,qBAAqB,iCAAiC;AACxD,kBAAY,SAAS,MAAM;AAC3B;AAAA,IACF;AACA,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,OAAO,OAAO;AAC3B,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,MAAM,OAAO;AAAA,EAG5B,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,kBAAmB;AACvB,UAAI,aAAa,YAAY,iCAAiC;AAC5D,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,WAAW,UAAU,aAAa,cAAc,+BAA+B;AAAA,EACrG;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,OAAO,UAAU,IAAI,CAAC,mBAAmB;AAAA,IAC5G,CAAC,MAAM;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,iBAAe;AAAA,MACf,eAAa,8CAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,4CAAC,iCAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,8CAAmB;AAAA,YAChC;AAAA,YACA;AAAA,YAEC,4BAAkB,eAAe,KAAK,4CAAC,+DAA2B,OAAO,eAAe,OAAO,IAAK;AAAA;AAAA,QACvG,GAEJ;AAAA,QAGF,4CAAC,sCAAc;AAAA,QAEf,4CAAC,SAAI;AAAA,QACJ,CAAC,UACA;AAAA,UAAC;AAAA;AAAA,YACC,cAAa;AAAA,YACb,MAAM,CAAC,eAAe,0BAA0B;AAAA,YAChD,gBAAe;AAAA,YAEf;AAAA,0DAAC,6CAA4B,UAAoB,mBAAsC,UAAoB;AAAA,cAC3G,4CAAC,8CAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.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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",
   "names": ["ComboBoxContext"]
 }