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

package/dist/cjs/ComboBox.js

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

package/dist/cjs/ComboBox.js.map

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

package/dist/cjs/TruncatedTooltipText.js

@@ -45,13 +45,15 @@ const TruncatedSpan = import_ds_system.styled.span`
   max-width: 100%;
 `;
 const TooltipContainer = import_ds_system.styled.div`
-  text-align: left;
+  text-align: center;
   min-width: ${({ theme }) => theme.space.l};
   max-width: 250px;
+  overflow-wrap: break-word;
+  word-break: break-word;
   min-height: 30px;
   display: grid;
   align-items: center;
-  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
+  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
   position: relative;
   background-color: white;
   border-radius: 2px;

package/dist/cjs/TruncatedTooltipText.js.map

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

package/dist/cjs/parts/LiveRegion.js

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

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

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

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

@@ -34,10 +34,10 @@ module.exports = __toCommonJS(Controls_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
 var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
+var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
 var import_ControlsInput = require("../controls-input/ControlsInput.js");
 var import_DropdownIndicator = require("../DropdownIndicator.js");
 var import_multi_selected_values_container = require("../multi-selected-values-container/index.js");

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

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

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

@@ -49,6 +49,29 @@ const StyledDSCircularIndeterminateIndicator = (0, import_ds_system.styled)(impo
   name: import_constants.DSFormComboboxName,
   slot: import_constants.FORM_COMBOBOX_SLOTS.LOADING_INDICATOR
 })``;
-const LoadingContainer = ({ getOwnerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, { id: "combobox-list", getOwnerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDSCircularIndeterminateIndicator, { size: "m", getOwnerProps }) });
+const LoadingContainer = ({
+  instanceUid,
+  isMulti,
+  getOwnerProps
+}) => (
+  /**
+   * PUI-18034 — Carries listbox id+role+aria-busy so the input's aria-controls always
+   * resolves to a busy listbox here. Parallel listbox semantics tailored per state live
+   * on SkeletonContainer, StyledFastList and StyledNoResultsWrapper, but only one of those
+   * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.
+   */
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Wrapper,
+    {
+      id: `combo-listbox-${instanceUid}`,
+      role: "listbox",
+      "aria-busy": true,
+      "aria-label": "Loading options please wait",
+      "aria-multiselectable": isMulti,
+      getOwnerProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDSCircularIndeterminateIndicator, { size: "m", getOwnerProps })
+    }
+  )
+);
 var LoadingContainer_default = LoadingContainer;
 //# sourceMappingURL=LoadingContainer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/LoadingContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst Wrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_WRAPPER,\n})`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR,\n})``;\n\nconst LoadingContainer = ({ getOwnerProps }: { getOwnerProps: () => object }) => (\n  <Wrapper id=\"combobox-list\" getOwnerProps={getOwnerProps}>\n    <StyledDSCircularIndeterminateIndicator size=\"m\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AAnBJ,uBAAuB;AACvB,4CAAiD;AACjD,uBAAwD;AAExD,MAAM,cAAU,yBAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,6CAAyC,yBAAO,wEAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC,EAAE,cAAc,MACxC,4CAAC,WAAQ,IAAG,iBAAgB,eAC1B,sDAAC,0CAAuC,MAAK,KAAI,eAA8B,GACjF;AAIF,IAAO,2BAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst Wrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_WRAPPER,\n})`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR,\n})``;\n\nconst LoadingContainer = ({\n  instanceUid,\n  isMulti,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  isMulti: boolean;\n  getOwnerProps: () => object;\n}) => (\n  /**\n   * PUI-18034 \u2014 Carries listbox id+role+aria-busy so the input's aria-controls always\n   * resolves to a busy listbox here. Parallel listbox semantics tailored per state live\n   * on SkeletonContainer, StyledFastList and StyledNoResultsWrapper, but only one of those\n   * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n   */\n  <Wrapper\n    id={`combo-listbox-${instanceUid}`}\n    role=\"listbox\"\n    aria-busy\n    aria-label=\"Loading options please wait\"\n    aria-multiselectable={isMulti}\n    getOwnerProps={getOwnerProps}\n  >\n    <StyledDSCircularIndeterminateIndicator size=\"m\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAxCJ,uBAAuB;AACvB,4CAAiD;AACjD,uBAAwD;AAExD,MAAM,cAAU,yBAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,6CAAyC,yBAAO,wEAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,iBAAiB,WAAW;AAAA,MAChC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MACX,wBAAsB;AAAA,MACtB;AAAA,MAEA,sDAAC,0CAAuC,MAAK,KAAI,eAA8B;AAAA;AAAA,EACjF;AAAA;AAIF,IAAO,2BAAQ;",
   "names": []
 }

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

@@ -67,8 +67,9 @@ const ContentComp = () => {
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
   const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
   const isMulti = Array.isArray(selectedValues);
-  if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, getOwnerProps });
-  if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { getOwnerProps });
+  if (isSkeleton)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, isMulti, getOwnerProps });
+  if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { instanceUid, isMulti, getOwnerProps });
   const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;
   if (shouldShowNoResults)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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 { DSFastList } from '@elliemae/ds-fast-list';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useContext } from 'react';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ItemRenderer } from './useItemRenderer.js';\n\nconst StyledFastList = styled(DSFastList, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MENU_ITEMS_WRAPPER,\n})<{\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n`;\n\nconst estimatedSize = () => 32;\n\nconst ContentComp = () => {\n  const {\n    props,\n    props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton, selectedValues },\n    listRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const isMulti = Array.isArray(selectedValues);\n\n  if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n  if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n  const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;\n  if (shouldShowNoResults)\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n        getOwnerProps={getOwnerProps}\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n\n  return (\n    <StyledItemsWrapper maxHeight={menuMaxHeight} getOwnerProps={getOwnerProps}>\n      <StyledFastList\n        dsFastlistWrapperList={{\n          role: 'listbox',\n          'aria-multiselectable': isMulti,\n          'data-testid': ComboboxDataTestid.LIST,\n          'aria-label': 'listbox',\n          id: `combo-listbox-${instanceUid}`,\n        }}\n        dsFastlistItem={{ role: 'none' }}\n        actionRef={listRef}\n        count={filteredOptions.length}\n        ItemRenderer={ItemRenderer}\n        extraItemProps={{ itemList: filteredOptions }}\n        getId={(index: number) => filteredOptions[index].dsId}\n        estimateSize={estimatedSize}\n        getOwnerProps={getOwnerProps}\n      />\n    </StyledItemsWrapper>\n  );\n};\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props,\n    props: { menuMinWidth, inline },\n    controlsWrapperRef,\n    wrapperListRef,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const { width } = useOnElementResize(controlsWrapperRef);\n\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n      getOwnerProps={getOwnerProps}\n    >\n      <ContentComp />\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CE;AA1CzB,0BAA2B;AAC3B,qBAAqB;AACrB,8BAA8B;AAC9B,uBAAyC;AACzC,mBAA+C;AAC/C,yBAAgC;AAChC,iCAAmC;AACnC,uBAAwD;AACxD,gCAAmC;AACnC,8BAAiC;AACjC,+BAAkC;AAClC,oBAA0D;AAC1D,6BAA6B;AAE7B,MAAM,qBAAiB,yBAAO,gCAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,gBAGe,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAG3D,MAAM,gBAAgB,MAAM;AAE5B,MAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,kBAAkB,eAAe,UAAU,YAAY,eAAe;AAAA,IAC1F;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAC7C,QAAM,UAAU,MAAM,QAAQ,cAAc;AAE5C,MAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B,eAA8B;AAClG,MAAI,UAAW,QAAO,4CAAC,4CAAiB,eAA8B;AAEtE,QAAM,sBAAsB,CAAC,aAAa,iBAAiB,UAAU,OAAO;AAC5E,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAEhC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH;AAGJ,SACE,4CAAC,sBAAmB,WAAW,eAAe,eAC5C;AAAA,IAAC;AAAA;AAAA,MACC,uBAAuB;AAAA,QACrB,MAAM;AAAA,QACN,wBAAwB;AAAA,QACxB,eAAe,8CAAmB;AAAA,QAClC,cAAc;AAAA,QACd,IAAI,iBAAiB,WAAW;AAAA,MAClC;AAAA,MACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,MAC/B,WAAW;AAAA,MACX,OAAO,gBAAgB;AAAA,MACvB,cAAc;AAAA,MACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,MAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,MACjD,cAAc;AAAA,MACd;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,cAAc,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AAEvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MAEA,sDAAC,eAAY;AAAA;AAAA,EACf;AAEJ;",
+  "sourcesContent": ["import { DSFastList } from '@elliemae/ds-fast-list';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useContext } from 'react';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ItemRenderer } from './useItemRenderer.js';\n\nconst StyledFastList = styled(DSFastList, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MENU_ITEMS_WRAPPER,\n})<{\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n`;\n\nconst estimatedSize = () => 32;\n\nconst ContentComp = () => {\n  const {\n    props,\n    props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton, selectedValues },\n    listRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const isMulti = Array.isArray(selectedValues);\n\n  if (isSkeleton)\n    return <SkeletonContainer instanceUid={instanceUid} isMulti={isMulti} getOwnerProps={getOwnerProps} />;\n  if (isLoading) return <LoadingContainer instanceUid={instanceUid} isMulti={isMulti} getOwnerProps={getOwnerProps} />;\n\n  const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;\n  if (shouldShowNoResults)\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n        getOwnerProps={getOwnerProps}\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n\n  return (\n    <StyledItemsWrapper maxHeight={menuMaxHeight} getOwnerProps={getOwnerProps}>\n      <StyledFastList\n        dsFastlistWrapperList={{\n          role: 'listbox',\n          'aria-multiselectable': isMulti,\n          'data-testid': ComboboxDataTestid.LIST,\n          'aria-label': 'listbox',\n          id: `combo-listbox-${instanceUid}`,\n        }}\n        dsFastlistItem={{ role: 'none' }}\n        actionRef={listRef}\n        count={filteredOptions.length}\n        ItemRenderer={ItemRenderer}\n        extraItemProps={{ itemList: filteredOptions }}\n        getId={(index: number) => filteredOptions[index].dsId}\n        estimateSize={estimatedSize}\n        getOwnerProps={getOwnerProps}\n      />\n    </StyledItemsWrapper>\n  );\n};\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props,\n    props: { menuMinWidth, inline },\n    controlsWrapperRef,\n    wrapperListRef,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const { width } = useOnElementResize(controlsWrapperRef);\n\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n      getOwnerProps={getOwnerProps}\n    >\n      <ContentComp />\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CZ;AA3CX,0BAA2B;AAC3B,qBAAqB;AACrB,8BAA8B;AAC9B,uBAAyC;AACzC,mBAA+C;AAC/C,yBAAgC;AAChC,iCAAmC;AACnC,uBAAwD;AACxD,gCAAmC;AACnC,8BAAiC;AACjC,+BAAkC;AAClC,oBAA0D;AAC1D,6BAA6B;AAE7B,MAAM,qBAAiB,yBAAO,gCAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,yBAAqB,yBAAO,qBAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,gBAGe,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAG3D,MAAM,gBAAgB,MAAM;AAE5B,MAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,kBAAkB,eAAe,UAAU,YAAY,eAAe;AAAA,IAC1F;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAC7C,QAAM,UAAU,MAAM,QAAQ,cAAc;AAE5C,MAAI;AACF,WAAO,4CAAC,8CAAkB,aAA0B,SAAkB,eAA8B;AACtG,MAAI,UAAW,QAAO,4CAAC,4CAAiB,aAA0B,SAAkB,eAA8B;AAElH,QAAM,sBAAsB,CAAC,aAAa,iBAAiB,UAAU,OAAO;AAC5E,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAEhC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH;AAGJ,SACE,4CAAC,sBAAmB,WAAW,eAAe,eAC5C;AAAA,IAAC;AAAA;AAAA,MACC,uBAAuB;AAAA,QACrB,MAAM;AAAA,QACN,wBAAwB;AAAA,QACxB,eAAe,8CAAmB;AAAA,QAClC,cAAc;AAAA,QACd,IAAI,iBAAiB,WAAW;AAAA,MAClC;AAAA,MACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,MAC/B,WAAW;AAAA,MACX,OAAO,gBAAgB;AAAA,MACvB,cAAc;AAAA,MACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,MAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,MACjD,cAAc;AAAA,MACd;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,cAAc,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AAEvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MAEA,sDAAC,eAAY;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

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

@@ -44,9 +44,28 @@ const StyledSkeletonMenuItem = (0, import_ds_system.styled)(import_ds_menu_items
 })``;
 const SkeletonContainer = ({
   instanceUid,
+  isMulti,
   getOwnerProps
 }) => {
   const SKELETON_AMOUNT = [0, 1, 2, 3, 4];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n)) });
+  return (
+    /**
+     * PUI-18034 — Carries listbox id+role+aria-busy so the input's aria-controls always
+     * resolves to a busy listbox here. Parallel listbox semantics tailored per state live
+     * on LoadingContainer, StyledFastList and StyledNoResultsWrapper, but only one of those
+     * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.
+     */
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_grid.Grid,
+      {
+        id: `combo-listbox-${instanceUid}`,
+        role: "listbox",
+        "aria-busy": true,
+        "aria-label": "Loading options please wait",
+        "aria-multiselectable": isMulti,
+        children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n))
+      }
+    )
+  );
 };
 //# sourceMappingURL=SkeletonContainer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/SkeletonContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nimport { FORM_COMBOBOX_SLOTS, DSFormComboboxName } from '../../constants/index.js';\n\nconst StyledSkeletonMenuItem = styled(SkeletonMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const SkeletonContainer = ({\n  instanceUid,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  getOwnerProps: () => object;\n}): JSX.Element => {\n  const SKELETON_AMOUNT = [0, 1, 2, 3, 4] as const;\n\n  return (\n    <Grid id={`combo-listbox-${instanceUid}`}>\n      {SKELETON_AMOUNT.map((n, index) => (\n        <StyledSkeletonMenuItem key={n} dsId={index.toString()} role=\"presentation\" getOwnerProps={getOwnerProps} />\n      ))}\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBf;AAxBR,2BAAiC;AACjC,qBAAqB;AACrB,uBAAuB;AAEvB,uBAAwD;AAExD,MAAM,6BAAyB,yBAAO,uCAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGmB;AACjB,QAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC,SACE,4CAAC,uBAAK,IAAI,iBAAiB,WAAW,IACnC,0BAAgB,IAAI,CAAC,GAAG,UACvB,4CAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G,GACH;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nimport { FORM_COMBOBOX_SLOTS, DSFormComboboxName } from '../../constants/index.js';\n\nconst StyledSkeletonMenuItem = styled(SkeletonMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const SkeletonContainer = ({\n  instanceUid,\n  isMulti,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  isMulti: boolean;\n  getOwnerProps: () => object;\n}): JSX.Element => {\n  const SKELETON_AMOUNT = [0, 1, 2, 3, 4] as const;\n\n  return (\n    /**\n     * PUI-18034 \u2014 Carries listbox id+role+aria-busy so the input's aria-controls always\n     * resolves to a busy listbox here. Parallel listbox semantics tailored per state live\n     * on LoadingContainer, StyledFastList and StyledNoResultsWrapper, but only one of those\n     * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n     */\n    <Grid\n      id={`combo-listbox-${instanceUid}`}\n      role=\"listbox\"\n      aria-busy\n      aria-label=\"Loading options please wait\"\n      aria-multiselectable={isMulti}\n    >\n      {SKELETON_AMOUNT.map((n, index) => (\n        <StyledSkeletonMenuItem key={n} dsId={index.toString()} role=\"presentation\" getOwnerProps={getOwnerProps} />\n      ))}\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCf;AAtCR,2BAAiC;AACjC,qBAAqB;AACrB,uBAAuB;AAEvB,uBAAwD;AAExD,MAAM,6BAAyB,yBAAO,uCAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAImB;AACjB,QAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,MAAK;AAAA,QACL,aAAS;AAAA,QACT,cAAW;AAAA,QACX,wBAAsB;AAAA,QAErB,0BAAgB,IAAI,CAAC,GAAG,UACvB,4CAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G;AAAA;AAAA,IACH;AAAA;AAEJ;",
   "names": []
 }

package/dist/esm/ComboBox.js

@@ -4,7 +4,7 @@ import { describe } from "@elliemae/ds-props-helpers";
 import { ComboBoxContext } from "./ComboBoxCTX.js";
 import { useComboBox } from "./config/useComboBox.js";
 import { Container } from "./parts/container/index.js";
-import { Announcer } from "./parts/LiveRegion.js";
+import { ResultCountStatus } from "./parts/LiveRegion.js";
 import { ComboboxPropTypesSchema } from "./react-desc-prop-types.js";
 const offScreenStyle = {
   border: 0,
@@ -20,7 +20,15 @@ const DSComboBox = (props) => {
   const ctx = useComboBox(props);
   return /* @__PURE__ */ jsxs(ComboBoxContext.Provider, { value: ctx, children: [
     /* @__PURE__ */ jsx(Container, {}),
-    /* @__PURE__ */ jsx(Announcer, { message: props.isLoading || props.isSkeleton ? "Loading options please wait" : "" })
+    /* @__PURE__ */ jsx(
+      ResultCountStatus,
+      {
+        menuOpen: ctx.menuState,
+        isLoading: !!props.isLoading,
+        isSkeleton: !!props.isSkeleton,
+        resultCount: ctx.correctOptions?.length ?? 0
+      }
+    )
   ] });
 };
 DSComboBox.displayName = "DSComboBox";

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 { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { ComboBoxContext } from './ComboBoxCTX.js';\nimport { useComboBox } from './config/useComboBox.js';\nimport type { DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { Container } from './parts/container/index.js';\nimport { Announcer } from './parts/LiveRegion.js';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { ComboboxPropTypesSchema } from './react-desc-prop-types.js';\n\nexport const offScreenStyle: React.CSSProperties = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: 0,\n  width: '1px',\n  position: 'absolute',\n};\n\nconst DSComboBox = <\n  T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n    | DSCommonComboboxPropsT.ItemOption\n    | DSCommonComboboxPropsT.ItemOption[],\n>(\n  props: DSComboboxT.Props<T>,\n) => {\n  const ctx = useComboBox<T>(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n      <Announcer message={props.isLoading || props.isSkeleton ? 'Loading options please wait' : ''} />\n    </ComboBoxContext.Provider>\n  );\n};\n\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypesSchema;\n\nexport { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8BnB,SACE,KADF;AA9BJ,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,SAAS,+BAA+B;AAEjC,MAAM,iBAAsC;AAAA,EACjD,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,aAAa,CAKjB,UACG;AACH,QAAM,MAAM,YAAe,KAAK;AAChC,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { ComboBoxContext } from './ComboBoxCTX.js';\nimport { useComboBox } from './config/useComboBox.js';\nimport type { DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { Container } from './parts/container/index.js';\nimport { ResultCountStatus } from './parts/LiveRegion.js';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { ComboboxPropTypesSchema } from './react-desc-prop-types.js';\n\nexport const offScreenStyle: React.CSSProperties = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: 0,\n  width: '1px',\n  position: 'absolute',\n};\n\nconst DSComboBox = <\n  T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n    | DSCommonComboboxPropsT.ItemOption\n    | DSCommonComboboxPropsT.ItemOption[],\n>(\n  props: DSComboboxT.Props<T>,\n) => {\n  const ctx = useComboBox<T>(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n      <ResultCountStatus\n        menuOpen={ctx.menuState}\n        isLoading={!!props.isLoading}\n        isSkeleton={!!props.isSkeleton}\n        resultCount={ctx.correctOptions?.length ?? 0}\n      />\n    </ComboBoxContext.Provider>\n  );\n};\n\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypesSchema;\n\nexport { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8BnB,SACE,KADF;AA9BJ,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAElC,SAAS,+BAA+B;AAEjC,MAAM,iBAAsC;AAAA,EACjD,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,aAAa,CAKjB,UACG;AACH,QAAM,MAAM,YAAe,KAAK;AAChC,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAC/B;AAAA,wBAAC,aAAU;AAAA,IACX;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,IAAI;AAAA,QACd,WAAW,CAAC,CAAC,MAAM;AAAA,QACnB,YAAY,CAAC,CAAC,MAAM;AAAA,QACpB,aAAa,IAAI,gBAAgB,UAAU;AAAA;AAAA,IAC7C;AAAA,KACF;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAEhD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/esm/TruncatedTooltipText.js

@@ -15,13 +15,15 @@ const TruncatedSpan = styled.span`
   max-width: 100%;
 `;
 const TooltipContainer = styled.div`
-  text-align: left;
+  text-align: center;
   min-width: ${({ theme }) => theme.space.l};
   max-width: 250px;
+  overflow-wrap: break-word;
+  word-break: break-word;
   min-height: 30px;
   display: grid;
   align-items: center;
-  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
+  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
   position: relative;
   background-color: white;
   border-radius: 2px;

package/dist/esm/TruncatedTooltipText.js.map

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

package/dist/esm/parts/LiveRegion.js

@@ -22,8 +22,20 @@ const LiveRegion = () => {
   );
 };
 const Announcer = React2.memo(({ message }) => /* @__PURE__ */ jsx(StyledA11yNotVisible, { "aria-live": "assertive", "aria-relevant": "all", children: message }));
+const ResultCountStatus = React2.memo(
+  ({
+    menuOpen,
+    isLoading,
+    isSkeleton,
+    resultCount
+  }) => {
+    const message = !menuOpen || isLoading || isSkeleton || resultCount === 0 ? "" : `${resultCount} options available`;
+    return /* @__PURE__ */ jsx(StyledA11yNotVisible, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: message });
+  }
+);
 export {
   Announcer,
-  LiveRegion
+  LiveRegion,
+  ResultCountStatus
 };
 //# 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 { 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;",
+  "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\n/**\n * PUI-18034 \u2014 Previously used in ComboBox.tsx for the \"Loading options please wait\"\n * announcement; replaced by aria-busy + aria-label on Loading/Skeleton containers (which\n * carry the listbox role during async states) plus a polite ResultCountStatus for the\n * post-load count. No internal callers remain and not re-exported from index.tsx \u2014\n * evaluate removing.\n */\nexport const Announcer = React.memo(({ message }: { message: string }) => (\n  <StyledA11yNotVisible aria-live=\"assertive\" aria-relevant=\"all\">\n    {message}\n  </StyledA11yNotVisible>\n));\n\n/**\n * PUI-18034 \u2014 Polite live region for post-load result count. Replaces the previous\n * assertive Announcer that raced with the SR's aria-expanded announcement.\n *\n * WCAG 2.2 SC 4.1.3 Status Messages \u2014 announce changes without shifting focus.\n * WAI-ARIA APG combobox: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * WCAG: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html\n */\nexport const ResultCountStatus = React.memo(\n  ({\n    menuOpen,\n    isLoading,\n    isSkeleton,\n    resultCount,\n  }: {\n    menuOpen: boolean;\n    isLoading: boolean;\n    isSkeleton: boolean;\n    resultCount: number;\n  }) => {\n    const message = !menuOpen || isLoading || isSkeleton || resultCount === 0 ? '' : `${resultCount} options available`;\n    return (\n      <StyledA11yNotVisible role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {message}\n      </StyledA11yNotVisible>\n    );\n  },\n);\n"],
+  "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;AASO,MAAM,YAAYA,OAAM,KAAK,CAAC,EAAE,QAAQ,MAC7C,oBAAC,wBAAqB,aAAU,aAAY,iBAAc,OACvD,mBACH,CACD;AAUM,MAAM,oBAAoBA,OAAM;AAAA,EACrC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAKM;AACJ,UAAM,UAAU,CAAC,YAAY,aAAa,cAAc,gBAAgB,IAAI,KAAK,GAAG,WAAW;AAC/F,WACE,oBAAC,wBAAqB,MAAK,UAAS,aAAU,UAAS,eAAY,QAChE,mBACH;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useOwnerProps } from "@elliemae/ds-props-helpers";
-import { TruncatedTooltipText } from "../../TruncatedTooltipText.js";
 import { useCallback, useContext, useMemo } from "react";
 import ComboBoxContext from "../../ComboBoxCTX.js";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
+import { TruncatedTooltipText } from "../../TruncatedTooltipText.js";
 import { ControlsInput } from "../controls-input/ControlsInput.js";
 import { DropdownIndicator } from "../DropdownIndicator.js";
 import { MultiSelectedValuesContainer } from "../multi-selected-values-container/index.js";

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

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

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

@@ -15,7 +15,30 @@ const StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateInd
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR
 })``;
-const LoadingContainer = ({ getOwnerProps }) => /* @__PURE__ */ jsx(Wrapper, { id: "combobox-list", getOwnerProps, children: /* @__PURE__ */ jsx(StyledDSCircularIndeterminateIndicator, { size: "m", getOwnerProps }) });
+const LoadingContainer = ({
+  instanceUid,
+  isMulti,
+  getOwnerProps
+}) => (
+  /**
+   * PUI-18034 — Carries listbox id+role+aria-busy so the input's aria-controls always
+   * resolves to a busy listbox here. Parallel listbox semantics tailored per state live
+   * on SkeletonContainer, StyledFastList and StyledNoResultsWrapper, but only one of those
+   * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.
+   */
+  /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      id: `combo-listbox-${instanceUid}`,
+      role: "listbox",
+      "aria-busy": true,
+      "aria-label": "Loading options please wait",
+      "aria-multiselectable": isMulti,
+      getOwnerProps,
+      children: /* @__PURE__ */ jsx(StyledDSCircularIndeterminateIndicator, { size: "m", getOwnerProps })
+    }
+  )
+);
 var LoadingContainer_default = LoadingContainer;
 export {
   LoadingContainer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/LoadingContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst Wrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_WRAPPER,\n})`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR,\n})``;\n\nconst LoadingContainer = ({ getOwnerProps }: { getOwnerProps: () => object }) => (\n  <Wrapper id=\"combobox-list\" getOwnerProps={getOwnerProps}>\n    <StyledDSCircularIndeterminateIndicator size=\"m\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBnB;AAnBJ,SAAS,cAAc;AACvB,SAAS,wCAAwC;AACjD,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,UAAU,OAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,yCAAyC,OAAO,kCAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC,EAAE,cAAc,MACxC,oBAAC,WAAQ,IAAG,iBAAgB,eAC1B,8BAAC,0CAAuC,MAAK,KAAI,eAA8B,GACjF;AAIF,IAAO,2BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst Wrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_WRAPPER,\n})`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR,\n})``;\n\nconst LoadingContainer = ({\n  instanceUid,\n  isMulti,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  isMulti: boolean;\n  getOwnerProps: () => object;\n}) => (\n  /**\n   * PUI-18034 \u2014 Carries listbox id+role+aria-busy so the input's aria-controls always\n   * resolves to a busy listbox here. Parallel listbox semantics tailored per state live\n   * on SkeletonContainer, StyledFastList and StyledNoResultsWrapper, but only one of those\n   * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n   */\n  <Wrapper\n    id={`combo-listbox-${instanceUid}`}\n    role=\"listbox\"\n    aria-busy\n    aria-label=\"Loading options please wait\"\n    aria-multiselectable={isMulti}\n    getOwnerProps={getOwnerProps}\n  >\n    <StyledDSCircularIndeterminateIndicator size=\"m\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyCnB;AAxCJ,SAAS,cAAc;AACvB,SAAS,wCAAwC;AACjD,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,UAAU,OAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,yCAAyC,OAAO,kCAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,iBAAiB,WAAW;AAAA,MAChC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MACX,wBAAsB;AAAA,MACtB;AAAA,MAEA,8BAAC,0CAAuC,MAAK,KAAI,eAA8B;AAAA;AAAA,EACjF;AAAA;AAIF,IAAO,2BAAQ;",
   "names": []
 }

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

@@ -34,8 +34,9 @@ const ContentComp = () => {
   } = useContext(ComboBoxContext);
   const { getOwnerProps } = useOwnerProps(props);
   const isMulti = Array.isArray(selectedValues);
-  if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid, getOwnerProps });
-  if (isLoading) return /* @__PURE__ */ jsx(LoadingContainer, { getOwnerProps });
+  if (isSkeleton)
+    return /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid, isMulti, getOwnerProps });
+  if (isLoading) return /* @__PURE__ */ jsx(LoadingContainer, { instanceUid, isMulti, getOwnerProps });
   const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;
   if (shouldShowNoResults)
     return /* @__PURE__ */ jsx(

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 { DSFastList } from '@elliemae/ds-fast-list';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useContext } from 'react';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ItemRenderer } from './useItemRenderer.js';\n\nconst StyledFastList = styled(DSFastList, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MENU_ITEMS_WRAPPER,\n})<{\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n`;\n\nconst estimatedSize = () => 32;\n\nconst ContentComp = () => {\n  const {\n    props,\n    props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton, selectedValues },\n    listRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const isMulti = Array.isArray(selectedValues);\n\n  if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n  if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n  const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;\n  if (shouldShowNoResults)\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n        getOwnerProps={getOwnerProps}\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n\n  return (\n    <StyledItemsWrapper maxHeight={menuMaxHeight} getOwnerProps={getOwnerProps}>\n      <StyledFastList\n        dsFastlistWrapperList={{\n          role: 'listbox',\n          'aria-multiselectable': isMulti,\n          'data-testid': ComboboxDataTestid.LIST,\n          'aria-label': 'listbox',\n          id: `combo-listbox-${instanceUid}`,\n        }}\n        dsFastlistItem={{ role: 'none' }}\n        actionRef={listRef}\n        count={filteredOptions.length}\n        ItemRenderer={ItemRenderer}\n        extraItemProps={{ itemList: filteredOptions }}\n        getId={(index: number) => filteredOptions[index].dsId}\n        estimateSize={estimatedSize}\n        getOwnerProps={getOwnerProps}\n      />\n    </StyledItemsWrapper>\n  );\n};\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props,\n    props: { menuMinWidth, inline },\n    controlsWrapperRef,\n    wrapperListRef,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const { width } = useOnElementResize(controlsWrapperRef);\n\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n      getOwnerProps={getOwnerProps}\n    >\n      <ContentComp />\n    </StyledListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0CE;AA1CzB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAA2B,cAAc;AACzC,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AACxD,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,qBAAqB,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,gBAGe,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAG3D,MAAM,gBAAgB,MAAM;AAE5B,MAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,kBAAkB,eAAe,UAAU,YAAY,eAAe;AAAA,IAC1F;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,UAAU,MAAM,QAAQ,cAAc;AAE5C,MAAI,WAAY,QAAO,oBAAC,qBAAkB,aAA0B,eAA8B;AAClG,MAAI,UAAW,QAAO,oBAAC,oBAAiB,eAA8B;AAEtE,QAAM,sBAAsB,CAAC,aAAa,iBAAiB,UAAU,OAAO;AAC5E,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAEhC,eAAa,mBAAmB;AAAA,QAChC,MAAK;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH;AAGJ,SACE,oBAAC,sBAAmB,WAAW,eAAe,eAC5C;AAAA,IAAC;AAAA;AAAA,MACC,uBAAuB;AAAA,QACrB,MAAM;AAAA,QACN,wBAAwB;AAAA,QACxB,eAAe,mBAAmB;AAAA,QAClC,cAAc;AAAA,QACd,IAAI,iBAAiB,WAAW;AAAA,MAClC;AAAA,MACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,MAC/B,WAAW;AAAA,MACX,OAAO,gBAAgB;AAAA,MACvB;AAAA,MACA,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,MAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,MACjD,cAAc;AAAA,MACd;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,cAAc,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AAEvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MAEA,8BAAC,eAAY;AAAA;AAAA,EACf;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSFastList } from '@elliemae/ds-fast-list';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useContext } from 'react';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ItemRenderer } from './useItemRenderer.js';\n\nconst StyledFastList = styled(DSFastList, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MENU_ITEMS_WRAPPER,\n})<{\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};\n`;\n\nconst estimatedSize = () => 32;\n\nconst ContentComp = () => {\n  const {\n    props,\n    props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton, selectedValues },\n    listRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const isMulti = Array.isArray(selectedValues);\n\n  if (isSkeleton)\n    return <SkeletonContainer instanceUid={instanceUid} isMulti={isMulti} getOwnerProps={getOwnerProps} />;\n  if (isLoading) return <LoadingContainer instanceUid={instanceUid} isMulti={isMulti} getOwnerProps={getOwnerProps} />;\n\n  const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;\n  if (shouldShowNoResults)\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n        getOwnerProps={getOwnerProps}\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n\n  return (\n    <StyledItemsWrapper maxHeight={menuMaxHeight} getOwnerProps={getOwnerProps}>\n      <StyledFastList\n        dsFastlistWrapperList={{\n          role: 'listbox',\n          'aria-multiselectable': isMulti,\n          'data-testid': ComboboxDataTestid.LIST,\n          'aria-label': 'listbox',\n          id: `combo-listbox-${instanceUid}`,\n        }}\n        dsFastlistItem={{ role: 'none' }}\n        actionRef={listRef}\n        count={filteredOptions.length}\n        ItemRenderer={ItemRenderer}\n        extraItemProps={{ itemList: filteredOptions }}\n        getId={(index: number) => filteredOptions[index].dsId}\n        estimateSize={estimatedSize}\n        getOwnerProps={getOwnerProps}\n      />\n    </StyledItemsWrapper>\n  );\n};\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props,\n    props: { menuMinWidth, inline },\n    controlsWrapperRef,\n    wrapperListRef,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const { width } = useOnElementResize(controlsWrapperRef);\n\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n      getOwnerProps={getOwnerProps}\n    >\n      <ContentComp />\n    </StyledListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2CZ;AA3CX,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAA2B,cAAc;AACzC,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AACxD,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,qBAAqB,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,gBAGe,CAAC,EAAE,UAAU,MAAM,GAAG,OAAO,SAAS,CAAC,IAAI;AAAA;AAG3D,MAAM,gBAAgB,MAAM;AAE5B,MAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,kBAAkB,eAAe,UAAU,YAAY,eAAe;AAAA,IAC1F;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,UAAU,MAAM,QAAQ,cAAc;AAE5C,MAAI;AACF,WAAO,oBAAC,qBAAkB,aAA0B,SAAkB,eAA8B;AACtG,MAAI,UAAW,QAAO,oBAAC,oBAAiB,aAA0B,SAAkB,eAA8B;AAElH,QAAM,sBAAsB,CAAC,aAAa,iBAAiB,UAAU,OAAO;AAC5E,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAEhC,eAAa,mBAAmB;AAAA,QAChC,MAAK;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH;AAGJ,SACE,oBAAC,sBAAmB,WAAW,eAAe,eAC5C;AAAA,IAAC;AAAA;AAAA,MACC,uBAAuB;AAAA,QACrB,MAAM;AAAA,QACN,wBAAwB;AAAA,QACxB,eAAe,mBAAmB;AAAA,QAClC,cAAc;AAAA,QACd,IAAI,iBAAiB,WAAW;AAAA,MAClC;AAAA,MACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,MAC/B,WAAW;AAAA,MACX,OAAO,gBAAgB;AAAA,MACvB;AAAA,MACA,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,MAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,MACjD,cAAc;AAAA,MACd;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,cAAc,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AAEvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MAEA,8BAAC,eAAY;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

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

@@ -11,10 +11,29 @@ const StyledSkeletonMenuItem = styled(SkeletonMenuItem, {
 })``;
 const SkeletonContainer = ({
   instanceUid,
+  isMulti,
   getOwnerProps
 }) => {
   const SKELETON_AMOUNT = [0, 1, 2, 3, 4];
-  return /* @__PURE__ */ jsx(Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ jsx(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n)) });
+  return (
+    /**
+     * PUI-18034 — Carries listbox id+role+aria-busy so the input's aria-controls always
+     * resolves to a busy listbox here. Parallel listbox semantics tailored per state live
+     * on LoadingContainer, StyledFastList and StyledNoResultsWrapper, but only one of those
+     * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.
+     */
+    /* @__PURE__ */ jsx(
+      Grid,
+      {
+        id: `combo-listbox-${instanceUid}`,
+        role: "listbox",
+        "aria-busy": true,
+        "aria-label": "Loading options please wait",
+        "aria-multiselectable": isMulti,
+        children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ jsx(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n))
+      }
+    )
+  );
 };
 export {
   SkeletonContainer

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/SkeletonContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nimport { FORM_COMBOBOX_SLOTS, DSFormComboboxName } from '../../constants/index.js';\n\nconst StyledSkeletonMenuItem = styled(SkeletonMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const SkeletonContainer = ({\n  instanceUid,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  getOwnerProps: () => object;\n}): JSX.Element => {\n  const SKELETON_AMOUNT = [0, 1, 2, 3, 4] as const;\n\n  return (\n    <Grid id={`combo-listbox-${instanceUid}`}>\n      {SKELETON_AMOUNT.map((n, index) => (\n        <StyledSkeletonMenuItem key={n} dsId={index.toString()} role=\"presentation\" getOwnerProps={getOwnerProps} />\n      ))}\n    </Grid>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyBf;AAxBR,SAAS,wBAAwB;AACjC,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,SAAS,qBAAqB,0BAA0B;AAExD,MAAM,yBAAyB,OAAO,kBAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGmB;AACjB,QAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC,SACE,oBAAC,QAAK,IAAI,iBAAiB,WAAW,IACnC,0BAAgB,IAAI,CAAC,GAAG,UACvB,oBAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nimport { FORM_COMBOBOX_SLOTS, DSFormComboboxName } from '../../constants/index.js';\n\nconst StyledSkeletonMenuItem = styled(SkeletonMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const SkeletonContainer = ({\n  instanceUid,\n  isMulti,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  isMulti: boolean;\n  getOwnerProps: () => object;\n}): JSX.Element => {\n  const SKELETON_AMOUNT = [0, 1, 2, 3, 4] as const;\n\n  return (\n    /**\n     * PUI-18034 \u2014 Carries listbox id+role+aria-busy so the input's aria-controls always\n     * resolves to a busy listbox here. Parallel listbox semantics tailored per state live\n     * on LoadingContainer, StyledFastList and StyledNoResultsWrapper, but only one of those\n     * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n     */\n    <Grid\n      id={`combo-listbox-${instanceUid}`}\n      role=\"listbox\"\n      aria-busy\n      aria-label=\"Loading options please wait\"\n      aria-multiselectable={isMulti}\n    >\n      {SKELETON_AMOUNT.map((n, index) => (\n        <StyledSkeletonMenuItem key={n} dsId={index.toString()} role=\"presentation\" getOwnerProps={getOwnerProps} />\n      ))}\n    </Grid>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuCf;AAtCR,SAAS,wBAAwB;AACjC,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,SAAS,qBAAqB,0BAA0B;AAExD,MAAM,yBAAyB,OAAO,kBAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAImB;AACjB,QAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,MAAK;AAAA,QACL,aAAS;AAAA,QACT,cAAW;AAAA,QACX,wBAAsB;AAAA,QAErB,0BAAgB,IAAI,CAAC,GAAG,UACvB,oBAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G;AAAA;AAAA,IACH;AAAA;AAEJ;",
   "names": []
 }

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

@@ -1,5 +1,26 @@
 import React from 'react';
 export declare const LiveRegion: () => JSX.Element;
+/**
+ * PUI-18034 — Previously used in ComboBox.tsx for the "Loading options please wait"
+ * announcement; replaced by aria-busy + aria-label on Loading/Skeleton containers (which
+ * carry the listbox role during async states) plus a polite ResultCountStatus for the
+ * post-load count. No internal callers remain and not re-exported from index.tsx —
+ * evaluate removing.
+ */
 export declare const Announcer: React.MemoExoticComponent<({ message }: {
     message: string;
 }) => import("react/jsx-runtime.js").JSX.Element>;
+/**
+ * PUI-18034 — Polite live region for post-load result count. Replaces the previous
+ * assertive Announcer that raced with the SR's aria-expanded announcement.
+ *
+ * WCAG 2.2 SC 4.1.3 Status Messages — announce changes without shifting focus.
+ * WAI-ARIA APG combobox: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ * WCAG: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
+ */
+export declare const ResultCountStatus: React.MemoExoticComponent<({ menuOpen, isLoading, isSkeleton, resultCount, }: {
+    menuOpen: boolean;
+    isLoading: boolean;
+    isSkeleton: boolean;
+    resultCount: number;
+}) => import("react/jsx-runtime.js").JSX.Element>;

package/dist/types/parts/menu-list/LoadingContainer.d.ts

@@ -1,4 +1,6 @@
-declare const LoadingContainer: ({ getOwnerProps }: {
+declare const LoadingContainer: ({ instanceUid, isMulti, getOwnerProps, }: {
+    instanceUid: string;
+    isMulti: boolean;
     getOwnerProps: () => object;
 }) => import("react/jsx-runtime.js").JSX.Element;
 export { LoadingContainer };

package/dist/types/parts/menu-list/SkeletonContainer.d.ts

@@ -1,4 +1,5 @@
-export declare const SkeletonContainer: ({ instanceUid, getOwnerProps, }: {
+export declare const SkeletonContainer: ({ instanceUid, isMulti, getOwnerProps, }: {
     instanceUid: string;
+    isMulti: boolean;
     getOwnerProps: () => object;
 }) => JSX.Element;

package/dist/types/tests/DSCombobox.pui-18034.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-combobox",
-  "version": "3.70.0-next.4",
+  "version": "3.70.0-next.7",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Combobox",
   "files": [
@@ -37,25 +37,25 @@
   },
   "dependencies": {
     "uid": "^2.0.2",
-    "@elliemae/ds-button-v2": "3.70.0-next.4",
-    "@elliemae/ds-circular-progress-indicator": "3.70.0-next.4",
-    "@elliemae/ds-fast-list": "3.70.0-next.4",
-    "@elliemae/ds-grid": "3.70.0-next.4",
-    "@elliemae/ds-floating-context": "3.70.0-next.4",
-    "@elliemae/ds-menu-items": "3.70.0-next.4",
-    "@elliemae/ds-pills-v2": "3.70.0-next.4",
-    "@elliemae/ds-icons": "3.70.0-next.4",
-    "@elliemae/ds-system": "3.70.0-next.4",
-    "@elliemae/ds-props-helpers": "3.70.0-next.4"
+    "@elliemae/ds-button-v2": "3.70.0-next.7",
+    "@elliemae/ds-floating-context": "3.70.0-next.7",
+    "@elliemae/ds-fast-list": "3.70.0-next.7",
+    "@elliemae/ds-circular-progress-indicator": "3.70.0-next.7",
+    "@elliemae/ds-grid": "3.70.0-next.7",
+    "@elliemae/ds-menu-items": "3.70.0-next.7",
+    "@elliemae/ds-icons": "3.70.0-next.7",
+    "@elliemae/ds-system": "3.70.0-next.7",
+    "@elliemae/ds-pills-v2": "3.70.0-next.7",
+    "@elliemae/ds-props-helpers": "3.70.0-next.7"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.13.0",
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.4",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.4",
-    "@elliemae/ds-test-utils": "3.70.0-next.4"
+    "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.7",
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.7",
+    "@elliemae/ds-test-utils": "3.70.0-next.7"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.13.0",