npm - @elliemae/ds-form-combobox - Versions diffs - 3.70.0-next.4 → 3.70.0-next.41 - Mend

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

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

Files changed (99) hide show

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

@@ -1,6 +1,16 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
+import { styled, css } from "@elliemae/ds-system";
+import { DSTypography } from "@elliemae/ds-typography";
 import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../../constants/index.js";
+const b2InputTypography = css`
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  font-weight: 400;
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 1rem;
+    line-height: 1.2307692308rem;
+  }
+`;
 const StyleHiddenInput = styled("input")`
   color: transparent;
   position: absolute;
@@ -20,15 +30,14 @@ const StyledInput = styled("input", {
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.INPUT
 })`
-  line-height: 1rem;
+  ${b2InputTypography}
   background: transparent;
-  font-size: 1rem;
   border: none;
   overflow: hidden;
   padding: 0;
   z-index: 2;
   outline: none;
-  color: ${(props) => props.theme.colors.neutral[700]};
+  color: ${(props) => props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700]};
   &:focus {
     outline: none;
   }
@@ -39,21 +48,18 @@ const StyledInput = styled("input", {
   transition: none;
   ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}
 `;
-const StyledInputPlaceHolder = styled("div", {
+const StyledInputPlaceHolder = styled(DSTypography, {
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER
 })`
   font-style: italic;
-  color: ${(props) => props.theme.colors.neutral[500]};
+  color: ${(props) => props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500]};
   position: absolute;
   display: flex;
   align-items: center;
   width: 100%;
   user-select: none;
-  line-height: 1rem;
-  font-size: 1rem;
   & span::after {
     content: '';
     padding: 1px;
@@ -61,6 +67,7 @@ const StyledInputPlaceHolder = styled("div", {
   }
 `;
 const StyledInputWidthReference = styled.span`
+  ${b2InputTypography}
   visibility: hidden;
   position: absolute;
   top: -9999px;
@@ -73,7 +80,14 @@ const StyledInputWrapper = styled("div", {
   position: relative;
   align-items: center;
   display: flex;
-  padding-right: 1px;
+  /** PUI-15490 — the spec's 5px vertical padding lives on the text line (this wrapper, always
+   *  rendered) so the control height is constant and breathing room survives text resize.
+   *  Mobile keeps the legacy 1.25px — no mobile spec exists (KNOWN_INTENTIONAL_DEVIATIONS §5).
+   *  The 1px right padding is pre-existing (caret clipping). */
+  padding: 5px 1px 5px 0px;
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    padding: 1.25px 1px 1.25px 0px;
+  }
   overflow: hidden;
 `;
 const StyledHiddenDiv = styled("div")`

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n  color: transparent;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  &:focus {\n    outline: none;\n  }\n  ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  background: transparent;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  transition: none;\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\n/**\n * b2 typography mirrored as raw CSS for the native `<input>` and its hidden\n * width-measuring twin (`StyledInputWidthReference`). Neither can be a `DSTypography`\n * component \u2014 an `<input>` takes no children, and the reference must match the input's\n * exact font metrics or the autosizing (measured off the reference) drifts. ds-typography\n * does not export its VARIANTS_CSS_MAP, so the b2 values are duplicated here \u2014 keep in\n * sync with `ds-typography` b2 (`parts/variants/body.ts`). Text containers that CAN hold\n * children (placeholder, selection) use `styled(DSTypography)` with `variant=\"b2\"` instead.\n */\nconst b2InputTypography = css`\n  font-size: 0.8125rem;\n  line-height: 1rem;\n  font-weight: 400;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 1rem;\n    line-height: 1.2307692308rem;\n  }\n`;\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n  color: transparent;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  &:focus {\n    outline: none;\n  }\n  ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  ${b2InputTypography}\n  background: transparent;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => (props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700])};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  transition: none;\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled(DSTypography, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})<{ $nonInteractive?: boolean }>`\n  font-style: italic;\n  color: ${(props) => (props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500])};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  ${b2InputTypography}\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n  position: relative;\n  align-items: center;\n  display: flex;\n  /** PUI-15490 \u2014 the spec's 5px vertical padding lives on the text line (this wrapper, always\n   *  rendered) so the control height is constant and breathing room survives text resize.\n   *  Mobile keeps the legacy 1.25px \u2014 no mobile spec exists (KNOWN_INTENTIONAL_DEVIATIONS \u00A75).\n   *  The 1px right padding is pre-existing (caret clipping). */\n  padding: 5px 1px 5px 0px;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    padding: 1.25px 1px 1.25px 0px;\n  }\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB,2BAA2B;AAWxD,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA,uBAIH,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,IACG,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOV,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA,IAItG,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,OAAO,cAAc;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAW,MAAM,kBAAkB,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc1G,MAAM,4BAA4B,OAAO;AAAA,IAC5C,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOd,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBASsB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
   "names": []
 }

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

@@ -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", "aria-hidden": "true", getOwnerProps })
+    }
+  )
+);
 var LoadingContainer_default = LoadingContainer;
 export {
   LoadingContainer,

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

@@ -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    {/**\n     * PUI-18541 \u2014 the spinner exposes role=\"status\", which is a forbidden child of\n     * role=\"listbox\" (aria-allowed-children, axe Critical) \u2014 a regression from the PUI-18034\n     * rework. aria-hidden removes it from the accessibility tree so it no longer counts as a\n     * listbox child; the listbox's own aria-busy + aria-label remains the single loading\n     * announcement. Spinner stays purely visual.\n     */}\n    <StyledDSCircularIndeterminateIndicator size=\"m\" aria-hidden=\"true\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDnB;AA/CJ,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,MASA,8BAAC,0CAAuC,MAAK,KAAI,eAAY,QAAO,eAA8B;AAAA;AAAA,EACpG;AAAA;AAIF,IAAO,2BAAQ;",
   "names": []
 }

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

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

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

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

@@ -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/esm/parts/menu-list/styled.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
+import { DSTypography } from "@elliemae/ds-typography";
 import { SingleMenuItem, MultiMenuItem } from "@elliemae/ds-menu-items";
 import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../../constants/index.js";
 const StyledListWrapper = styled(Grid, {
@@ -12,14 +13,15 @@ const StyledListWrapper = styled(Grid, {
   background-color: #ffffff;
   z-index: 100;
 `;
-const StyledCreatableLabel = styled("span", {
+const StyledCreatableLabel = styled(DSTypography, {
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.CREATABLE_LABEL
 })`
   font-weight: bold;
   font-style: italic;
+  text-transform: uppercase;
 `;
-const StyledCreatableValue = styled("span", {
+const StyledCreatableValue = styled(DSTypography, {
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.CREATABLE_VALUE
 })`
@@ -35,7 +37,9 @@ const StyledSingleMenuItem = styled(SingleMenuItem, {
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
   preserveLegacyDataTestId: true
-})``;
+})`
+  ${({ theme, disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && `color: ${theme.colors.neutral[700]};`}
+`;
 const StyledMultiMenuItem = styled(MultiMenuItem, {
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,

package/dist/esm/parts/menu-list/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem } from '@elliemae/ds-menu-items';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LIST_WRAPPER,\n})<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_LABEL,\n})`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_VALUE,\n})`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.NO_MATCHES_FOUND,\n})`\n  padding: 14px;\n`;\n\nexport const StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,oBAAoB,2BAA2B;AAQjD,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,eACc,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,OAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,uBAAuB,OAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,uBAAuB,OAAO,gBAAgB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { SingleMenuItem, MultiMenuItem } from '@elliemae/ds-menu-items';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LIST_WRAPPER,\n})<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled(DSTypography, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_LABEL,\n})`\n  font-weight: bold;\n  font-style: italic;\n  text-transform: uppercase;\n`;\n\nexport const StyledCreatableValue = styled(DSTypography, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_VALUE,\n})`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.NO_MATCHES_FOUND,\n})`\n  padding: 14px;\n`;\n\ntype IdleLabelColorProps = {\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n};\n\n/**\n * Combobox-specific idle color override for single menu item labels.\n *\n * The decision to render the idle label as neutral-700 is a combobox-level call\n * (team consistency with multi, which lands at neutral-700 via the checkbox spec),\n * not a generic menu-item rule. It lives here so other consumers of ds-menu-items\n * are not forced into a color opinion they did not ask for.\n *\n * Muted states (disabled / aria-disabled / readOnly) intentionally fall through\n * so disabledOption() in ds-menu-items-commons keeps owning neutral-500 and the\n * neutral-600 hover variant.\n */\nexport const StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})<IdleLabelColorProps>`\n  ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    !disabled && !applyAriaDisabled && !readOnly && `color: ${theme.colors.neutral[700]};`}\n`;\n\nexport const StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,oBAAoB,2BAA2B;AAQjD,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,eACc,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,OAAO,cAAc;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,uBAAuB,OAAO,cAAc;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAsBM,MAAM,uBAAuB,OAAO,gBAAgB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,IACG,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAChD,CAAC,YAAY,CAAC,qBAAqB,CAAC,YAAY,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,GAAG;AAAA;AAGnF,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;",
   "names": []
 }

package/dist/esm/parts/menu-list/useItemRenderer.js CHANGED Viewed

@@ -123,9 +123,9 @@ const ItemRenderer = ({ index, extraItemProps }) => {
             dataTestid: ComboboxDataTestid.OPTION,
             isActive: dsId === focusOptionIdx,
             ...generalProps,
-            render: ({ label: labelCreatable }) => /* @__PURE__ */ jsxs(Grid, { p: "8px", cols: ["min-content", "auto"], gutter: "xxs", alignItems: "center", children: [
-              /* @__PURE__ */ jsx(StyledCreatableLabel, { getOwnerProps, children: "Add:" }),
-              /* @__PURE__ */ jsx(StyledCreatableValue, { getOwnerProps, children: `"${labelCreatable}"` })
+            render: ({ label: labelCreatable }) => /* @__PURE__ */ jsxs(Grid, { py: "8px", cols: ["min-content", "auto"], gutter: "xxs", alignItems: "center", children: [
+              /* @__PURE__ */ jsx(StyledCreatableLabel, { variant: "b2", component: "span", getOwnerProps, children: "Add:" }),
+              /* @__PURE__ */ jsx(StyledCreatableValue, { variant: "b2", component: "span", getOwnerProps, children: `"${labelCreatable}"` })
             ] }),
             label: option.label,
             onClick: handleOnCreateClick,

package/dist/esm/parts/menu-list/useItemRenderer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Separator } from '@elliemae/ds-menu-items';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue, StyledSingleMenuItem, StyledMultiMenuItem } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): React.ReactElement | null => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = multiple\n    ? StyledMultiMenuItem\n    : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.OptionTypes, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n            getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable),\n            currentOption,\n            e,\n          );\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            tabIndex={-1}\n            isSelected={isSelected(selectedValues, option)}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel getOwnerProps={getOwnerProps}>Add:</StyledCreatableLabel>\n                <StyledCreatableValue getOwnerProps={getOwnerProps}>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n            tabIndex={-1}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Separator } from '@elliemae/ds-menu-items';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue, StyledSingleMenuItem, StyledMultiMenuItem } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): React.ReactElement | null => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = multiple\n    ? StyledMultiMenuItem\n    : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.OptionTypes, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n            getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable),\n            currentOption,\n            e,\n          );\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            tabIndex={-1}\n            isSelected={isSelected(selectedValues, option)}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid py=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel variant=\"b2\" component=\"span\" getOwnerProps={getOwnerProps}>\n                  Add:\n                </StyledCreatableLabel>\n                <StyledCreatableValue variant=\"b2\" component=\"span\" getOwnerProps={getOwnerProps}>\n                  {`\"${labelCreatable}\"`}\n                </StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n            tabIndex={-1}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js CHANGED Viewed

@@ -40,6 +40,7 @@ const RemovableSelectedValuePill = (props) => {
       trailingComma,
       tabIndex: -1,
       labelTruncated: true,
+      disableTruncationTooltip: true,
       onRemove: (e) => {
         if (readOnly) return;
         e.stopPropagation();

package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n  trailingComma?: boolean;\n  ownerProps?: {\n    getOwnerProps: () => object;\n    getOwnerPropsArguments: () => object;\n  };\n}> = (props) => {\n  const { pill, trailingComma, ownerProps } = props;\n  const {\n    props: {\n      onChange,\n      isNonClearable,\n      disabled,\n      selectedValues,\n      applyAriaDisabled: applyAriaDisabledToContainer,\n      readOnly,\n    },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const type = React.useMemo(() => {\n    if (disabled || isNonClearable) return 'value';\n    if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n    return 'removable';\n  }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n  /**\n   * WORKAROUND: Manual className management\n   *\n   * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n   * When using the slot system (ownerProps), the internal component's className\n   * is overridden by the styled-component's generated className, causing\n   * DSPillV2's variant-specific classes to be lost.\n   *\n   * These classes are required for correct styling of different pill types:\n   * - ds-pill-wrapper-removable: Interactive pills with remove button\n   * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n   * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n   *\n   * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n   * when styled(InnerComponent) is used. Current implementation overwrites className\n   * instead of merging it.\n   *\n   * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n   * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n   *\n   *\n   * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n   */\n  const className = React.useMemo(() => {\n    if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n    if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n    return 'ds-pill-wrapper ds-pill-wrapper-value';\n  }, [type]);\n\n  return (\n    <StyledDSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled || pill.disabled}\n      type={type}\n      className={className}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n      readOnly={readOnly}\n      trailingComma={trailingComma}\n      tabIndex={-1}\n      labelTruncated\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n          getSuggestedValueOnChange(pill, selectedValues),\n          pill,\n          e,\n        );\n        internalRef.current?.focus();\n      }}\n      {...ownerProps}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+DnB;AA/DJ,OAAOA,UAAS,kBAAkB;AAClC,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAYA,OAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,MACd,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,QAAC;AAAA,UACC,0BAA0B,MAAM,cAAc;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AACA,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IArBC,KAAK;AAAA,EAsBZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { StyledDSPillV2 } from '../styled.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n  pill: DSComboboxT.ItemOption;\n  applyAriaDisabled?: boolean;\n  trailingComma?: boolean;\n  ownerProps?: {\n    getOwnerProps: () => object;\n    getOwnerPropsArguments: () => object;\n  };\n}> = (props) => {\n  const { pill, trailingComma, ownerProps } = props;\n  const {\n    props: {\n      onChange,\n      isNonClearable,\n      disabled,\n      selectedValues,\n      applyAriaDisabled: applyAriaDisabledToContainer,\n      readOnly,\n    },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const type = React.useMemo(() => {\n    if (disabled || isNonClearable) return 'value';\n    if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n    return 'removable';\n  }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n  /**\n   * WORKAROUND: Manual className management\n   *\n   * StyledDSPillV2 is a styled-component wrapping DSPillV2.\n   * When using the slot system (ownerProps), the internal component's className\n   * is overridden by the styled-component's generated className, causing\n   * DSPillV2's variant-specific classes to be lost.\n   *\n   * These classes are required for correct styling of different pill types:\n   * - ds-pill-wrapper-removable: Interactive pills with remove button\n   * - ds-pill-wrapper-label: Read-only pills (aria-disabled state)\n   * - ds-pill-wrapper-value: Non-interactive pills (disabled/non-clearable)\n   *\n   * TODO: Fix in ds-system's generateClassName to preserve inner component classNames\n   * when styled(InnerComponent) is used. Current implementation overwrites className\n   * instead of merging it.\n   *\n   * Or instead of defining the className manually, trust on the ones generated by styled-components and remove the manual ones from DSPillV2,\n   * but this would require a refactor in ds-pills-v2 to have a slot definition per variant.\n   *\n   *\n   * Related: packages/agregators/ds-system/src/styled/generated-attributes/generateAttributes.ts\n   */\n  const className = React.useMemo(() => {\n    if (type === 'removable') return 'ds-pill-wrapper ds-pill-wrapper-removable';\n    if (type === 'labelOnly') return 'ds-pill-wrapper ds-pill-wrapper-label';\n    return 'ds-pill-wrapper ds-pill-wrapper-value';\n  }, [type]);\n\n  return (\n    <StyledDSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled || pill.disabled}\n      type={type}\n      className={className}\n      applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n      readOnly={readOnly}\n      trailingComma={trailingComma}\n      tabIndex={-1}\n      labelTruncated\n      disableTruncationTooltip\n      onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n        if (readOnly) return;\n        // preventing the menu to be opened\n        e.stopPropagation();\n        (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n          getSuggestedValueOnChange(pill, selectedValues),\n          pill,\n          e,\n        );\n        internalRef.current?.focus();\n      }}\n      {...ownerProps}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+DnB;AA/DJ,OAAOA,UAAS,kBAAkB;AAClC,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAExB,MAAM,6BAQR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,eAAe,WAAW,IAAI;AAC5C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAwBrE,QAAM,YAAYA,OAAM,QAAQ,MAAM;AACpC,QAAI,SAAS,YAAa,QAAO;AACjC,QAAI,SAAS,YAAa,QAAO;AACjC,WAAO;AAAA,EACT,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,MACd,0BAAwB;AAAA,MACxB,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,QAAC;AAAA,UACC,0BAA0B,MAAM,cAAc;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AACA,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,MACC,GAAG;AAAA;AAAA,IAtBC,KAAK;AAAA,EAuBZ;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/styled.js CHANGED Viewed

@@ -25,7 +25,11 @@ const StyledDSPillV2 = styled(DSPillV2, {
   return theme.colors.brand[250];
 }};
-  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
+  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {
+  if (disabled) return theme.colors.neutral["600"];
+  if (applyAriaDisabled || readOnly) return theme.colors.neutral["700"];
+  return theme.colors.brand["800"];
+}};
 `;
 const StyledDSPillGroupV2 = styled(DSPillGroupV2, {
   name: DSFormComboboxName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPillV2, DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\n`;\n\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP,\n})`\n  display: grid;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,qBAAqB;AACxC,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AACjD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MACvD,YAAY,qBAAqB,WAAW,YAAY,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAU9E,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPillV2, DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['600'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['700'];\n    return theme.colors.brand['800'];\n  }};\n`;\n\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP,\n})`\n  display: grid;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,qBAAqB;AACxC,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AACjD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AAC7D,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC,CAAC;AAAA;AAUI,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;",
   "names": []
 }

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

@@ -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/controls/styled.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export declare const StyledSingleSelectWraper: import("styled-components").Style
     applyAriaDisabled: boolean;
     readOnly: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledSelection: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledSelection: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
 export declare const StyledHeaderActionsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const StyleDropdownIndicator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyleHeaderActionsSeparator: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, Partial<StyledControlsWrapperT> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;

package/dist/types/parts/controls-input/styled.d.ts CHANGED Viewed

@@ -5,7 +5,9 @@ export declare const StyledInput: import("styled-components").StyledComponent<"i
     withoutCaret: boolean;
     applyAriaDisabled: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"input">, never>;
-export declare const StyledInputPlaceHolder: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledInputWidthReference: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledInputPlaceHolder: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, {
+    $nonInteractive?: boolean;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
+export declare const StyledInputWidthReference: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, import("styled-components").ThemeProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledHiddenDiv: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

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

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

@@ -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/parts/menu-list/styled.d.ts CHANGED Viewed

@@ -6,9 +6,26 @@ interface StyledListWrapperT {
     inline?: boolean;
 }
 export declare const StyledListWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledListWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
-export declare const StyledCreatableLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
-export declare const StyledCreatableValue: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledCreatableLabel: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
+export declare const StyledCreatableValue: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
 export declare const StyledNoResultsWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledSingleMenuItem: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsSingleT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsSingleT.Props>>, never>;
+type IdleLabelColorProps = {
+    disabled?: boolean;
+    applyAriaDisabled?: boolean;
+    readOnly?: boolean;
+};
+/**
+ * Combobox-specific idle color override for single menu item labels.
+ *
+ * The decision to render the idle label as neutral-700 is a combobox-level call
+ * (team consistency with multi, which lands at neutral-700 via the checkbox spec),
+ * not a generic menu-item rule. It lives here so other consumers of ds-menu-items
+ * are not forced into a color opinion they did not ask for.
+ *
+ * Muted states (disabled / aria-disabled / readOnly) intentionally fall through
+ * so disabledOption() in ds-menu-items-commons keeps owning neutral-500 and the
+ * neutral-600 hover variant.
+ */
+export declare const StyledSingleMenuItem: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsSingleT.Props>, import("@elliemae/ds-system").Theme, IdleLabelColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsSingleT.Props>>, never>;
 export declare const StyledMultiMenuItem: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsMultiT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsMultiT.Props>>, never>;
 export {};