@elliemae/ds-form-combobox 3.49.3 → 3.49.5

package/dist/cjs/ComboBoxCTX.js

@@ -59,7 +59,6 @@ const defaultContext = {
   props: defaultProps,
   menuState: false,
   hasFocus: false,
-  referenceElement: null,
   inputValue: "",
   focusOptionIdx: "",
   pillGroupRef: (0, import_react.createRef)(),

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 type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: noop,\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n  correctOptions: [],\n  instanceUid: '',\n  optionsPerSection: [],\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n", "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;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,kBAAc,wBAA0B;AAAA,EACxC,aAAS,wBAA0B;AAAA,EACnC,oBAAgB,wBAA0B;AAAA,EAC1C,wBAAoB,wBAA4B;AAAA,EAChD,wBAAoB,wBAA4B;AAAA,EAChD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,iBAAa,wBAA4B;AAAA,EACzC,gBAAgB,CAAC;AAAA,EACjB,aAAa;AAAA,EACb,mBAAmB,CAAC;AACtB;AAEO,MAAM,sBAAkB,4BAAc,cAAc;AAE3D,IAAO,sBAAQ;",
+  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from './sharedTypes.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: false,\n  disabled: false,\n  useMask: noop,\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start'],\n  noOptionsMessage: 'No Matches Found',\n  isNonClearable: false,\n  onlySelectable: false,\n  isSkeleton: false,\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  menuState: false,\n  hasFocus: false,\n  inputValue: '',\n  focusOptionIdx: '',\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setMenuState: noop,\n  internalRef: createRef<HTMLInputElement>(),\n  correctOptions: [],\n  instanceUid: '',\n  optionsPerSection: [],\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n", "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;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,kBAAc,wBAA0B;AAAA,EACxC,aAAS,wBAA0B;AAAA,EACnC,oBAAgB,wBAA0B;AAAA,EAC1C,wBAAoB,wBAA4B;AAAA,EAChD,wBAAoB,wBAA4B;AAAA,EAChD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,iBAAa,wBAA4B;AAAA,EACzC,gBAAgB,CAAC;AAAA,EACjB,aAAa;AAAA,EACb,mBAAmB,CAAC;AACtB;AAEO,MAAM,sBAAkB,4BAAc,cAAc;AAE3D,IAAO,sBAAQ;",
   "names": []
 }

package/dist/cjs/config/useComboBox.js

@@ -46,7 +46,6 @@ const useComboBox = (props) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_ComboBoxCTX.defaultProps);
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.ComboboxPropTypes, import_theming.DSComboBoxName);
   const [showPopover, setShowPopover] = (0, import_react.useState)(false);
-  const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
   const [inputValue, setInputValue] = (0, import_react.useState)("");
   const [hasFocus, setHasFocus] = (0, import_react.useState)(false);
   const internalRef = (0, import_react.useRef)(null);
@@ -110,7 +109,6 @@ const useComboBox = (props) => {
       props: { ...propsWithDefaults },
       virtualListHelpers,
       menuState,
-      referenceElement,
       listRef,
       focusOptionIdx,
       selectedOptionsRef,
@@ -124,7 +122,6 @@ const useComboBox = (props) => {
       setHasFocus,
       setFocusOptionIdx,
       scrollOptionIntoView,
-      setReferenceElement,
       setShowPopover,
       internalRef,
       correctOptions,
@@ -143,7 +140,6 @@ const useComboBox = (props) => {
       wrapperListRef,
       menuState,
       pillGroupRef,
-      referenceElement,
       selectedOptionsRef,
       controlsWrapperRef,
       listRef,

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, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n  const optionsPerSection = useOptionsPerSection(correctOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: optionsPerSection.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      // tentative fix to https://jira.elliemae.io/browse/PUI-15374\n      //   in some scenarios (very specific and with iframes that we can't replicate)\n      //    the first render positions the list in the wrong place\n      // executing this code right away seems to for some reason make the first placement correct in the first render\n      // fix is fragile but we can't replicate the issue so we can't test a more robust fix.\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n      // executing in new animation frames instead fixes https://jira.elliemae.io/browse/PUI-15252\n      // so practically speaking we are scrolling twice in two different frames\n      //  it's not per-se bad given the underlying virtualization library + browser scroll + dynamic heights\n      //    actually sometimes need to do a first scroll to calculate new heights/scroll position\n      //    and then a second one to actually position the scroll in the list correctly,\n      //       making fix to 15252 potentially more robust.\n      requestAnimationFrame(() => {\n        virtualListHelpers.scrollToIndex(\n          correctOptions.findIndex((opt) => opt.dsId === dsId),\n          opts,\n        );\n      });\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (applyAriaDisabled) return;\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n\n      if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n        const focusedValue = getFirstOption(correctOptions, selectedValues);\n        setFocusOptionIdx(focusedValue);\n        scrollOptionIntoView(focusedValue, { align: 'center' });\n      } else {\n        setFocusOptionIdx('');\n      }\n    },\n    [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n  );\n\n  // We need to force the auto focus for the inline since we dont control the floating wrapper.\n  useEffect(() => {\n    if (propsWithDefaults.inline) {\n      setMenuState(true, 'inline');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      pillGroupRef,\n      wrapperListRef,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n      optionsPerSection,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      listRef,\n      internalRef,\n      instanceUid,\n      optionsPerSection,\n    ],\n  );\n\n  return ctx;\n};\n", "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, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n  const optionsPerSection = useOptionsPerSection(correctOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: optionsPerSection.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      // tentative fix to https://jira.elliemae.io/browse/PUI-15374\n      //   in some scenarios (very specific and with iframes that we can't replicate)\n      //    the first render positions the list in the wrong place\n      // executing this code right away seems to for some reason make the first placement correct in the first render\n      // fix is fragile but we can't replicate the issue so we can't test a more robust fix.\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n      // executing in new animation frames instead fixes https://jira.elliemae.io/browse/PUI-15252\n      // so practically speaking we are scrolling twice in two different frames\n      //  it's not per-se bad given the underlying virtualization library + browser scroll + dynamic heights\n      //    actually sometimes need to do a first scroll to calculate new heights/scroll position\n      //    and then a second one to actually position the scroll in the list correctly,\n      //       making fix to 15252 potentially more robust.\n      requestAnimationFrame(() => {\n        virtualListHelpers.scrollToIndex(\n          correctOptions.findIndex((opt) => opt.dsId === dsId),\n          opts,\n        );\n      });\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (applyAriaDisabled) return;\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n\n      if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n        const focusedValue = getFirstOption(correctOptions, selectedValues);\n        setFocusOptionIdx(focusedValue);\n        scrollOptionIntoView(focusedValue, { align: 'center' });\n      } else {\n        setFocusOptionIdx('');\n      }\n    },\n    [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n  );\n\n  // We need to force the auto focus for the inline since we dont control the floating wrapper.\n  useEffect(() => {\n    if (propsWithDefaults.inline) {\n      setMenuState(true, 'inline');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      pillGroupRef,\n      wrapperListRef,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n      optionsPerSection,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      menuState,\n      pillGroupRef,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      listRef,\n      internalRef,\n      instanceUid,\n      optionsPerSection,\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

@@ -32,8 +32,11 @@ __export(Container_exports, {
 });
 module.exports = __toCommonJS(Container_exports);
 var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_jsx_runtime = (
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  require("react/jsx-runtime")
+);
+var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_floating_context = require("@elliemae/ds-floating-context");
@@ -45,7 +48,8 @@ var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
 var import_LiveRegion = require("../LiveRegion.js");
 var import_useClickOutside = require("../../config/useClickOutside.js");
 const Container = () => {
-  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } = (0, import_react.useContext)(import_ComboBoxCTX.default);
+  const [referenceElement, setReferenceElement] = import_react.default.useState(null);
+  const { props, internalRef, setMenuState, menuState } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
   const { zIndex, ...xStyledProps } = (0, import_ds_props_helpers.useGetXstyledProps)(props);
@@ -76,9 +80,10 @@ const Container = () => {
       zIndex: correctZIndex,
       customOffset: [0, 5],
       handleCloseMenu,
-      portalDOMContainer: document.body
+      portalDOMContainer: document.body,
+      externallyControlledIsOpen: menuState
     }),
-    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu]
+    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState]
   );
   const { refs, floatingStyles, context } = (0, import_ds_floating_context.useFloatingContext)(config);
   const comboboxRef = (0, import_ds_system.mergeRefs)(setReferenceElement, refs.setReference);
@@ -86,37 +91,30 @@ const Container = () => {
     setMenuState(false, "blur");
   }, [setMenuState]);
   (0, import_useClickOutside.useOnClickOutside)(referenceElement, hideTooltip, refs.floating);
-  return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_styled.StyledContainer,
-      {
-        "data-testid": dataTestId ?? import_ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
-        innerRef: comboboxRef,
-        className,
-        applyAriaDisabled,
-        ...xStyledProps,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveRegion.LiveRegion, {}),
-          inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {})
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
-            referenceElement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ds_floating_context.FloatingWrapper,
-              {
-                innerRef: refs.setFloating,
-                floatingStyles,
-                isOpen: menuState,
-                context,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) })
-              }
-            ) : null
-          ] })
-        ]
-      }
-    ) })
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledContainer,
+    {
+      "data-testid": dataTestId ?? import_ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
+      innerRef: comboboxRef,
+      className,
+      applyAriaDisabled,
+      ...xStyledProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveRegion.LiveRegion, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.Controls, {}),
+        menuState && inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) : null,
+        menuState && !inline && referenceElement ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_floating_context.FloatingWrapper,
+          {
+            innerRef: refs.setFloating,
+            floatingStyles,
+            isOpen: menuState,
+            context,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu_list.MenuList, {}) })
+          }
+        ) : null
+      ]
+    }
+  ) });
 };
 //# sourceMappingURL=Container.js.map

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, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = 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      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setMenuState(false, 'blur');\n  }, [setMenuState]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  return (\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        innerRef={comboboxRef}\n        className={className}\n        applyAriaDisabled={applyAriaDisabled}\n        {...xStyledProps}\n      >\n        <LiveRegion />\n\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            {referenceElement ? (\n              <FloatingWrapper\n                innerRef={refs.setFloating}\n                floatingStyles={floatingStyles}\n                isOpen={menuState}\n                context={context}\n              >\n                <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n                  <MenuList />\n                </StyledPopperWrapper>\n              </FloatingWrapper>\n            ) : null}\n          </>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiFf;AAhFR,mBAAmE;AACnE,8BAA2D;AAC3D,uBAA0B;AAC1B,iCAAiF;AACjF,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAC3B,6BAAkC;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,QACzF,yBAAW,mBAAAA,OAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,uBAAmB,gDAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,QAAI,4CAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,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,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,IAC/B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,eAAe;AAAA,EACrF;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB,MAAM;AAEnE,QAAM,kBAAc,4BAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,kBAAc,0BAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,gDAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D;AAAA;AAAA,IAEE,2EACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,8CAAmB;AAAA,QAC9C,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,sDAAC,gCAAW;AAAA,UAEX,SACC,4EACE;AAAA,wDAAC,4BAAS;AAAA,YACV,4CAAC,6BAAS;AAAA,aACZ,IAEA,4EACE;AAAA,wDAAC,4BAAS;AAAA,YACT,mBACC;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU,KAAK;AAAA,gBACf;AAAA,gBACA,QAAQ;AAAA,gBACR;AAAA,gBAEA,sDAAC,qCAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,sDAAC,6BAAS,GACZ;AAAA;AAAA,YACF,IACE;AAAA,aACN;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA;AAEJ;",
-  "names": ["ComboBoxContext"]
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n  const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = 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      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n      externallyControlledIsOpen: menuState,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setMenuState(false, 'blur');\n  }, [setMenuState]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  return (\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        innerRef={comboboxRef}\n        className={className}\n        applyAriaDisabled={applyAriaDisabled}\n        {...xStyledProps}\n      >\n        <LiveRegion />\n        <Controls />\n\n        {menuState && inline ? <MenuList /> : null}\n        {menuState && !inline && referenceElement ? (\n          <FloatingWrapper\n            innerRef={refs.setFloating}\n            floatingStyles={floatingStyles}\n            isOpen={menuState}\n            context={context}\n          >\n            <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n              <MenuList />\n            </StyledPopperWrapper>\n          </FloatingWrapper>\n        ) : null}\n      </StyledContainer>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AAAA;AAAA;AAAA;AAzEJ,mBAAmE;AACnE,8BAA2D;AAC3D,uBAA0B;AAC1B,iCAAiF;AACjF,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAC3B,6BAAkC;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,aAAAA,QAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,QAAI,yBAAW,mBAAAC,OAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,uBAAmB,gDAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,QAAI,4CAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,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,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,aAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,+CAAmB,MAAM;AAEnE,QAAM,kBAAc,4BAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,kBAAc,0BAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,gDAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D,SAEE,2EACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,gCAAW;AAAA,QACZ,4CAAC,4BAAS;AAAA,QAET,aAAa,SAAS,4CAAC,6BAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,mBACvB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YAEA,sDAAC,qCAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,sDAAC,6BAAS,GACZ;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
+  "names": ["React", "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 type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\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    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    setMenuState: (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\n    optionsPerSection: DSComboboxT.OptionTypes[];\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 type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\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    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    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    setMenuState: (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\n    optionsPerSection: DSComboboxT.OptionTypes[];\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;AA+B3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
   "names": []
 }

package/dist/esm/ComboBoxCTX.js

@@ -23,7 +23,6 @@ const defaultContext = {
   props: defaultProps,
   menuState: false,
   hasFocus: false,
-  referenceElement: null,
   inputValue: "",
   focusOptionIdx: "",
   pillGroupRef: createRef(),

package/dist/esm/ComboBoxCTX.js.map

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

package/dist/esm/config/useComboBox.js

@@ -13,7 +13,6 @@ const useComboBox = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);
   const [showPopover, setShowPopover] = useState(false);
-  const [referenceElement, setReferenceElement] = useState(null);
   const [inputValue, setInputValue] = useState("");
   const [hasFocus, setHasFocus] = useState(false);
   const internalRef = useRef(null);
@@ -77,7 +76,6 @@ const useComboBox = (props) => {
       props: { ...propsWithDefaults },
       virtualListHelpers,
       menuState,
-      referenceElement,
       listRef,
       focusOptionIdx,
       selectedOptionsRef,
@@ -91,7 +89,6 @@ const useComboBox = (props) => {
       setHasFocus,
       setFocusOptionIdx,
       scrollOptionIntoView,
-      setReferenceElement,
       setShowPopover,
       internalRef,
       correctOptions,
@@ -110,7 +107,6 @@ const useComboBox = (props) => {
       wrapperListRef,
       menuState,
       pillGroupRef,
-      referenceElement,
       selectedOptionsRef,
       controlsWrapperRef,
       listRef,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useComboBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n  const optionsPerSection = useOptionsPerSection(correctOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: optionsPerSection.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      // tentative fix to https://jira.elliemae.io/browse/PUI-15374\n      //   in some scenarios (very specific and with iframes that we can't replicate)\n      //    the first render positions the list in the wrong place\n      // executing this code right away seems to for some reason make the first placement correct in the first render\n      // fix is fragile but we can't replicate the issue so we can't test a more robust fix.\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n      // executing in new animation frames instead fixes https://jira.elliemae.io/browse/PUI-15252\n      // so practically speaking we are scrolling twice in two different frames\n      //  it's not per-se bad given the underlying virtualization library + browser scroll + dynamic heights\n      //    actually sometimes need to do a first scroll to calculate new heights/scroll position\n      //    and then a second one to actually position the scroll in the list correctly,\n      //       making fix to 15252 potentially more robust.\n      requestAnimationFrame(() => {\n        virtualListHelpers.scrollToIndex(\n          correctOptions.findIndex((opt) => opt.dsId === dsId),\n          opts,\n        );\n      });\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (applyAriaDisabled) return;\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n\n      if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n        const focusedValue = getFirstOption(correctOptions, selectedValues);\n        setFocusOptionIdx(focusedValue);\n        scrollOptionIntoView(focusedValue, { align: 'center' });\n      } else {\n        setFocusOptionIdx('');\n      }\n    },\n    [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n  );\n\n  // We need to force the auto focus for the inline since we dont control the floating wrapper.\n  useEffect(() => {\n    if (propsWithDefaults.inline) {\n      setMenuState(true, 'inline');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      pillGroupRef,\n      wrapperListRef,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n      optionsPerSection,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      listRef,\n      internalRef,\n      instanceUid,\n      optionsPerSection,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useOptionsPerSection } from './useOptionsPerSection.js';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const internalRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n  const optionsPerSection = useOptionsPerSection(correctOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: optionsPerSection.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: ScrollToIndexOptions = { align: 'center' }) => {\n      // tentative fix to https://jira.elliemae.io/browse/PUI-15374\n      //   in some scenarios (very specific and with iframes that we can't replicate)\n      //    the first render positions the list in the wrong place\n      // executing this code right away seems to for some reason make the first placement correct in the first render\n      // fix is fragile but we can't replicate the issue so we can't test a more robust fix.\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n      // executing in new animation frames instead fixes https://jira.elliemae.io/browse/PUI-15252\n      // so practically speaking we are scrolling twice in two different frames\n      //  it's not per-se bad given the underlying virtualization library + browser scroll + dynamic heights\n      //    actually sometimes need to do a first scroll to calculate new heights/scroll position\n      //    and then a second one to actually position the scroll in the list correctly,\n      //       making fix to 15252 potentially more robust.\n      requestAnimationFrame(() => {\n        virtualListHelpers.scrollToIndex(\n          correctOptions.findIndex((opt) => opt.dsId === dsId),\n          opts,\n        );\n      });\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  const setMenuState = useCallback(\n    (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => {\n      if (applyAriaDisabled) return;\n      if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n      setShowPopover(newState);\n\n      if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {\n        const focusedValue = getFirstOption(correctOptions, selectedValues);\n        setFocusOptionIdx(focusedValue);\n        scrollOptionIntoView(focusedValue, { align: 'center' });\n      } else {\n        setFocusOptionIdx('');\n      }\n    },\n    [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView],\n  );\n\n  // We need to force the auto focus for the inline since we dont control the floating wrapper.\n  useEffect(() => {\n    if (propsWithDefaults.inline) {\n      setMenuState(true, 'inline');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\n      virtualListHelpers,\n      menuState,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      inputValue,\n      setInputValue,\n      setMenuState,\n      hasFocus,\n      pillGroupRef,\n      wrapperListRef,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setShowPopover,\n      internalRef,\n      correctOptions,\n      instanceUid,\n      optionsPerSection,\n    }),\n    [\n      scrollOptionIntoView,\n      setMenuState,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      menuState,\n      pillGroupRef,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      listRef,\n      internalRef,\n      instanceUid,\n      optionsPerSection,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useEffect, useContext } from "react";
+import React2, { useCallback, useMemo, useEffect, useContext } from "react";
 import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
 import { mergeRefs } from "@elliemae/ds-system";
 import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
@@ -12,7 +12,8 @@ import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
 import { LiveRegion } from "../LiveRegion.js";
 import { useOnClickOutside } from "../../config/useClickOutside.js";
 const Container = () => {
-  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);
+  const [referenceElement, setReferenceElement] = React2.useState(null);
+  const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);
   const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;
   const globalAttributes = useGetGlobalAttributes(props);
   const { zIndex, ...xStyledProps } = useGetXstyledProps(props);
@@ -43,9 +44,10 @@ const Container = () => {
       zIndex: correctZIndex,
       customOffset: [0, 5],
       handleCloseMenu,
-      portalDOMContainer: document.body
+      portalDOMContainer: document.body,
+      externallyControlledIsOpen: menuState
     }),
-    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu]
+    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState]
   );
   const { refs, floatingStyles, context } = useFloatingContext(config);
   const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);
@@ -65,22 +67,18 @@ const Container = () => {
         ...xStyledProps,
         children: [
           /* @__PURE__ */ jsx(LiveRegion, {}),
-          inline ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Controls, {}),
-            /* @__PURE__ */ jsx(MenuList, {})
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Controls, {}),
-            referenceElement ? /* @__PURE__ */ jsx(
-              FloatingWrapper,
-              {
-                innerRef: refs.setFloating,
-                floatingStyles,
-                isOpen: menuState,
-                context,
-                children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ jsx(MenuList, {}) })
-              }
-            ) : null
-          ] })
+          /* @__PURE__ */ jsx(Controls, {}),
+          menuState && inline ? /* @__PURE__ */ jsx(MenuList, {}) : null,
+          menuState && !inline && referenceElement ? /* @__PURE__ */ jsx(
+            FloatingWrapper,
+            {
+              innerRef: refs.setFloating,
+              floatingStyles,
+              isOpen: menuState,
+              context,
+              children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ jsx(MenuList, {}) })
+            }
+          ) : null
         ]
       }
     ) })

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, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = 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      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setMenuState(false, 'blur');\n  }, [setMenuState]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  return (\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        innerRef={comboboxRef}\n        className={className}\n        applyAriaDisabled={applyAriaDisabled}\n        {...xStyledProps}\n      >\n        <LiveRegion />\n\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            {referenceElement ? (\n              <FloatingWrapper\n                innerRef={refs.setFloating}\n                floatingStyles={floatingStyles}\n                isOpen={menuState}\n                context={context}\n              >\n                <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n                  <MenuList />\n                </StyledPopperWrapper>\n              </FloatingWrapper>\n            ) : null}\n          </>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiFf,SAGE,UAHF,KAGE,YAHF;AAhFR,SAAgB,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,uBAAoD;AACjF,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,IACzF,WAAW,eAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,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,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,IAC/B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,eAAe;AAAA,EACrF;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,IAAI,mBAAmB,MAAM;AAEnE,QAAM,cAAc,UAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,oBAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D;AAAA;AAAA,IAEE,gCACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,mBAAmB;AAAA,QAC9C,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,cAAW;AAAA,UAEX,SACC,iCACE;AAAA,gCAAC,YAAS;AAAA,YACV,oBAAC,YAAS;AAAA,aACZ,IAEA,iCACE;AAAA,gCAAC,YAAS;AAAA,YACT,mBACC;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU,KAAK;AAAA,gBACf;AAAA,gBACA,QAAQ;AAAA,gBACR;AAAA,gBAEA,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,YACF,IACE;AAAA,aACN;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useEffect, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { useFloatingContext, FloatingWrapper, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { Controls } from '../controls/index.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { LiveRegion } from '../LiveRegion.js';\nimport { useOnClickOutside } from '../../config/useClickOutside.js';\n\nexport const Container = (): JSX.Element => {\n  const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n  const { props, internalRef, setMenuState, menuState } = useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, applyAriaDisabled } = props;\n  const globalAttributes = useGetGlobalAttributes(props) as ReturnType<typeof useGetGlobalAttributes> & {\n    'data-testid'?: string;\n  };\n  const { zIndex, ...xStyledProps } = useGetXstyledProps(props);\n\n  const correctZIndex = zIndex ? parseInt(zIndex as string, 10) : undefined;\n  // Removing possible collisionable props\n  const { className, 'data-testid': dataTestId } = 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      if (menuState) setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [menuState, setMenuState]);\n\n  const config = useMemo(\n    () => ({\n      placement: 'bottom' as DSHookFloatingContextT.PopperPlacementsT,\n      withoutAnimation: true,\n      startPlacementPreference,\n      placementOrderPreference,\n      zIndex: correctZIndex,\n      customOffset: [0, 5] as [number, number],\n      handleCloseMenu,\n      portalDOMContainer: document.body,\n      externallyControlledIsOpen: menuState,\n    }),\n    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState],\n  );\n\n  const { refs, floatingStyles, context } = useFloatingContext(config);\n\n  const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);\n\n  const hideTooltip = useCallback(() => {\n    setMenuState(false, 'blur');\n  }, [setMenuState]);\n\n  useOnClickOutside(referenceElement, hideTooltip, refs.floating);\n\n  return (\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        innerRef={comboboxRef}\n        className={className}\n        applyAriaDisabled={applyAriaDisabled}\n        {...xStyledProps}\n      >\n        <LiveRegion />\n        <Controls />\n\n        {menuState && inline ? <MenuList /> : null}\n        {menuState && !inline && referenceElement ? (\n          <FloatingWrapper\n            innerRef={refs.setFloating}\n            floatingStyles={floatingStyles}\n            isOpen={menuState}\n            context={context}\n          >\n            <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n              <MenuList />\n            </StyledPopperWrapper>\n          </FloatingWrapper>\n        ) : null}\n      </StyledContainer>\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0EnB,mBAQI,KAPF,YADF;AAzEJ,OAAOA,UAAS,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB,uBAAoD;AACjF,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,YAAY,MAAmB;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,OAAM,SAA6B,IAAI;AACvF,QAAM,EAAE,OAAO,aAAa,cAAc,UAAU,IAAI,WAAW,eAAe;AAElF,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,kBAAkB,IAAI;AAC1F,QAAM,mBAAmB,uBAAuB,KAAK;AAGrD,QAAM,EAAE,QAAQ,GAAG,aAAa,IAAI,mBAAmB,KAAK;AAE5D,QAAM,gBAAgB,SAAS,SAAS,QAAkB,EAAE,IAAI;AAEhE,QAAM,EAAE,WAAW,eAAe,WAAW,IAAI;AACjD,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,QAAS,aAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,UAAI,UAAW,cAAa,OAAO,MAAM;AAAA,IAC3C;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,CAAC,GAAG,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,SAAS;AAAA,MAC7B,4BAA4B;AAAA,IAC9B;AAAA,IACA,CAAC,0BAA0B,0BAA0B,eAAe,iBAAiB,SAAS;AAAA,EAChG;AAEA,QAAM,EAAE,MAAM,gBAAgB,QAAQ,IAAI,mBAAmB,MAAM;AAEnE,QAAM,cAAc,UAAU,qBAAqB,KAAK,YAAY;AAEpE,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,OAAO,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,CAAC;AAEjB,oBAAkB,kBAAkB,aAAa,KAAK,QAAQ;AAE9D;AAAA;AAAA,IAEE,gCACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,mBAAmB;AAAA,QAC9C,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,cAAW;AAAA,UACZ,oBAAC,YAAS;AAAA,UAET,aAAa,SAAS,oBAAC,YAAS,IAAK;AAAA,UACrC,aAAa,CAAC,UAAU,mBACvB;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,KAAK;AAAA,cACf;AAAA,cACA,QAAQ;AAAA,cACR;AAAA,cAEA,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,UACF,IACE;AAAA;AAAA;AAAA,IACN,GACF;AAAA;AAEJ;",
+  "names": ["React"]
 }

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 type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\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    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    setMenuState: (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\n    optionsPerSection: DSComboboxT.OptionTypes[];\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 type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\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    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    focusOptionIdx: string;\n    setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n    setMenuState: (\n      newState: boolean,\n      reason: string,\n      e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n    ) => void;\n    correctOptions: DSComboboxT.OptionTypes[];\n    instanceUid: string;\n    optionsPerSection: DSComboboxT.OptionTypes[];\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;AA+B3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
   "names": []
 }

package/dist/types/sharedTypes.d.ts

@@ -8,8 +8,6 @@ export declare namespace DSComboboxInternalsT {
         virtualListHelpers?: ReturnType<typeof useVirtual>;
         menuState: boolean;
         setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;
-        referenceElement: HTMLElement | null;
-        setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
         pillGroupRef: React.RefObject<HTMLDivElement>;
         scrollOptionIntoView: (dsId: string) => void;
         setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-combobox",
-  "version": "3.49.3",
+  "version": "3.49.5",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Combobox",
   "files": [
@@ -38,17 +38,17 @@
   "dependencies": {
     "react-virtual": "~2.10.4",
     "uid": "~2.0.1",
-    "@elliemae/ds-button-v2": "3.49.3",
-    "@elliemae/ds-circular-progress-indicator": "3.49.3",
-    "@elliemae/ds-floating-context": "3.49.3",
-    "@elliemae/ds-form-checkbox": "3.49.3",
-    "@elliemae/ds-grid": "3.49.3",
-    "@elliemae/ds-menu-items": "3.49.3",
-    "@elliemae/ds-icons": "3.49.3",
-    "@elliemae/ds-pills-v2": "3.49.3",
-    "@elliemae/ds-system": "3.49.3",
-    "@elliemae/ds-truncated-tooltip-text": "3.49.3",
-    "@elliemae/ds-props-helpers": "3.49.3"
+    "@elliemae/ds-circular-progress-indicator": "3.49.5",
+    "@elliemae/ds-grid": "3.49.5",
+    "@elliemae/ds-button-v2": "3.49.5",
+    "@elliemae/ds-floating-context": "3.49.5",
+    "@elliemae/ds-menu-items": "3.49.5",
+    "@elliemae/ds-form-checkbox": "3.49.5",
+    "@elliemae/ds-icons": "3.49.5",
+    "@elliemae/ds-truncated-tooltip-text": "3.49.5",
+    "@elliemae/ds-pills-v2": "3.49.5",
+    "@elliemae/ds-props-helpers": "3.49.5",
+    "@elliemae/ds-system": "3.49.5"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
@@ -57,8 +57,8 @@
     "jest-cli": "~29.7.0",
     "styled-components": "~5.3.9",
     "styled-system": "~5.1.5",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.49.3",
-    "@elliemae/ds-monorepo-devops": "3.49.3"
+    "@elliemae/ds-monorepo-devops": "3.49.5",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.49.5"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.10.0",