@elliemae/ds-form-combobox 3.40.0 → 3.41.0-rc.0

package/dist/cjs/ComboBox.js

@@ -30,7 +30,8 @@ var ComboBox_exports = {};
 __export(ComboBox_exports, {
   DSComboBox: () => DSComboBox,
   DSComboBoxV3: () => DSComboBox,
-  DSComboBoxWithSchema: () => DSComboBoxWithSchema
+  DSComboBoxWithSchema: () => DSComboBoxWithSchema,
+  offScreenStyle: () => offScreenStyle
 });
 module.exports = __toCommonJS(ComboBox_exports);
 var React = __toESM(require("react"));
@@ -40,9 +41,23 @@ var import_useComboBox = require("./config/useComboBox.js");
 var import_container = require("./parts/container/index.js");
 var import_ComboBoxCTX = require("./ComboBoxCTX.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_LiveRegion = require("./parts/LiveRegion.js");
+const offScreenStyle = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  width: "1px",
+  position: "absolute"
+};
 const DSComboBox = (props) => {
   const ctx = (0, import_useComboBox.useComboBox)(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComboBoxCTX.ComboBoxContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_container.Container, {}) });
+  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" : "" })
+  ] });
 };
 DSComboBox.displayName = "DSComboBox";
 const DSComboBoxWithSchema = (0, import_ds_props_helpers.describe)(DSComboBox);

package/dist/cjs/ComboBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ComboBox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useComboBox } from './config/useComboBox.js';\nimport { Container } from './parts/container/index.js';\nimport { ComboBoxContext } from './ComboBoxCTX.js';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { ComboboxPropTypes } from './react-desc-prop-types.js';\n\nconst DSComboBox: React.ComponentType<DSComboboxT.Props> = (props) => {\n  const ctx = useComboBox(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n    </ComboBoxContext.Provider>\n  );\n};\n\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAXN,8BAAyB;AACzB,yBAA4B;AAC5B,uBAA0B;AAC1B,yBAAgC;AAEhC,mCAAkC;AAElC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,UAAM,gCAAY,KAAK;AAC7B,SACE,4CAAC,mCAAgB,UAAhB,EAAyB,OAAO,KAC/B,sDAAC,8BAAU,GACb;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAEhD,qBAAqB,YAAY;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useComboBox } from './config/useComboBox.js';\nimport { Container } from './parts/container/index.js';\nimport { ComboBoxContext } from './ComboBoxCTX.js';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { ComboboxPropTypes } from './react-desc-prop-types.js';\nimport { Announcer } from './parts/LiveRegion.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: React.ComponentType<DSComboboxT.Props> = (props) => {\n  const ctx = useComboBox(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 = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAtBJ,8BAAyB;AACzB,yBAA4B;AAC5B,uBAA0B;AAC1B,yBAAgC;AAEhC,mCAAkC;AAClC,wBAA0B;AAEnB,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,aAAqD,CAAC,UAAU;AACpE,QAAM,UAAM,gCAAY,KAAK;AAC7B,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;",
   "names": []
 }

package/dist/cjs/ComboBoxCTX.js

@@ -78,7 +78,8 @@ const defaultContext = {
   setShowSelectedOptions: noop,
   setMenuState: noop,
   internalRef: (0, import_react.createRef)(),
-  correctOptions: []
+  correctOptions: [],
+  instanceUid: ""
 };
 const ComboBoxContext = (0, import_react.createContext)(defaultContext);
 var ComboBoxCTX_default = ComboBoxContext;

package/dist/cjs/ComboBoxCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ComboBoxCTX.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: noop,\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n  correctOptions: [],\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAU,wBAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AACrB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,kBAAc,wBAA0B;AAAA,EACxC,aAAS,wBAA0B;AAAA,EACnC,oBAAgB,wBAA0B;AAAA,EAC1C,wBAAoB,wBAA4B;AAAA,EAChD,wBAAoB,wBAA4B;AAAA,EAChD,0BAAsB,wBAA4B;AAAA,EAClD,8BAA0B,wBAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,iBAAa,wBAA4B;AAAA,EACzC,gBAAgB,CAAC;AACnB;AAEO,MAAM,sBAAkB,4BAAc,cAAc;AAE3D,IAAO,sBAAQ;",
+  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: noop,\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n  correctOptions: [],\n  instanceUid: '',\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAU,wBAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AACrB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,kBAAc,wBAA0B;AAAA,EACxC,aAAS,wBAA0B;AAAA,EACnC,oBAAgB,wBAA0B;AAAA,EAC1C,wBAAoB,wBAA4B;AAAA,EAChD,wBAAoB,wBAA4B;AAAA,EAChD,0BAAsB,wBAA4B;AAAA,EAClD,8BAA0B,wBAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,iBAAa,wBAA4B;AAAA,EACzC,gBAAgB,CAAC;AAAA,EACjB,aAAa;AACf;AAEO,MAAM,sBAAkB,4BAAc,cAAc;AAE3D,IAAO,sBAAQ;",
   "names": []
 }

package/dist/cjs/ComboboxDataTestids.js

@@ -41,6 +41,7 @@ const ComboboxDataTestid = {
   CONTAINER: "combobox-container",
   INPUT: "combobox-input",
   LIST: "combobox-menu-list",
+  NO_MATCHES_FOUND: "combobox-no-matches-found",
   SELECTED_VALUES: "combobox-selected-values",
   DROPDOWN: "combobox-dropdown-btn",
   OPTION: "combobox-option",

package/dist/cjs/ComboboxDataTestids.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ComboboxDataTestids.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const ComboboxDataTestid = {\n  MULTISELECT: {\n    HEADER_LIST: 'combobox-header-list',\n    SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle',\n  },\n  CONTROLS_WRAPPER: 'combobox-controls-wrapper',\n  CONTAINER: 'combobox-container',\n  INPUT: 'combobox-input',\n  LIST: 'combobox-menu-list',\n  SELECTED_VALUES: 'combobox-selected-values',\n  DROPDOWN: 'combobox-dropdown-btn',\n  OPTION: 'combobox-option',\n  ALLY_SELECTED_VALUES: 'combobox-ally-selected-values',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAAA,EAChC,aAAa;AAAA,IACX,aAAa;AAAA,IACb,8BAA8B;AAAA,EAChC;AAAA,EACA,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,sBAAsB;AACxB;",
+  "sourcesContent": ["export const ComboboxDataTestid = {\n  MULTISELECT: {\n    HEADER_LIST: 'combobox-header-list',\n    SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle',\n  },\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};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAAA,EAChC,aAAa;AAAA,IACX,aAAa;AAAA,IACb,8BAA8B;AAAA,EAChC;AAAA,EACA,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;AACxB;",
   "names": []
 }

package/dist/cjs/parts/LiveRegion.js

@@ -28,12 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var LiveRegion_exports = {};
 __export(LiveRegion_exports, {
+  Announcer: () => Announcer,
   LiveRegion: () => LiveRegion
 });
 module.exports = __toCommonJS(LiveRegion_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ComboBoxCTX = __toESM(require("../ComboBoxCTX.js"));
 var import_styled = require("./styled.js");
 var import_ComboboxDataTestids = require("../ComboboxDataTestids.js");
@@ -44,7 +45,7 @@ const LiveRegion = () => {
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   const ScreenReaderText = onCreate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: "aria-creatable", children: "press enter to create the option" }) : "";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styled.StyledA11ySelectedValues,
+    import_styled.StyledA11yNotVisible,
     {
       "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.ALLY_SELECTED_VALUES,
       "aria-live": "polite",
@@ -54,4 +55,5 @@ 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 }));
 //# sourceMappingURL=LiveRegion.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/LiveRegion.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { StyledA11ySelectedValues } 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    <StyledA11ySelectedValues\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    </StyledA11ySelectedValues>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUe;AAVtC,mBAAkC;AAClC,yBAA4B;AAC5B,oBAAyC;AACzC,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;",
-  "names": ["ComboBoxContext"]
+  "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;",
+  "names": ["ComboBoxContext", "React"]
 }

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

@@ -28,9 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Container_exports = {};
 __export(Container_exports, {
-  Announcer: () => Announcer,
-  Container: () => Container,
-  offScreenStyle: () => offScreenStyle
+  Container: () => Container
 });
 module.exports = __toCommonJS(Container_exports);
 var React = __toESM(require("react"));
@@ -44,28 +42,9 @@ var import_controls = require("../controls/index.js");
 var import_menu_list = require("../menu-list/index.js");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_LiveRegion = require("../LiveRegion.js");
-const offScreenStyle = {
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: 0,
-  width: "1px",
-  position: "absolute"
-};
-const Announcer = ({ message }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-live": "polite", "aria-relevant": "all", style: offScreenStyle, children: message });
 const Container = () => {
-  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } = (0, import_react.useContext)(import_ComboBoxCTX.default);
-  const {
-    inline,
-    isSkeleton,
-    startPlacementPreference,
-    placementOrderPreference,
-    withoutPortal,
-    isLoading,
-    applyAriaDisabled
-  } = props;
+  const { props, internalRef, instanceUid, setMenuState, menuState, setReferenceElement, referenceElement } = (0, import_react.useContext)(import_ComboBoxCTX.default);
+  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, applyAriaDisabled } = props;
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
   const { zIndex, ...xStyledProps } = (0, import_ds_props_helpers.useGetXstyledProps)(props);
   const correctZIndex = zIndex ? parseInt(zIndex, 10) : void 0;
@@ -86,41 +65,43 @@ const Container = () => {
       window.removeEventListener("blur", closeMenuOnWindowBlur);
     };
   }, [menuState, setMenuState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_styled.StyledContainer,
-    {
-      "data-testid": dataTestId ?? import_ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
-      innerRef: setReferenceElement,
-      className,
-      applyAriaDisabled,
-      ...xStyledProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveRegion.LiveRegion, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Announcer, { message: isLoading || isSkeleton ? "Loading options please wait" : "" }),
-        inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {})
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
-          referenceElement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ds_popperjs.DSPopperJS,
-            {
-              customOffset: [0, 5],
-              referenceElement,
-              showPopover: menuState,
-              closeContextMenu: handleCloseMenu,
-              startPlacementPreference,
-              placementOrderPreference,
-              withoutPortal,
-              withoutArrow: true,
-              withoutAnimation: true,
-              zIndex: correctZIndex,
-              children: /* @__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, {}) })
-            }
-          ) : null
-        ] })
-      ]
-    }
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_styled.StyledContainer,
+      {
+        "data-testid": dataTestId ?? import_ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
+        innerRef: setReferenceElement,
+        className,
+        applyAriaDisabled,
+        ...xStyledProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveRegion.LiveRegion, {}),
+          inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {})
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
+            referenceElement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ds_popperjs.DSPopperJS,
+              {
+                customOffset: [0, 5],
+                referenceElement,
+                showPopover: menuState,
+                closeContextMenu: handleCloseMenu,
+                startPlacementPreference,
+                placementOrderPreference,
+                withoutPortal,
+                withoutArrow: true,
+                withoutAnimation: true,
+                zIndex: correctZIndex,
+                children: /* @__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, {}) })
+              }
+            ) : null
+          ] })
+        ]
+      }
+    ) })
   );
 };
 //# sourceMappingURL=Container.js.map

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 complexity */\nimport React, { useCallback, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.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\nexport const Announcer = ({ message }: { message: string }) => (\n  <div aria-live=\"polite\" aria-relevant=\"all\" style={offScreenStyle}>\n    {message}\n  </div>\n);\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const {\n    inline,\n    isSkeleton,\n    startPlacementPreference,\n    placementOrderPreference,\n    withoutPortal,\n    isLoading,\n    applyAriaDisabled,\n  } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(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  return (\n    <StyledContainer\n      data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n      innerRef={setReferenceElement}\n      className={className}\n      applyAriaDisabled={applyAriaDisabled}\n      {...xStyledProps}\n    >\n      <LiveRegion />\n      <Announcer message={isLoading || isSkeleton ? 'Loading options please wait' : ''} />\n\n      {inline ? (\n        <>\n          <Controls />\n          <MenuList />\n        </>\n      ) : (\n        <>\n          <Controls />\n          {referenceElement ? (\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={correctZIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          ) : null}\n        </>\n      )}\n    </StyledContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBrB;AAtBF,mBAA0D;AAC1D,8BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAEpB,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;AAEO,MAAM,YAAY,CAAC,EAAE,QAAQ,MAClC,4CAAC,SAAI,aAAU,UAAS,iBAAc,OAAM,OAAO,gBAChD,mBACH;AAGK,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,QACzF,yBAAW,mBAAAA,OAAe;AAE5B,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;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,gCAAW;AAAA,QACZ,4CAAC,aAAU,SAAS,aAAa,aAAa,gCAAgC,IAAI;AAAA,QAEjF,SACC,4EACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC,6BAAS;AAAA,WACZ,IAEA,4EACE;AAAA,sDAAC,4BAAS;AAAA,UACT,mBACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB;AAAA,cACA,aAAa;AAAA,cACb,kBAAkB;AAAA,cAClB;AAAA,cACA;AAAA,cACA;AAAA,cACA,cAAY;AAAA,cACZ,kBAAgB;AAAA,cAChB,QAAQ;AAAA,cAER,sDAAC,qCAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,sDAAC,6BAAS,GACZ;AAAA;AAAA,UACF,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, instanceUid, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, applyAriaDisabled } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(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  return (\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        innerRef={setReferenceElement}\n        className={className}\n        applyAriaDisabled={applyAriaDisabled}\n        {...xStyledProps}\n      >\n        <LiveRegion />\n\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            {referenceElement ? (\n              <DSPopperJS\n                customOffset={[0, 5]}\n                referenceElement={referenceElement}\n                showPopover={menuState}\n                closeContextMenu={handleCloseMenu}\n                startPlacementPreference={startPlacementPreference}\n                placementOrderPreference={placementOrderPreference}\n                withoutPortal={withoutPortal}\n                withoutArrow\n                withoutAnimation\n                zIndex={correctZIndex}\n              >\n                <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n                  <MenuList />\n                </StyledPopperWrapper>\n              </DSPopperJS>\n            ) : null}\n          </>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuDf;AAtDR,mBAA0D;AAC1D,8BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAEpB,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,QACtG,yBAAW,mBAAAA,OAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,eAAe,kBAAkB,IAAI;AACzG,QAAM,uBAAmB,gDAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,QAAI,4CAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,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;AAAA;AAAA,IAEE,2EACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,8CAAmB;AAAA,QAC9C,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,sDAAC,gCAAW;AAAA,UAEX,SACC,4EACE;AAAA,wDAAC,4BAAS;AAAA,YACV,4CAAC,6BAAS;AAAA,aACZ,IAEA,4EACE;AAAA,wDAAC,4BAAS;AAAA,YACT,mBACC;AAAA,cAAC;AAAA;AAAA,gBACC,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAa;AAAA,gBACb,kBAAkB;AAAA,gBAClB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAY;AAAA,gBACZ,kBAAgB;AAAA,gBAChB,QAAQ;AAAA,gBAER,sDAAC,qCAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,sDAAC,6BAAS,GACZ;AAAA;AAAA,YACF,IACE;AAAA,aACN;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA;AAEJ;",
   "names": ["ComboBoxContext"]
 }

package/dist/cjs/parts/controls-input/ControlsInput.js

@@ -112,9 +112,9 @@ const ControlsInput = () => {
         "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.INPUT,
         autoFocus,
         placeholder: currentPlaceholder,
-        "aria-controls": menuState ? `combo-listbox-${instanceUid}` : void 0,
         "aria-activedescendant": activeDescendant,
         "aria-expanded": menuState,
+        "aria-controls": `combo-listbox-${instanceUid}`,
         "aria-describedby": actualAriaDescribedBy,
         "aria-autocomplete": "list",
         role: "combobox",

package/dist/cjs/parts/controls-input/ControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-controls={menuState ? `combo-listbox-${instanceUid}` : undefined}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EnB;AA7EJ,mBAA2C;AAC3C,uCAA2C;AAC3C,uBAA0B;AAC1B,8BAAuC;AACvC,iCAAmC;AACnC,oBAMO;AACP,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAChC,wBAA+B;AAExB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,QAAI,gDAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,EAAE,IAAI,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAAA,IACxF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,YAAI,kCAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC;AAAA,IACvE;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,UAAU,eAAe,KAAK;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,SACE,6CAAC,oCACC;AAAA,gDAAC,2CAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC,4CAAC,wCAAuB,eAAY,QAClC,sDAAC,+DAA2B,OAAO,iBAAiB,GACtD;AAAA,IAKD,cAAc,SAAS,CAAC,SAAS,4CAAC,iCAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAM5G,4CAAC,iCAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,iBAAe,YAAY,iBAAiB,WAAW,KAAK;AAAA,QAC5D,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,oBAAkB;AAAA,QAClB,qBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,cAAU,4BAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EnB;AA7EJ,mBAA2C;AAC3C,uCAA2C;AAC3C,uBAA0B;AAC1B,8BAAuC;AACvC,iCAAmC;AACnC,oBAMO;AACP,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAChC,wBAA+B;AAExB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,QAAI,gDAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,EAAE,IAAI,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAAA,IACxF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,yBAAqB,sBAAQ,MAAM;AACvC,YAAI,kCAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC;AAAA,IACvE;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,UAAU,eAAe,KAAK;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,SACE,6CAAC,oCACC;AAAA,gDAAC,2CAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC,4CAAC,wCAAuB,eAAY,QAClC,sDAAC,+DAA2B,OAAO,iBAAiB,GACtD;AAAA,IAKD,cAAc,SAAS,CAAC,SAAS,4CAAC,iCAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAM5G,4CAAC,iCAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAe,iBAAiB,WAAW;AAAA,QAC3C,oBAAkB;AAAA,QAClB,qBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,cAAU,4BAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/controls-input/styled.js

@@ -57,7 +57,7 @@ const StyledInput = (0, import_ds_system.styled)("input", {
   &::placeholder {
     color: transparent;
   }
-  ${({ applyAriaDisabled, theme }) => applyAriaDisabled && `cursor: not-allowed; background: ${theme.colors.neutral["080"]}`}
+  ${({ applyAriaDisabled, theme }) => applyAriaDisabled && `cursor: not-allowed; background: ${theme.colors.neutral["080"]}; caret-color: transparent;`}
 `;
 const StyledInputPlaceHolder = import_ds_system.styled.div`
   font-style: italic;

package/dist/cjs/parts/controls-input/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  ${({ applyAriaDisabled, theme }) =>\n    applyAriaDisabled && `cursor: not-allowed; background: ${theme.colors.neutral['080']}`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA,IAIjE,CAAC,EAAE,mBAAmB,MAAM,MAC5B,qBAAqB,oCAAoC,MAAM,OAAO,QAAQ,KAAK,CAAC,EAAE;AAAA;AAGnF,MAAM,yBAAyB,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  ${({ applyAriaDisabled, theme }) =>\n    applyAriaDisabled && `cursor: not-allowed; background: ${theme.colors.neutral['080']}; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA,IAIjE,CAAC,EAAE,mBAAmB,MAAM,MAC5B,qBAAqB,oCAAoC,MAAM,OAAO,QAAQ,KAAK,CAAC,6BAA6B;AAAA;AAG9G,MAAM,yBAAyB,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/menu-list/MenuList.js

@@ -85,7 +85,15 @@ const MenuList = () => {
             }
           )
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledNoResultsWrapper, { role: "alert", children: noOptionsMessage })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styled.StyledNoResultsWrapper,
+        {
+          id: `combo-listbox-${instanceUid}`,
+          "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.NO_MATCHES_FOUND,
+          role: "alert",
+          children: noOptionsMessage
+        }
+      )
     ] });
   }, [
     instanceUid,

package/dist/cjs/parts/menu-list/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    inputValue,\n    wrapperListRef,\n    virtualListHelpers,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n  const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n    if (isLoading) return <LoadingContainer />;\n\n    return (\n      <>\n        {withHeader && <HeaderList />}\n        {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n          <StyledVirtualListWrapper\n            tabIndex={-1}\n            inline={inline}\n            maxHeight={menuMaxHeight}\n            innerRef={listRef}\n            withHeader={withHeader}\n          >\n            <StyledList\n              aria-label=\"listbox\"\n              id={`combo-listbox-${instanceUid}`}\n              role=\"listbox\"\n              data-testid={ComboboxDataTestid.LIST}\n              style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n            >\n              {ItemRenderer}\n            </StyledList>\n          </StyledVirtualListWrapper>\n        ) : (\n          <StyledNoResultsWrapper role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\n    instanceUid,\n    isSkeleton,\n    isLoading,\n    withHeader,\n    filteredOptions,\n    onCreate,\n    inline,\n    menuMaxHeight,\n    listRef,\n    virtualListHelpers?.totalSize,\n    ItemRenderer,\n    noOptionsMessage,\n  ]);\n\n  useLayoutEffect(() => {\n    virtualListHelpers?.measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCI;AAhC3B,mBAAyE;AACzE,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,4CAAC,4CAAiB;AAExC,WACE,4EACG;AAAA,oBAAc,4CAAC,iCAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,IAAI,iBAAiB,WAAW;AAAA,cAChC,MAAK;AAAA,cACL,eAAa,8CAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,4CAAC,wCAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    inputValue,\n    wrapperListRef,\n    virtualListHelpers,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n  const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n    if (isLoading) return <LoadingContainer />;\n\n    return (\n      <>\n        {withHeader && <HeaderList />}\n        {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n          <StyledVirtualListWrapper\n            tabIndex={-1}\n            inline={inline}\n            maxHeight={menuMaxHeight}\n            innerRef={listRef}\n            withHeader={withHeader}\n          >\n            <StyledList\n              aria-label=\"listbox\"\n              id={`combo-listbox-${instanceUid}`}\n              role=\"listbox\"\n              data-testid={ComboboxDataTestid.LIST}\n              style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n            >\n              {ItemRenderer}\n            </StyledList>\n          </StyledVirtualListWrapper>\n        ) : (\n          <StyledNoResultsWrapper\n            id={`combo-listbox-${instanceUid}`}\n            data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n            role=\"alert\"\n          >\n            {noOptionsMessage}\n          </StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\n    instanceUid,\n    isSkeleton,\n    isLoading,\n    withHeader,\n    filteredOptions,\n    onCreate,\n    inline,\n    menuMaxHeight,\n    listRef,\n    virtualListHelpers?.totalSize,\n    ItemRenderer,\n    noOptionsMessage,\n  ]);\n\n  useLayoutEffect(() => {\n    virtualListHelpers?.measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCI;AAhC3B,mBAAyE;AACzE,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,4CAAC,4CAAiB;AAExC,WACE,4EACG;AAAA,oBAAc,4CAAC,iCAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,IAAI,iBAAiB,WAAW;AAAA,cAChC,MAAK;AAAA,cACL,eAAa,8CAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,iBAAiB,WAAW;AAAA,UAChC,eAAa,8CAAmB;AAAA,UAChC,MAAK;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/styled.js

@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
-  StyledA11ySelectedValues: () => StyledA11ySelectedValues
+  StyledA11yNotVisible: () => StyledA11yNotVisible
 });
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-const StyledA11ySelectedValues = import_ds_system.styled.span`
+const StyledA11yNotVisible = import_ds_system.styled.span`
   position: absolute;
   width: 1px;
   height: 1px;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledA11ySelectedValues = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/ComboBox.js

@@ -1,13 +1,27 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
 import { useComboBox } from "./config/useComboBox.js";
 import { Container } from "./parts/container/index.js";
 import { ComboBoxContext } from "./ComboBoxCTX.js";
 import { ComboboxPropTypes } from "./react-desc-prop-types.js";
+import { Announcer } from "./parts/LiveRegion.js";
+const offScreenStyle = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  width: "1px",
+  position: "absolute"
+};
 const DSComboBox = (props) => {
   const ctx = useComboBox(props);
-  return /* @__PURE__ */ jsx(ComboBoxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Container, {}) });
+  return /* @__PURE__ */ jsxs(ComboBoxContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ jsx(Container, {}),
+    /* @__PURE__ */ jsx(Announcer, { message: props.isLoading || props.isSkeleton ? "Loading options please wait" : "" })
+  ] });
 };
 DSComboBox.displayName = "DSComboBox";
 const DSComboBoxWithSchema = describe(DSComboBox);
@@ -15,6 +29,7 @@ DSComboBoxWithSchema.propTypes = ComboboxPropTypes;
 export {
   DSComboBox,
   DSComboBox as DSComboBoxV3,
-  DSComboBoxWithSchema
+  DSComboBoxWithSchema,
+  offScreenStyle
 };
 //# sourceMappingURL=ComboBox.js.map

package/dist/esm/ComboBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ComboBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useComboBox } from './config/useComboBox.js';\nimport { Container } from './parts/container/index.js';\nimport { ComboBoxContext } from './ComboBoxCTX.js';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { ComboboxPropTypes } from './react-desc-prop-types.js';\n\nconst DSComboBox: React.ComponentType<DSComboboxT.Props> = (props) => {\n  const ctx = useComboBox(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n    </ComboBoxContext.Provider>\n  );\n};\n\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACajB;AAXN,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB;AAElC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,MAAM,YAAY,KAAK;AAC7B,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAC/B,8BAAC,aAAU,GACb;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAEhD,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useComboBox } from './config/useComboBox.js';\nimport { Container } from './parts/container/index.js';\nimport { ComboBoxContext } from './ComboBoxCTX.js';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { ComboboxPropTypes } from './react-desc-prop-types.js';\nimport { Announcer } from './parts/LiveRegion.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: React.ComponentType<DSComboboxT.Props> = (props) => {\n  const ctx = useComboBox(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 = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwBnB,SACE,KADF;AAtBJ,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAEnB,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,aAAqD,CAAC,UAAU;AACpE,QAAM,MAAM,YAAY,KAAK;AAC7B,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAC/B;AAAA,wBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,SAAS,MAAM,aAAa,MAAM,aAAa,gCAAgC,IAAI;AAAA,KAChG;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAEhD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/esm/ComboBoxCTX.js

@@ -42,7 +42,8 @@ const defaultContext = {
   setShowSelectedOptions: noop,
   setMenuState: noop,
   internalRef: createRef(),
-  correctOptions: []
+  correctOptions: [],
+  instanceUid: ""
 };
 const ComboBoxContext = createContext(defaultContext);
 var ComboBoxCTX_default = ComboBoxContext;

package/dist/esm/ComboBoxCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ComboBoxCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: noop,\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n  correctOptions: [],\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU,UAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AACrB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc,UAA0B;AAAA,EACxC,SAAS,UAA0B;AAAA,EACnC,gBAAgB,UAA0B;AAAA,EAC1C,oBAAoB,UAA4B;AAAA,EAChD,oBAAoB,UAA4B;AAAA,EAChD,sBAAsB,UAA4B;AAAA,EAClD,0BAA0B,UAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,aAAa,UAA4B;AAAA,EACzC,gBAAgB,CAAC;AACnB;AAEO,MAAM,kBAAkB,cAAc,cAAc;AAE3D,IAAO,sBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: noop,\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n  correctOptions: [],\n  instanceUid: '',\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU,UAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AACrB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc,UAA0B;AAAA,EACxC,SAAS,UAA0B;AAAA,EACnC,gBAAgB,UAA0B;AAAA,EAC1C,oBAAoB,UAA4B;AAAA,EAChD,oBAAoB,UAA4B;AAAA,EAChD,sBAAsB,UAA4B;AAAA,EAClD,0BAA0B,UAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,aAAa,UAA4B;AAAA,EACzC,gBAAgB,CAAC;AAAA,EACjB,aAAa;AACf;AAEO,MAAM,kBAAkB,cAAc,cAAc;AAE3D,IAAO,sBAAQ;",
   "names": []
 }

package/dist/esm/ComboboxDataTestids.js

@@ -8,6 +8,7 @@ const ComboboxDataTestid = {
   CONTAINER: "combobox-container",
   INPUT: "combobox-input",
   LIST: "combobox-menu-list",
+  NO_MATCHES_FOUND: "combobox-no-matches-found",
   SELECTED_VALUES: "combobox-selected-values",
   DROPDOWN: "combobox-dropdown-btn",
   OPTION: "combobox-option",

package/dist/esm/ComboboxDataTestids.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ComboboxDataTestids.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const ComboboxDataTestid = {\n  MULTISELECT: {\n    HEADER_LIST: 'combobox-header-list',\n    SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle',\n  },\n  CONTROLS_WRAPPER: 'combobox-controls-wrapper',\n  CONTAINER: 'combobox-container',\n  INPUT: 'combobox-input',\n  LIST: 'combobox-menu-list',\n  SELECTED_VALUES: 'combobox-selected-values',\n  DROPDOWN: 'combobox-dropdown-btn',\n  OPTION: 'combobox-option',\n  ALLY_SELECTED_VALUES: 'combobox-ally-selected-values',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAAA,EAChC,aAAa;AAAA,IACX,aAAa;AAAA,IACb,8BAA8B;AAAA,EAChC;AAAA,EACA,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,sBAAsB;AACxB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const ComboboxDataTestid = {\n  MULTISELECT: {\n    HEADER_LIST: 'combobox-header-list',\n    SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle',\n  },\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};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAAA,EAChC,aAAa;AAAA,IACX,aAAa;AAAA,IACb,8BAA8B;AAAA,EAChC;AAAA,EACA,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;AACxB;",
   "names": []
 }

package/dist/esm/parts/LiveRegion.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import React2, { useContext } from "react";
 import ComboBoxContext from "../ComboBoxCTX.js";
-import { StyledA11ySelectedValues } from "./styled.js";
+import { StyledA11yNotVisible } from "./styled.js";
 import { ComboboxDataTestid } from "../ComboboxDataTestids.js";
 const LiveRegion = () => {
   const {
@@ -11,7 +11,7 @@ const LiveRegion = () => {
   } = useContext(ComboBoxContext);
   const ScreenReaderText = onCreate ? /* @__PURE__ */ jsx("span", { id: "aria-creatable", children: "press enter to create the option" }) : "";
   return /* @__PURE__ */ jsx(
-    StyledA11ySelectedValues,
+    StyledA11yNotVisible,
     {
       "data-testid": ComboboxDataTestid.ALLY_SELECTED_VALUES,
       "aria-live": "polite",
@@ -21,7 +21,9 @@ const LiveRegion = () => {
     }
   );
 };
+const Announcer = React2.memo(({ message }) => /* @__PURE__ */ jsx(StyledA11yNotVisible, { "aria-live": "assertive", "aria-relevant": "all", children: message }));
 export {
+  Announcer,
   LiveRegion
 };
 //# sourceMappingURL=LiveRegion.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/LiveRegion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { StyledA11ySelectedValues } 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    <StyledA11ySelectedValues\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    </StyledA11ySelectedValues>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUe;AAVtC,SAAgB,kBAAkB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AAC5B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,mBAAmB,WAAW,oBAAC,UAAK,IAAG,kBAAiB,8CAAgC,IAAU;AAExG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mBAAmB;AAAA,MAChC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAc;AAAA,MAEb,sBAAY;AAAA;AAAA,EACf;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACUe;AAVtC,OAAOA,UAAS,kBAAkB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAC5B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,mBAAmB,WAAW,oBAAC,UAAK,IAAG,kBAAiB,8CAAgC,IAAU;AAExG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mBAAmB;AAAA,MAChC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAc;AAAA,MAEb,sBAAY;AAAA;AAAA,EACf;AAEJ;AAEO,MAAM,YAAYA,OAAM,KAAK,CAAC,EAAE,QAAQ,MAC7C,oBAAC,wBAAqB,aAAU,aAAY,iBAAc,OACvD,mBACH,CACD;",
+  "names": ["React"]
 }

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

@@ -9,28 +9,9 @@ import { Controls } from "../controls/index.js";
 import { MenuList } from "../menu-list/index.js";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
 import { LiveRegion } from "../LiveRegion.js";
-const offScreenStyle = {
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: 0,
-  width: "1px",
-  position: "absolute"
-};
-const Announcer = ({ message }) => /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-relevant": "all", style: offScreenStyle, children: message });
 const Container = () => {
-  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);
-  const {
-    inline,
-    isSkeleton,
-    startPlacementPreference,
-    placementOrderPreference,
-    withoutPortal,
-    isLoading,
-    applyAriaDisabled
-  } = props;
+  const { props, internalRef, instanceUid, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);
+  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, applyAriaDisabled } = props;
   const globalAttributes = useGetGlobalAttributes(props);
   const { zIndex, ...xStyledProps } = useGetXstyledProps(props);
   const correctZIndex = zIndex ? parseInt(zIndex, 10) : void 0;
@@ -51,46 +32,46 @@ const Container = () => {
       window.removeEventListener("blur", closeMenuOnWindowBlur);
     };
   }, [menuState, setMenuState]);
-  return /* @__PURE__ */ jsxs(
-    StyledContainer,
-    {
-      "data-testid": dataTestId ?? ComboboxDataTestid.CONTAINER,
-      innerRef: setReferenceElement,
-      className,
-      applyAriaDisabled,
-      ...xStyledProps,
-      children: [
-        /* @__PURE__ */ jsx(LiveRegion, {}),
-        /* @__PURE__ */ jsx(Announcer, { message: isLoading || isSkeleton ? "Loading options please wait" : "" }),
-        inline ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Controls, {}),
-          /* @__PURE__ */ jsx(MenuList, {})
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Controls, {}),
-          referenceElement ? /* @__PURE__ */ jsx(
-            DSPopperJS,
-            {
-              customOffset: [0, 5],
-              referenceElement,
-              showPopover: menuState,
-              closeContextMenu: handleCloseMenu,
-              startPlacementPreference,
-              placementOrderPreference,
-              withoutPortal,
-              withoutArrow: true,
-              withoutAnimation: true,
-              zIndex: correctZIndex,
-              children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ jsx(MenuList, {}) })
-            }
-          ) : null
-        ] })
-      ]
-    }
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      StyledContainer,
+      {
+        "data-testid": dataTestId ?? ComboboxDataTestid.CONTAINER,
+        innerRef: setReferenceElement,
+        className,
+        applyAriaDisabled,
+        ...xStyledProps,
+        children: [
+          /* @__PURE__ */ jsx(LiveRegion, {}),
+          inline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Controls, {}),
+            /* @__PURE__ */ jsx(MenuList, {})
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Controls, {}),
+            referenceElement ? /* @__PURE__ */ jsx(
+              DSPopperJS,
+              {
+                customOffset: [0, 5],
+                referenceElement,
+                showPopover: menuState,
+                closeContextMenu: handleCloseMenu,
+                startPlacementPreference,
+                placementOrderPreference,
+                withoutPortal,
+                withoutArrow: true,
+                withoutAnimation: true,
+                zIndex: correctZIndex,
+                children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ jsx(MenuList, {}) })
+              }
+            ) : null
+          ] })
+        ]
+      }
+    ) })
   );
 };
 export {
-  Announcer,
-  Container,
-  offScreenStyle
+  Container
 };
 //# sourceMappingURL=Container.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.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\nexport const Announcer = ({ message }: { message: string }) => (\n  <div aria-live=\"polite\" aria-relevant=\"all\" style={offScreenStyle}>\n    {message}\n  </div>\n);\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const {\n    inline,\n    isSkeleton,\n    startPlacementPreference,\n    placementOrderPreference,\n    withoutPortal,\n    isLoading,\n    applyAriaDisabled,\n  } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(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  return (\n    <StyledContainer\n      data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n      innerRef={setReferenceElement}\n      className={className}\n      applyAriaDisabled={applyAriaDisabled}\n      {...xStyledProps}\n    >\n      <LiveRegion />\n      <Announcer message={isLoading || isSkeleton ? 'Loading options please wait' : ''} />\n\n      {inline ? (\n        <>\n          <Controls />\n          <MenuList />\n        </>\n      ) : (\n        <>\n          <Controls />\n          {referenceElement ? (\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={correctZIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          ) : null}\n        </>\n      )}\n    </StyledContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuBrB,SA2DM,UA3DN,KA2DM,YA3DN;AAtBF,SAAgB,aAAa,WAAW,kBAAkB;AAC1D,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAEpB,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;AAEO,MAAM,YAAY,CAAC,EAAE,QAAQ,MAClC,oBAAC,SAAI,aAAU,UAAS,iBAAc,OAAM,OAAO,gBAChD,mBACH;AAGK,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,IACzF,WAAW,eAAe;AAE5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,aAAU,SAAS,aAAa,aAAa,gCAAgC,IAAI;AAAA,QAEjF,SACC,iCACE;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC,YAAS;AAAA,WACZ,IAEA,iCACE;AAAA,8BAAC,YAAS;AAAA,UACT,mBACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB;AAAA,cACA,aAAa;AAAA,cACb,kBAAkB;AAAA,cAClB;AAAA,cACA;AAAA,cACA;AAAA,cACA,cAAY;AAAA,cACZ,kBAAgB;AAAA,cAChB,QAAQ;AAAA,cAER,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,UACF,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, instanceUid, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, applyAriaDisabled } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(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  return (\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        innerRef={setReferenceElement}\n        className={className}\n        applyAriaDisabled={applyAriaDisabled}\n        {...xStyledProps}\n      >\n        <LiveRegion />\n\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            {referenceElement ? (\n              <DSPopperJS\n                customOffset={[0, 5]}\n                referenceElement={referenceElement}\n                showPopover={menuState}\n                closeContextMenu={handleCloseMenu}\n                startPlacementPreference={startPlacementPreference}\n                placementOrderPreference={placementOrderPreference}\n                withoutPortal={withoutPortal}\n                withoutArrow\n                withoutAnimation\n                zIndex={correctZIndex}\n              >\n                <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n                  <MenuList />\n                </StyledPopperWrapper>\n              </DSPopperJS>\n            ) : null}\n          </>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuDf,SAGE,UAHF,KAGE,YAHF;AAtDR,SAAgB,aAAa,WAAW,kBAAkB;AAC1D,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,IACtG,WAAW,eAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,eAAe,kBAAkB,IAAI;AACzG,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,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;AAAA;AAAA,IAEE,gCACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,mBAAmB;AAAA,QAC9C,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,cAAW;AAAA,UAEX,SACC,iCACE;AAAA,gCAAC,YAAS;AAAA,YACV,oBAAC,YAAS;AAAA,aACZ,IAEA,iCACE;AAAA,gCAAC,YAAS;AAAA,YACT,mBACC;AAAA,cAAC;AAAA;AAAA,gBACC,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAa;AAAA,gBACb,kBAAkB;AAAA,gBAClB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAY;AAAA,gBACZ,kBAAgB;AAAA,gBAChB,QAAQ;AAAA,gBAER,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,YACF,IACE;AAAA,aACN;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA;AAEJ;",
   "names": []
 }

package/dist/esm/parts/controls-input/ControlsInput.js

@@ -85,9 +85,9 @@ const ControlsInput = () => {
         "data-testid": ComboboxDataTestid.INPUT,
         autoFocus,
         placeholder: currentPlaceholder,
-        "aria-controls": menuState ? `combo-listbox-${instanceUid}` : void 0,
         "aria-activedescendant": activeDescendant,
         "aria-expanded": menuState,
+        "aria-controls": `combo-listbox-${instanceUid}`,
         "aria-describedby": actualAriaDescribedBy,
         "aria-autocomplete": "list",
         role: "combobox",

package/dist/esm/parts/controls-input/ControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-controls={menuState ? `combo-listbox-${instanceUid}` : undefined}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6EnB,SACE,KADF;AA7EJ,SAAgB,YAAY,eAAe;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAExB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,IAC5G,iBAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI,uBAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,EAAE,IAAI,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAAA,IACxF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,eAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC;AAAA,IACvE;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,UAAU,eAAe,KAAK;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,SACE,qBAAC,sBACC;AAAA,wBAAC,6BAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC,oBAAC,0BAAuB,eAAY,QAClC,8BAAC,8BAA2B,OAAO,iBAAiB,GACtD;AAAA,IAKD,cAAc,SAAS,CAAC,SAAS,oBAAC,mBAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAM5G,oBAAC,mBAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,iBAAe,YAAY,iBAAiB,WAAW,KAAK;AAAA,QAC5D,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,oBAAkB;AAAA,QAClB,qBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,UAAU,UAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6EnB,SACE,KADF;AA7EJ,SAAgB,YAAY,eAAe;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAExB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,IAC5G,iBAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI,uBAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,EAAE,IAAI,EAAE,wBAAwB,EAAE,qBAAqB,EAAE;AAAA,IACxF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,eAAe,cAAc,GAAG;AAClC,aAAO,WAAW,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC;AAAA,IACvE;AACA,QAAI,OAAO,gBAAgB,UAAU,UAAU;AAC7C,aAAO,UAAU,eAAe,KAAK;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,SACE,qBAAC,sBACC;AAAA,wBAAC,6BAA0B,UAAU,eAAgB,6BAAkB;AAAA,IACtE,mBACC,oBAAC,0BAAuB,eAAY,QAClC,8BAAC,8BAA2B,OAAO,iBAAiB,GACtD;AAAA,IAKD,cAAc,SAAS,CAAC,SAAS,oBAAC,mBAAgB,IAAI,iBAAiB,WAAW,IAAI,IAAqB;AAAA,IAM5G,oBAAC,mBAAgB,IAAI,GAAG,EAAE,wBAAyB,8BAAmB;AAAA,IAEtE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA,aAAa;AAAA,QACb,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAe,iBAAiB,WAAW;AAAA,QAC3C,oBAAkB;AAAA,QAClB,qBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,UAAU,UAAU,UAAU,WAAW;AAAA,QACzC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/controls-input/styled.js

@@ -20,7 +20,7 @@ const StyledInput = styled("input", {
   &::placeholder {
     color: transparent;
   }
-  ${({ applyAriaDisabled, theme }) => applyAriaDisabled && `cursor: not-allowed; background: ${theme.colors.neutral["080"]}`}
+  ${({ applyAriaDisabled, theme }) => applyAriaDisabled && `cursor: not-allowed; background: ${theme.colors.neutral["080"]}; caret-color: transparent;`}
 `;
 const StyledInputPlaceHolder = styled.div`
   font-style: italic;

package/dist/esm/parts/controls-input/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  ${({ applyAriaDisabled, theme }) =>\n    applyAriaDisabled && `cursor: not-allowed; background: ${theme.colors.neutral['080']}`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA,IAIjE,CAAC,EAAE,mBAAmB,MAAM,MAC5B,qBAAqB,oCAAoC,MAAM,OAAO,QAAQ,KAAK,CAAC,EAAE;AAAA;AAGnF,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  ${({ applyAriaDisabled, theme }) =>\n    applyAriaDisabled && `cursor: not-allowed; background: ${theme.colors.neutral['080']}; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA,IAIjE,CAAC,EAAE,mBAAmB,MAAM,MAC5B,qBAAqB,oCAAoC,MAAM,OAAO,QAAQ,KAAK,CAAC,6BAA6B;AAAA;AAG9G,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/menu-list/MenuList.js

@@ -52,7 +52,15 @@ const MenuList = () => {
             }
           )
         }
-      ) : /* @__PURE__ */ jsx(StyledNoResultsWrapper, { role: "alert", children: noOptionsMessage })
+      ) : /* @__PURE__ */ jsx(
+        StyledNoResultsWrapper,
+        {
+          id: `combo-listbox-${instanceUid}`,
+          "data-testid": ComboboxDataTestid.NO_MATCHES_FOUND,
+          role: "alert",
+          children: noOptionsMessage
+        }
+      )
     ] });
   }, [
     instanceUid,

package/dist/esm/parts/menu-list/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    inputValue,\n    wrapperListRef,\n    virtualListHelpers,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n  const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n    if (isLoading) return <LoadingContainer />;\n\n    return (\n      <>\n        {withHeader && <HeaderList />}\n        {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n          <StyledVirtualListWrapper\n            tabIndex={-1}\n            inline={inline}\n            maxHeight={menuMaxHeight}\n            innerRef={listRef}\n            withHeader={withHeader}\n          >\n            <StyledList\n              aria-label=\"listbox\"\n              id={`combo-listbox-${instanceUid}`}\n              role=\"listbox\"\n              data-testid={ComboboxDataTestid.LIST}\n              style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n            >\n              {ItemRenderer}\n            </StyledList>\n          </StyledVirtualListWrapper>\n        ) : (\n          <StyledNoResultsWrapper role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\n    instanceUid,\n    isSkeleton,\n    isLoading,\n    withHeader,\n    filteredOptions,\n    onCreate,\n    inline,\n    menuMaxHeight,\n    listRef,\n    virtualListHelpers?.totalSize,\n    ItemRenderer,\n    noOptionsMessage,\n  ]);\n\n  useLayoutEffect(() => {\n    virtualListHelpers?.measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCI,SAKrB,UALqB,KAKrB,YALqB;AAhC3B,SAAgB,YAAY,SAAS,aAAa,uBAAuB;AACzE,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,oBAAC,qBAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,oBAAC,oBAAiB;AAExC,WACE,iCACG;AAAA,oBAAc,oBAAC,cAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,IAAI,iBAAiB,WAAW;AAAA,cAChC,MAAK;AAAA,cACL,eAAa,mBAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,oBAAC,0BAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    inputValue,\n    wrapperListRef,\n    virtualListHelpers,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n  const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} />;\n\n    if (isLoading) return <LoadingContainer />;\n\n    return (\n      <>\n        {withHeader && <HeaderList />}\n        {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n          <StyledVirtualListWrapper\n            tabIndex={-1}\n            inline={inline}\n            maxHeight={menuMaxHeight}\n            innerRef={listRef}\n            withHeader={withHeader}\n          >\n            <StyledList\n              aria-label=\"listbox\"\n              id={`combo-listbox-${instanceUid}`}\n              role=\"listbox\"\n              data-testid={ComboboxDataTestid.LIST}\n              style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n            >\n              {ItemRenderer}\n            </StyledList>\n          </StyledVirtualListWrapper>\n        ) : (\n          <StyledNoResultsWrapper\n            id={`combo-listbox-${instanceUid}`}\n            data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n            role=\"alert\"\n          >\n            {noOptionsMessage}\n          </StyledNoResultsWrapper>\n        )}\n      </>\n    );\n  }, [\n    instanceUid,\n    isSkeleton,\n    isLoading,\n    withHeader,\n    filteredOptions,\n    onCreate,\n    inline,\n    menuMaxHeight,\n    listRef,\n    virtualListHelpers?.totalSize,\n    ItemRenderer,\n    noOptionsMessage,\n  ]);\n\n  useLayoutEffect(() => {\n    virtualListHelpers?.measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCI,SAKrB,UALqB,KAKrB,YALqB;AAhC3B,SAAgB,YAAY,SAAS,aAAa,uBAAuB;AACzE,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,oBAAC,qBAAkB,aAA0B;AAEpE,QAAI,UAAW,QAAO,oBAAC,oBAAiB;AAExC,WACE,iCACG;AAAA,oBAAc,oBAAC,cAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,IAAI,iBAAiB,WAAW;AAAA,cAChC,MAAK;AAAA,cACL,eAAa,mBAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,iBAAiB,WAAW;AAAA,UAChC,eAAa,mBAAmB;AAAA,UAChC,MAAK;AAAA,UAEJ;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/esm/parts/styled.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
-const StyledA11ySelectedValues = styled.span`
+const StyledA11yNotVisible = styled.span`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -13,6 +13,6 @@ const StyledA11ySelectedValues = styled.span`
   white-space: nowrap;
 `;
 export {
-  StyledA11ySelectedValues
+  StyledA11yNotVisible
 };
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledA11ySelectedValues = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/types/ComboBox.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { DSComboboxT } from './react-desc-prop-types.js';
+export declare const offScreenStyle: React.CSSProperties;
 declare const DSComboBox: React.ComponentType<DSComboboxT.Props>;
 declare const DSComboBoxWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSComboboxT.Props>;
 export { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };

package/dist/types/ComboboxDataTestids.d.ts

@@ -7,6 +7,7 @@ export declare const ComboboxDataTestid: {
     CONTAINER: string;
     INPUT: string;
     LIST: string;
+    NO_MATCHES_FOUND: string;
     SELECTED_VALUES: string;
     DROPDOWN: string;
     OPTION: string;

package/dist/types/parts/LiveRegion.d.ts

@@ -1 +1,5 @@
+import React from 'react';
 export declare const LiveRegion: () => JSX.Element;
+export declare const Announcer: React.MemoExoticComponent<({ message }: {
+    message: string;
+}) => import("react/jsx-runtime.js").JSX.Element>;

package/dist/types/parts/container/Container.d.ts

@@ -1,6 +1 @@
-import React from 'react';
-export declare const offScreenStyle: React.CSSProperties;
-export declare const Announcer: ({ message }: {
-    message: string;
-}) => import("react/jsx-runtime.js").JSX.Element;
 export declare const Container: () => JSX.Element;

package/dist/types/parts/styled.d.ts

@@ -1 +1 @@
-export declare const StyledA11ySelectedValues: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledA11yNotVisible: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-combobox",
-  "version": "3.40.0",
+  "version": "3.41.0-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Combobox",
   "files": [
@@ -38,25 +38,25 @@
   "dependencies": {
     "react-virtual": "~2.10.4",
     "uid": "~2.0.1",
-    "@elliemae/ds-button-v2": "3.40.0",
-    "@elliemae/ds-circular-progress-indicator": "3.40.0",
-    "@elliemae/ds-grid": "3.40.0",
-    "@elliemae/ds-menu-items": "3.40.0",
-    "@elliemae/ds-pills-v2": "3.40.0",
-    "@elliemae/ds-form-checkbox": "3.40.0",
-    "@elliemae/ds-popperjs": "3.40.0",
-    "@elliemae/ds-props-helpers": "3.40.0",
-    "@elliemae/ds-system": "3.40.0",
-    "@elliemae/ds-icons": "3.40.0",
-    "@elliemae/ds-truncated-tooltip-text": "3.40.0"
+    "@elliemae/ds-button-v2": "3.41.0-rc.0",
+    "@elliemae/ds-form-checkbox": "3.41.0-rc.0",
+    "@elliemae/ds-grid": "3.41.0-rc.0",
+    "@elliemae/ds-pills-v2": "3.41.0-rc.0",
+    "@elliemae/ds-icons": "3.41.0-rc.0",
+    "@elliemae/ds-menu-items": "3.41.0-rc.0",
+    "@elliemae/ds-popperjs": "3.41.0-rc.0",
+    "@elliemae/ds-props-helpers": "3.41.0-rc.0",
+    "@elliemae/ds-system": "3.41.0-rc.0",
+    "@elliemae/ds-circular-progress-indicator": "3.41.0-rc.0",
+    "@elliemae/ds-truncated-tooltip-text": "3.41.0-rc.0"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "@elliemae/pui-theme": "~2.9.3",
     "styled-components": "~5.3.9",
     "styled-system": "~5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.40.0",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.40.0"
+    "@elliemae/ds-form-helpers-mask-hooks": "3.41.0-rc.0",
+    "@elliemae/ds-monorepo-devops": "3.41.0-rc.0"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.9.3",