npm - @elliemae/ds-form-combobox - Versions diffs - 3.62.1 → 3.70.0-alpha.9 - Mend

@elliemae/ds-form-combobox 3.62.1 → 3.70.0-alpha.9

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 (160) hide show

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

@@ -38,7 +38,17 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_theming = require("../../theming.js");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_constants = require("../../constants/index.js");
+const b2InputTypography = import_ds_system.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 = (0, import_ds_system.styled)("input")`
   color: transparent;
   position: absolute;
@@ -55,18 +65,17 @@ const StyleHiddenInput = (0, import_ds_system.styled)("input")`
   ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}
 `;
 const StyledInput = (0, import_ds_system.styled)("input", {
-  name: import_theming.DSComboBoxName,
-  slot: import_theming.DSComboboxSlots.INPUT
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.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;
   }
@@ -77,18 +86,18 @@ const StyledInput = (0, import_ds_system.styled)("input", {
   transition: none;
   ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}
 `;
-const StyledInputPlaceHolder = import_ds_system.styled.div`
+const StyledInputPlaceHolder = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.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;
@@ -96,16 +105,27 @@ const StyledInputPlaceHolder = import_ds_system.styled.div`
   }
 `;
 const StyledInputWidthReference = import_ds_system.styled.span`
+  ${b2InputTypography}
   visibility: hidden;
   position: absolute;
   top: -9999px;
   z-index: 1;
 `;
-const StyledInputWrapper = (0, import_ds_system.styled)("div")`
+const StyledInputWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER
+})`
   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 = (0, import_ds_system.styled)("div")`

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const 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: DSComboBoxName,\n  slot: DSComboboxSlots.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  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,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,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
+  "sourcesContent": ["import { styled, 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,2BAA6B;AAC7B,uBAAwD;AAWxD,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA,uBAIH,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,qCAAoB;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,6BAAyB,yBAAO,mCAAc;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,qCAAoB;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,wBAAO;AAAA,IAC5C,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOd,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;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,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/controls-input/useKeyboardNavigation.js CHANGED Viewed

@@ -111,7 +111,11 @@ const useKeyboardNavigation = () => {
           if (!multiple) {
             setMenuState(false, import_constants.MENU_CONTROL_REASONS.SELECT_OPTION, e);
           }
-          onChange((0, import_listHelper.getSuggestedValueOnChange)(currentItem, selectedValues, isNonClearable), currentItem, e);
+          onChange(
+            (0, import_listHelper.getSuggestedValueOnChange)(currentItem, selectedValues, isNonClearable),
+            currentItem,
+            e
+          );
         }
       }
       if (e.key === "Enter" && e.altKey) {
@@ -119,7 +123,9 @@ const useKeyboardNavigation = () => {
       }
       if (e.key === "a" && e.ctrlKey && multiple && onSelectAll) {
         onSelectAll(
-          filteredOptions.filter((option) => option.type === "option" && !option.disabled),
+          filteredOptions.filter(
+            (option) => option.type === "option" && !option.disabled
+          ),
           e
         );
       }
@@ -162,7 +168,11 @@ const useKeyboardNavigation = () => {
         if (readOnly) return;
         const lastValue = (0, import_listHelper.getLastValueSelected)(selectedValues);
         if (!e.currentTarget.value && lastValue && !isNonClearable && !lastValue.applyAriaDisabled) {
-          onChange((0, import_listHelper.getSuggestedValueOnChange)(lastValue, selectedValues), lastValue, e);
+          onChange(
+            (0, import_listHelper.getSuggestedValueOnChange)(lastValue, selectedValues),
+            lastValue,
+            e
+          );
         }
       }
       if (e.key === "Tab" && !inline && menuState) {

package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/useKeyboardNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n} from '../../utils/listHelper.js';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES, MENU_CONTROL_REASONS } from '../../constants.js';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nconst optionHasFirstLetter = (opt: DSComboboxT.OptionTypes, letter: string): boolean =>\n  opt.label !== undefined && opt.label.toLowerCase().startsWith(letter.toLowerCase());\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      allOptions,\n      isNonClearable,\n      onCancel,\n      disabled,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      selectedValues,\n      withoutPortal,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      isMenuOpenableWithReadOnly,\n    },\n    inputValue,\n    correctOptions: filteredOptions,\n    menuState,\n    focusOptionIdx,\n    listRef,\n    setMenuState,\n    setInputValue,\n    scrollOptionIntoView,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const selectableOptions = getOptions(filteredOptions);\n  const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled || (readOnly && !isMenuOpenableWithReadOnly) || disabled) return;\n\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) && !menuState) {\n        setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        if (onCancel) onCancel();\n        if (inputValue) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n        }\n        if (!inline) setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);\n      }\n      // =============================================================================\n      // ENTER KEY TO CREATE ELEMENTS\n      // =============================================================================\n      if (!readOnly && e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n        e.preventDefault();\n        e.stopPropagation();\n        onCreate(inputValue);\n        // blank active item to force search last one\n        setFocusOptionIdx('');\n        if (onFilter) onFilter(allOptions, '');\n        setInputValue('');\n        return;\n      }\n\n      // the following code is wrong but kept for backward compatibility to avoid breaking changes\n      // when readonly the idea is not to open the menu when typing  but currently it opens the menu\n      // =============================================================================\n      // OPEN MENU ON TYPE WHEN READONLY AND ISMENUOPENABLEWITHREADONLY IS TRUE\n      // =============================================================================\n      if (isMenuOpenableWithReadOnly && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {\n        if (!menuState) {\n          setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n        }\n      }\n\n      // =============================================================================\n      // Enter, space and Tab on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.key === ' ' && e.altKey) || (e.key === 'Tab' && !multiple && !inline)) {\n        if (readOnly || currentItem?.applyAriaDisabled) return;\n\n        if (e.key !== 'Tab') e.preventDefault();\n        e.stopPropagation();\n\n        if (\n          focusOptionIdx !== '' &&\n          (menuState || inline) &&\n          currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n          !currentItem.disabled\n        ) {\n          if (onFilter) onFilter(allOptions, '');\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);\n          }\n          onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), currentItem, e);\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setMenuState(false, 'selectOption', e);\n      }\n\n      if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n      }\n      // =============================================================================\n      // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n      // =============================================================================\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        if ((menuState || inline) && (selectableOptions.length || onCreate)) {\n          const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n          if (nextItemIndexIndex > -1) {\n            setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n            scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n          }\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        if (!selectableOptions.length && !onCreate) return;\n        const prevItemIndex = findInCircularList(\n          filteredOptions,\n          currentItemIndex === -1 ? 0 : currentItemIndex,\n          isOptionFocuseable,\n          -1,\n        );\n        if (prevItemIndex > -1) {\n          if (menuState || inline) {\n            setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n            scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n          } else {\n            // open menu and search last item to focused\n            setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n            const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);\n            setTimeout(() => {\n              scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);\n            });\n          }\n        }\n      }\n\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {\n        if (readOnly) return;\n        const lastValue = getLastValueSelected(selectedValues);\n        if (!e.currentTarget.value && lastValue && !isNonClearable && !lastValue.applyAriaDisabled) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n        }\n      }\n\n      if (e.key === 'Tab' && !inline && menuState) {\n        setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);\n      }\n\n      // =============================================================================\n      // ONLYSELECTABLE LETTER/NUMBER KEYS TO FOCUS OPTIONS\n      // =============================================================================\n\n      if (onlySelectable && /^[a-zA-Z\\d]$/.test(e.key)) {\n        if (!menuState) {\n          setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n        }\n\n        const isOptionFocusableByLetter = (opt: DSComboboxT.OptionTypes): boolean =>\n          isOptionFocuseable(opt) && optionHasFirstLetter(opt, e.key);\n\n        const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocusableByLetter);\n        const nextItem = filteredOptions[nextItemIndexIndex];\n        if (!nextItem) return;\n        setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n        scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      onKeyDown,\n      currentItem,\n      onCreate,\n      multiple,\n      inputValue,\n      inline,\n      withoutPortal,\n      setMenuState,\n      onCancel,\n      onFilter,\n      setInputValue,\n      listRef,\n      focusOptionIdx,\n      menuState,\n      selectableOptions.length,\n      filteredOptions,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      isNonClearable,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n} from '../../utils/listHelper.js';\nimport type { DSCommonComboboxPropsT } from '../../DSCommonComboboxPropsT.js';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES, MENU_CONTROL_REASONS } from '../../constants.js';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nconst optionHasFirstLetter = (opt: DSComboboxT.OptionTypes, letter: string): boolean =>\n  opt.label !== undefined && opt.label.toLowerCase().startsWith(letter.toLowerCase());\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      allOptions,\n      isNonClearable,\n      onCancel,\n      disabled,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      selectedValues,\n      withoutPortal,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      isMenuOpenableWithReadOnly,\n    },\n    inputValue,\n    correctOptions: filteredOptions,\n    menuState,\n    focusOptionIdx,\n    listRef,\n    setMenuState,\n    setInputValue,\n    scrollOptionIntoView,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const selectableOptions = getOptions(filteredOptions);\n  const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled || (readOnly && !isMenuOpenableWithReadOnly) || disabled) return;\n\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) && !menuState) {\n        setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        if (onCancel) onCancel();\n        if (inputValue) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n        }\n        if (!inline) setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);\n      }\n      // =============================================================================\n      // ENTER KEY TO CREATE ELEMENTS\n      // =============================================================================\n      if (!readOnly && e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n        e.preventDefault();\n        e.stopPropagation();\n        onCreate(inputValue);\n        // blank active item to force search last one\n        setFocusOptionIdx('');\n        if (onFilter) onFilter(allOptions, '');\n        setInputValue('');\n        return;\n      }\n\n      // the following code is wrong but kept for backward compatibility to avoid breaking changes\n      // when readonly the idea is not to open the menu when typing  but currently it opens the menu\n      // =============================================================================\n      // OPEN MENU ON TYPE WHEN READONLY AND ISMENUOPENABLEWITHREADONLY IS TRUE\n      // =============================================================================\n      if (isMenuOpenableWithReadOnly && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {\n        if (!menuState) {\n          setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n        }\n      }\n\n      // =============================================================================\n      // Enter, space and Tab on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.key === ' ' && e.altKey) || (e.key === 'Tab' && !multiple && !inline)) {\n        if (readOnly || currentItem?.applyAriaDisabled) return;\n\n        if (e.key !== 'Tab') e.preventDefault();\n        e.stopPropagation();\n\n        if (\n          focusOptionIdx !== '' &&\n          (menuState || inline) &&\n          currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n          !currentItem.disabled\n        ) {\n          if (onFilter) onFilter(allOptions, '');\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);\n          }\n          // DSComboboxT.InternalProps is a conditional type that can't be resolved without an explicit type\n          // parameter, so TypeScript treats onChange as a union of functions and requires intersection params.\n          // The cast to SelectedOptionsT is safe \u2014 getSuggestedValueOnChange handles both multi/single at runtime.\n          (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n            getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable),\n            currentItem,\n            e,\n          );\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setMenuState(false, 'selectOption', e);\n      }\n\n      if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter(\n            (option) => option.type === 'option' && !option.disabled,\n          ) as DSCommonComboboxPropsT.SelectionableOptions[],\n          e,\n        );\n      }\n      // =============================================================================\n      // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n      // =============================================================================\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        if ((menuState || inline) && (selectableOptions.length || onCreate)) {\n          const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n          if (nextItemIndexIndex > -1) {\n            setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n            scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n          }\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        if (!selectableOptions.length && !onCreate) return;\n        const prevItemIndex = findInCircularList(\n          filteredOptions,\n          currentItemIndex === -1 ? 0 : currentItemIndex,\n          isOptionFocuseable,\n          -1,\n        );\n        if (prevItemIndex > -1) {\n          if (menuState || inline) {\n            setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n            scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n          } else {\n            // open menu and search last item to focused\n            setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n            const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);\n            setTimeout(() => {\n              scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);\n            });\n          }\n        }\n      }\n\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {\n        if (readOnly) return;\n        const lastValue = getLastValueSelected(selectedValues);\n        if (!e.currentTarget.value && lastValue && !isNonClearable && !lastValue.applyAriaDisabled) {\n          (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n            getSuggestedValueOnChange(lastValue, selectedValues),\n            lastValue,\n            e,\n          );\n        }\n      }\n\n      if (e.key === 'Tab' && !inline && menuState) {\n        setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);\n      }\n\n      // =============================================================================\n      // ONLYSELECTABLE LETTER/NUMBER KEYS TO FOCUS OPTIONS\n      // =============================================================================\n\n      if (onlySelectable && /^[a-zA-Z\\d]$/.test(e.key)) {\n        if (!menuState) {\n          setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n        }\n\n        const isOptionFocusableByLetter = (opt: DSComboboxT.OptionTypes): boolean =>\n          isOptionFocuseable(opt) && optionHasFirstLetter(opt, e.key);\n\n        const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocusableByLetter);\n        const nextItem = filteredOptions[nextItemIndexIndex];\n        if (!nextItem) return;\n        setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n        scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      onKeyDown,\n      currentItem,\n      onCreate,\n      multiple,\n      inputValue,\n      inline,\n      withoutPortal,\n      setMenuState,\n      onCancel,\n      onFilter,\n      setInputValue,\n      listRef,\n      focusOptionIdx,\n      menuState,\n      selectableOptions.length,\n      filteredOptions,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      isNonClearable,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/controls-input/useMaskedOnChange.js CHANGED Viewed

@@ -62,7 +62,7 @@ const useMaskedOnChange = () => {
     },
     [setMenuState, onFilter, allOptions]
   );
-  const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
+  const onChangeMask = useMask?.({ valueSetter: setInputValue, onChange: handleOnChangeMask });
   return onChangeMask?.onChange || handleOnChange;
 };
 //# sourceMappingURL=useMaskedOnChange.js.map

package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/useMaskedOnChange.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\n\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, onFilter, allOptions, applyAriaDisabled },\n    setMenuState,\n    setInputValue,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (applyAriaDisabled) return;\n      setMenuState(true, 'filter', e);\n      if (onFilter) {\n        // when filtering is controlled we suggest the basic filtering but let the user decide\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n      }\n      setFocusOptionIdx('');\n      setInputValue(e.currentTarget.value);\n    },\n    [applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n      setMenuState(true, 'filter', e);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n    },\n    [setMenuState, onFilter, allOptions],\n  );\n\n  const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n  return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,qBAAS,iCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,wBAAkB,EAAE;AACpB,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,mBAAmB,cAAc,UAAU,mBAAmB,eAAe,UAAU;AAAA,EAC1F;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,cAAS,iCAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,cAAc,UAAU,UAAU;AAAA,EACrC;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
+  "sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\n\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, onFilter, allOptions, applyAriaDisabled },\n    setMenuState,\n    setInputValue,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (applyAriaDisabled) return;\n      setMenuState(true, 'filter', e);\n      if (onFilter) {\n        // when filtering is controlled we suggest the basic filtering but let the user decide\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n      }\n      setFocusOptionIdx('');\n      setInputValue(e.currentTarget.value);\n    },\n    [applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n      setMenuState(true, 'filter', e);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n    },\n    [setMenuState, onFilter, allOptions],\n  );\n\n  const onChangeMask = useMask?.({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n  return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,qBAAS,iCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,wBAAkB,EAAE;AACpB,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,mBAAmB,cAAc,UAAU,mBAAmB,eAAe,UAAU;AAAA,EAC1F;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,cAAS,iCAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,cAAc,UAAU,UAAU;AAAA,EACrC;AAEA,QAAM,eAAe,UAAU,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAE3F,SAAO,cAAc,YAAY;AACnC;",
   "names": ["ComboBoxContext"]
 }

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

@@ -37,7 +37,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
 var import_constants = require("../../constants/index.js");
-const Wrapper = import_ds_system.styled.div`
+const Wrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.LOADING_WRAPPER
+})`
   display: flex;
   justify-content: center;
   height: 56px;
@@ -46,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", 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", "aria-hidden": "true", getOwnerProps })
+    }
+  )
+);
 var LoadingContainer_default = LoadingContainer;
 //# sourceMappingURL=LoadingContainer.js.map

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

@@ -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  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\">\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;ADiBnB;AAhBJ,uBAAuB;AACvB,4CAAiD;AACjD,uBAAwD;AAExD,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAKvB,MAAM,6CAAyC,yBAAO,wEAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC,EAAE,cAAc,MACxC,4CAAC,WAAQ,IAAG,iBACV,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    {/**\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AA/CJ,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,MASA,sDAAC,0CAAuC,MAAK,KAAI,eAAY,QAAO,eAA8B;AAAA;AAAA,EACpG;AAAA;AAIF,IAAO,2BAAQ;",
   "names": []
 }

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

@@ -50,7 +50,10 @@ const StyledFastList = (0, import_ds_system.styled)(import_ds_fast_list.DSFastLi
   name: import_constants.DSFormComboboxName,
   slot: import_constants.FORM_COMBOBOX_SLOTS.FAST_LIST
 })``;
-const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.MENU_ITEMS_WRAPPER
+})`
   max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};
 `;
 const estimatedSize = () => 32;
@@ -64,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)(
@@ -74,10 +78,11 @@ const ContentComp = () => {
         id: `combo-listbox-${instanceUid}`,
         "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.NO_MATCHES_FOUND,
         role: "alert",
+        getOwnerProps,
         children: noOptionsMessage
       }
     );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, getOwnerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     StyledFastList,
     {
       dsFastlistWrapperList: {
@@ -100,10 +105,12 @@ const ContentComp = () => {
 };
 const MenuList = () => {
   const {
+    props,
     props: { menuMinWidth, inline },
     controlsWrapperRef,
     wrapperListRef
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
+  const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
   const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
   const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
     e.preventDefault();
@@ -116,6 +123,7 @@ const MenuList = () => {
       onMouseDown: preventLoseInputFocus,
       width,
       minWidth: menuMinWidth,
+      getOwnerProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentComp, {})
     }
   );

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

@@ -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  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        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n\n  return (\n    <StyledItemsWrapper maxHeight={menuMaxHeight}>\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: { menuMinWidth, inline },\n    controlsWrapperRef,\n    wrapperListRef,\n  } = useContext(ComboBoxContext);\n\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    >\n      <ContentComp />\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCE;AAvCzB,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,mBAAI;AAAA,gBAGtB,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,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAGJ,SACE,4CAAC,sBAAmB,WAAW,eAC7B;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,OAAO,EAAE,cAAc,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,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,MAEV,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 CHANGED Viewed

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

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

@@ -31,26 +31,56 @@ __export(styled_exports, {
   StyledCreatableLabel: () => StyledCreatableLabel,
   StyledCreatableValue: () => StyledCreatableValue,
   StyledListWrapper: () => StyledListWrapper,
-  StyledNoResultsWrapper: () => StyledNoResultsWrapper
+  StyledMultiMenuItem: () => StyledMultiMenuItem,
+  StyledNoResultsWrapper: () => StyledNoResultsWrapper,
+  StyledSingleMenuItem: () => StyledSingleMenuItem
 });
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-const StyledListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_ds_menu_items = require("@elliemae/ds-menu-items");
+var import_constants = require("../../constants/index.js");
+const StyledListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.LIST_WRAPPER
+})`
   min-width: ${({ inline, minWidth }) => inline ? "100%" : `${String(minWidth)}px`};
   width: ${({ width }) => `${width}px`};
   background-color: #ffffff;
   z-index: 100;
 `;
-const StyledCreatableLabel = import_ds_system.styled.span`
+const StyledCreatableLabel = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.CREATABLE_LABEL
+})`
   font-weight: bold;
   font-style: italic;
+  text-transform: uppercase;
 `;
-const StyledCreatableValue = import_ds_system.styled.span`
+const StyledCreatableValue = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.CREATABLE_VALUE
+})`
   word-break: break-all;
 `;
-const StyledNoResultsWrapper = import_ds_system.styled.div`
+const StyledNoResultsWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.NO_MATCHES_FOUND
+})`
   padding: 14px;
 `;
+const StyledSingleMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.SingleMenuItem, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
+  preserveLegacyDataTestId: true
+})`
+  ${({ theme, disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && `color: ${theme.colors.neutral[700]};`}
+`;
+const StyledMultiMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.MultiMenuItem, {
+  name: import_constants.DSFormComboboxName,
+  slot: import_constants.FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,
+  preserveLegacyDataTestId: true
+})``;
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid)<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  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 14px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,qBAAqB;AAQd,MAAM,wBAAoB,yBAAO,mBAAI;AAAA,eAC7B,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,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,qBAAqB;AACrB,2BAA6B;AAC7B,2BAA8C;AAC9C,uBAAwD;AAQjD,MAAM,wBAAoB,yBAAO,qBAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,qCAAoB;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,2BAAuB,yBAAO,mCAAc;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,2BAAuB,yBAAO,mCAAc;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAsBM,MAAM,2BAAuB,yBAAO,qCAAgB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,qCAAoB;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,0BAAsB,yBAAO,oCAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;",
   "names": []
 }