@elliemae/ds-form-combobox 3.51.0-next.1 → 3.51.0-next.12

package/dist/esm/config/useComboBox.js

@@ -1,29 +1,24 @@
 import * as React from "react";
 import { useMemo, useState, useRef, useCallback, useEffect } from "react";
-import { useVirtual } from "react-virtual";
 import { uid } from "uid";
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
 import { defaultProps } from "../ComboBoxCTX.js";
 import { ComboboxPropTypes } from "../react-desc-prop-types.js";
-import { useCorrectOptions } from "./useCorrectOptions.js";
-import { getFirstOption } from "../utils/listHelper.js";
 import { DSComboBoxName } from "../theming.js";
-import { useMakeMutable } from "./useMakeMutable.js";
+import { getFirstOption, isSelectedValueEmpty } from "../utils/listHelper.js";
+import { useCorrectOptions } from "./useCorrectOptions.js";
+import { useOptionsPerSection } from "./useOptionsPerSection.js";
 const useComboBox = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);
   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);
   const controlsWrapperRef = useRef(null);
-  const selectAllCheckboxRef = useRef(null);
-  const toggleSelectionButtonRef = useRef(null);
   const pillGroupRef = useRef(null);
   const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;
   const instanceUid = useMemo(() => id || uid(5), [id]);
@@ -31,69 +26,64 @@ const useComboBox = (props) => {
     if (isMenuOpen !== void 0) return isMenuOpen;
     return showPopover;
   }, [showPopover, isMenuOpen]);
-  const setMenuState = useCallback(
-    (newState, reason, e) => {
-      if (applyAriaDisabled) return;
-      if (onMenuChange !== void 0) onMenuChange(newState, reason, e);
-      setShowPopover(newState);
-    },
-    [onMenuChange, applyAriaDisabled]
-  );
-  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);
-  const virtualListHelpers = useVirtual({
-    size: correctOptions.length,
-    parentRef: listRef,
-    overscan: 15,
-    paddingStart: 0
-  });
+  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);
+  const optionsPerSection = useOptionsPerSection(correctOptions);
+  const actionRef = {
+    scrollTo: () => {
+    }
+  };
+  const listRef = useRef(actionRef);
   const scrollOptionIntoView = useCallback(
     (dsId, opts = { align: "center" }) => {
-      virtualListHelpers.scrollToIndex(
+      listRef.current.scrollTo(
         correctOptions.findIndex((opt) => opt.dsId === dsId),
         opts
       );
+      requestAnimationFrame(() => {
+        listRef.current.scrollTo(
+          correctOptions.findIndex((opt) => opt.dsId === dsId),
+          opts
+        );
+      });
     },
-    [correctOptions, virtualListHelpers]
+    [correctOptions]
   );
   const [focusOptionIdx, setFocusOptionIdx] = useState("");
+  const setMenuState = useCallback(
+    (newState, reason, e) => {
+      if (applyAriaDisabled) return;
+      if (onMenuChange !== void 0) onMenuChange(newState, reason, e);
+      setShowPopover(newState);
+      if (!inputValue && newState && !focusOptionIdx && !isSelectedValueEmpty(selectedValues)) {
+        const focusedValue = getFirstOption(correctOptions, selectedValues);
+        setFocusOptionIdx(focusedValue);
+        scrollOptionIntoView(focusedValue, { align: "center" });
+      } else {
+        setFocusOptionIdx("");
+      }
+    },
+    [applyAriaDisabled, onMenuChange, inputValue, focusOptionIdx, selectedValues, correctOptions, scrollOptionIntoView]
+  );
   useEffect(() => {
-    if (!hasFocus) setFocusOptionIdx("");
-    if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {
-      const focusedValue = getFirstOption(correctOptions, selectedValues);
-      setFocusOptionIdx(focusedValue);
-      scrollOptionIntoView(focusedValue, { align: "center" });
-    }
-  }, [showPopover, hasFocus, correctOptions, selectedValues]);
-  const correctOptionsRef = useMakeMutable(correctOptions);
-  useEffect(() => {
-    setFocusOptionIdx(correctOptionsRef.current?.[0]?.dsId ?? "");
-  }, [correctOptionsRef, inputValue]);
-  useEffect(() => {
-    if (!showPopover) {
-      setFocusOptionIdx("");
-      setShowSelectedOptions(false);
+    if (propsWithDefaults.inline) {
+      setMenuState(true, "inline");
     }
-  }, [showPopover]);
+  }, []);
   const ctx = useMemo(
     () => ({
       props: { ...propsWithDefaults },
-      virtualListHelpers,
       menuState,
       referenceElement,
       listRef,
       focusOptionIdx,
       selectedOptionsRef,
       controlsWrapperRef,
-      selectAllCheckboxRef,
       inputValue,
       setInputValue,
       setMenuState,
       hasFocus,
-      toggleSelectionButtonRef,
       pillGroupRef,
-      showSelectedOptions,
       wrapperListRef,
-      setShowSelectedOptions,
       setHasFocus,
       setFocusOptionIdx,
       scrollOptionIntoView,
@@ -101,7 +91,8 @@ const useComboBox = (props) => {
       setShowPopover,
       internalRef,
       correctOptions,
-      instanceUid
+      instanceUid,
+      optionsPerSection
     }),
     [
       scrollOptionIntoView,
@@ -109,21 +100,18 @@ const useComboBox = (props) => {
       correctOptions,
       hasFocus,
       propsWithDefaults,
-      virtualListHelpers,
       inputValue,
       focusOptionIdx,
       wrapperListRef,
-      showSelectedOptions,
       menuState,
       pillGroupRef,
       referenceElement,
       selectedOptionsRef,
       controlsWrapperRef,
-      selectAllCheckboxRef,
-      toggleSelectionButtonRef,
       listRef,
       internalRef,
-      instanceUid
+      instanceUid,
+      optionsPerSection
     ]
   );
   return ctx;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useComboBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual, type ScrollToIndexOptions } from 'react-virtual';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useMakeMutable } from './useMakeMutable.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  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 { 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  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    [onMenuChange, applyAriaDisabled],\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: ScrollToIndexOptions = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  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  const correctOptionsRef = useMakeMutable(correctOptions);\n\n  // focus first option when typing\n  useEffect(() => {\n    setFocusOptionIdx(correctOptionsRef.current?.[0]?.dsId ?? '');\n  }, [correctOptionsRef, inputValue]);\n\n  useEffect(() => {\n    if (!showPopover) {\n      setFocusOptionIdx('');\n      setShowSelectedOptions(false);\n    }\n  }, [showPopover]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults },\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      correctOptions,\n      instanceUid,\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      instanceUid,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { uid } from 'uid';\nimport { type DSFastListT } from '@elliemae/ds-fast-list';\n\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 { DSComboBoxName } from '../theming.js';\nimport { getFirstOption, isSelectedValueEmpty } from '../utils/listHelper.js';\nimport { useCorrectOptions } from './useCorrectOptions.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 wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { id, selectedValues, isMenuOpen, onMenuChange, applyAriaDisabled } = propsWithDefaults;\n\n  const instanceUid = useMemo(() => id || uid(5), [id]);\n\n  const menuState = useMemo(() => {\n    if (isMenuOpen !== undefined) return isMenuOpen;\n    return showPopover;\n  }, [showPopover, isMenuOpen]);\n\n  // ---------------------------------------------------------------------------\n  // Options with creatable option + filtered by selected\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue);\n\n  const optionsPerSection = useOptionsPerSection(correctOptions);\n\n  const actionRef: DSComboboxT.ActionRefVirtualized = {\n    scrollTo: () => {},\n  };\n\n  const listRef = useRef<DSComboboxT.ActionRefVirtualized>(actionRef);\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: DSFastListT.ScrollToOptions = { align: 'center' } as DSFastListT.ScrollToOptions) => {\n      listRef.current.scrollTo(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        opts,\n      );\n      requestAnimationFrame(() => {\n        listRef.current.scrollTo(\n          correctOptions.findIndex((opt) => opt.dsId === dsId),\n          opts,\n        );\n      });\n    },\n    [correctOptions],\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      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      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      menuState,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      listRef,\n      internalRef,\n      instanceUid,\n      optionsPerSection,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/config/useCorrectOptions.js

@@ -2,9 +2,9 @@ import * as React from "react";
 import { useMemo } from "react";
 import { uid } from "uid";
 import { MENU_OPTION_TYPES } from "../constants.js";
-import { selectedValuesWithSections, filterOptions } from "../utils/listHelper.js";
-const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
-  const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;
+import { filterOptions } from "../utils/listHelper.js";
+const useCorrectOptions = (propsWithDefaults, inputValue) => {
+  const { filteredOptions, allOptions, onCreate } = propsWithDefaults;
   return useMemo(() => {
     let correctAllOptions = allOptions;
     if (allOptions?.every((option) => typeof option === "string")) {
@@ -16,9 +16,6 @@ const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) =
       }));
     }
     const correctFilterOptions = filteredOptions ?? filterOptions(inputValue, correctAllOptions);
-    if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
-      return selectedValuesWithSections(correctFilterOptions, selectedValues);
-    }
     if (onCreate && inputValue && correctFilterOptions.findIndex(
       (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue
     ) === -1) {
@@ -32,7 +29,7 @@ const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) =
       return [creatableItem, ...correctFilterOptions];
     }
     return correctFilterOptions;
-  }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);
+  }, [filteredOptions, allOptions, onCreate, inputValue]);
 };
 export {
   useCorrectOptions

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCorrectOptions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nimport { selectedValuesWithSections, filterOptions } from '../utils/listHelper.js';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n  const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n  return useMemo(() => {\n    let correctAllOptions = allOptions;\n    if (allOptions?.every((option) => typeof option === 'string')) {\n      correctAllOptions = allOptions.map((option, index) => ({\n        dsId: index.toString(),\n        label: option as unknown as string,\n        type: MENU_OPTION_TYPES.OPTION,\n        value: option as unknown as string,\n      }));\n    }\n    const correctFilterOptions = filteredOptions ?? filterOptions(inputValue, correctAllOptions);\n    // when show selected toggle is on we return the selected value only as filteredOptions prop\n    if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return selectedValuesWithSections(correctFilterOptions, selectedValues);\n    }\n\n    // whether oncreate is passed we add as first option the creatable action based on input value string\n    if (\n      onCreate &&\n      inputValue &&\n      correctFilterOptions.findIndex(\n        (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue,\n      ) === -1\n    ) {\n      const creatableUuid = uid();\n      const creatableItem: DSComboboxT.ItemCreatableOption = {\n        dsId: `creatable-${creatableUuid}`,\n        label: inputValue,\n        type: 'creatable',\n        'aria-describedby': `aria-creatable`,\n      };\n\n      return [creatableItem, ...correctFilterOptions];\n    }\n\n    return correctFilterOptions;\n  }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);\n};\n\nexport { useCorrectOptions };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe;AACxB,SAAS,WAAW;AAEpB,SAAS,yBAAyB;AAClC,SAAS,4BAA4B,qBAAqB;AAC1D,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,SAAS,IAAI;AAElE,SAAO,QAAQ,MAAM;AACnB,QAAI,oBAAoB;AACxB,QAAI,YAAY,MAAM,CAAC,WAAW,OAAO,WAAW,QAAQ,GAAG;AAC7D,0BAAoB,WAAW,IAAI,CAAC,QAAQ,WAAW;AAAA,QACrD,MAAM,MAAM,SAAS;AAAA,QACrB,OAAO;AAAA,QACP,MAAM,kBAAkB;AAAA,QACxB,OAAO;AAAA,MACT,EAAE;AAAA,IACJ;AACA,UAAM,uBAAuB,mBAAmB,cAAc,YAAY,iBAAiB;AAE3F,QAAI,uBAAuB,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AACrF,aAAO,2BAA2B,sBAAsB,cAAc;AAAA,IACxE;AAGA,QACE,YACA,cACA,qBAAqB;AAAA,MACnB,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,OAAO,UAAU;AAAA,IAC3E,MAAM,IACN;AACA,YAAM,gBAAgB,IAAI;AAC1B,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa,aAAa;AAAA,QAChC,OAAO;AAAA,QACP,MAAM;AAAA,QACN,oBAAoB;AAAA,MACtB;AAEA,aAAO,CAAC,eAAe,GAAG,oBAAoB;AAAA,IAChD;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,YAAY,qBAAqB,gBAAgB,UAAU,UAAU,CAAC;AAC7F;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nimport { filterOptions } from '../utils/listHelper.js';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string) => {\n  const { filteredOptions, allOptions, onCreate } = propsWithDefaults;\n\n  return useMemo(() => {\n    let correctAllOptions = allOptions;\n    if (allOptions?.every((option) => typeof option === 'string')) {\n      correctAllOptions = allOptions.map((option, index) => ({\n        dsId: index.toString(),\n        label: option as unknown as string,\n        type: MENU_OPTION_TYPES.OPTION,\n        value: option as unknown as string,\n      }));\n    }\n    const correctFilterOptions = filteredOptions ?? filterOptions(inputValue, correctAllOptions);\n\n    // whether oncreate is passed we add as first option the creatable action based on input value string\n    if (\n      onCreate &&\n      inputValue &&\n      correctFilterOptions.findIndex(\n        (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue,\n      ) === -1\n    ) {\n      const creatableUuid = uid();\n      const creatableItem: DSComboboxT.ItemCreatableOption = {\n        dsId: `creatable-${creatableUuid}`,\n        label: inputValue,\n        type: 'creatable',\n        'aria-describedby': `aria-creatable`,\n      };\n\n      return [creatableItem, ...correctFilterOptions];\n    }\n\n    return correctFilterOptions;\n  }, [filteredOptions, allOptions, onCreate, inputValue]);\n};\n\nexport { useCorrectOptions };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe;AACxB,SAAS,WAAW;AAEpB,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAC9B,MAAM,oBAAoB,CAAC,mBAAsC,eAAuB;AACtF,QAAM,EAAE,iBAAiB,YAAY,SAAS,IAAI;AAElD,SAAO,QAAQ,MAAM;AACnB,QAAI,oBAAoB;AACxB,QAAI,YAAY,MAAM,CAAC,WAAW,OAAO,WAAW,QAAQ,GAAG;AAC7D,0BAAoB,WAAW,IAAI,CAAC,QAAQ,WAAW;AAAA,QACrD,MAAM,MAAM,SAAS;AAAA,QACrB,OAAO;AAAA,QACP,MAAM,kBAAkB;AAAA,QACxB,OAAO;AAAA,MACT,EAAE;AAAA,IACJ;AACA,UAAM,uBAAuB,mBAAmB,cAAc,YAAY,iBAAiB;AAG3F,QACE,YACA,cACA,qBAAqB;AAAA,MACnB,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,OAAO,UAAU;AAAA,IAC3E,MAAM,IACN;AACA,YAAM,gBAAgB,IAAI;AAC1B,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa,aAAa;AAAA,QAChC,OAAO;AAAA,QACP,MAAM;AAAA,QACN,oBAAoB;AAAA,MACtB;AAEA,aAAO,CAAC,eAAe,GAAG,oBAAoB;AAAA,IAChD;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,YAAY,UAAU,UAAU,CAAC;AACxD;",
   "names": []
 }

package/dist/esm/config/useOptionsPerSection.js

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

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

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

package/dist/esm/parts/DropdownIndicator.js

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

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

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

package/dist/esm/parts/Section.js

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

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

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

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

@@ -1,17 +1,20 @@
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useCallback, useMemo, useEffect, useContext } from "react";
 import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
+import { mergeRefs } from "@elliemae/ds-system";
+import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
 import ComboBoxContext from "../../ComboBoxCTX.js";
 import { StyledContainer, StyledPopperWrapper } from "./styled.js";
 import { Controls } from "../controls/index.js";
 import { MenuList } from "../menu-list/index.js";
 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 { inline, startPlacementPreference, placementOrderPreference, withoutPortal, applyAriaDisabled } = props;
+  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);
   const correctZIndex = zIndex ? parseInt(zIndex, 10) : void 0;
@@ -32,43 +35,51 @@ const Container = () => {
       window.removeEventListener("blur", closeMenuOnWindowBlur);
     };
   }, [menuState, setMenuState]);
-  return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-      StyledContainer,
-      {
-        "data-testid": dataTestId ?? ComboboxDataTestid.CONTAINER,
-        innerRef: setReferenceElement,
-        className,
-        applyAriaDisabled,
-        ...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(
-              DSPopperJS,
-              {
-                customOffset: [0, 5],
-                referenceElement,
-                showPopover: menuState,
-                closeContextMenu: handleCloseMenu,
-                startPlacementPreference,
-                placementOrderPreference,
-                withoutPortal,
-                withoutArrow: true,
-                withoutAnimation: true,
-                zIndex: correctZIndex,
-                children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ jsx(MenuList, {}) })
-              }
-            ) : null
-          ] })
-        ]
-      }
-    ) })
+  const config = useMemo(
+    () => ({
+      placement: "bottom",
+      withoutAnimation: true,
+      startPlacementPreference,
+      placementOrderPreference,
+      zIndex: correctZIndex,
+      customOffset: [0, 5],
+      handleCloseMenu,
+      portalDOMContainer: document.body,
+      externallyControlledIsOpen: menuState
+    }),
+    [startPlacementPreference, placementOrderPreference, correctZIndex, handleCloseMenu, menuState]
+  );
+  const { refs, floatingStyles, context } = useFloatingContext(config);
+  const comboboxRef = mergeRefs(setReferenceElement, refs.setReference);
+  const hideTooltip = useCallback(() => {
+    setMenuState(false, "blur");
+  }, [setMenuState]);
+  useOnClickOutside(referenceElement, hideTooltip, refs.floating);
+  return /* @__PURE__ */ jsxs(
+    StyledContainer,
+    {
+      "data-testid": dataTestId ?? ComboboxDataTestid.CONTAINER,
+      innerRef: comboboxRef,
+      className,
+      applyAriaDisabled,
+      ...xStyledProps,
+      children: [
+        /* @__PURE__ */ jsx(LiveRegion, {}),
+        /* @__PURE__ */ jsx(Controls, {}),
+        menuState && inline ? /* @__PURE__ */ jsx(MenuList, {}) : null,
+        menuState && !inline && referenceElement ? /* @__PURE__ */ jsx(
+          FloatingWrapper,
+          {
+            innerRef: refs.setFloating,
+            floatingStyles,
+            isOpen: menuState,
+            context,
+            ...props.popperProps,
+            children: /* @__PURE__ */ jsx(StyledPopperWrapper, { tabIndex: -1, onMouseDown: handleMouseDown, applyAriaDisabled, children: /* @__PURE__ */ jsx(MenuList, {}) })
+          }
+        ) : null
+      ]
+    }
   );
 };
 export {

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, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\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';\n\nexport const Container = (): JSX.Element => {\n  const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n    useContext(ComboBoxContext);\n\n  const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, 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  return (\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    <>\n      <StyledContainer\n        data-testid={dataTestId ?? ComboboxDataTestid.CONTAINER}\n        innerRef={setReferenceElement}\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              <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={correctZIndex}\n              >\n                <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n                  <MenuList />\n                </StyledPopperWrapper>\n              </DSPopperJS>\n            ) : null}\n          </>\n        )}\n      </StyledContainer>\n    </>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuDf,SAGE,UAHF,KAGE,YAHF;AAtDR,SAAgB,aAAa,WAAW,kBAAkB;AAC1D,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,IACzF,WAAW,eAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,eAAe,kBAAkB,IAAI;AACzG,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;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,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAa;AAAA,gBACb,kBAAkB;AAAA,gBAClB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAY;AAAA,gBACZ,kBAAgB;AAAA,gBAChB,QAAQ;AAAA,gBAER,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    <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          {...props.popperProps}\n        >\n          <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown} applyAriaDisabled={applyAriaDisabled}>\n            <MenuList />\n          </StyledPopperWrapper>\n        </FloatingWrapper>\n      ) : null}\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyEnB,SAOE,KAPF;AAxEJ,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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,cAAW;AAAA,QACZ,oBAAC,YAAS;AAAA,QAET,aAAa,SAAS,oBAAC,YAAS,IAAK;AAAA,QACrC,aAAa,CAAC,UAAU,mBACvB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACC,GAAG,MAAM;AAAA,YAEV,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAAiB,mBAC/D,8BAAC,YAAS,GACZ;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "names": ["React"]
 }