@elliemae/ds-form 2.2.0-next.6 → 2.3.0-alpha.1

package/cjs/ComboBox/v3/parts/single-selected-value-container/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/ComboBox/v3/parts/single-selected-value-container/styled.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import styled from 'styled-components';\n\nexport const StyledSingleSelectedValue = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,4BAA4B,iCAAO;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/cjs/ComboBox/v3/propTypes.js

@@ -0,0 +1,52 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var propTypes_exports = {};
+__export(propTypes_exports, {
+  propTypes: () => propTypes
+});
+var React = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+const propTypes = {
+  placeholder: import_react_desc.PropTypes.string.description("input s placeholder value").defaultValue(""),
+  options: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.array, import_react_desc.PropTypes.object]).description("List of options").defaultValue([]),
+  selectedValues: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.object), import_react_desc.PropTypes.object]).description("Array of option or single option selected"),
+  autoFocus: import_react_desc.PropTypes.bool.description("Whether the combo box uses auto focus or not").defaultValue("false"),
+  hasError: import_react_desc.PropTypes.bool.description("Whether the combo box has error or not").defaultValue("false"),
+  onChange: import_react_desc.PropTypes.func.description("function triggered when an option is selected it will send the options selected").defaultValue(""),
+  onSelectAll: import_react_desc.PropTypes.func.description("function triggered when ALL button is selected from the header menu list").defaultValue(""),
+  onFilter: import_react_desc.PropTypes.func.description("function triggered when user type in the combobox input").defaultValue(""),
+  onCreate: import_react_desc.PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(""),
+  onClearAll: import_react_desc.PropTypes.func.description("function triggered when user select CLEAR button from the header menu list").defaultValue(""),
+  onMenuOpen: import_react_desc.PropTypes.func.description("function triggered when user open the menu list").defaultValue(""),
+  inputMinWidth: import_react_desc.PropTypes.any.description("Minimum width for the combo box input controller").defaultValue(void 0),
+  menuMinWidth: import_react_desc.PropTypes.any.description("Minimum width for the dropdown menu").defaultValue(void 0),
+  menuMaxHeight: import_react_desc.PropTypes.any.description("Maximum height for the dropdown menu").defaultValue(void 0),
+  withToggle: import_react_desc.PropTypes.bool.description("POC purpose this prop will not remain").defaultValue("false")
+};
+module.exports = __toCommonJS(propTypes_exports);
+//# sourceMappingURL=propTypes.js.map

package/cjs/ComboBox/v3/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/ComboBox/v3/propTypes.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).description(\n    'Array of option or single option selected',\n  ),\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 combobox 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,YAAY;AAAA,EACvB,aAAa,4BAAU,OAAO,YAAY,6BAA6B,aAAa;AAAA,EACpF,SAAS,4BAAU,UAAU,CAAC,4BAAU,OAAO,4BAAU,SAAS,YAAY,mBAAmB,aAAa;AAAA,EAC9G,gBAAgB,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,4BAAU,SAAS,YAC3F;AAAA,EAEF,WAAW,4BAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACnG,UAAU,4BAAU,KAAK,YAAY,0CAA0C,aAAa;AAAA,EAC5F,UAAU,4BAAU,KACjB,YAAY,mFACZ,aAAa;AAAA,EAChB,aAAa,4BAAU,KACpB,YAAY,4EACZ,aAAa;AAAA,EAChB,UAAU,4BAAU,KAAK,YAAY,2DAA2D,aAAa;AAAA,EAC7G,UAAU,4BAAU,KACjB,YACC,0GAED,aAAa;AAAA,EAChB,YAAY,4BAAU,KACnB,YAAY,8EACZ,aAAa;AAAA,EAChB,YAAY,4BAAU,KAAK,YAAY,mDAAmD,aAAa;AAAA,EACvG,eAAe,4BAAU,IAAI,YAAY,oDAAoD,aAAa;AAAA,EAC1G,cAAc,4BAAU,IAAI,YAAY,uCAAuC,aAAa;AAAA,EAC5F,eAAe,4BAAU,IAAI,YAAY,wCAAwC,aAAa;AAAA,EAC9F,YAAY,4BAAU,KAAK,YAAY,yCAAyC,aAAa;AAAA;",
+  "names": []
+}

package/cjs/ComboBox/v3/tests/utils.js

@@ -0,0 +1,90 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var utils_exports = {};
+__export(utils_exports, {
+  basicOptions: () => basicOptions,
+  groupedOptions: () => groupedOptions
+});
+var React = __toESM(require("react"));
+const basicOptions = [
+  {
+    dsId: "1",
+    type: "option",
+    value: "id_1",
+    label: "Luke Skywalker too long this text is super long"
+  },
+  {
+    dsId: "2",
+    type: "option",
+    value: "id_2",
+    label: "Obi-Wan Kenobi"
+  },
+  {
+    dsId: "3",
+    type: "option",
+    value: "id_3",
+    label: "Padme Amidala"
+  },
+  {
+    dsId: "4",
+    type: "option",
+    value: "id_4",
+    label: "Harry Potter"
+  }
+];
+const groupedOptions = [
+  {
+    dsId: "1",
+    type: "option",
+    value: "id_1",
+    label: "Luke Skywalker too long this text is super long"
+  },
+  {
+    dsId: "2",
+    type: "option",
+    value: "id_2",
+    label: "Obi-Wan Kenobi"
+  },
+  {
+    dsId: "separator",
+    type: "separator"
+  },
+  {
+    dsId: "section",
+    type: "section",
+    label: "Group A"
+  },
+  {
+    dsId: "3",
+    type: "option",
+    value: "id_3",
+    label: "Padme Amidala"
+  }
+];
+module.exports = __toCommonJS(utils_exports);
+//# sourceMappingURL=utils.js.map

package/cjs/ComboBox/v3/tests/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/ComboBox/v3/tests/utils.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const basicOptions = [\n  {\n    dsId: '1',\n    type: 'option',\n    value: 'id_1',\n    label: 'Luke Skywalker too long this text is super long',\n  },\n  {\n    dsId: '2',\n    type: 'option',\n    value: 'id_2',\n    label: 'Obi-Wan Kenobi',\n  },\n  {\n    dsId: '3',\n    type: 'option',\n    value: 'id_3',\n    label: 'Padme Amidala',\n  },\n  {\n    dsId: '4',\n    type: 'option',\n    value: 'id_4',\n    label: 'Harry Potter',\n  },\n];\n\nexport const groupedOptions = [\n  {\n    dsId: '1',\n    type: 'option',\n    value: 'id_1',\n    label: 'Luke Skywalker too long this text is super long',\n  },\n  {\n    dsId: '2',\n    type: 'option',\n    value: 'id_2',\n    label: 'Obi-Wan Kenobi',\n  },\n  {\n    dsId: 'separator',\n    type: 'separator',\n  },\n  {\n    dsId: 'section',\n    type: 'section',\n    label: 'Group A',\n  },\n  {\n    dsId: '3',\n    type: 'option',\n    value: 'id_3',\n    label: 'Padme Amidala',\n  },\n];\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA;AAAA;AAIJ,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA;AAAA,EAER;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA,EAET;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA;AAAA;",
+  "names": []
+}

package/cjs/ComboBox/v3/utils/hooks/useKeyboardNavigation.js

@@ -0,0 +1,163 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useKeyboardNavigation_exports = {};
+__export(useKeyboardNavigation_exports, {
+  useKeyboardNavigation: () => useKeyboardNavigation
+});
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
+var import_listHelper = require("../listHelper");
+const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type);
+const useKeyboardNavigation = () => {
+  const {
+    props: { inline, onSelectAll, onKeyDown, onChange, onCreate, options, selectedValues, onFilter },
+    setShowPopover,
+    showPopover,
+    setShowSelectedValue,
+    focusOptionIdx,
+    inputRef,
+    setCurrentOption,
+    scrollOptionIntoView
+  } = (0, import_react.useContext)(import_ComboBoxCTX.default);
+  const multiple = Array.isArray(selectedValues);
+  const selectableOptions = (0, import_listHelper.getOptions)(options);
+  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);
+  const currentItem = options.find((item) => item.dsId === focusOptionIdx);
+  const selectOption = (0, import_react.useCallback)(() => {
+    if (multiple) {
+      if (inputRef.current)
+        onFilter(inputRef.current.value);
+    } else {
+      onFilter("");
+      if (inputRef.current)
+        inputRef.current.value = "";
+      setShowSelectedValue(true);
+    }
+    onChange(options.find((item) => item.dsId === focusOptionIdx));
+    setShowPopover(multiple ? true : !showPopover);
+  }, [
+    multiple,
+    options,
+    focusOptionIdx,
+    setShowPopover,
+    showPopover,
+    onFilter,
+    inputRef,
+    setShowSelectedValue,
+    onChange
+  ]);
+  const onInputKeyDown = (0, import_react.useCallback)((e) => {
+    const targetElement = e.target;
+    onKeyDown(e, currentItem);
+    if (e.key === "Enter" && onCreate && !selectableOptions.length) {
+      onCreate(targetElement.value);
+      onFilter("");
+      if (inputRef.current)
+        inputRef.current.value = "";
+      return;
+    }
+    if (e.keyCode === 32 && targetElement.value === "" || e.key === "Enter") {
+      e.preventDefault();
+      if (!showPopover && !inline) {
+        setShowPopover(true);
+      } else {
+        selectOption();
+      }
+    }
+    if (e.key === "Enter" && e.ctrlKey && multiple) {
+      setShowPopover(false);
+    }
+    if (e.key === "a" && e.ctrlKey && multiple) {
+      onSelectAll();
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (showPopover || inline) {
+        const nextItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, isOptionFocuseable);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+      }
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (showPopover || inline) {
+        const nextItemIndex = (0, import_listHelper.findInCircularList)(options, currentItemIndex, isOptionFocuseable, -1);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = (0, import_listHelper.findInCircularList)(options, 0, isOptionFocuseable, -1);
+          setCurrentOption(options[nextItemIndex].dsId);
+          scrollOptionIntoView(options[nextItemIndex].dsId);
+        });
+      }
+    }
+    if (e.key === "Escape" && !inline) {
+      setShowPopover(false);
+    }
+    if (e.key === "Backspace" && targetElement.value.length <= 0 && !inline) {
+      if (multiple && !targetElement.value) {
+        if (selectedValues.length > 0)
+          onChange(selectedValues[selectedValues.length - 1]);
+      } else {
+        onChange(null);
+      }
+      onFilter("");
+      setShowSelectedValue(true);
+    }
+    if (e.key === "Tab" && inline) {
+    }
+  }, [
+    scrollOptionIntoView,
+    currentItemIndex,
+    options,
+    currentItem,
+    selectableOptions,
+    inputRef,
+    multiple,
+    showPopover,
+    selectedValues,
+    inline,
+    onKeyDown,
+    onSelectAll,
+    onChange,
+    onCreate,
+    onFilter,
+    setCurrentOption,
+    setShowPopover,
+    setShowSelectedValue,
+    selectOption
+  ]);
+  return { onInputKeyDown };
+};
+module.exports = __toCommonJS(useKeyboardNavigation_exports);
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/cjs/ComboBox/v3/utils/hooks/useKeyboardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/ComboBox/v3/utils/hooks/useKeyboardNavigation.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport { CBOptionT } from '../../index.d';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { getOptions, findInCircularList } from '../listHelper';\n\nconst isOptionFocuseable = (opt: CBOptionT): boolean => !['section', 'separator'].includes(opt.type);\n\nexport const useKeyboardNavigation = () => {\n  const {\n    props: { inline, onSelectAll, onKeyDown, onChange, onCreate, options, selectedValues, onFilter },\n    setShowPopover,\n    showPopover,\n    setShowSelectedValue,\n    focusOptionIdx,\n    inputRef,\n    setCurrentOption,\n    scrollOptionIntoView,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const selectableOptions = getOptions(options);\n\n  const currentItemIndex = options.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = options.find((item) => item.dsId === focusOptionIdx);\n  const selectOption = useCallback(() => {\n    if (multiple) {\n      if (inputRef.current) onFilter(inputRef.current.value);\n    } else {\n      onFilter('');\n      if (inputRef.current) inputRef.current.value = '';\n      setShowSelectedValue(true);\n    }\n    onChange(options.find((item) => item.dsId === focusOptionIdx));\n    setShowPopover(multiple ? true : !showPopover);\n  }, [\n    multiple,\n    options,\n    focusOptionIdx,\n    setShowPopover,\n    showPopover,\n    onFilter,\n    inputRef,\n    setShowSelectedValue,\n    onChange,\n  ]);\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      // ENTER KEY TO CREATE ELEMENTS\n      // ======================================================      =================\n      if (e.key === 'Enter' && onCreate && !selectableOptions.length) {\n        onCreate(targetElement.value);\n        onFilter('');\n        if (inputRef.current) inputRef.current.value = '';\n        return;\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        e.preventDefault();\n        if (!showPopover && !inline) {\n          setShowPopover(true);\n        } else {\n          selectOption();\n        }\n      }\n\n      // =============================================================================\n      // CTRL + ENTER + MULTIPLE: SELECT AND CLOSE MENU\n      // =============================================================================\n      if (e.key === 'Enter' && e.ctrlKey && multiple) {\n        setShowPopover(false);\n      }\n\n      if (e.key === 'a' && e.ctrlKey && multiple) {\n        onSelectAll();\n      }\n      // =============================================================================\n      // ARROWS UP AND DOWN\n      // =============================================================================\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (showPopover || inline) {\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 || inline) {\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' && !inline) {\n        setShowPopover(false);\n        // TODO confirm funcionality\n        // onFilter('');\n        // inputRef.current.value = '';\n      }\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && targetElement.value.length <= 0 && !inline) {\n        if (multiple && !targetElement.value) {\n          if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);\n        } else {\n          onChange(null);\n        }\n        onFilter('');\n        setShowSelectedValue(true);\n      }\n\n      if (e.key === 'Tab' && inline) {\n        // TODO confirm funcionality\n        // e.preventDefault();\n      }\n    },\n    [\n      scrollOptionIntoView,\n      currentItemIndex,\n      options,\n      currentItem,\n      selectableOptions,\n      inputRef,\n      multiple,\n      showPopover,\n      selectedValues,\n      inline,\n      onKeyDown,\n      onSelectAll,\n      onChange,\n      onCreate,\n      onFilter,\n      setCurrentOption,\n      setShowPopover,\n      setShowSelectedValue,\n      selectOption,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/cjs/ComboBox/v3/utils/hooks/useOnElementResize.js

@@ -0,0 +1,56 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useOnElementResize_exports = {};
+__export(useOnElementResize_exports, {
+  useOnElementResize: () => useOnElementResize
+});
+var React = __toESM(require("react"));
+var import_react = require("react");
+const useOnElementResize = (targetRef) => {
+  const [width, setWidth] = (0, import_react.useState)(targetRef.current ? targetRef.current?.offsetWidth : 0);
+  const [height, setHeight] = (0, import_react.useState)(targetRef.current ? targetRef.current?.offsetWidth : 0);
+  const observer = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    function outputsize() {
+      if (targetRef.current) {
+        setWidth(targetRef.current.offsetWidth);
+        setHeight(targetRef.current.offsetHeight);
+      }
+    }
+    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
+    return () => {
+      observer.current?.disconnect();
+    };
+  }, [targetRef]);
+  return (0, import_react.useMemo)(() => ({
+    width,
+    height
+  }), [width, height]);
+};
+module.exports = __toCommonJS(useOnElementResize_exports);
+//# sourceMappingURL=useOnElementResize.js.map

package/cjs/ComboBox/v3/utils/hooks/useOnElementResize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/ComboBox/v3/utils/hooks/useOnElementResize.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAI5D,MAAM,qBAAqB,CAAC,cAAmF;AAC7G,QAAM,CAAC,OAAO,YAAY,2BAAS,UAAU,UAAU,UAAU,SAAS,cAAc;AACxF,QAAM,CAAC,QAAQ,aAAa,2BAAS,UAAU,UAAU,UAAU,SAAS,cAAc;AAC1F,QAAM,WAAW,yBAAO;AAExB,8BAAU,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,0BACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,MAEF,CAAC,OAAO;AAAA;",
+  "names": []
+}

package/cjs/ComboBox/v3/utils/listHelper.js

@@ -0,0 +1,58 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var listHelper_exports = {};
+__export(listHelper_exports, {
+  findInCircularList: () => findInCircularList,
+  getOptions: () => getOptions,
+  getSelectableOptions: () => getSelectableOptions,
+  isSelected: () => isSelected,
+  isSelectedValueEmpty: () => isSelectedValueEmpty,
+  isSelectedValueMultiple: () => isSelectedValueMultiple
+});
+var React = __toESM(require("react"));
+const getSelectableOptions = (options) => options ? options.filter((option) => option.type === "option" && !option.disabled) : [];
+const getOptions = (options) => options ? options.filter((option) => option.type === "option") : [];
+const isSelectedValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : !value;
+const isSelectedValueMultiple = (value) => Array.isArray(value);
+const isSelected = (value, activeOption) => {
+  if (isSelectedValueMultiple(value)) {
+    const multiValue = value;
+    return multiValue.some((item) => item?.value === activeOption?.value);
+  }
+  const singleValue = value;
+  return singleValue?.value === activeOption.value;
+};
+const findInCircularList = (list, from, criteria, step = 1) => {
+  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+    if (criteria(list[i]))
+      return i;
+  }
+  return from;
+};
+module.exports = __toCommonJS(listHelper_exports);
+//# sourceMappingURL=listHelper.js.map

package/cjs/ComboBox/v3/utils/listHelper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/ComboBox/v3/utils/listHelper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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  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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,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,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": []
+}