@elliemae/ds-controlled-form 3.0.0-alpha.2 → 3.0.0-next.10

package/dist/esm/autocomplete/parts/menu-list/useMenuList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/autocomplete/parts/menu-list/useMenuList.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useContext } from 'react';\nimport { AutocompleteContext } from '../../AutocompleteCTX';\nimport type { CBItemOption } from '../../index.d';\n\nconst useMenuList = (): void => {\n  const {\n    props: { selectedValues, onMenuOpen, options },\n    inputRef,\n    setCurrentOption,\n    scrollOptionIntoView,\n    setShowPopover,\n    showPopover,\n  } = useContext(AutocompleteContext);\n\n  useEffect(() => {\n    if (options.length === 0 || inputRef.current?.value === '') {\n      setShowPopover(false);\n    }\n  }, [options, inputRef, setShowPopover]);\n\n  useEffect(() => {\n    const getFirstOption = () => {\n      for (let i = 0; i < options.length; i += 1)\n        if (!['section', 'separator'].includes(options[i].type)) {\n          setCurrentOption(options[i].dsId);\n          break;\n        }\n    };\n    if (showPopover) {\n      onMenuOpen();\n      if (inputRef.current?.value !== '') {\n        getFirstOption();\n      } else if (Array.isArray(selectedValues)) {\n        const multiSelectedValues = selectedValues as CBItemOption[];\n        if (multiSelectedValues.length > 0) {\n          setCurrentOption(multiSelectedValues[multiSelectedValues.length - 1].dsId);\n          scrollOptionIntoView(multiSelectedValues[multiSelectedValues.length - 1].dsId);\n        } else {\n          getFirstOption();\n        }\n      } else {\n        const singleSelectedValue = selectedValues as CBItemOption;\n        if (singleSelectedValue) {\n          setCurrentOption(selectedValues.dsId);\n          scrollOptionIntoView(selectedValues.dsId);\n        } else {\n          getFirstOption();\n        }\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, inputRef.current?.value]);\n};\n\nexport { useMenuList };\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,cAAc,MAAY;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAEf,YAAU,MAAM;AACd,QAAI,QAAQ,WAAW,KAAK,SAAS,SAAS,UAAU,IAAI;AAC1D,qBAAe;AAAA;AAAA,KAEhB,CAAC,SAAS,UAAU;AAEvB,YAAU,MAAM;AACd,UAAM,iBAAiB,MAAM;AAC3B,eAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,YAAI,CAAC,CAAC,WAAW,aAAa,SAAS,QAAQ,GAAG,OAAO;AACvD,2BAAiB,QAAQ,GAAG;AAC5B;AAAA;AAAA;AAGN,QAAI,aAAa;AACf;AACA,UAAI,SAAS,SAAS,UAAU,IAAI;AAClC;AAAA,iBACS,MAAM,QAAQ,iBAAiB;AACxC,cAAM,sBAAsB;AAC5B,YAAI,oBAAoB,SAAS,GAAG;AAClC,2BAAiB,oBAAoB,oBAAoB,SAAS,GAAG;AACrE,+BAAqB,oBAAoB,oBAAoB,SAAS,GAAG;AAAA,eACpE;AACL;AAAA;AAAA,aAEG;AACL,cAAM,sBAAsB;AAC5B,YAAI,qBAAqB;AACvB,2BAAiB,eAAe;AAChC,+BAAqB,eAAe;AAAA,eAC/B;AACL;AAAA;AAAA;AAAA;AAAA,KAKL,CAAC,aAAa,SAAS,SAAS;AAAA;",
+  "names": []
+}

package/dist/esm/autocomplete/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/autocomplete/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),\n  selectedValues: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.object),\n    PropTypes.object,\n    PropTypes.string,\n  ]).description('Array of option or single option selected'),\n  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n  onChange: PropTypes.func\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue(''),\n  onSelectAll: PropTypes.func\n    .description('function triggered when ALL button is selected from the header menu list')\n    .defaultValue(''),\n  onFilter: PropTypes.func.description('function triggered when user type in the autocomplete input').defaultValue(''),\n  onCreate: PropTypes.func\n    .description(\n      'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n    )\n    .defaultValue(''),\n  onClearAll: PropTypes.func\n    .description('function triggered when user select CLEAR button from the header menu list')\n    .defaultValue(''),\n  onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),\n  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  withToggle: PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false'),\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,aAAa,UAAU,OAAO,YAAY,6BAA6B,aAAa;AAAA,EACpF,SAAS,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,SAAS,YAAY,mBAAmB,aAAa;AAAA,EAC9G,gBAAgB,UAAU,UAAU;AAAA,IAClC,UAAU,QAAQ,UAAU;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY;AAAA,EACf,WAAW,UAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACnG,UAAU,UAAU,KAAK,YAAY,0CAA0C,aAAa;AAAA,EAC5F,UAAU,UAAU,KACjB,YAAY,mFACZ,aAAa;AAAA,EAChB,aAAa,UAAU,KACpB,YAAY,4EACZ,aAAa;AAAA,EAChB,UAAU,UAAU,KAAK,YAAY,+DAA+D,aAAa;AAAA,EACjH,UAAU,UAAU,KACjB,YACC,0GAED,aAAa;AAAA,EAChB,YAAY,UAAU,KACnB,YAAY,8EACZ,aAAa;AAAA,EAChB,YAAY,UAAU,KAAK,YAAY,mDAAmD,aAAa;AAAA,EACvG,eAAe,UAAU,IAAI,YAAY,oDAAoD,aAAa;AAAA,EAC1G,cAAc,UAAU,IAAI,YAAY,uCAAuC,aAAa;AAAA,EAC5F,eAAe,UAAU,IAAI,YAAY,wCAAwC,aAAa;AAAA,EAC9F,YAAY,UAAU,KAAK,YAAY,yCAAyC,aAAa;AAAA;",
+  "names": []
+}

package/dist/esm/autocomplete/react-desc-prop-types.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-props-helpers";
+function noop(..._args) {
+}
+const propTypes = {
+  placeholder: PropTypes.string.description("input s placeholder value").defaultValue(""),
+  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description("List of options").defaultValue([]),
+  value: PropTypes.oneOfType([PropTypes.string]).description("Array of option or single option selected"),
+  autoFocus: PropTypes.bool.description("Whether the combo box uses auto focus or not").defaultValue("false"),
+  hasError: PropTypes.bool.description("Whether the combo box has error or not").defaultValue("false"),
+  onChange: PropTypes.func.description("function triggered when an option is selected it will send the options selected").defaultValue("")
+};
+export {
+  noop,
+  propTypes
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/autocomplete/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/autocomplete/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSMaskT } from '../mask-hook';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSAutocompleteT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    placeholder?: string;\n    autoFocus?: boolean;\n    onFilter?: (value: string) => void;\n  }\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    value: string;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    hasError: boolean;\n    withoutPortal: boolean;\n    zIndex: number;\n    disabled: boolean;\n    innerRef: React.RefObject<HTMLInputElement>;\n    inputProps: object;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const propTypes = {\n  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),\n  value: PropTypes.oneOfType([PropTypes.string]).description('Array of option or single option selected'),\n  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n  onChange: PropTypes.func\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue(''),\n};\n"],
+  "mappings": "AAAA;ACGA;AAEO,iBAAsC,OAAgB;AAAA;AAoDtD,MAAM,YAAY;AAAA,EACvB,aAAa,UAAU,OAAO,YAAY,6BAA6B,aAAa;AAAA,EACpF,SAAS,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,SAAS,YAAY,mBAAmB,aAAa;AAAA,EAC9G,OAAO,UAAU,UAAU,CAAC,UAAU,SAAS,YAAY;AAAA,EAC3D,WAAW,UAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACnG,UAAU,UAAU,KAAK,YAAY,0CAA0C,aAAa;AAAA,EAC5F,UAAU,UAAU,KACjB,YAAY,mFACZ,aAAa;AAAA;",
+  "names": []
+}

package/dist/esm/autocomplete/utils/hooks/useKeyboardNavigation.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { useCallback, useContext } from "react";
+import { AutocompleteContext } from "../../AutocompleteCTX";
+import { findInCircularList } from "../listHelper";
+const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type);
+const useKeyboardNavigation = () => {
+  const {
+    props: { onKeyDown, onChange, options, onFilter },
+    setShowPopover,
+    showPopover,
+    focusOptionIdx,
+    inputRef,
+    setCurrentOption,
+    scrollOptionIntoView
+  } = useContext(AutocompleteContext);
+  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);
+  const currentItem = options.find((item) => item.dsId === focusOptionIdx);
+  const selectOption = useCallback(() => {
+    if (inputRef.current)
+      inputRef.current.value = currentItem.label;
+    if (onFilter)
+      onFilter(currentItem.label);
+    onChange(currentItem.label);
+    setShowPopover(false);
+  }, [currentItem, setShowPopover, onFilter, inputRef, onChange]);
+  const onInputKeyDown = useCallback((e) => {
+    const targetElement = e.target;
+    onKeyDown(e, currentItem);
+    if (e.keyCode === 32 && targetElement.value === "" || e.key === "Enter") {
+      if (showPopover) {
+        e.preventDefault();
+        selectOption();
+      }
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (showPopover) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+      }
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (showPopover) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
+          setCurrentOption(options[nextItemIndex].dsId);
+          scrollOptionIntoView(options[nextItemIndex].dsId);
+        });
+      }
+    }
+    if (e.key === "Escape") {
+      setShowPopover(false);
+    }
+  }, [
+    scrollOptionIntoView,
+    currentItemIndex,
+    options,
+    currentItem,
+    showPopover,
+    onKeyDown,
+    setCurrentOption,
+    setShowPopover,
+    selectOption
+  ]);
+  return { onInputKeyDown };
+};
+export {
+  useKeyboardNavigation
+};
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/esm/autocomplete/utils/hooks/useKeyboardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/autocomplete/utils/hooks/useKeyboardNavigation.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport { CBOptionT } from '../../index.d';\nimport { AutocompleteContext } from '../../AutocompleteCTX';\nimport { findInCircularList } from '../listHelper';\n\nconst isOptionFocuseable = (opt: CBOptionT): boolean => !['section', 'separator'].includes(opt.type);\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: { onKeyDown, onChange, options, onFilter },\n    setShowPopover,\n    showPopover,\n    focusOptionIdx,\n    inputRef,\n    setCurrentOption,\n    scrollOptionIntoView,\n  } = useContext(AutocompleteContext);\n\n  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = options.find((item) => item.dsId === focusOptionIdx) as CBOptionT;\n  const selectOption = useCallback(() => {\n    if (inputRef.current) inputRef.current.value = currentItem.label;\n    if (onFilter) onFilter(currentItem.label);\n    onChange(currentItem.label);\n    setShowPopover(false);\n  }, [currentItem, setShowPopover, onFilter, inputRef, onChange]);\n\n  const onInputKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      const targetElement = e.target as HTMLInputElement;\n\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      onKeyDown(e, currentItem);\n\n      // =============================================================================\n      // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER\n      // =============================================================================\n      if ((e.keyCode === 32 && targetElement.value === '') || e.key === 'Enter') {\n        if (showPopover) {\n          e.preventDefault();\n          selectOption();\n        }\n      }\n\n      // =============================================================================\n      // ARROWS UP AND DOWN\n      // =============================================================================\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (showPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        } else {\n          setShowPopover(true);\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        if (showPopover) {\n          const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);\n          setCurrentOption(options[nextItemIndex].dsId);\n          scrollOptionIntoView(options[nextItemIndex].dsId);\n        } else {\n          setShowPopover(true);\n          setTimeout(() => {\n            const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);\n            setCurrentOption(options[nextItemIndex].dsId);\n            scrollOptionIntoView(options[nextItemIndex].dsId);\n          });\n        }\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        setShowPopover(false);\n      }\n    },\n    [\n      scrollOptionIntoView,\n      currentItemIndex,\n      options,\n      currentItem,\n      showPopover,\n      onKeyDown,\n      setCurrentOption,\n      setShowPopover,\n      selectOption,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n"],
+  "mappings": "AAAA;ACIA;AAEA;AACA;AAEA,MAAM,qBAAqB,CAAC,QAA4B,CAAC,CAAC,WAAW,aAAa,SAAS,IAAI;AAExF,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,UAAU,SAAS;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAEf,QAAM,mBAAmB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS;AACjE,QAAM,cAAc,QAAQ,KAAK,CAAC,SAAS,KAAK,SAAS;AACzD,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,SAAS;AAAS,eAAS,QAAQ,QAAQ,YAAY;AAC3D,QAAI;AAAU,eAAS,YAAY;AACnC,aAAS,YAAY;AACrB,mBAAe;AAAA,KACd,CAAC,aAAa,gBAAgB,UAAU,UAAU;AAErD,QAAM,iBAA6C,YACjD,CAAC,MAAM;AACL,UAAM,gBAAgB,EAAE;AAKxB,cAAU,GAAG;AAKb,QAAK,EAAE,YAAY,MAAM,cAAc,UAAU,MAAO,EAAE,QAAQ,SAAS;AACzE,UAAI,aAAa;AACf,UAAE;AACF;AAAA;AAAA;AAOJ,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE;AACF,UAAI,aAAa;AACf,cAAM,gBAAgB,mBAAmB,SAAS,kBAAkB;AACpE,yBAAiB,QAAQ,eAAe;AACxC,6BAAqB,QAAQ,eAAe;AAAA,aACvC;AACL,uBAAe;AAAA;AAAA;AAGnB,QAAI,EAAE,QAAQ,WAAW;AACvB,QAAE;AACF,UAAI,aAAa;AACf,cAAM,gBAAgB,mBAAmB,SAAS,kBAAkB,oBAAoB;AACxF,yBAAiB,QAAQ,eAAe;AACxC,6BAAqB,QAAQ,eAAe;AAAA,aACvC;AACL,uBAAe;AACf,mBAAW,MAAM;AACf,gBAAM,gBAAgB,mBAAmB,SAAS,GAAG,oBAAoB;AACzE,2BAAiB,QAAQ,eAAe;AACxC,+BAAqB,QAAQ,eAAe;AAAA;AAAA;AAAA;AAOlD,QAAI,EAAE,QAAQ,UAAU;AACtB,qBAAe;AAAA;AAAA,KAGnB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIJ,SAAO,EAAE;AAAA;",
+  "names": []
+}

package/dist/esm/autocomplete/utils/hooks/useOnElementResize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/autocomplete/utils/hooks/useOnElementResize.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nconst useOnElementResize = (targetRef: React.RefObject<HTMLDivElement>): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current ? targetRef.current?.offsetWidth : 0);\n  const [height, setHeight] = useState(targetRef.current ? targetRef.current?.offsetWidth : 0);\n  const observer = useRef(null);\n\n  useEffect(() => {\n    function outputsize() {\n      if (targetRef.current) {\n        setWidth(targetRef.current.offsetWidth);\n        setHeight(targetRef.current.offsetHeight);\n      }\n    }\n    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);\n\n    return () => {\n      observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n\nexport { useOnElementResize };\n"],
+  "mappings": "AAAA;ACAA;AAIA,MAAM,qBAAqB,CAAC,cAAmF;AAC7G,QAAM,CAAC,OAAO,YAAY,SAAS,UAAU,UAAU,UAAU,SAAS,cAAc;AACxF,QAAM,CAAC,QAAQ,aAAa,SAAS,UAAU,UAAU,UAAU,SAAS,cAAc;AAC1F,QAAM,WAAW,OAAO;AAExB,YAAU,MAAM;AACd,0BAAsB;AACpB,UAAI,UAAU,SAAS;AACrB,iBAAS,UAAU,QAAQ;AAC3B,kBAAU,UAAU,QAAQ;AAAA;AAAA;AAGhC,aAAS,UAAU,IAAI,eAAe,YAAY,QAAQ,UAAU;AAEpE,WAAO,MAAM;AACX,eAAS,SAAS;AAAA;AAAA,KAEnB,CAAC;AAEJ,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,MAEF,CAAC,OAAO;AAAA;",
+  "names": []
+}

package/dist/esm/autocomplete/utils/listHelper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/autocomplete/utils/listHelper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { CBOptionsT, CBOptionT } from '../index.d';\n\nexport const getSelectableOptions = (options: Array<CBOptionT>): Array<CBOptionT> =>\n  options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<CBOptionT>): Array<CBOptionT> =>\n  options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (value: CBOptionT | Array<CBOptionT>): boolean =>\n  Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: CBOptionT | Array<CBOptionT>): boolean => Array.isArray(value);\n\nexport const isSelected = (value: CBOptionsT, activeOption: CBOptionT): boolean => {\n  if (isSelectedValueMultiple(value)) {\n    const multiValue = value as CBOptionT[];\n    return multiValue.some((item) => item?.value === activeOption?.value);\n  }\n  if (typeof value === 'string') {\n    return false;\n  }\n  const singleValue = value as CBOptionT;\n  return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = <T extends unknown>(\n  list: T[],\n  from: number,\n  criteria: (item: T) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n"],
+  "mappings": "AAAA;ACEO,MAAM,uBAAuB,CAAC,YACnC,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,YAAY;AAEhF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY;AAE5D,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,SAAS,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ;AAEhG,MAAM,aAAa,CAAC,OAAmB,iBAAqC;AACjF,MAAI,wBAAwB,QAAQ;AAClC,UAAM,aAAa;AACnB,WAAO,WAAW,KAAK,CAAC,SAAS,MAAM,UAAU,cAAc;AAAA;AAEjE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA;AAET,QAAM,cAAc;AACpB,SAAO,aAAa,UAAU,aAAa;AAAA;AAGtC,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WAAS,IAAK,QAAO,OAAO,KAAK,UAAU,KAAK,QAAQ,MAAM,MAAM,IAAK,KAAI,OAAO,KAAK,UAAU,KAAK,QAAQ;AAC9G,QAAI,SAAS,KAAK;AAAK,aAAO;AAAA;AAEhC,SAAO;AAAA;",
+  "names": []
+}

package/dist/esm/checkbox/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/checkbox/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from '@elliemae/ds-common/ControlledCheckbox';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/dist/esm/checkbox/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/checkbox/react-desc-prop-types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { GlobalAttributesT, PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSControlledCheckboxT {\n  export interface DefaultProps {\n    checked: boolean | 'mixed';\n    tabIndex?: number;\n    hasError?: boolean;\n    'data-testid'?: string;\n  }\n\n  export interface OptionalProps {\n    innerRef: React.RefObject<HTMLInputElement> | React.LegacyRef<HTMLInputElement>;\n  }\n\n  export interface LegacyAriaProps {\n    ariaControls?: string;\n    ariaLabel?: string;\n  }\n\n  export interface Props extends DefaultProps, OptionalProps, Omit<GlobalAttributesT, 'checked'>, LegacyAriaProps {}\n\n  export interface StyledCheckBoxT {\n    checked: boolean | 'mixed';\n    readOnly?: boolean;\n    hasError?: boolean;\n    disabled?: boolean;\n  }\n\n  export interface StyledLabelT {\n    disabled?: boolean;\n    readOnly?: boolean;\n    checked: boolean | 'mixed';\n  }\n}\n\nexport const defaultProps: Partial<DSControlledCheckboxT.Props> = {\n  hasError: false,\n  tabIndex: undefined,\n  checked: false,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  label: PropTypes.string.description(\n    'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n  ),\n  hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AAkCO,MAAM,eAAqD;AAAA,EAChE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA;AAGJ,MAAM,YAAY,iCACpB,4BADoB;AAAA,EAEvB,OAAO,UAAU,OAAO,YACtB;AAAA,EAEF,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,SAAS,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/combobox/ComboBox.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import React2 from "react";
+import { describe } from "@elliemae/ds-props-helpers";
+import { useComboBox } from "./config/useComboBox";
+import { Container } from "./parts/container";
+import { ComboBoxContext } from "./ComboBoxCTX";
+import { ComboboxPropTypes } from "./react-desc-prop-types";
+const DSComboBox = (props) => {
+  const ctx = useComboBox(props);
+  return /* @__PURE__ */ React2.createElement(ComboBoxContext.Provider, {
+    value: ctx
+  }, /* @__PURE__ */ React2.createElement(Container, null));
+};
+DSComboBox.propTypes = ComboboxPropTypes;
+const DSComboBoxWithSchema = describe(DSComboBox);
+DSComboBoxWithSchema.propTypes = ComboboxPropTypes;
+export {
+  DSComboBox,
+  DSComboBox as DSComboBoxV3,
+  DSComboBoxWithSchema
+};
+//# sourceMappingURL=ComboBox.js.map

package/dist/esm/combobox/ComboBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/combobox/ComboBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useComboBox } from './config/useComboBox';\nimport { Container } from './parts/container';\nimport { ComboBoxContext } from './ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from './react-desc-prop-types';\n\nconst DSComboBox: React.ComponentType<DSComboboxT.Props> = (props) => {\n  const ctx = useComboBox(props);\n  return (\n    <ComboBoxContext.Provider value={ctx}>\n      <Container />\n    </ComboBoxContext.Provider>\n  );\n};\nDSComboBox.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,MAAM,YAAY;AACxB,SACE,qCAAC,gBAAgB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAC/B,qCAAC,WAAD;AAAA;AAIN,WAAW,YAAY;AACvB,MAAM,uBAAuB,SAAS;AAEtC,qBAAqB,YAAY;",
+  "names": []
+}

package/dist/esm/combobox/ComboBoxCTX.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { createContext, createRef } from "react";
+function noop(..._args) {
+}
+const defaultProps = {
+  hasError: false,
+  inline: false,
+  withoutPortal: true,
+  zIndex: 10,
+  disabled: false,
+  useMask: noop,
+  innerRef: createRef(),
+  startPlacementPreference: "bottom-start",
+  placementOrderPreference: ["bottom-start", "bottom-end"]
+};
+const defaultContext = {
+  props: defaultProps,
+  showPopover: false,
+  hasFocus: false,
+  referenceElement: null,
+  inputValue: "",
+  focusOptionIdx: "",
+  showSelectedOptions: false,
+  pillGroupRef: createRef(),
+  listRef: createRef(),
+  wrapperListRef: createRef(),
+  controlsWrapperRef: createRef(),
+  selectedOptionsRef: createRef(),
+  selectAllCheckboxRef: createRef(),
+  toggleSelectionButtonRef: createRef(),
+  setShowPopover: noop,
+  scrollOptionIntoView: noop,
+  setHasFocus: noop,
+  setInputValue: noop,
+  setReferenceElement: noop,
+  setFocusOptionIdx: noop,
+  setShowSelectedOptions: noop
+};
+const ComboBoxContext = createContext(defaultContext);
+var ComboBoxCTX_default = ComboBoxContext;
+export {
+  ComboBoxContext,
+  ComboBoxCTX_default as default,
+  defaultProps,
+  noop
+};
+//# sourceMappingURL=ComboBoxCTX.js.map

package/dist/esm/combobox/ComboBoxCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/combobox/ComboBoxCTX.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { DSComboboxT } from './react-desc-prop-types';\nimport { DSComboboxInternalsT } from './sharedTypes';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n  hasError: false,\n  inline: false,\n  withoutPortal: true,\n  zIndex: 10,\n  disabled: false,\n  useMask: noop,\n  innerRef: createRef(),\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'bottom-end'],\n  // override in useCombobox to avoid ref duplications when more than one cb is used\n};\n\nconst defaultContext: DSComboboxInternalsT.ComboBoxContextT = {\n  props: defaultProps as DSComboboxT.InternalProps,\n  showPopover: false,\n  hasFocus: false,\n  referenceElement: null,\n  inputValue: '',\n  focusOptionIdx: '',\n  showSelectedOptions: false,\n  pillGroupRef: createRef<HTMLDivElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  selectAllCheckboxRef: createRef<HTMLInputElement>(),\n  toggleSelectionButtonRef: createRef<HTMLButtonElement>(),\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  setHasFocus: noop,\n  setInputValue: noop,\n  setReferenceElement: noop,\n  setFocusOptionIdx: noop,\n  setShowSelectedOptions: noop,\n};\n/** Context for cross component communication */\nexport const ComboBoxContext = createContext(defaultContext);\n\nexport default ComboBoxContext;\n"],
+  "mappings": "AAAA;ACAA;AAMO,iBAAsC,OAAgB;AAAA;AAEtD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB;AAAA;AAI7C,MAAM,iBAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,sBAAsB;AAAA,EACtB,0BAA0B;AAAA,EAC1B,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA;AAGnB,MAAM,kBAAkB,cAAc;AAE7C,IAAO,sBAAQ;",
+  "names": []
+}

package/dist/esm/combobox/ComboboxDataTestids.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const ComboboxDataTestid = {
+  MULTISELECT: {
+    SELECT_ALL_CHECKBOX: "combobox-select-all-checkbox",
+    SHOW_SELECTED_OPTIONS_TOGGLE: "combobox-selected-options-toggle"
+  },
+  CONTROLS_WRAPPER: "combobox-controls-wrapper",
+  CONTAINER: "combobox-container",
+  INPUT: "combobox-input",
+  LIST: "combobox-menu-list",
+  SELECTED_VALUES: "combobox-selected-values",
+  DROPDOWN: "combobox-dropdown-btn",
+  OPTION: "combobox-option",
+  ALLY_SELECTED_VALUES: "combobox-ally-selected-values"
+};
+export {
+  ComboboxDataTestid
+};
+//# sourceMappingURL=ComboboxDataTestids.js.map

package/dist/esm/combobox/ComboboxDataTestids.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/combobox/ComboboxDataTestids.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const ComboboxDataTestid = {\n  MULTISELECT: {\n    SELECT_ALL_CHECKBOX: 'combobox-select-all-checkbox',\n    SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle',\n  },\n  CONTROLS_WRAPPER: 'combobox-controls-wrapper',\n  CONTAINER: 'combobox-container',\n  INPUT: 'combobox-input',\n  LIST: 'combobox-menu-list',\n  SELECTED_VALUES: 'combobox-selected-values',\n  DROPDOWN: 'combobox-dropdown-btn',\n  OPTION: 'combobox-option',\n  ALLY_SELECTED_VALUES: 'combobox-ally-selected-values',\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,qBAAqB;AAAA,EAChC,aAAa;AAAA,IACX,qBAAqB;AAAA,IACrB,8BAA8B;AAAA;AAAA,EAEhC,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,sBAAsB;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,114 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { useMemo, useState, useRef, useCallback, useEffect } from "react";
+import { useVirtual } from "react-virtual";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { defaultProps } from "../ComboBoxCTX";
+import { ComboboxPropTypes } from "../react-desc-prop-types";
+import { useCorrectOptions } from "./useCorrectOptions";
+import { getFirstOption } from "../utils/listHelper";
+const useComboBox = (props) => {
+  const defaultPropsWithInnerRef = __spreadProps(__spreadValues({}, defaultProps), {
+    innerRef: useRef(null)
+  });
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);
+  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);
+  const [showPopover, setShowPopover] = useState(false);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [showSelectedOptions, setShowSelectedOptions] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [hasFocus, setHasFocus] = useState(false);
+  const 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 { selectedValues } = propsWithDefaults;
+  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);
+  const virtualListHelpers = useVirtual({
+    size: correctOptions.length,
+    parentRef: listRef,
+    overscan: 15,
+    paddingStart: 0
+  });
+  const scrollOptionIntoView = useCallback((dsId, opts = { align: "center" }) => {
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex((opt) => opt.dsId === dsId), opts);
+  }, [correctOptions, virtualListHelpers]);
+  const [focusOptionIdx, setFocusOptionIdx] = useState("");
+  useEffect(() => {
+    if (hasFocus && (focusOptionIdx === "" || inputValue !== "" || showSelectedOptions)) {
+      const focusedValue = getFirstOption(correctOptions, selectedValues, inputValue);
+      setFocusOptionIdx(focusedValue);
+      scrollOptionIntoView(focusedValue, { align: "center" });
+    }
+    if (!hasFocus)
+      setFocusOptionIdx("");
+  }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
+  const ctx = useMemo(() => ({
+    props: __spreadProps(__spreadValues({}, propsWithDefaults), { options: correctOptions }),
+    virtualListHelpers,
+    showPopover,
+    referenceElement,
+    listRef,
+    focusOptionIdx,
+    selectedOptionsRef,
+    controlsWrapperRef,
+    selectAllCheckboxRef,
+    inputValue,
+    setInputValue,
+    hasFocus,
+    toggleSelectionButtonRef,
+    pillGroupRef,
+    showSelectedOptions,
+    wrapperListRef,
+    setShowSelectedOptions,
+    setHasFocus,
+    setFocusOptionIdx,
+    scrollOptionIntoView,
+    setReferenceElement,
+    setShowPopover
+  }), [
+    scrollOptionIntoView,
+    correctOptions,
+    hasFocus,
+    propsWithDefaults,
+    virtualListHelpers,
+    inputValue,
+    focusOptionIdx,
+    wrapperListRef,
+    showSelectedOptions,
+    showPopover,
+    pillGroupRef,
+    referenceElement,
+    selectedOptionsRef,
+    controlsWrapperRef,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef,
+    listRef
+  ]);
+  return ctx;
+};
+export {
+  useComboBox
+};
+//# sourceMappingURL=useComboBox.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/combobox/config/useComboBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX';\nimport { DSComboboxT, ComboboxPropTypes } from '../react-desc-prop-types';\nimport { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n  const defaultPropsWithInnerRef = {\n    ...defaultProps,\n    innerRef: useRef(null),\n  };\n\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n  useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes);\n  const [showPopover, setShowPopover] = useState<boolean>(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n  const [inputValue, setInputValue] = useState<string>('');\n  const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const wrapperListRef = useRef<HTMLDivElement>(null);\n\n  const selectedOptionsRef = useRef<HTMLDivElement>(null);\n  const controlsWrapperRef = useRef<HTMLDivElement>(null);\n  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n  const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n  const pillGroupRef = useRef<HTMLDivElement>(null);\n\n  const { selectedValues } = propsWithDefaults;\n  // ---------------------------------------------------------------------------\n  // Menu Options with/out selected filter and creatable functionality\n  // ---------------------------------------------------------------------------\n\n  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n\n  const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n    size: correctOptions.length,\n    parentRef: listRef,\n    overscan: 15,\n    paddingStart: 0,\n  });\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts = { align: 'center' }) => {\n      virtualListHelpers.scrollToIndex(\n        correctOptions.findIndex((opt) => opt.dsId === dsId),\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        opts,\n      );\n    },\n    [correctOptions, virtualListHelpers],\n  );\n\n  // ===========================================================================\n  // Init focused option when opening the menu list\n  // ===========================================================================\n\n  const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n  useEffect(() => {\n    // we are updating the focus option only when we have focus on the input and\n    // we are in the selected option view or we are typing to force first option always\n    if (hasFocus && (focusOptionIdx === '' || inputValue !== '' || showSelectedOptions)) {\n      const focusedValue = getFirstOption(correctOptions, selectedValues, inputValue);\n      setFocusOptionIdx(focusedValue);\n      scrollOptionIntoView(focusedValue, { align: 'center' });\n    }\n    if (!hasFocus) setFocusOptionIdx('');\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);\n\n  const ctx = useMemo(\n    () => ({\n      props: { ...propsWithDefaults, options: correctOptions },\n      virtualListHelpers,\n      showPopover,\n      referenceElement,\n      listRef,\n      focusOptionIdx,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      inputValue,\n      setInputValue,\n      hasFocus,\n      toggleSelectionButtonRef,\n      pillGroupRef,\n      showSelectedOptions,\n      wrapperListRef,\n      setShowSelectedOptions,\n      setHasFocus,\n      setFocusOptionIdx,\n      scrollOptionIntoView,\n      setReferenceElement,\n      setShowPopover,\n    }),\n    [\n      scrollOptionIntoView,\n      correctOptions,\n      hasFocus,\n      propsWithDefaults,\n      virtualListHelpers,\n      inputValue,\n      focusOptionIdx,\n      wrapperListRef,\n      showSelectedOptions,\n      showPopover,\n      pillGroupRef,\n      referenceElement,\n      selectedOptionsRef,\n      controlsWrapperRef,\n      selectAllCheckboxRef,\n      toggleSelectionButtonRef,\n      listRef,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACIA;AACA;AACA;AACA;AACA;AAEA;AACA;AACO,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,2BAA2B,iCAC5B,eAD4B;AAAA,IAE/B,UAAU,OAAO;AAAA;AAGnB,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA+B,mBAAmB;AAClD,QAAM,CAAC,aAAa,kBAAkB,SAAkB;AACxD,QAAM,CAAC,kBAAkB,uBAAuB,SAA6B;AAC7E,QAAM,CAAC,qBAAqB,0BAA0B,SAAkB;AAExE,QAAM,CAAC,YAAY,iBAAiB,SAAiB;AACrD,QAAM,CAAC,UAAU,eAAe,SAAkB;AAElD,QAAM,UAAU,OAAuB;AACvC,QAAM,iBAAiB,OAAuB;AAE9C,QAAM,qBAAqB,OAAuB;AAClD,QAAM,qBAAqB,OAAuB;AAClD,QAAM,uBAAuB,OAAyB;AACtD,QAAM,2BAA2B,OAA0B;AAC3D,QAAM,eAAe,OAAuB;AAE5C,QAAM,EAAE,mBAAmB;AAK3B,QAAM,iBAAiB,kBAAkB,mBAAmB,YAAY;AAMxE,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,eAAe;AAAA,IACrB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA;AAMhB,QAAM,uBAAuB,YAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,eAAe;AAC5C,uBAAmB,cACjB,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,OAE/C;AAAA,KAGJ,CAAC,gBAAgB;AAOnB,QAAM,CAAC,gBAAgB,qBAAqB,SAAiB;AAE7D,YAAU,MAAM;AAGd,QAAI,YAAa,oBAAmB,MAAM,eAAe,MAAM,sBAAsB;AACnF,YAAM,eAAe,eAAe,gBAAgB,gBAAgB;AACpE,wBAAkB;AAClB,2BAAqB,cAAc,EAAE,OAAO;AAAA;AAE9C,QAAI,CAAC;AAAU,wBAAkB;AAAA,KAEhC,CAAC,aAAa,UAAU,gBAAgB,gBAAgB;AAE3D,QAAM,MAAM,QACV,MAAO;AAAA,IACL,OAAO,iCAAK,oBAAL,EAAwB,SAAS;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIJ,SAAO;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { useMemo, useCallback } from "react";
+import { uid } from "uid";
+import { MENU_OPTION_TYPES } from "../constants";
+const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
+  const { options, selectedValues, onCreate } = propsWithDefaults;
+  const selectedValuesWithSections = useCallback(() => {
+    const multiSelectedValue = selectedValues;
+    const items = [];
+    options.forEach((option) => {
+      const isSelectedValue = multiSelectedValue.find((item) => item.dsId === option.dsId);
+      if (isSelectedValue) {
+        items.push(option);
+      }
+      if (option.type === MENU_OPTION_TYPES.SECTION) {
+        if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
+          items[items.length - 1] = option;
+        } else {
+          items.push(option);
+        }
+      }
+    });
+    if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
+      items.pop();
+    }
+    return items;
+  }, [options, selectedValues]);
+  const correctOptions = useMemo(() => {
+    if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
+      return selectedValuesWithSections();
+    }
+    if (onCreate && inputValue && options.findIndex((option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
+      const creatableUuid = uid();
+      const creatableItem = {
+        dsId: `creatable-${creatableUuid}`,
+        label: inputValue,
+        type: "creatable"
+      };
+      return [creatableItem, ...options];
+    }
+    return options;
+  }, [options, onCreate, inputValue, selectedValuesWithSections, selectedValues, showSelectedOptions]);
+  return correctOptions;
+};
+export {
+  useCorrectOptions
+};
+//# sourceMappingURL=useCorrectOptions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/combobox/config/useCorrectOptions.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n  const { options, selectedValues, onCreate } = propsWithDefaults;\n  const selectedValuesWithSections = useCallback(() => {\n    const multiSelectedValue = selectedValues as DSComboboxT.OptionTypes[];\n    const items = [] as DSComboboxT.OptionTypes[];\n\n    options.forEach((option) => {\n      const isSelectedValue = multiSelectedValue.find((item) => item.dsId === option.dsId);\n      if (isSelectedValue) {\n        items.push(option);\n      }\n\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n          items[items.length - 1] = option;\n        } else {\n          items.push(option);\n        }\n      }\n    });\n    if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n      items.pop();\n    }\n\n    return items;\n  }, [options, selectedValues]);\n\n  const correctOptions = useMemo(() => {\n    if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return selectedValuesWithSections();\n    }\n    if (\n      onCreate &&\n      inputValue &&\n      options.findIndex((option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1\n    ) {\n      const creatableUuid = uid();\n      const creatableItem: DSComboboxT.ItemCreatableOption = {\n        dsId: `creatable-${creatableUuid}`,\n        label: inputValue,\n        type: 'creatable',\n      };\n      return [creatableItem, ...options];\n    }\n    return options;\n  }, [options, onCreate, inputValue, selectedValuesWithSections, selectedValues, showSelectedOptions]);\n\n  return correctOptions;\n};\n\nexport { useCorrectOptions };\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AACA,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,SAAS,gBAAgB,aAAa;AAC9C,QAAM,6BAA6B,YAAY,MAAM;AACnD,UAAM,qBAAqB;AAC3B,UAAM,QAAQ;AAEd,YAAQ,QAAQ,CAAC,WAAW;AAC1B,YAAM,kBAAkB,mBAAmB,KAAK,CAAC,SAAS,KAAK,SAAS,OAAO;AAC/E,UAAI,iBAAiB;AACnB,cAAM,KAAK;AAAA;AAGb,UAAI,OAAO,SAAS,kBAAkB,SAAS;AAC7C,YAAI,MAAM,MAAM,SAAS,IAAI,SAAS,kBAAkB,SAAS;AAC/D,gBAAM,MAAM,SAAS,KAAK;AAAA,eACrB;AACL,gBAAM,KAAK;AAAA;AAAA;AAAA;AAIjB,QAAI,MAAM,MAAM,SAAS,IAAI,SAAS,kBAAkB,SAAS;AAC/D,YAAM;AAAA;AAGR,WAAO;AAAA,KACN,CAAC,SAAS;AAEb,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,uBAAuB,MAAM,QAAQ,mBAAmB,eAAe,SAAS,GAAG;AACrF,aAAO;AAAA;AAET,QACE,YACA,cACA,QAAQ,UAAU,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,OAAO,UAAU,gBAAgB,IAC3G;AACA,YAAM,gBAAgB;AACtB,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa;AAAA,QACnB,OAAO;AAAA,QACP,MAAM;AAAA;AAER,aAAO,CAAC,eAAe,GAAG;AAAA;AAE5B,WAAO;AAAA,KACN,CAAC,SAAS,UAAU,YAAY,4BAA4B,gBAAgB;AAE/E,SAAO;AAAA;",
+  "names": []
+}

package/dist/esm/combobox/constants.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+const MENU_OPTION_TYPES = {
+  OPTION: "option",
+  SECTION: "section",
+  SEPARATOR: "separator"
+};
+const INTERNAL_MENU_OPTION_TYPES = {
+  CREATABLE: "creatable"
+};
+export {
+  INTERNAL_MENU_OPTION_TYPES,
+  MENU_OPTION_TYPES
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/combobox/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/combobox/constants.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const MENU_OPTION_TYPES = {\n  OPTION: 'option' as const,\n  SECTION: 'section' as const,\n  SEPARATOR: 'separator' as const,\n};\n\nexport const INTERNAL_MENU_OPTION_TYPES = {\n  CREATABLE: 'creatable' as const,\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,oBAAoB;AAAA,EAC/B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA;AAGN,MAAM,6BAA6B;AAAA,EACxC,WAAW;AAAA;",
+  "names": []
+}

package/dist/esm/combobox/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/combobox/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ComboBox';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}