@elliemae/ds-form-combobox 3.10.0-next.9 → 3.10.2

package/dist/cjs/ComboBoxCTX.js

@@ -69,7 +69,8 @@ const defaultContext = {
   setReferenceElement: noop,
   setFocusOptionIdx: noop,
   setShowSelectedOptions: noop,
-  setMenuState: noop
+  setMenuState: noop,
+  internalRef: (0, import_react.createRef)()
 };
 const ComboBoxContext = (0, import_react.createContext)(defaultContext);
 var ComboBoxCTX_default = ComboBoxContext;

package/dist/cjs/ComboBoxCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ComboBoxCTX.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { DSComboboxInternalsT } from './sharedTypes';\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  // override in useCombobox to avoid ref duplications when more than one cb is used\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAU,wBAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAElB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,kBAAc,wBAA0B;AAAA,EACxC,aAAS,wBAA0B;AAAA,EACnC,oBAAgB,wBAA0B;AAAA,EAC1C,wBAAoB,wBAA4B;AAAA,EAChD,wBAAoB,wBAA4B;AAAA,EAChD,0BAAsB,wBAA4B;AAAA,EAClD,8BAA0B,wBAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAChB;AAEO,MAAM,sBAAkB,4BAAc,cAAc;AAE3D,IAAO,sBAAQ;",
+  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { DSComboboxInternalsT } from './sharedTypes';\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  // override in useCombobox to avoid ref duplications when more than one cb is used\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AAMlC,SAAS,QAA6B,OAAgB;AAAC;AAEvD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAU,wBAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAElB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,kBAAc,wBAA0B;AAAA,EACxC,aAAS,wBAA0B;AAAA,EACnC,oBAAgB,wBAA0B;AAAA,EAC1C,wBAAoB,wBAA4B;AAAA,EAChD,wBAAoB,wBAA4B;AAAA,EAChD,0BAAsB,wBAA4B;AAAA,EAClD,8BAA0B,wBAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,iBAAa,wBAA4B;AAC3C;AAEO,MAAM,sBAAkB,4BAAc,cAAc;AAE3D,IAAO,sBAAQ;",
   "names": []
 }

package/dist/cjs/config/useComboBox.js

@@ -36,17 +36,14 @@ var import_react_desc_prop_types = require("../react-desc-prop-types");
 var import_useCorrectOptions = require("./useCorrectOptions");
 var import_listHelper = require("../utils/listHelper");
 const useComboBox = (props) => {
-  const defaultPropsWithInnerRef = {
-    ...import_ComboBoxCTX.defaultProps,
-    innerRef: (0, import_react.useRef)(null)
-  };
-  const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, defaultPropsWithInnerRef);
+  const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_ComboBoxCTX.defaultProps);
   (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.ComboboxPropTypes);
   const [showPopover, setShowPopover] = (0, import_react.useState)(false);
   const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
   const [showSelectedOptions, setShowSelectedOptions] = (0, import_react.useState)(false);
   const [inputValue, setInputValue] = (0, import_react.useState)("");
   const [hasFocus, setHasFocus] = (0, import_react.useState)(false);
+  const internalRef = (0, import_react.useRef)(null);
   const listRef = (0, import_react.useRef)(null);
   const wrapperListRef = (0, import_react.useRef)(null);
   const selectedOptionsRef = (0, import_react.useRef)(null);
@@ -127,7 +124,8 @@ const useComboBox = (props) => {
       setFocusOptionIdx,
       scrollOptionIntoView,
       setReferenceElement,
-      setShowPopover
+      setShowPopover,
+      internalRef
     }),
     [
       scrollOptionIntoView,
@@ -147,7 +145,8 @@ const useComboBox = (props) => {
       controlsWrapperRef,
       selectAllCheckboxRef,
       toggleSelectionButtonRef,
-      listRef
+      listRef,
+      internalRef
     ]
   );
   return ctx;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useComboBox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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 } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from '../react-desc-prop-types';\nimport { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const defaultPropsWithInnerRef = {\n    ...defaultProps,\n    innerRef: useRef(null),\n  };\n\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\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 selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\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 = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\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  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptions?.[0]?.dsId ?? '');\n  }, [correctOptions, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, filteredOptions: correctOptions },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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 } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from '../react-desc-prop-types';\nimport { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\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 selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\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 = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\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  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptions?.[0]?.dsId ?? '');\n  }, [correctOptions, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, filteredOptions: correctOptions },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n      internalRef,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -38,8 +38,8 @@ var import_controls = require("../controls");
 var import_menu_list = require("../menu-list");
 var import_ComboboxDataTestids = require("../../ComboboxDataTestids");
 const Container = () => {
-  const { props, setMenuState, menuState, setReferenceElement, referenceElement } = (0, import_react.useContext)(import_ComboBoxCTX.default);
-  const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;
+  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } = (0, import_react.useContext)(import_ComboBoxCTX.default);
+  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;
   const globalAttributes = (0, import_ds_utilities.useGetGlobalAttributes)(props);
   const xStyledProps = (0, import_ds_utilities.useGetXstyledProps)(props);
   const { className, "data-testid": dataTestId, ...containerGlobals } = globalAttributes;
@@ -48,9 +48,9 @@ const Container = () => {
   }, []);
   const handleCloseMenu = (0, import_react.useCallback)(() => {
     setMenuState(false, "blur");
-    if (innerRef?.current)
-      innerRef.current.blur();
-  }, [innerRef, setMenuState]);
+    if (internalRef?.current)
+      internalRef.current.blur();
+  }, [internalRef, setMenuState]);
   (0, import_react.useEffect)(() => {
     const closeMenuOnWindowBlur = () => {
       setMenuState(false, "blur");

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n  const { props, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);\n\n  const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n  const globalAttributes = useGetGlobalAttributes(props);\n  const xStyledProps = useGetXstyledProps(props);\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId, ...containerGlobals } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (innerRef?.current) innerRef.current.blur();\n  }, [innerRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [setMenuState]);\n\n  return useMemo(\n    () => (\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        ref={setReferenceElement}\n        className={className}\n        {...xStyledProps}\n      >\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={zIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          </>\n        )}\n      </StyledContainer>\n    ),\n    [\n      inline,\n      setReferenceElement,\n      containerGlobals,\n      referenceElement,\n      menuState,\n      xStyledProps,\n      handleCloseMenu,\n      startPlacementPreference,\n      placementOrderPreference,\n      withoutPortal,\n      zIndex,\n      handleMouseDown,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAmE;AACnE,0BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,iBAAiB,QAAI,yBAAW,mBAAAA,OAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AACxG,QAAM,uBAAmB,4CAAuB,KAAK;AACrD,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,QAAM,EAAE,WAAW,eAAe,eAAe,iBAAiB,IAAI;AACtE,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,UAAU;AAAS,eAAS,QAAQ,KAAK;AAAA,EAC/C,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,KAAK;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,mBACC;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC,6BAAS;AAAA;AAAA,OACZ,IAEA;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YAEA,sDAAC;AAAA,cAAoB,UAAU;AAAA,cAAI,aAAa;AAAA,cAC9C,sDAAC,6BAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OACF;AAAA,KAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n  const globalAttributes = useGetGlobalAttributes(props);\n  const xStyledProps = useGetXstyledProps(props);\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId, ...containerGlobals } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (internalRef?.current) internalRef.current.blur();\n  }, [internalRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [setMenuState]);\n\n  return useMemo(\n    () => (\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        ref={setReferenceElement}\n        className={className}\n        {...xStyledProps}\n      >\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={zIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          </>\n        )}\n      </StyledContainer>\n    ),\n    [\n      inline,\n      setReferenceElement,\n      containerGlobals,\n      referenceElement,\n      menuState,\n      xStyledProps,\n      handleCloseMenu,\n      startPlacementPreference,\n      placementOrderPreference,\n      withoutPortal,\n      zIndex,\n      handleMouseDown,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAmE;AACnE,0BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,QACzF,yBAAW,mBAAAA,OAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AAC9F,QAAM,uBAAmB,4CAAuB,KAAK;AACrD,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,QAAM,EAAE,WAAW,eAAe,eAAe,iBAAiB,IAAI;AACtE,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa;AAAS,kBAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,KAAK;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,mBACC;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC,6BAAS;AAAA;AAAA,OACZ,IAEA;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YAEA,sDAAC;AAAA,cAAoB,UAAU;AAAA,cAAI,aAAa;AAAA,cAC9C,sDAAC,6BAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OACF;AAAA,KAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["ComboBoxContext"]
 }

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

@@ -42,7 +42,7 @@ var import_A11ySelectedValues = require("../A11ySelectedValues");
 var import_RemovableSelectedValuePill = require("../multi-selected-values-container/RemovableSelectedValuePill");
 const Controls = () => {
   const {
-    props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },
+    props: { inline, disabled, inputMinWidth, hasError, selectedValues },
     selectedOptionsRef,
     setMenuState,
     setFocusOptionIdx,
@@ -50,7 +50,8 @@ const Controls = () => {
     listRef,
     focusOptionIdx,
     menuState,
-    controlsWrapperRef
+    controlsWrapperRef,
+    internalRef
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   const handleOnClick = (0, import_react.useCallback)(() => {
     if (disabled)
@@ -58,30 +59,30 @@ const Controls = () => {
     if (hasFocus && menuState && !inline) {
       setMenuState(false);
       setFocusOptionIdx("");
-      innerRef.current?.blur();
+      internalRef.current?.blur();
       return;
     }
-    innerRef.current?.focus();
+    internalRef.current?.focus();
     setMenuState(true);
-  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);
+  }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);
   const handleOnPillsClick = (0, import_react.useCallback)(
     (e) => {
       if (menuState || disabled) {
         e.stopPropagation();
       } else {
-        innerRef.current?.focus();
+        internalRef.current?.focus();
         setMenuState(true);
       }
     },
-    [menuState, innerRef, disabled, setMenuState]
+    [menuState, internalRef, disabled, setMenuState]
   );
   const handleOnMouseDown = (0, import_react.useCallback)(
     (e) => {
-      if (document.activeElement === innerRef.current || inline) {
+      if (document.activeElement === internalRef.current || inline) {
         e.preventDefault();
       }
     },
-    [innerRef, inline]
+    [internalRef, inline]
   );
   const { onKeyDownPills } = (0, import_useOnPillsNavigation.useOnPillsNavigation)();
   const cols = (0, import_react.useMemo)(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      innerRef.current?.blur();\n      return;\n    }\n    innerRef.current?.focus();\n    setMenuState(true);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, 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 (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        innerRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, innerRef, disabled, 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 === innerRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [innerRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {hasFocus && <A11ySelectedValues />}\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n      <A11yFocusedOption />\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,SAAS;AAAA,IAC7E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,iBAAS,SAAS,MAAM;AACxB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,UAAU,YAAY;AAAA,EAC9C;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,6CAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,IAE/B;AAAA,OAAC,UACA,6CAAC;AAAA,QAAgB,KAAK;AAAA,QAAoB,SAAS;AAAA,QAChD;AAAA,sBAAY,4CAAC,gDAAmB;AAAA,UAChC,MAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B,4CAAC;AAAA,YAAI,eAAa,8CAAmB;AAAA,YAClC,4BAAkB,4CAAC;AAAA,cAA2B,MAAM;AAAA,aAAgB;AAAA,WACvE;AAAA;AAAA,OAEJ;AAAA,MAEF,4CAAC,8CAAkB;AAAA,MAEnB,4CAAC,sCAAc;AAAA,MACd,CAAC,UACA,6CAAC;AAAA,QAA2B,gBAAe;AAAA,QAAS,MAAM,CAAC,eAAe,aAAa;AAAA,QACrF;AAAA,sDAAC;AAAA,YAA4B;AAAA,WAAoB;AAAA,UACjD,4CAAC,8CAAkB;AAAA;AAAA,OACrB;AAAA;AAAA,GAEJ;AAEJ;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      internalRef.current?.blur();\n      return;\n    }\n    internalRef.current?.focus();\n    setMenuState(true);\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 (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, internalRef, disabled, 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)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {hasFocus && <A11ySelectedValues />}\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n      <A11yFocusedOption />\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,wBAA6C;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,QAAI,kDAAqB;AAEhD,QAAM,WAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,6CAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,IAE/B;AAAA,OAAC,UACA,6CAAC;AAAA,QAAgB,KAAK;AAAA,QAAoB,SAAS;AAAA,QAChD;AAAA,sBAAY,4CAAC,gDAAmB;AAAA,UAChC,MAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B,4CAAC;AAAA,YAAI,eAAa,8CAAmB;AAAA,YAClC,4BAAkB,4CAAC;AAAA,cAA2B,MAAM;AAAA,aAAgB;AAAA,WACvE;AAAA;AAAA,OAEJ;AAAA,MAEF,4CAAC,8CAAkB;AAAA,MAEnB,4CAAC,sCAAc;AAAA,MACd,CAAC,UACA,6CAAC;AAAA,QAA2B,gBAAe;AAAA,QAAS,MAAM,CAAC,eAAe,aAAa;AAAA,QACrF;AAAA,sDAAC;AAAA,YAA4B;AAAA,WAAoB;AAAA,UACjD,4CAAC,8CAAkB;AAAA;AAAA,OACrB;AAAA;AAAA,GAEJ;AAEJ;",
   "names": ["ComboBoxContext"]
 }

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

@@ -31,19 +31,13 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
 const useOnPillsNavigation = () => {
-  const {
-    props: { innerRef },
-    inputValue,
-    hasFocus,
-    setMenuState,
-    selectedOptionsRef
-  } = (0, import_react.useContext)(import_ComboBoxCTX.default);
+  const { internalRef, inputValue, hasFocus, setMenuState, selectedOptionsRef } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   const REMOVABLE_PILL_SELECTOR = ".ds-pill-wrapper-removable button";
   const onKeyDownPills = (0, import_react.useCallback)(
     (e) => {
       if ((e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") && inputValue === "") {
         if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-          innerRef.current?.focus();
+          internalRef.current?.focus();
           setMenuState(true, "open", e);
           return;
         }
@@ -55,11 +49,11 @@ const useOnPillsNavigation = () => {
         }
         if (e.key === "ArrowRight") {
           e.preventDefault();
-          innerRef.current?.focus();
+          internalRef.current?.focus();
         }
       }
     },
-    [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus]
+    [inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus]
   );
   return { onKeyDownPills };
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls/useOnPillsNavigation.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 React, { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useOnPillsNavigation = () => {\n  const {\n    props: { innerRef },\n    inputValue,\n    hasFocus,\n    setMenuState,\n    selectedOptionsRef,\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 (\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          innerRef.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          innerRef.current?.focus();\n        }\n      }\n    },\n    [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus],\n  );\n\n  return { onKeyDownPills };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA+C;AAC/C,yBAA4B;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,0BAA0B;AAEhC,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,WACG,EAAE,QAAQ,eAAe,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa,EAAE,QAAQ,gBACrF,eAAe,IACf;AACA,YAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,mBAAS,SAAS,MAAM;AACxB,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,IAAI,MAAM;AAAA,UACnD;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,cAAc;AAC1B,YAAE,eAAe;AACjB,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY,UAAU,cAAc,oBAAoB,QAAQ;AAAA,EACnE;AAEA,SAAO,EAAE,eAAe;AAC1B;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useOnPillsNavigation = () => {\n  const { internalRef, inputValue, hasFocus, setMenuState, selectedOptionsRef } = 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 (\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],\n  );\n\n  return { onKeyDownPills };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA+C;AAC/C,yBAA4B;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,aAAa,YAAY,UAAU,cAAc,mBAAmB,QAAI,yBAAW,mBAAAA,OAAe;AAG1G,QAAM,0BAA0B;AAEhC,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,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,IAAI,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,QAAQ;AAAA,EACtE;AAEA,SAAO,EAAE,eAAe;AAC1B;",
   "names": ["ComboBoxContext"]
 }

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

@@ -41,12 +41,22 @@ const ControlsInput = () => {
   const {
     props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },
     focusOptionIdx,
+    internalRef,
     inputValue,
     menuState
   } = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
   const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
   const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = (0, import_useControlsInput.useControlsInput)();
-  const { className, tabIndex, "data-testid": dataTestId, id, ...globalAttrs } = (0, import_ds_utilities.useGetGlobalAttributes)(restProps);
+  const {
+    className,
+    tabIndex,
+    "data-testid": dataTestId,
+    id,
+    ...globalAttrs
+  } = (0, import_ds_utilities.useGetGlobalAttributes)(restProps, {
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputWrapper, {
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputWidthReference, {
@@ -59,11 +69,13 @@ const ControlsInput = () => {
         })
       }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInput, {
+        onBlur: handleOnBlur,
+        onFocus: handleOnFocus,
         ...globalAttrs,
         id,
         "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.INPUT,
         autoFocus,
-        placeholder,
+        placeholder: showPlaceholder ? placeholder : "",
         "aria-controls": "combo-listbox",
         "aria-activedescendant": focusOptionIdx,
         "aria-expanded": menuState,
@@ -72,13 +84,11 @@ const ControlsInput = () => {
         role: "combobox",
         disabled,
         style: { width },
-        ref: innerRef,
+        ref: (0, import_ds_utilities.mergeRefs)(innerRef, internalRef),
         value: inputValue,
         type: "text",
         onKeyDown: onInputKeyDown,
         onChange: handleOnChange,
-        onBlur: handleOnBlur,
-        onFocus: handleOnFocus,
         tabIndex,
         withoutCaret: onlySelectable
       })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n    focusOptionIdx,\n    inputValue,\n    menuState,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const { className, tabIndex, 'data-testid': dataTestId, id, ...globalAttrs } = useGetGlobalAttributes(restProps);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder>\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      <StyledInput\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={placeholder}\n        aria-controls=\"combo-listbox\"\n        aria-activedescendant={focusOptionIdx}\n        aria-expanded={menuState}\n        aria-haspopup=\"listbox\"\n        aria-describedby={`combobox-selected-items ${id !== undefined ? `${id}_feedback_message` : ''}`}\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        ref={innerRef}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,uCAA2C;AAC3C,0BAAuC;AAEvC,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM,EAAE,WAAW,UAAU,eAAe,YAAY,OAAO,YAAY,QAAI,4CAAuB,SAAS;AAE/G,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,4CAAC;AAAA,QACC,sDAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,4CAAC;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA;AAAA,QACA,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB,2BAA2B,OAAO,SAAY,GAAG,wBAAwB;AAAA,QAC3F,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT;AAAA,QACA,cAAc;AAAA,OAChB;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes, mergeRefs } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n    focusOptionIdx,\n    internalRef,\n    inputValue,\n    menuState,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    className,\n    tabIndex,\n    'data-testid': dataTestId,\n    id,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder>\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={showPlaceholder ? placeholder : ''}\n        aria-controls=\"combo-listbox\"\n        aria-activedescendant={focusOptionIdx}\n        aria-expanded={menuState}\n        aria-haspopup=\"listbox\"\n        aria-describedby={`combobox-selected-items ${id !== undefined ? `${id}_feedback_message` : ''}`}\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        ref={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+C;AAC/C,uCAA2C;AAC3C,0BAAkD;AAElD,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,OACG;AAAA,EACL,QAAI,4CAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,4CAAC;AAAA,QACC,sDAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,4CAAC;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa,kBAAkB,cAAc;AAAA,QAC7C,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB,2BAA2B,OAAO,SAAY,GAAG,wBAAwB;AAAA,QAC3F,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,SAAK,+BAAU,UAAU,WAAW;AAAA,QACpC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,OAChB;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/header-list/useHeaderListHandlers.js

@@ -33,8 +33,9 @@ var import_listHelper = require("../../utils/listHelper");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
 const useHeaderListHandlers = () => {
   const {
-    props: { selectedValues, filteredOptions, onSelectAll, innerRef },
+    props: { selectedValues, filteredOptions, onSelectAll },
     showSelectedOptions,
+    internalRef,
     setShowSelectedOptions,
     setMenuState
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
@@ -82,28 +83,28 @@ const useHeaderListHandlers = () => {
     (e) => {
       if (e.key === "Escape") {
         setMenuState(false, "close", e);
-        innerRef.current?.focus();
+        internalRef.current?.focus();
       }
     },
-    [setMenuState, innerRef]
+    [setMenuState, internalRef]
   );
   const handleFilterSelectionBtnOnTab = (0, import_react.useCallback)(
     (e) => {
       if (e.key === "Tab" && !e.shiftKey) {
         e.preventDefault();
-        innerRef.current?.focus();
+        internalRef.current?.focus();
       }
     },
-    [innerRef]
+    [internalRef]
   );
   const handleCheckAllOnTab = (0, import_react.useCallback)(
     (e) => {
       if (e.key === "Tab" && !e.shiftKey && multiSelectedValues.length === 0) {
         e.preventDefault();
-        innerRef.current?.focus();
+        internalRef.current?.focus();
       }
     },
-    [innerRef, multiSelectedValues]
+    [internalRef, multiSelectedValues]
   );
   (0, import_react.useEffect)(() => {
     if (multiSelectedValues.length === 0) {

package/dist/cjs/parts/header-list/useHeaderListHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/header-list/useHeaderListHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSelectableOptions } from '../../utils/listHelper';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst useHeaderListHandlers = () => {\n  const {\n    props: { selectedValues, filteredOptions, onSelectAll, innerRef },\n    showSelectedOptions,\n    setShowSelectedOptions,\n    setMenuState,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const selectableOptions = getSelectableOptions(filteredOptions);\n\n  const getCheckboxStatus = useMemo(() => {\n    if (multiSelectedValues.length === selectableOptions.length) {\n      return true;\n    }\n    if (multiSelectedValues?.length === 0) {\n      return false;\n    }\n    return 'mixed';\n  }, [multiSelectedValues.length, selectableOptions.length]);\n\n  const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n  useEffect(() => {\n    setCheckboxStatus(getCheckboxStatus);\n  }, [getCheckboxStatus, multiSelectedValues]);\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    // this prevent the input control to lose focus\n  }, []);\n\n  const handleSelectAllCheckboxChange = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n        setCheckboxStatus(true);\n      } else if (onSelectAll) {\n        onSelectAll([], e);\n        setCheckboxStatus(false);\n      }\n    },\n    [checkboxStatus, onSelectAll, filteredOptions],\n  );\n\n  const handleToggleSelectedValuesFilter: React.MouseEventHandler = useCallback(\n    (e) => {\n      e.preventDefault();\n      setShowSelectedOptions(!showSelectedOptions);\n    },\n    [setShowSelectedOptions, showSelectedOptions],\n  );\n\n  // when pressing escape on each header list button we close the menu\n  // and set focus on input\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setMenuState(false, 'close', e);\n        innerRef.current?.focus();\n      }\n    },\n    [setMenuState, innerRef],\n  );\n\n  // when hitting tab on selected values button filter we target the input again\n  const handleFilterSelectionBtnOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey) {\n        e.preventDefault();\n        innerRef.current?.focus();\n      }\n    },\n    [innerRef],\n  );\n\n  const handleCheckAllOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n        e.preventDefault();\n        innerRef.current?.focus();\n      }\n    },\n    [innerRef, multiSelectedValues],\n  );\n\n  useEffect(() => {\n    // toggle off selected values filter when removing all of them\n    if (multiSelectedValues.length === 0) {\n      setShowSelectedOptions(false);\n    }\n  }, [multiSelectedValues, setShowSelectedOptions]);\n\n  return useMemo(\n    () => ({\n      handleKeyDown,\n      handleToggleSelectedValuesFilter,\n      handleFilterSelectionBtnOnTab,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    }),\n    [\n      handleKeyDown,\n      handleFilterSelectionBtnOnTab,\n      handleToggleSelectedValuesFilter,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    ],\n  );\n};\n\nexport { useHeaderListHandlers };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6E;AAE7E,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,aAAa,SAAS;AAAA,IAChE;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,wBAAoB,wCAAqB,eAAe;AAE9D,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA4B,KAAK;AAE7E,8BAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,wBAAoB,0BAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,uCAA4D;AAAA,IAChE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAGA,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB;AAAA,EAChC;AAEA,8BAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import React, { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSelectableOptions } from '../../utils/listHelper';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst useHeaderListHandlers = () => {\n  const {\n    props: { selectedValues, filteredOptions, onSelectAll },\n    showSelectedOptions,\n    internalRef,\n    setShowSelectedOptions,\n    setMenuState,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const selectableOptions = getSelectableOptions(filteredOptions);\n\n  const getCheckboxStatus = useMemo(() => {\n    if (multiSelectedValues.length === selectableOptions.length) {\n      return true;\n    }\n    if (multiSelectedValues?.length === 0) {\n      return false;\n    }\n    return 'mixed';\n  }, [multiSelectedValues.length, selectableOptions.length]);\n\n  const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n  useEffect(() => {\n    setCheckboxStatus(getCheckboxStatus);\n  }, [getCheckboxStatus, multiSelectedValues]);\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    // this prevent the input control to lose focus\n  }, []);\n\n  const handleSelectAllCheckboxChange = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n        setCheckboxStatus(true);\n      } else if (onSelectAll) {\n        onSelectAll([], e);\n        setCheckboxStatus(false);\n      }\n    },\n    [checkboxStatus, onSelectAll, filteredOptions],\n  );\n\n  const handleToggleSelectedValuesFilter: React.MouseEventHandler = useCallback(\n    (e) => {\n      e.preventDefault();\n      setShowSelectedOptions(!showSelectedOptions);\n    },\n    [setShowSelectedOptions, showSelectedOptions],\n  );\n\n  // when pressing escape on each header list button we close the menu\n  // and set focus on input\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setMenuState(false, 'close', e);\n        internalRef.current?.focus();\n      }\n    },\n    [setMenuState, internalRef],\n  );\n\n  // when hitting tab on selected values button filter we target the input again\n  const handleFilterSelectionBtnOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey) {\n        e.preventDefault();\n        internalRef.current?.focus();\n      }\n    },\n    [internalRef],\n  );\n\n  const handleCheckAllOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n        e.preventDefault();\n        internalRef.current?.focus();\n      }\n    },\n    [internalRef, multiSelectedValues],\n  );\n\n  useEffect(() => {\n    // toggle off selected values filter when removing all of them\n    if (multiSelectedValues.length === 0) {\n      setShowSelectedOptions(false);\n    }\n  }, [multiSelectedValues, setShowSelectedOptions]);\n\n  return useMemo(\n    () => ({\n      handleKeyDown,\n      handleToggleSelectedValuesFilter,\n      handleFilterSelectionBtnOnTab,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    }),\n    [\n      handleKeyDown,\n      handleFilterSelectionBtnOnTab,\n      handleToggleSelectedValuesFilter,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    ],\n  );\n};\n\nexport { useHeaderListHandlers };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6E;AAE7E,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,wBAAoB,wCAAqB,eAAe;AAE9D,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA4B,KAAK;AAE7E,8BAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,wBAAoB,0BAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,uCAA4D;AAAA,IAChE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAGA,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,mBAAmB;AAAA,EACnC;AAEA,8BAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["ComboBoxContext"]
 }

package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js

@@ -36,7 +36,8 @@ var import_listHelper = require("../../utils/listHelper");
 const RemovableSelectedValuePill = (props) => {
   const { pill } = props;
   const {
-    props: { onChange, isNonClearable, disabled, selectedValues, innerRef }
+    props: { onChange, isNonClearable, disabled, selectedValues },
+    internalRef
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_pills.DSPillV2, {
     size: "s",
@@ -47,7 +48,7 @@ const RemovableSelectedValuePill = (props) => {
     onRemove: (e) => {
       e.stopPropagation();
       onChange((0, import_listHelper.getSuggestedValueOnChange)(pill, selectedValues), pill, e);
-      innerRef.current?.focus();
+      internalRef.current?.focus();
     }
   }, pill.value);
 };

package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n  const { pill } = props;\n  const {\n    props: { onChange, isNonClearable, disabled, selectedValues, innerRef },\n  } = useContext(ComboBoxContext);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={disabled || isNonClearable ? 'value' : 'removable'}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent) => {\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        innerRef.current?.focus();\n      }}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,sBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AACnC,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,gBAAgB,SAAS;AAAA,EACxE,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,SACE,4CAAC;AAAA,IACC,MAAK;AAAA,IAEL,OAAO,KAAK;AAAA,IACZ;AAAA,IACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,IAC7C,UAAU;AAAA,IACV,UAAU,CAAC,MAA2B;AAEpC,QAAE,gBAAgB;AAClB,mBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,KAVK,KAAK,KAWZ;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n  const { pill } = props;\n  const {\n    props: { onChange, isNonClearable, disabled, selectedValues },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={disabled || isNonClearable ? 'value' : 'removable'}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent) => {\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        internalRef.current?.focus();\n      }}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,sBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AACnC,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,eAAe;AAAA,IAC5D;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,SACE,4CAAC;AAAA,IACC,MAAK;AAAA,IAEL,OAAO,KAAK;AAAA,IACZ;AAAA,IACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,IAC7C,UAAU;AAAA,IACV,UAAU,CAAC,MAA2B;AAEpC,QAAE,gBAAgB;AAClB,mBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,kBAAY,SAAS,MAAM;AAAA,IAC7B;AAAA,KAVK,KAAK,KAWZ;AAEJ;",
   "names": ["ComboBoxContext"]
 }

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from './constants';\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.RefObject<HTMLDivElement>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n    toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    showSelectedOptions: boolean;\n    setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n    setMenuState: (\n      newState: boolean,\n      reason?: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;AAiC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
+  "sourcesContent": ["import React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from './constants';\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    internalRef: React.RefObject<HTMLInputElement>;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.RefObject<HTMLDivElement>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n    toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    showSelectedOptions: boolean;\n    setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n    setMenuState: (\n      newState: boolean,\n      reason?: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;AAkC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
   "names": []
 }

package/dist/esm/ComboBoxCTX.js

@@ -37,7 +37,8 @@ const defaultContext = {
   setReferenceElement: noop,
   setFocusOptionIdx: noop,
   setShowSelectedOptions: noop,
-  setMenuState: noop
+  setMenuState: noop,
+  internalRef: createRef()
 };
 const ComboBoxContext = createContext(defaultContext);
 var ComboBoxCTX_default = ComboBoxContext;

package/dist/esm/ComboBoxCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ComboBoxCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { DSComboboxInternalsT } from './sharedTypes';\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  // override in useCombobox to avoid ref duplications when more than one cb is used\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n};\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;AAElB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc,UAA0B;AAAA,EACxC,SAAS,UAA0B;AAAA,EACnC,gBAAgB,UAA0B;AAAA,EAC1C,oBAAoB,UAA4B;AAAA,EAChD,oBAAoB,UAA4B;AAAA,EAChD,sBAAsB,UAA4B;AAAA,EAClD,0BAA0B,UAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAChB;AAEO,MAAM,kBAAkB,cAAc,cAAc;AAE3D,IAAO,sBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { DSComboboxInternalsT } from './sharedTypes';\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  // override in useCombobox to avoid ref duplications when more than one cb is used\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n};\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;AAElB;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc,UAA0B;AAAA,EACxC,SAAS,UAA0B;AAAA,EACnC,gBAAgB,UAA0B;AAAA,EAC1C,oBAAoB,UAA4B;AAAA,EAChD,oBAAoB,UAA4B;AAAA,EAChD,sBAAsB,UAA4B;AAAA,EAClD,0BAA0B,UAA6B;AAAA,EACvD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,cAAc;AAAA,EACd,aAAa,UAA4B;AAC3C;AAEO,MAAM,kBAAkB,cAAc,cAAc;AAE3D,IAAO,sBAAQ;",
   "names": []
 }

package/dist/esm/config/useComboBox.js

@@ -7,17 +7,14 @@ import { ComboboxPropTypes } from "../react-desc-prop-types";
 import { useCorrectOptions } from "./useCorrectOptions";
 import { getFirstOption } from "../utils/listHelper";
 const useComboBox = (props) => {
-  const defaultPropsWithInnerRef = {
-    ...defaultProps,
-    innerRef: useRef(null)
-  };
-  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);
   const [showPopover, setShowPopover] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [showSelectedOptions, setShowSelectedOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [hasFocus, setHasFocus] = useState(false);
+  const internalRef = useRef(null);
   const listRef = useRef(null);
   const wrapperListRef = useRef(null);
   const selectedOptionsRef = useRef(null);
@@ -98,7 +95,8 @@ const useComboBox = (props) => {
       setFocusOptionIdx,
       scrollOptionIntoView,
       setReferenceElement,
-      setShowPopover
+      setShowPopover,
+      internalRef
     }),
     [
       scrollOptionIntoView,
@@ -118,7 +116,8 @@ const useComboBox = (props) => {
       controlsWrapperRef,
       selectAllCheckboxRef,
       toggleSelectionButtonRef,
-      listRef
+      listRef,
+      internalRef
     ]
   );
   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 } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from '../react-desc-prop-types';\nimport { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const defaultPropsWithInnerRef = {\n    ...defaultProps,\n    innerRef: useRef(null),\n  };\n\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\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 selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\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 = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\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  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptions?.[0]?.dsId ?? '');\n  }, [correctOptions, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, filteredOptions: correctOptions },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,QAAQ,aAAa,iBAAiB;AAClE,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,oBAAoB;AAC7B,SAAsB,yBAAyB;AAE/C,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AACxB,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,OAAO,IAAI;AAAA,EACvB;AAEA,QAAM,oBAAoB,6BAA6B,OAAO,wBAAwB;AACtF,iCAA+B,mBAAmB,iBAAiB;AACnE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AACjF,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAkB,KAAK;AAE7E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AACvD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,iBAAiB,OAAuB,IAAI;AAElD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,uBAAuB,OAAyB,IAAI;AAC1D,QAAM,2BAA2B,OAA0B,IAAI;AAC/D,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,EAAE,gBAAgB,YAAY,aAAa,IAAI;AAErD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,eAAe;AAAW,aAAO;AACrC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,QAAM,eAAe;AAAA,IACnB,CACE,UACA,QACA,MACG;AACH,UAAI,iBAAiB;AAAW,qBAAa,UAAU,QAAQ,CAAC;AAChE,qBAAe,QAAQ;AAAA,IACzB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,QAAM,iBAAiB,kBAAkB,mBAAmB,YAAY,mBAAmB;AAM3F,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,eAAe;AAAA,IACrB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,SAAS,MAAM;AAC5C,yBAAmB;AAAA,QACjB,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAEnD;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,EACrC;AAMA,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB,EAAE;AAE/D,YAAU,MAAM;AAId,QAAI,CAAC;AAAU,wBAAkB,EAAE;AACnC,QAAI,aAAa,CAAC,kBAAkB,sBAAsB;AACxD,YAAM,eAAe,eAAe,gBAAgB,cAAc;AAClE,wBAAkB,YAAY;AAC9B,2BAAqB,cAAc,EAAE,OAAO,SAAS,CAAC;AAAA,IACxD;AAAA,EAEF,GAAG,CAAC,aAAa,UAAU,gBAAgB,cAAc,CAAC;AAG1D,YAAU,MAAM;AACd,sBAAkB,iBAAiB,IAAI,QAAQ,EAAE;AAAA,EACnD,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAE/B,YAAU,MAAM;AACd,QAAI,CAAC,aAAa;AAChB,wBAAkB,EAAE;AACpB,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,mBAAmB,iBAAiB,eAAe;AAAA,MAC/D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "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 } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from '../react-desc-prop-types';\nimport { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\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 selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n    },\n    [onMenuChange],\n  );\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\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 = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\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  useEffect(() => {\n    // this code calculate the option to be focused when opening the menu\n    // when losing focus we remove the focused one\n    // when focus adquired again getFirstOption calculate the correct one\n    if (!hasFocus) setFocusOptionIdx('');\n    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptions?.[0]?.dsId ?? '');\n  }, [correctOptions, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, filteredOptions: correctOptions },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n      internalRef,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -9,8 +9,8 @@ import { Controls } from "../controls";
 import { MenuList } from "../menu-list";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids";
 const Container = () => {
-  const { props, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);
-  const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;
+  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);
+  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;
   const globalAttributes = useGetGlobalAttributes(props);
   const xStyledProps = useGetXstyledProps(props);
   const { className, "data-testid": dataTestId, ...containerGlobals } = globalAttributes;
@@ -19,9 +19,9 @@ const Container = () => {
   }, []);
   const handleCloseMenu = useCallback(() => {
     setMenuState(false, "blur");
-    if (innerRef?.current)
-      innerRef.current.blur();
-  }, [innerRef, setMenuState]);
+    if (internalRef?.current)
+      internalRef.current.blur();
+  }, [internalRef, setMenuState]);
   useEffect(() => {
     const closeMenuOnWindowBlur = () => {
       setMenuState(false, "blur");

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n  const { props, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);\n\n  const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n  const globalAttributes = useGetGlobalAttributes(props);\n  const xStyledProps = useGetXstyledProps(props);\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId, ...containerGlobals } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (innerRef?.current) innerRef.current.blur();\n  }, [innerRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [setMenuState]);\n\n  return useMemo(\n    () => (\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        ref={setReferenceElement}\n        className={className}\n        {...xStyledProps}\n      >\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={zIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          </>\n        )}\n      </StyledContainer>\n    ),\n    [\n      inline,\n      setReferenceElement,\n      containerGlobals,\n      referenceElement,\n      menuState,\n      xStyledProps,\n      handleCloseMenu,\n      startPlacementPreference,\n      placementOrderPreference,\n      withoutPortal,\n      zIndex,\n      handleMouseDown,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,aAAa,WAAW,SAAS,kBAAkB;AACnE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,iBAAiB,IAAI,WAAW,eAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AACxG,QAAM,mBAAmB,uBAAuB,KAAK;AACrD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,WAAW,eAAe,eAAe,iBAAiB,IAAI;AACtE,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,UAAU;AAAS,eAAS,QAAQ,KAAK;AAAA,EAC/C,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,KAAK;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,mBACC;AAAA,QACE;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC,YAAS;AAAA;AAAA,OACZ,IAEA;AAAA,QACE;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YAEA,8BAAC;AAAA,cAAoB,UAAU;AAAA,cAAI,aAAa;AAAA,cAC9C,8BAAC,YAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OACF;AAAA,KAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n  const globalAttributes = useGetGlobalAttributes(props);\n  const xStyledProps = useGetXstyledProps(props);\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId, ...containerGlobals } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (internalRef?.current) internalRef.current.blur();\n  }, [internalRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [setMenuState]);\n\n  return useMemo(\n    () => (\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        ref={setReferenceElement}\n        className={className}\n        {...xStyledProps}\n      >\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={zIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          </>\n        )}\n      </StyledContainer>\n    ),\n    [\n      inline,\n      setReferenceElement,\n      containerGlobals,\n      referenceElement,\n      menuState,\n      xStyledProps,\n      handleCloseMenu,\n      startPlacementPreference,\n      placementOrderPreference,\n      withoutPortal,\n      zIndex,\n      handleMouseDown,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,aAAa,WAAW,SAAS,kBAAkB;AACnE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,IACzF,WAAW,eAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AAC9F,QAAM,mBAAmB,uBAAuB,KAAK;AACrD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,WAAW,eAAe,eAAe,iBAAiB,IAAI;AACtE,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa;AAAS,kBAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,KAAK;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,mBACC;AAAA,QACE;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC,YAAS;AAAA;AAAA,OACZ,IAEA;AAAA,QACE;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YAEA,8BAAC;AAAA,cAAoB,UAAU;AAAA,cAAI,aAAa;AAAA,cAC9C,8BAAC,YAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OACF;AAAA,KAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -18,7 +18,7 @@ import { A11ySelectedValues } from "../A11ySelectedValues";
 import { RemovableSelectedValuePill } from "../multi-selected-values-container/RemovableSelectedValuePill";
 const Controls = () => {
   const {
-    props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },
+    props: { inline, disabled, inputMinWidth, hasError, selectedValues },
     selectedOptionsRef,
     setMenuState,
     setFocusOptionIdx,
@@ -26,7 +26,8 @@ const Controls = () => {
     listRef,
     focusOptionIdx,
     menuState,
-    controlsWrapperRef
+    controlsWrapperRef,
+    internalRef
   } = useContext(ComboBoxContext);
   const handleOnClick = useCallback(() => {
     if (disabled)
@@ -34,30 +35,30 @@ const Controls = () => {
     if (hasFocus && menuState && !inline) {
       setMenuState(false);
       setFocusOptionIdx("");
-      innerRef.current?.blur();
+      internalRef.current?.blur();
       return;
     }
-    innerRef.current?.focus();
+    internalRef.current?.focus();
     setMenuState(true);
-  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);
+  }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);
   const handleOnPillsClick = useCallback(
     (e) => {
       if (menuState || disabled) {
         e.stopPropagation();
       } else {
-        innerRef.current?.focus();
+        internalRef.current?.focus();
         setMenuState(true);
       }
     },
-    [menuState, innerRef, disabled, setMenuState]
+    [menuState, internalRef, disabled, setMenuState]
   );
   const handleOnMouseDown = useCallback(
     (e) => {
-      if (document.activeElement === innerRef.current || inline) {
+      if (document.activeElement === internalRef.current || inline) {
         e.preventDefault();
       }
     },
-    [innerRef, inline]
+    [internalRef, inline]
   );
   const { onKeyDownPills } = useOnPillsNavigation();
   const cols = useMemo(

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 { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      innerRef.current?.blur();\n      return;\n    }\n    innerRef.current?.focus();\n    setMenuState(true);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, 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 (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        innerRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, innerRef, disabled, 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 === innerRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [innerRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {hasFocus && <A11ySelectedValues />}\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n      <A11yFocusedOption />\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,SAAS;AAAA,IAC7E;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;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,iBAAS,SAAS,MAAM;AACxB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,UAAU,YAAY;AAAA,EAC9C;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,EAAE,eAAe,IAAI,qBAAqB;AAEhD,QAAM,OAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,qBAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,mBAAmB;AAAA,IAE/B;AAAA,OAAC,UACA,qBAAC;AAAA,QAAgB,KAAK;AAAA,QAAoB,SAAS;AAAA,QAChD;AAAA,sBAAY,oBAAC,sBAAmB;AAAA,UAChC,MAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B,oBAAC;AAAA,YAAI,eAAa,mBAAmB;AAAA,YAClC,4BAAkB,oBAAC;AAAA,cAA2B,MAAM;AAAA,aAAgB;AAAA,WACvE;AAAA;AAAA,OAEJ;AAAA,MAEF,oBAAC,qBAAkB;AAAA,MAEnB,oBAAC,iBAAc;AAAA,MACd,CAAC,UACA,qBAAC;AAAA,QAA2B,gBAAe;AAAA,QAAS,MAAM,CAAC,eAAe,aAAa;AAAA,QACrF;AAAA,8BAAC;AAAA,YAA4B;AAAA,WAAoB;AAAA,UACjD,oBAAC,qBAAkB;AAAA;AAAA,OACrB;AAAA;AAAA,GAEJ;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 { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      internalRef.current?.blur();\n      return;\n    }\n    internalRef.current?.focus();\n    setMenuState(true);\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 (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        internalRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, internalRef, disabled, 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)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {hasFocus && <A11ySelectedValues />}\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n      <A11yFocusedOption />\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;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;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;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,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,qBAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,mBAAmB;AAAA,IAE/B;AAAA,OAAC,UACA,qBAAC;AAAA,QAAgB,KAAK;AAAA,QAAoB,SAAS;AAAA,QAChD;AAAA,sBAAY,oBAAC,sBAAmB;AAAA,UAChC,MAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B,oBAAC;AAAA,YAAI,eAAa,mBAAmB;AAAA,YAClC,4BAAkB,oBAAC;AAAA,cAA2B,MAAM;AAAA,aAAgB;AAAA,WACvE;AAAA;AAAA,OAEJ;AAAA,MAEF,oBAAC,qBAAkB;AAAA,MAEnB,oBAAC,iBAAc;AAAA,MACd,CAAC,UACA,qBAAC;AAAA,QAA2B,gBAAe;AAAA,QAAS,MAAM,CAAC,eAAe,aAAa;AAAA,QACrF;AAAA,8BAAC;AAAA,YAA4B;AAAA,WAAoB;AAAA,UACjD,oBAAC,qBAAkB;AAAA;AAAA,OACrB;AAAA;AAAA,GAEJ;AAEJ;",
   "names": []
 }

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

@@ -2,19 +2,13 @@ import * as React from "react";
 import { useCallback, useContext } from "react";
 import ComboBoxContext from "../../ComboBoxCTX";
 const useOnPillsNavigation = () => {
-  const {
-    props: { innerRef },
-    inputValue,
-    hasFocus,
-    setMenuState,
-    selectedOptionsRef
-  } = useContext(ComboBoxContext);
+  const { internalRef, inputValue, hasFocus, setMenuState, selectedOptionsRef } = useContext(ComboBoxContext);
   const REMOVABLE_PILL_SELECTOR = ".ds-pill-wrapper-removable button";
   const onKeyDownPills = useCallback(
     (e) => {
       if ((e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") && inputValue === "") {
         if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-          innerRef.current?.focus();
+          internalRef.current?.focus();
           setMenuState(true, "open", e);
           return;
         }
@@ -26,11 +20,11 @@ const useOnPillsNavigation = () => {
         }
         if (e.key === "ArrowRight") {
           e.preventDefault();
-          innerRef.current?.focus();
+          internalRef.current?.focus();
         }
       }
     },
-    [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus]
+    [inputValue, internalRef, setMenuState, selectedOptionsRef, hasFocus]
   );
   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 React, { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useOnPillsNavigation = () => {\n  const {\n    props: { innerRef },\n    inputValue,\n    hasFocus,\n    setMenuState,\n    selectedOptionsRef,\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 (\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          innerRef.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          innerRef.current?.focus();\n        }\n      }\n    },\n    [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus],\n  );\n\n  return { onKeyDownPills };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAgB,aAAa,kBAAkB;AAC/C,OAAO,qBAAqB;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,0BAA0B;AAEhC,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,WACG,EAAE,QAAQ,eAAe,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa,EAAE,QAAQ,gBACrF,eAAe,IACf;AACA,YAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,mBAAS,SAAS,MAAM;AACxB,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,IAAI,MAAM;AAAA,UACnD;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,cAAc;AAC1B,YAAE,eAAe;AACjB,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY,UAAU,cAAc,oBAAoB,QAAQ;AAAA,EACnE;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 React, { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useOnPillsNavigation = () => {\n  const { internalRef, inputValue, hasFocus, setMenuState, selectedOptionsRef } = 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 (\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],\n  );\n\n  return { onKeyDownPills };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAgB,aAAa,kBAAkB;AAC/C,OAAO,qBAAqB;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,aAAa,YAAY,UAAU,cAAc,mBAAmB,IAAI,WAAW,eAAe;AAG1G,QAAM,0BAA0B;AAEhC,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,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,IAAI,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,QAAQ;AAAA,EACtE;AAEA,SAAO,EAAE,eAAe;AAC1B;",
   "names": []
 }

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
+import { useGetGlobalAttributes, mergeRefs } from "@elliemae/ds-utilities";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids";
 import { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from "./styled";
 import { useKeyboardNavigation } from "./useKeyboardNavigation";
@@ -12,12 +12,22 @@ const ControlsInput = () => {
   const {
     props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },
     focusOptionIdx,
+    internalRef,
     inputValue,
     menuState
   } = useContext(ComboBoxContext);
   const { onInputKeyDown } = useKeyboardNavigation();
   const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput();
-  const { className, tabIndex, "data-testid": dataTestId, id, ...globalAttrs } = useGetGlobalAttributes(restProps);
+  const {
+    className,
+    tabIndex,
+    "data-testid": dataTestId,
+    id,
+    ...globalAttrs
+  } = useGetGlobalAttributes(restProps, {
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur
+  });
   return /* @__PURE__ */ jsxs(StyledInputWrapper, {
     children: [
       /* @__PURE__ */ jsx(StyledInputWidthReference, {
@@ -30,11 +40,13 @@ const ControlsInput = () => {
         })
       }),
       /* @__PURE__ */ jsx(StyledInput, {
+        onBlur: handleOnBlur,
+        onFocus: handleOnFocus,
         ...globalAttrs,
         id,
         "data-testid": ComboboxDataTestid.INPUT,
         autoFocus,
-        placeholder,
+        placeholder: showPlaceholder ? placeholder : "",
         "aria-controls": "combo-listbox",
         "aria-activedescendant": focusOptionIdx,
         "aria-expanded": menuState,
@@ -43,13 +55,11 @@ const ControlsInput = () => {
         role: "combobox",
         disabled,
         style: { width },
-        ref: innerRef,
+        ref: mergeRefs(innerRef, internalRef),
         value: inputValue,
         type: "text",
         onKeyDown: onInputKeyDown,
         onChange: handleOnChange,
-        onBlur: handleOnBlur,
-        onFocus: handleOnFocus,
         tabIndex,
         withoutCaret: onlySelectable
       })

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 } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n    focusOptionIdx,\n    inputValue,\n    menuState,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const { className, tabIndex, 'data-testid': dataTestId, id, ...globalAttrs } = useGetGlobalAttributes(restProps);\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder>\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      <StyledInput\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={placeholder}\n        aria-controls=\"combo-listbox\"\n        aria-activedescendant={focusOptionIdx}\n        aria-expanded={menuState}\n        aria-haspopup=\"listbox\"\n        aria-describedby={`combobox-selected-items ${id !== undefined ? `${id}_feedback_message` : ''}`}\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        ref={innerRef}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AAEvC,SAAS,0BAA0B;AACnC,SAAS,aAAa,oBAAoB,wBAAwB,iCAAiC;AACnG,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,IAC5G,iBAAiB;AAEnB,QAAM,EAAE,WAAW,UAAU,eAAe,YAAY,OAAO,YAAY,IAAI,uBAAuB,SAAS;AAE/G,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,oBAAC;AAAA,QACC,8BAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,oBAAC;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA;AAAA,QACA,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB,2BAA2B,OAAO,SAAY,GAAG,wBAAwB;AAAA,QAC3F,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT;AAAA,QACA,cAAc;AAAA,OAChB;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes, mergeRefs } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n    focusOptionIdx,\n    internalRef,\n    inputValue,\n    menuState,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const {\n    className,\n    tabIndex,\n    'data-testid': dataTestId,\n    id,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder>\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      <StyledInput\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={showPlaceholder ? placeholder : ''}\n        aria-controls=\"combo-listbox\"\n        aria-activedescendant={focusOptionIdx}\n        aria-expanded={menuState}\n        aria-haspopup=\"listbox\"\n        aria-describedby={`combobox-selected-items ${id !== undefined ? `${id}_feedback_message` : ''}`}\n        role=\"combobox\"\n        disabled={disabled}\n        style={{ width }}\n        ref={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAA+B;AAC/C,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB,iBAAiB;AAElD,SAAS,0BAA0B;AACnC,SAAS,aAAa,oBAAoB,wBAAwB,iCAAiC;AACnG,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,IAC5G,iBAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,OACG;AAAA,EACL,IAAI,uBAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,oBAAC;AAAA,QACC,8BAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,oBAAC;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA,aAAa,kBAAkB,cAAc;AAAA,QAC7C,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB,2BAA2B,OAAO,SAAY,GAAG,wBAAwB;AAAA,QAC3F,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,KAAK,UAAU,UAAU,WAAW;AAAA,QACpC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,OAChB;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/header-list/useHeaderListHandlers.js

@@ -4,8 +4,9 @@ import { getSelectableOptions } from "../../utils/listHelper";
 import ComboBoxContext from "../../ComboBoxCTX";
 const useHeaderListHandlers = () => {
   const {
-    props: { selectedValues, filteredOptions, onSelectAll, innerRef },
+    props: { selectedValues, filteredOptions, onSelectAll },
     showSelectedOptions,
+    internalRef,
     setShowSelectedOptions,
     setMenuState
   } = useContext(ComboBoxContext);
@@ -53,28 +54,28 @@ const useHeaderListHandlers = () => {
     (e) => {
       if (e.key === "Escape") {
         setMenuState(false, "close", e);
-        innerRef.current?.focus();
+        internalRef.current?.focus();
       }
     },
-    [setMenuState, innerRef]
+    [setMenuState, internalRef]
   );
   const handleFilterSelectionBtnOnTab = useCallback(
     (e) => {
       if (e.key === "Tab" && !e.shiftKey) {
         e.preventDefault();
-        innerRef.current?.focus();
+        internalRef.current?.focus();
       }
     },
-    [innerRef]
+    [internalRef]
   );
   const handleCheckAllOnTab = useCallback(
     (e) => {
       if (e.key === "Tab" && !e.shiftKey && multiSelectedValues.length === 0) {
         e.preventDefault();
-        innerRef.current?.focus();
+        internalRef.current?.focus();
       }
     },
-    [innerRef, multiSelectedValues]
+    [internalRef, multiSelectedValues]
   );
   useEffect(() => {
     if (multiSelectedValues.length === 0) {

package/dist/esm/parts/header-list/useHeaderListHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/useHeaderListHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSelectableOptions } from '../../utils/listHelper';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst useHeaderListHandlers = () => {\n  const {\n    props: { selectedValues, filteredOptions, onSelectAll, innerRef },\n    showSelectedOptions,\n    setShowSelectedOptions,\n    setMenuState,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const selectableOptions = getSelectableOptions(filteredOptions);\n\n  const getCheckboxStatus = useMemo(() => {\n    if (multiSelectedValues.length === selectableOptions.length) {\n      return true;\n    }\n    if (multiSelectedValues?.length === 0) {\n      return false;\n    }\n    return 'mixed';\n  }, [multiSelectedValues.length, selectableOptions.length]);\n\n  const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n  useEffect(() => {\n    setCheckboxStatus(getCheckboxStatus);\n  }, [getCheckboxStatus, multiSelectedValues]);\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    // this prevent the input control to lose focus\n  }, []);\n\n  const handleSelectAllCheckboxChange = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n        setCheckboxStatus(true);\n      } else if (onSelectAll) {\n        onSelectAll([], e);\n        setCheckboxStatus(false);\n      }\n    },\n    [checkboxStatus, onSelectAll, filteredOptions],\n  );\n\n  const handleToggleSelectedValuesFilter: React.MouseEventHandler = useCallback(\n    (e) => {\n      e.preventDefault();\n      setShowSelectedOptions(!showSelectedOptions);\n    },\n    [setShowSelectedOptions, showSelectedOptions],\n  );\n\n  // when pressing escape on each header list button we close the menu\n  // and set focus on input\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setMenuState(false, 'close', e);\n        innerRef.current?.focus();\n      }\n    },\n    [setMenuState, innerRef],\n  );\n\n  // when hitting tab on selected values button filter we target the input again\n  const handleFilterSelectionBtnOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey) {\n        e.preventDefault();\n        innerRef.current?.focus();\n      }\n    },\n    [innerRef],\n  );\n\n  const handleCheckAllOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n        e.preventDefault();\n        innerRef.current?.focus();\n      }\n    },\n    [innerRef, multiSelectedValues],\n  );\n\n  useEffect(() => {\n    // toggle off selected values filter when removing all of them\n    if (multiSelectedValues.length === 0) {\n      setShowSelectedOptions(false);\n    }\n  }, [multiSelectedValues, setShowSelectedOptions]);\n\n  return useMemo(\n    () => ({\n      handleKeyDown,\n      handleToggleSelectedValuesFilter,\n      handleFilterSelectionBtnOnTab,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    }),\n    [\n      handleKeyDown,\n      handleFilterSelectionBtnOnTab,\n      handleToggleSelectedValuesFilter,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    ],\n  );\n};\n\nexport { useHeaderListHandlers };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,UAAU,SAAS,WAAW,YAAY,mBAAmB;AAE7E,SAAS,4BAA4B;AACrC,OAAO,qBAAqB;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,aAAa,SAAS;AAAA,IAChE;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,oBAAoB,qBAAqB,eAAe;AAE9D,QAAM,oBAAoB,QAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA4B,KAAK;AAE7E,YAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,oBAAoB,YAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,gCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,mCAA4D;AAAA,IAChE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAGA,QAAM,gCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB;AAAA,EAChC;AAEA,YAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSelectableOptions } from '../../utils/listHelper';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nconst useHeaderListHandlers = () => {\n  const {\n    props: { selectedValues, filteredOptions, onSelectAll },\n    showSelectedOptions,\n    internalRef,\n    setShowSelectedOptions,\n    setMenuState,\n  } = useContext(ComboBoxContext);\n\n  const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n  const selectableOptions = getSelectableOptions(filteredOptions);\n\n  const getCheckboxStatus = useMemo(() => {\n    if (multiSelectedValues.length === selectableOptions.length) {\n      return true;\n    }\n    if (multiSelectedValues?.length === 0) {\n      return false;\n    }\n    return 'mixed';\n  }, [multiSelectedValues.length, selectableOptions.length]);\n\n  const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n  useEffect(() => {\n    setCheckboxStatus(getCheckboxStatus);\n  }, [getCheckboxStatus, multiSelectedValues]);\n\n  const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    // this prevent the input control to lose focus\n  }, []);\n\n  const handleSelectAllCheckboxChange = useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n        setCheckboxStatus(true);\n      } else if (onSelectAll) {\n        onSelectAll([], e);\n        setCheckboxStatus(false);\n      }\n    },\n    [checkboxStatus, onSelectAll, filteredOptions],\n  );\n\n  const handleToggleSelectedValuesFilter: React.MouseEventHandler = useCallback(\n    (e) => {\n      e.preventDefault();\n      setShowSelectedOptions(!showSelectedOptions);\n    },\n    [setShowSelectedOptions, showSelectedOptions],\n  );\n\n  // when pressing escape on each header list button we close the menu\n  // and set focus on input\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setMenuState(false, 'close', e);\n        internalRef.current?.focus();\n      }\n    },\n    [setMenuState, internalRef],\n  );\n\n  // when hitting tab on selected values button filter we target the input again\n  const handleFilterSelectionBtnOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey) {\n        e.preventDefault();\n        internalRef.current?.focus();\n      }\n    },\n    [internalRef],\n  );\n\n  const handleCheckAllOnTab = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n        e.preventDefault();\n        internalRef.current?.focus();\n      }\n    },\n    [internalRef, multiSelectedValues],\n  );\n\n  useEffect(() => {\n    // toggle off selected values filter when removing all of them\n    if (multiSelectedValues.length === 0) {\n      setShowSelectedOptions(false);\n    }\n  }, [multiSelectedValues, setShowSelectedOptions]);\n\n  return useMemo(\n    () => ({\n      handleKeyDown,\n      handleToggleSelectedValuesFilter,\n      handleFilterSelectionBtnOnTab,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    }),\n    [\n      handleKeyDown,\n      handleFilterSelectionBtnOnTab,\n      handleToggleSelectedValuesFilter,\n      handleOnMouseDown,\n      handleCheckAllOnTab,\n      handleSelectAllCheckboxChange,\n      checkboxStatus,\n    ],\n  );\n};\n\nexport { useHeaderListHandlers };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,UAAU,SAAS,WAAW,YAAY,mBAAmB;AAE7E,SAAS,4BAA4B;AACrC,OAAO,qBAAqB;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,oBAAoB,qBAAqB,eAAe;AAE9D,QAAM,oBAAoB,QAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA4B,KAAK;AAE7E,YAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,oBAAoB,YAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,gCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,mCAA4D;AAAA,IAChE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAGA,QAAM,gCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,mBAAmB;AAAA,EACnC;AAEA,YAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -7,7 +7,8 @@ import { getSuggestedValueOnChange } from "../../utils/listHelper";
 const RemovableSelectedValuePill = (props) => {
   const { pill } = props;
   const {
-    props: { onChange, isNonClearable, disabled, selectedValues, innerRef }
+    props: { onChange, isNonClearable, disabled, selectedValues },
+    internalRef
   } = useContext(ComboBoxContext);
   return /* @__PURE__ */ jsx(DSPillV2, {
     size: "s",
@@ -18,7 +19,7 @@ const RemovableSelectedValuePill = (props) => {
     onRemove: (e) => {
       e.stopPropagation();
       onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);
-      innerRef.current?.focus();
+      internalRef.current?.focus();
     }
   }, pill.value);
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n  const { pill } = props;\n  const {\n    props: { onChange, isNonClearable, disabled, selectedValues, innerRef },\n  } = useContext(ComboBoxContext);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={disabled || isNonClearable ? 'value' : 'removable'}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent) => {\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        innerRef.current?.focus();\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AACnC,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,gBAAgB,SAAS;AAAA,EACxE,IAAI,WAAW,eAAe;AAE9B,SACE,oBAAC;AAAA,IACC,MAAK;AAAA,IAEL,OAAO,KAAK;AAAA,IACZ;AAAA,IACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,IAC7C,UAAU;AAAA,IACV,UAAU,CAAC,MAA2B;AAEpC,QAAE,gBAAgB;AAClB,eAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,KAVK,KAAK,KAWZ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n  const { pill } = props;\n  const {\n    props: { onChange, isNonClearable, disabled, selectedValues },\n    internalRef,\n  } = useContext(ComboBoxContext);\n\n  return (\n    <DSPillV2\n      size=\"s\"\n      key={pill.value}\n      label={pill.label}\n      disabled={disabled}\n      type={disabled || isNonClearable ? 'value' : 'removable'}\n      tabIndex={-1}\n      onRemove={(e: React.KeyboardEvent) => {\n        // preventing the menu to be opened\n        e.stopPropagation();\n        onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n        internalRef.current?.focus();\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AACnC,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,eAAe;AAAA,IAC5D;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,SACE,oBAAC;AAAA,IACC,MAAK;AAAA,IAEL,OAAO,KAAK;AAAA,IACZ;AAAA,IACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,IAC7C,UAAU;AAAA,IACV,UAAU,CAAC,MAA2B;AAEpC,QAAE,gBAAgB;AAClB,eAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,kBAAY,SAAS,MAAM;AAAA,IAC7B;AAAA,KAVK,KAAK,KAWZ;AAEJ;",
   "names": []
 }

package/dist/esm/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/sharedTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from './constants';\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.RefObject<HTMLDivElement>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n    toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    showSelectedOptions: boolean;\n    setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n    setMenuState: (\n      newState: boolean,\n      reason?: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;AAiC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from './constants';\nexport declare namespace DSComboboxInternalsT {\n  export interface ComboBoxContextT {\n    props: DSComboboxT.InternalProps;\n    internalRef: React.RefObject<HTMLInputElement>;\n    virtualListHelpers?: ReturnType<typeof useVirtual>;\n    menuState: boolean;\n    setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n    referenceElement: HTMLElement | null;\n    setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n    pillGroupRef: React.RefObject<HTMLDivElement>;\n    scrollOptionIntoView: (dsId: string) => void;\n    setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n    hasFocus: boolean;\n    listRef: React.RefObject<HTMLDivElement>;\n    wrapperListRef: React.RefObject<HTMLDivElement>;\n    inputValue: string;\n    setInputValue: React.Dispatch<React.SetStateAction<string>>;\n    selectedOptionsRef: React.RefObject<HTMLDivElement>;\n    controlsWrapperRef: React.RefObject<HTMLDivElement>;\n    selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n    toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    showSelectedOptions: boolean;\n    setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n    setMenuState: (\n      newState: boolean,\n      reason?: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n  }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n  el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n  el?.type === MENU_OPTION_TYPES.OPTION;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;AAkC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-combobox",
-  "version": "3.10.0-next.9",
+  "version": "3.10.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Combobox",
   "files": [
@@ -35,21 +35,21 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.10.0-next.9",
-    "@elliemae/ds-form-checkbox": "3.10.0-next.9",
-    "@elliemae/ds-grid": "3.10.0-next.9",
-    "@elliemae/ds-icons": "3.10.0-next.9",
-    "@elliemae/ds-menu-items": "3.10.0-next.9",
-    "@elliemae/ds-pills": "3.10.0-next.9",
-    "@elliemae/ds-popperjs": "3.10.0-next.9",
-    "@elliemae/ds-system": "3.10.0-next.9",
-    "@elliemae/ds-truncated-tooltip-text": "3.10.0-next.9",
-    "@elliemae/ds-utilities": "3.10.0-next.9",
+    "@elliemae/ds-button": "3.10.2",
+    "@elliemae/ds-form-checkbox": "3.10.2",
+    "@elliemae/ds-grid": "3.10.2",
+    "@elliemae/ds-icons": "3.10.2",
+    "@elliemae/ds-menu-items": "3.10.2",
+    "@elliemae/ds-pills": "3.10.2",
+    "@elliemae/ds-popperjs": "3.10.2",
+    "@elliemae/ds-system": "3.10.2",
+    "@elliemae/ds-truncated-tooltip-text": "3.10.2",
+    "@elliemae/ds-utilities": "3.10.2",
     "react-virtual": "~2.10.4",
     "uid": "~2.0.0"
   },
   "devDependencies": {
-    "@elliemae/ds-form-helpers-mask-hooks": "3.10.0-next.9",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.10.2",
     "@elliemae/pui-theme": "~2.6.0",
     "@testing-library/dom": "~8.13.0",
     "@testing-library/jest-dom": "~5.16.4",