@elliemae/ds-form-combobox 3.49.0-rc.9 → 3.49.0

package/dist/esm/ComboBoxCTX.js.map

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

package/dist/esm/config/useComboBox.js

@@ -8,6 +8,7 @@ import { ComboboxPropTypes } from "../react-desc-prop-types.js";
 import { useCorrectOptions } from "./useCorrectOptions.js";
 import { getFirstOption, isSelectedValueEmpty } from "../utils/listHelper.js";
 import { DSComboBoxName } from "../theming.js";
+import { useOptionsPerSection } from "./useOptionsPerSection.js";
 const useComboBox = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);
@@ -28,18 +29,21 @@ const useComboBox = (props) => {
     return showPopover;
   }, [showPopover, isMenuOpen]);
   const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);
+  const optionsPerSection = useOptionsPerSection(correctOptions);
   const virtualListHelpers = useVirtual({
-    size: correctOptions.length,
+    size: optionsPerSection.length,
     parentRef: listRef,
     overscan: 15,
     paddingStart: 0
   });
   const scrollOptionIntoView = useCallback(
     (dsId, opts = { align: "center" }) => {
-      virtualListHelpers.scrollToIndex(
-        correctOptions.findIndex((opt) => opt.dsId === dsId),
-        opts
-      );
+      requestAnimationFrame(() => {
+        virtualListHelpers.scrollToIndex(
+          correctOptions.findIndex((opt) => opt.dsId === dsId),
+          opts
+        );
+      });
     },
     [correctOptions, virtualListHelpers]
   );
@@ -87,7 +91,8 @@ const useComboBox = (props) => {
       setShowPopover,
       internalRef,
       correctOptions,
-      instanceUid
+      instanceUid,
+      optionsPerSection
     }),
     [
       scrollOptionIntoView,
@@ -106,7 +111,8 @@ const useComboBox = (props) => {
       controlsWrapperRef,
       listRef,
       internalRef,
-      instanceUid
+      instanceUid,
+      optionsPerSection
     ]
   );
   return ctx;

package/dist/esm/config/useComboBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useComboBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (applyAriaDisabled) return;\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n\n      if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n        const focusedValue = getFirstOption(correctOptions, selectedValues);\n        setFocusOptionIdx(focusedValue);\n        scrollOptionIntoView(focusedValue, { align: 'center' });\n      } else {\n        setFocusOptionIdx('');\n      }\n    },\n    [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n  );\n\n  // We need to force the auto focus for the inline since we dont control the floating wrapper.\n  useEffect(() => {\n    if (propsWithDefaults.inline) {\n      setMenuState(true, 'inline');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      pillGroupRef,\n      wrapperListRef,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      listRef,\n      internalRef,\n      instanceUid,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n  const optionsPerSection = useOptionsPerSection(correctOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: optionsPerSection.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      requestAnimationFrame(() => {\n        virtualListHelpers.scrollToIndex(\n          correctOptions.findIndex((opt) => opt.dsId === dsId),\n          opts,\n        );\n      });\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (applyAriaDisabled) return;\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n\n      if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n        const focusedValue = getFirstOption(correctOptions, selectedValues);\n        setFocusOptionIdx(focusedValue);\n        scrollOptionIntoView(focusedValue, { align: 'center' });\n      } else {\n        setFocusOptionIdx('');\n      }\n    },\n    [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n  );\n\n  // We need to force the auto focus for the inline since we dont control the floating wrapper.\n  useEffect(() => {\n    if (propsWithDefaults.inline) {\n      setMenuState(true, 'inline');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      pillGroupRef,\n      wrapperListRef,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n      optionsPerSection,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      listRef,\n      internalRef,\n      instanceUid,\n      optionsPerSection,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/config/useOptionsPerSection.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { useMemo } from "react";
+const useOptionsPerSection = (correctOptions) => useMemo(() => {
+  const result = [];
+  let currentSection = null;
+  correctOptions.forEach((item) => {
+    if (item.type === "section") {
+      currentSection = {
+        dsId: item.dsId,
+        type: item.type,
+        label: item.label,
+        options: []
+      };
+      result.push(currentSection);
+    } else if ((item.type === "option" || item.type === "separator") && currentSection) {
+      currentSection.options.push(item);
+    } else if (item.type === "option" || item.type === "creatable" || item.type === "separator") {
+      result.push(item);
+    }
+  });
+  return result;
+}, [correctOptions]);
+export {
+  useOptionsPerSection
+};
+//# sourceMappingURL=useOptionsPerSection.js.map

package/dist/esm/config/useOptionsPerSection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useOptionsPerSection.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\n\nexport const useOptionsPerSection = (correctOptions: DSComboboxT.OptionTypes[]) =>\n  useMemo(() => {\n    const result: DSComboboxT.OptionTypes[] = [];\n    let currentSection: DSComboboxT.ItemSectionOptions | null = null;\n\n    correctOptions.forEach((item) => {\n      if (item.type === 'section') {\n        // Start a new section\n        currentSection = {\n          dsId: item.dsId,\n          type: item.type,\n          label: item.label,\n          options: [],\n        };\n        result.push(currentSection);\n      } else if ((item.type === 'option' || item.type === 'separator') && currentSection) {\n        // Add option to the current section's options array\n        currentSection.options.push(item);\n      } else if (item.type === 'option' || item.type === 'creatable' || item.type === 'separator') {\n        // If we encounter an option without a section, push it to the result array\n        result.push(item);\n      }\n    });\n    return result;\n  }, [correctOptions]);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe;AAGjB,MAAM,uBAAuB,CAAC,mBACnC,QAAQ,MAAM;AACZ,QAAM,SAAoC,CAAC;AAC3C,MAAI,iBAAwD;AAE5D,iBAAe,QAAQ,CAAC,SAAS;AAC/B,QAAI,KAAK,SAAS,WAAW;AAE3B,uBAAiB;AAAA,QACf,MAAM,KAAK;AAAA,QACX,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,QACZ,SAAS,CAAC;AAAA,MACZ;AACA,aAAO,KAAK,cAAc;AAAA,IAC5B,YAAY,KAAK,SAAS,YAAY,KAAK,SAAS,gBAAgB,gBAAgB;AAElF,qBAAe,QAAQ,KAAK,IAAI;AAAA,IAClC,WAAW,KAAK,SAAS,YAAY,KAAK,SAAS,eAAe,KAAK,SAAS,aAAa;AAE3F,aAAO,KAAK,IAAI;AAAA,IAClB;AAAA,EACF,CAAC;AACD,SAAO;AACT,GAAG,CAAC,cAAc,CAAC;",
+  "names": []
+}

package/dist/esm/parts/DropdownIndicator.js

@@ -15,14 +15,14 @@ const StyledDropDownButton = styled(DSButtonV2)`
   }
 
   & svg {
-    fill: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.brand["700"]};
+    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) => disabled || readOnly || applyAriaDisabled ? theme.colors.neutral["400"] : theme.colors.brand["700"]};
   }
 
   ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}
 `;
 const DropdownIndicator = () => {
   const {
-    props: { disabled, applyAriaDisabled },
+    props: { disabled, applyAriaDisabled, readOnly },
     menuState,
     instanceUid
   } = useContext(ComboBoxContext);
@@ -37,6 +37,7 @@ const DropdownIndicator = () => {
       "aria-controls": `combo-listbox-${instanceUid}`,
       "aria-labelledby": "combo-label",
       disabled,
+      readOnly,
       "aria-expanded": menuState,
       "aria-haspopup": "listbox",
       "aria-hidden": true,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)<{ applyAriaDisabled: boolean }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props: { disabled, applyAriaDisabled },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmDjB;AAjDN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAE;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,kBAAkB;AAAA,IACrC;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBACJ,YAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,eAAa,mBAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,8BAAC,oBAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)<{ applyAriaDisabled: boolean }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n      disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['700']};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props: { disabled, applyAriaDisabled, readOnly },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      readOnly={readOnly}\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqDjB;AAnDN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,UAAU,UAAU,kBAAkB,MACtD,YAAY,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,mBAAmB,SAAS;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBACJ,YAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,eAAa,mBAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,8BAAC,oBAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Section.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import React2 from "react";
+import { styled } from "@elliemae/ds-system";
+import { SingleMenuItem, MultiMenuItem, Separator } from "@elliemae/ds-menu-items";
+import { MENU_OPTION_TYPES } from "../constants.js";
+import { ComboboxDataTestid } from "../ComboboxDataTestids.js";
+import { isSelected } from "../utils/listHelper.js";
+const StyledSectionWrapper = styled("section")`
+  list-style: none;
+  min-height: 24px;
+  display: grid;
+  align-items: center;
+`;
+const StyledSectionLabel = styled("header")`
+  display: flex;
+  align-items: center;
+  padding: 0px 16px;
+  min-height: 24px;
+  font-size: 1rem;
+  color: neutral-500;
+`;
+const Section = React2.memo((props) => {
+  const { label, wrapperStyles, focusOptionIdx, selectedValues, innerRef, handleOnMouseDown, options, handleClick } = props;
+  const id = `${label.replace(/ /g, "")}-section`;
+  const CBItem = Array.isArray(selectedValues) ? MultiMenuItem : SingleMenuItem;
+  return /* @__PURE__ */ jsxs(StyledSectionWrapper, { role: "group", "aria-labelledby": id, style: wrapperStyles, innerRef, children: [
+    /* @__PURE__ */ jsx(StyledSectionLabel, { id, role: "presentation", children: label }),
+    options?.map((option) => {
+      const { dsId, type, value, label: optionLabel, readOnly, disabled, applyAriaDisabled, ...rest } = option;
+      if (type === MENU_OPTION_TYPES.SEPARATOR) {
+        return /* @__PURE__ */ jsx(Separator, {}, dsId);
+      }
+      return /* @__PURE__ */ createElement(
+        CBItem,
+        {
+          value,
+          label: optionLabel,
+          dataTestid: ComboboxDataTestid.OPTION,
+          disabled,
+          applyAriaDisabled: applyAriaDisabled || readOnly,
+          onClick: (e) => {
+            if (applyAriaDisabled) return;
+            handleClick(option, e);
+          },
+          onMouseDown: handleOnMouseDown,
+          isActive: dsId === focusOptionIdx,
+          isSelected: isSelected(selectedValues, option),
+          tabIndex: -1,
+          ...rest,
+          key: option.dsId,
+          dsId: option.dsId
+        }
+      );
+    })
+  ] });
+});
+export {
+  Section
+};
+//# sourceMappingURL=Section.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Section.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles: React.CSSProperties;\n  innerRef: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.ItemOption[] | DSComboboxT.ItemSeparatorOptions[];\n  handleClick: (option: DSComboboxT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n}\n\nconst StyledSectionWrapper = styled('section')`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header')`\n  display: flex;\n  align-items: center;\n  padding: 0px 16px;\n  min-height: 24px;\n  font-size: 1rem;\n  color: neutral-500;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const { label, wrapperStyles, focusOptionIdx, selectedValues, innerRef, handleOnMouseDown, options, handleClick } =\n    props;\n  const id = `${label.replace(/ /g, '')}-section`;\n\n  const CBItem = Array.isArray(selectedValues) ? MultiMenuItem : SingleMenuItem;\n\n  return (\n    <StyledSectionWrapper role=\"group\" aria-labelledby={id} style={wrapperStyles} innerRef={innerRef}>\n      <StyledSectionLabel id={id} role=\"presentation\">\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const { dsId, type, value, label: optionLabel, readOnly, disabled, applyAriaDisabled, ...rest } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4CnB,SACE,KADF;AAYM;AAxDV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,gBAAgB,eAAe,iBAAiB;AACzD,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AAa3B,MAAM,uBAAuB,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7C,MAAM,qBAAqB,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnC,MAAM,UAAUA,OAAM,KAAK,CAAC,UAAwB;AACzD,QAAM,EAAE,OAAO,eAAe,gBAAgB,gBAAgB,UAAU,mBAAmB,SAAS,YAAY,IAC9G;AACF,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AAErC,QAAM,SAAS,MAAM,QAAQ,cAAc,IAAI,gBAAgB;AAE/D,SACE,qBAAC,wBAAqB,MAAK,SAAQ,mBAAiB,IAAI,OAAO,eAAe,UAC5E;AAAA,wBAAC,sBAAmB,IAAQ,MAAK,gBAC9B,iBACH;AAAA,IACC,SAAS,IAAI,CAAC,WAAW;AACxB,YAAM,EAAE,MAAM,MAAM,OAAO,OAAO,aAAa,UAAU,UAAU,mBAAmB,GAAG,KAAK,IAAI;AAElG,UAAI,SAAS,kBAAkB,WAAW;AACxC,eAAO,oBAAC,eAAe,IAAM;AAAA,MAC/B;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,YAAY,mBAAmB;AAAA,UAC/B;AAAA,UACA,mBAAmB,qBAAqB;AAAA,UACxC,SAAS,CAAC,MAA0C;AAClD,gBAAI,kBAAmB;AACvB,wBAAY,QAAQ,CAAC;AAAA,UACvB;AAAA,UACA,aAAa;AAAA,UACb,UAAU,SAAS;AAAA,UACnB,YAAY,WAAW,gBAAgB,MAAM;AAAA,UAC7C,UAAU;AAAA,UACT,GAAG;AAAA,UACJ,KAAK,OAAO;AAAA,UACZ,MAAM,OAAO;AAAA;AAAA,MACf;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ,CAAC;",
+  "names": ["React"]
+}

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

@@ -17,7 +17,7 @@ import { ControlsInput } from "../controls-input/ControlsInput.js";
 import { useOnPillsNavigation } from "./useOnPillsNavigation.js";
 const Controls = () => {
   const {
-    props: { inline, disabled, inputMinWidth, hasError, selectedValues, applyAriaDisabled },
+    props: { inline, disabled, inputMinWidth, hasError, selectedValues, applyAriaDisabled, readOnly },
     selectedOptionsRef,
     setMenuState,
     setFocusOptionIdx,
@@ -30,7 +30,7 @@ const Controls = () => {
     internalRef
   } = useContext(ComboBoxContext);
   const handleOnClick = useCallback(() => {
-    if (disabled) return;
+    if (disabled || readOnly) return;
     if (applyAriaDisabled) {
       internalRef.current?.focus();
       return;
@@ -47,14 +47,14 @@ const Controls = () => {
   const handleOnPillsClick = useCallback(
     (e) => {
       if (applyAriaDisabled) return;
-      if (menuState || disabled) {
+      if (menuState || disabled || readOnly) {
         e.stopPropagation();
       } else {
         internalRef.current?.focus();
         setMenuState(true, "pill-click");
       }
     },
-    [menuState, internalRef, disabled, setMenuState, applyAriaDisabled]
+    [applyAriaDisabled, menuState, disabled, readOnly, internalRef, setMenuState]
   );
   const handleOnMouseDown = useCallback(
     (e) => {
@@ -73,6 +73,7 @@ const Controls = () => {
     StyledControlsWrapper,
     {
       innerRef: controlsWrapperRef,
+      readOnly,
       cols,
       disabled,
       applyAriaDisabled,
@@ -88,6 +89,7 @@ const Controls = () => {
         !inline && /* @__PURE__ */ jsx(StyledSelection, { innerRef: selectedOptionsRef, onClick: handleOnPillsClick, children: Array.isArray(selectedValues) ? /* @__PURE__ */ jsx(MultiSelectedValuesContainer, {}) : /* @__PURE__ */ jsx(
           StyledSingleSelectWraper,
           {
+            readOnly,
             "data-testid": ComboboxDataTestid.SELECTED_VALUES,
             disabled,
             applyAriaDisabled,
@@ -102,7 +104,7 @@ const Controls = () => {
             cols: ["min-content", "minmax(28px,max-content)"],
             justifyContent: "flex-end",
             children: [
-              /* @__PURE__ */ jsx(StyleHeaderActionsSeparator, { disabled, applyAriaDisabled }),
+              /* @__PURE__ */ jsx(StyleHeaderActionsSeparator, { disabled, applyAriaDisabled, readOnly }),
               /* @__PURE__ */ jsx(DropdownIndicator, {})
             ]
           }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n  StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues, applyAriaDisabled },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    inputValue,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (applyAriaDisabled) {\n      internalRef.current?.focus();\n      return;\n    }\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false, 'click');\n      setFocusOptionIdx('');\n      internalRef.current?.blur();\n      return;\n    }\n    internalRef.current?.focus();\n    setMenuState(true, 'click');\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      if (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true, 'pill-click');\n      }\n    },\n    [menuState, internalRef, disabled, setMenuState, applyAriaDisabled],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === internalRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [internalRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '2.231rem'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      innerRef={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      aria-disabled={applyAriaDisabled}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <StyledSingleSelectWraper\n              data-testid={ComboboxDataTestid.SELECTED_VALUES}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n            >\n              {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n            </StyledSingleSelectWraper>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper\n          justifyItems=\"center\"\n          cols={['min-content', 'minmax(28px,max-content)']}\n          justifyContent=\"flex-end\"\n        >\n          <StyleHeaderActionsSeparator disabled={disabled} applyAriaDisabled={applyAriaDisabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmGX,cAeJ,YAfI;AAjGZ,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AAC9B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,kBAAkB;AAAA,IACtF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,SAAU;AACd,QAAI,mBAAmB;AACrB,kBAAY,SAAS,MAAM;AAC3B;AAAA,IACF;AACA,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,OAAO,OAAO;AAC3B,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,MAAM,OAAO;AAAA,EAG5B,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,kBAAmB;AACvB,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,MAAM,YAAY;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,cAAc,iBAAiB;AAAA,EACpE;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,IAAI,qBAAqB;AAEhD,QAAM,OAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,UAAU,IAAI,CAAC,mBAAmB;AAAA,IACrG,CAAC,MAAM;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,iBAAe;AAAA,MACf,eAAa,mBAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,oBAAC,mBAAgB,UAAU,oBAAoB,SAAS,oBACrD,gBAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,mBAAmB;AAAA,YAChC;AAAA,YACA;AAAA,YAEC,4BAAkB,eAAe,KAAK,oBAAC,8BAA2B,OAAO,eAAe,OAAO,IAAK;AAAA;AAAA,QACvG,GAEJ;AAAA,QAGF,oBAAC,iBAAc;AAAA,QACd,CAAC,UACA;AAAA,UAAC;AAAA;AAAA,YACC,cAAa;AAAA,YACb,MAAM,CAAC,eAAe,0BAA0B;AAAA,YAChD,gBAAe;AAAA,YAEf;AAAA,kCAAC,+BAA4B,UAAoB,mBAAsC;AAAA,cACvF,oBAAC,qBAAkB;AAAA;AAAA;AAAA,QACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n  StyledSingleSelectWraper,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues, applyAriaDisabled, readOnly },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    inputValue,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled || readOnly) return;\n    if (applyAriaDisabled) {\n      internalRef.current?.focus();\n      return;\n    }\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false, 'click');\n      setFocusOptionIdx('');\n      internalRef.current?.blur();\n      return;\n    }\n    internalRef.current?.focus();\n    setMenuState(true, 'click');\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (applyAriaDisabled) return;\n      if (menuState || disabled || readOnly) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true, 'pill-click');\n      }\n    },\n    [applyAriaDisabled, menuState, disabled, readOnly, internalRef, setMenuState],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === internalRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [internalRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '2.231rem'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      innerRef={controlsWrapperRef}\n      readOnly={readOnly}\n      cols={cols}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      aria-disabled={applyAriaDisabled}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection innerRef={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <StyledSingleSelectWraper\n              readOnly={readOnly}\n              data-testid={ComboboxDataTestid.SELECTED_VALUES}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n            >\n              {selectedValues && inputValue === '' ? <SimpleTruncatedTooltipText value={selectedValues.label} /> : null}\n            </StyledSingleSelectWraper>\n          )}\n        </StyledSelection>\n      )}\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper\n          justifyItems=\"center\"\n          cols={['min-content', 'minmax(28px,max-content)']}\n          justifyContent=\"flex-end\"\n        >\n          <StyleHeaderActionsSeparator disabled={disabled} applyAriaDisabled={applyAriaDisabled} readOnly={readOnly} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -2,21 +2,37 @@ import * as React from "react";
 import { styled, css, th } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSComboBoxName, DSComboboxSlots } from "../../theming.js";
-const normalBorder = css`
+const readOnlyBorder = css`
+  border: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};
+`;
+const borderStyles = css`
   border: 1px solid ${({ hasError, theme }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
+  ${({ readOnly, applyAriaDisabled }) => readOnly || applyAriaDisabled ? readOnlyBorder : ""}
+`;
+const backgroundStyles = css`
+  background: ${({ disabled, applyAriaDisabled, readOnly, theme }) => {
+  if (readOnly || applyAriaDisabled) {
+    return theme.colors.neutral["050"];
+  }
+  if (disabled) {
+    return theme.colors.neutral["080"];
+  }
+  return "#ffffff";
+}};
 `;
 const focusBorder = css`
   outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
   outline-offset: -2px;
 `;
 const hoverBorder = css`
-  border: 1px solid ${({ theme }) => theme.colors.brand[700]};
+  border: 1px solid ${({ theme }) => theme.colors.brand[600]};
 `;
 const StyledControlsWrapper = styled(Grid, {
   name: DSComboBoxName,
   slot: DSComboboxSlots.INPUT_WRAPPER
 })`
-  background: ${({ disabled, applyAriaDisabled, theme }) => disabled || applyAriaDisabled ? theme.colors.neutral["080"] : "#ffffff"};
+  ${backgroundStyles}
   position: relative;
   border-radius: 2px;
   min-width: ${({ minWidth, inline }) => inline || !minWidth ? "" : `${minWidth}px`};
@@ -28,7 +44,7 @@ const StyledControlsWrapper = styled(Grid, {
     padding: 1.25px 0px 1.25px 8px;
   }
   margin: ${({ inline }) => inline ? "10px 16px" : ""};
-  ${normalBorder}
+  ${borderStyles}
   &:hover {
     ${({ disabled }) => !disabled ? hoverBorder : ""}
   }
@@ -40,7 +56,7 @@ const StyledSingleSelectWraper = styled.div`
   display: flex;
   width: 100%;
   align-items: center;
-  color: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#616b7f" : ""};
+  color: ${({ disabled, readOnly, applyAriaDisabled, theme }) => disabled || applyAriaDisabled || readOnly ? theme.colors.neutral["700"] : ""};
   user-select: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "none" : ""};
 `;
 const StyledSelection = styled.div`
@@ -58,7 +74,7 @@ const StyleDropdownIndicator = styled.div``;
 const StyleHeaderActionsSeparator = styled.span`
   height: 100%;
   width: 1px;
-  background-color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? theme.colors.neutral["400"] : theme.colors.neutral["500"]};
+  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? theme.colors.neutral["400"] : theme.colors.neutral["500"]};
 `;
 export {
   StyleDropdownIndicator,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  inline: boolean;\n  minWidth?: number;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n  background: ${({ disabled, applyAriaDisabled, theme }) =>\n    disabled || applyAriaDisabled ? theme.colors.neutral['080'] : '#ffffff'};\n  position: relative;\n  border-radius: 2px;\n  min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n  align-items: center;\n  align-content: center;\n  min-height: 28px;\n  padding: 3px 0px 3px 8px;\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: 1.25px 0px 1.25px 8px;\n  }\n  margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n  ${normalBorder}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledSingleSelectWraper = styled.div<{ disabled: boolean; applyAriaDisabled: boolean }>`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  color: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? '#616b7f' : '')};\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled.div`\n  font-size: 1rem;\n  margin-right: 3px;\n  display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid)`\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span<Partial<StyledControlsWrapperT>>`\n  height: 100%;\n  width: 1px;\n  background-color: ${({ theme, disabled, applyAriaDisabled }) =>\n    disabled || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.neutral['500']};\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAShD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAEhH,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI7D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAErD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,mBAAmB,MAAM,MAClD,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS;AAAA;AAAA;AAAA,eAG5D,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG,QAAQ,IAAK;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK9D,GAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,YAGjC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,EAAG;AAAA,IACnD,YAAY;AAAA;AAAA,MAEV,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhD,WAAW;AAAA;AAAA;AAIV,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA,WAIpC,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,YAAY,EAAG;AAAA,iBAC/E,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,EAAG;AAAA;AAG5F,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,OAAO;AAEtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA,sBAG5B,CAAC,EAAE,OAAO,UAAU,kBAAkB,MACxD,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  inline: boolean;\n  minWidth?: number;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}\n\nconst readOnlyBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst borderStyles = css<{ hasError: boolean; readOnly: boolean; applyAriaDisabled: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  ${({ readOnly, applyAriaDisabled }) => (readOnly || applyAriaDisabled ? readOnlyBorder : '')}\n`;\n\nconst backgroundStyles = css<{ disabled: boolean; applyAriaDisabled: boolean; readOnly: boolean }>`\n  background: ${({ disabled, applyAriaDisabled, readOnly, theme }) => {\n    if (readOnly || applyAriaDisabled) {\n      return theme.colors.neutral['050'];\n    }\n    if (disabled) {\n      return theme.colors.neutral['080'];\n    }\n    return '#ffffff';\n  }};\n`;\n\nconst focusBorder = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n  ${backgroundStyles}\n  position: relative;\n  border-radius: 2px;\n  min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n  align-items: center;\n  align-content: center;\n  min-height: 28px;\n  padding: 3px 0px 3px 8px;\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: 1.25px 0px 1.25px 8px;\n  }\n  margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n  ${borderStyles}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledSingleSelectWraper = styled.div<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  color: ${({ disabled, readOnly, applyAriaDisabled, theme }) =>\n    disabled || applyAriaDisabled || readOnly ? theme.colors.neutral['700'] : ''};\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled.div`\n  font-size: 1rem;\n  margin-right: 3px;\n  display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid)`\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span<Partial<StyledControlsWrapperT>>`\n  height: 100%;\n  width: 1px;\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? theme.colors.neutral['400'] : theme.colors.neutral['500']};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAWhD,MAAM,iBAAiB;AAAA,sBACD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,6BACnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGrE,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,IAC5G,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,iBAAiB,EAAG;AAAA;AAG9F,MAAM,mBAAmB;AAAA,gBACT,CAAC,EAAE,UAAU,mBAAmB,UAAU,MAAM,MAAM;AAClE,MAAI,YAAY,mBAAmB;AACjC,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,MAAI,UAAU;AACZ,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI7D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAGrD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,gBAAgB;AAAA;AAAA;AAAA,eAGL,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG,QAAQ,IAAK;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK9D,GAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,YAGjC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,EAAG;AAAA,IACnD,YAAY;AAAA;AAAA,MAEV,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhD,WAAW;AAAA;AAAA;AAIV,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA,WAQpC,CAAC,EAAE,UAAU,UAAU,mBAAmB,MAAM,MACvD,YAAY,qBAAqB,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,EAAE;AAAA,iBAC/D,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,EAAG;AAAA;AAG5F,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,OAAO;AAEtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA,sBAG5B,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAClE,YAAY,qBAAqB,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
   "names": []
 }

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

@@ -8,12 +8,12 @@ const useOnPillsNavigation = () => {
     hasFocus,
     setMenuState,
     selectedOptionsRef,
-    props: { applyAriaDisabled }
+    props: { applyAriaDisabled, readOnly }
   } = useContext(ComboBoxContext);
   const REMOVABLE_PILL_SELECTOR = ".ds-pill-wrapper-removable button";
   const onKeyDownPills = useCallback(
     (e) => {
-      if (applyAriaDisabled) {
+      if (applyAriaDisabled || readOnly) {
         return;
       }
       if ((e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") && inputValue === "") {
@@ -34,7 +34,7 @@ const useOnPillsNavigation = () => {
         }
       }
     },
-    [inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus, applyAriaDisabled]
+    [inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus, applyAriaDisabled, readOnly]
   );
   return { onKeyDownPills };
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/useOnPillsNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nexport const useOnPillsNavigation = () => {\n  const {\n    internalRef,\n    inputValue,\n    hasFocus,\n    setMenuState,\n    selectedOptionsRef,\n    props: { applyAriaDisabled },\n  } = useContext(ComboBoxContext);\n\n  // todo: constant must be defined on pills component\n  const REMOVABLE_PILL_SELECTOR = '.ds-pill-wrapper-removable button';\n\n  const onKeyDownPills: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled) {\n        return;\n      }\n      if (\n        (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') &&\n        inputValue === ''\n      ) {\n        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n          internalRef.current?.focus();\n          setMenuState(true, 'open', e);\n          return;\n        }\n        if (e.key === 'ArrowLeft') {\n          const removablePills: NodeListOf<HTMLButtonElement> | undefined =\n            selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);\n\n          if (hasFocus && removablePills) {\n            removablePills[removablePills.length - 1]?.focus();\n          }\n        }\n        if (e.key === 'ArrowRight') {\n          e.preventDefault();\n          internalRef.current?.focus();\n        }\n      }\n    },\n    [inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus, applyAriaDisabled],\n  );\n\n  return { onKeyDownPills };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,aAAa,kBAAkB;AACxC,OAAO,qBAAqB;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,kBAAkB;AAAA,EAC7B,IAAI,WAAW,eAAe;AAG9B,QAAM,0BAA0B;AAEhC,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,mBAAmB;AACrB;AAAA,MACF;AACA,WACG,EAAE,QAAQ,eAAe,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa,EAAE,QAAQ,gBACrF,eAAe,IACf;AACA,YAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,sBAAY,SAAS,MAAM;AAC3B,uBAAa,MAAM,QAAQ,CAAC;AAC5B;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,aAAa;AACzB,gBAAM,iBACJ,mBAAmB,SAAS,iBAAiB,uBAAuB;AAEtE,cAAI,YAAY,gBAAgB;AAC9B,2BAAe,eAAe,SAAS,CAAC,GAAG,MAAM;AAAA,UACnD;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,cAAc;AAC1B,YAAE,eAAe;AACjB,sBAAY,SAAS,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY,aAAa,cAAc,oBAAoB,UAAU,iBAAiB;AAAA,EACzF;AAEA,SAAO,EAAE,eAAe;AAC1B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nexport const useOnPillsNavigation = () => {\n  const {\n    internalRef,\n    inputValue,\n    hasFocus,\n    setMenuState,\n    selectedOptionsRef,\n    props: { applyAriaDisabled, readOnly },\n  } = useContext(ComboBoxContext);\n\n  // todo: constant must be defined on pills component\n  const REMOVABLE_PILL_SELECTOR = '.ds-pill-wrapper-removable button';\n\n  const onKeyDownPills: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled || readOnly) {\n        return;\n      }\n      if (\n        (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') &&\n        inputValue === ''\n      ) {\n        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n          internalRef.current?.focus();\n          setMenuState(true, 'open', e);\n          return;\n        }\n        if (e.key === 'ArrowLeft') {\n          const removablePills: NodeListOf<HTMLButtonElement> | undefined =\n            selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);\n\n          if (hasFocus && removablePills) {\n            removablePills[removablePills.length - 1]?.focus();\n          }\n        }\n        if (e.key === 'ArrowRight') {\n          e.preventDefault();\n          internalRef.current?.focus();\n        }\n      }\n    },\n    [inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus, applyAriaDisabled, readOnly],\n  );\n\n  return { onKeyDownPills };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,aAAa,kBAAkB;AACxC,OAAO,qBAAqB;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,mBAAmB,SAAS;AAAA,EACvC,IAAI,WAAW,eAAe;AAG9B,QAAM,0BAA0B;AAEhC,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,qBAAqB,UAAU;AACjC;AAAA,MACF;AACA,WACG,EAAE,QAAQ,eAAe,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa,EAAE,QAAQ,gBACrF,eAAe,IACf;AACA,YAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,sBAAY,SAAS,MAAM;AAC3B,uBAAa,MAAM,QAAQ,CAAC;AAC5B;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,aAAa;AACzB,gBAAM,iBACJ,mBAAmB,SAAS,iBAAiB,uBAAuB;AAEtE,cAAI,YAAY,gBAAgB;AAC9B,2BAAe,eAAe,SAAS,CAAC,GAAG,MAAM;AAAA,UACnD;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,cAAc;AAC1B,YAAE,eAAe;AACjB,sBAAY,SAAS,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY,aAAa,cAAc,oBAAoB,UAAU,mBAAmB,QAAQ;AAAA,EACnG;AAEA,SAAO,EAAE,eAAe;AAC1B;",
   "names": []
 }

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

@@ -116,7 +116,17 @@ const ControlsInput = () => {
         "aria-readonly": readOnly
       }
     ),
-    /* @__PURE__ */ jsx(StyleHiddenInput, { type: "text", name: "hidden", tabIndex: -1, onPaste: handleOnPaste, "aria-hidden": "true" })
+    /* @__PURE__ */ jsx(
+      StyleHiddenInput,
+      {
+        type: "text",
+        name: "hidden",
+        tabIndex: -1,
+        onPaste: handleOnPaste,
+        "aria-hidden": "true",
+        isDisabled: disabled || applyAriaDisabled
+      }
+    )
   ] });
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n  StyleHiddenInput,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    setInputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (readOnly) {\n      return `${placeholder}. Read only`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues, readOnly]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    setInputValue(e.clipboardData.getData('text/plain'));\n    internalRef.current?.focus();\n  };\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={readOnly || onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n        aria-readonly={readOnly}\n      />\n      {/* This input is used to handle the paste event */}\n      <StyleHiddenInput type=\"text\" name=\"hidden\" tabIndex={-1} onPaste={handleOnPaste} aria-hidden=\"true\" />\n    </StyledInputWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport {\n  StyledInput,\n  StyledInputWrapper,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledHiddenDiv,\n  StyleHiddenInput,\n} from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    setInputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (readOnly) {\n      return `${placeholder}. Read only`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues, readOnly]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    setInputValue(e.clipboardData.getData('text/plain'));\n    internalRef.current?.focus();\n  };\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={readOnly || onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n        aria-readonly={readOnly}\n      />\n      {/* This input is used to handle the paste event */}\n      <StyleHiddenInput\n        type=\"text\"\n        name=\"hidden\"\n        tabIndex={-1}\n        onPaste={handleOnPaste}\n        aria-hidden=\"true\"\n        isDisabled={disabled || applyAriaDisabled}\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }