@activecollab/components 2.0.209 → 2.0.211

package/dist/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('styled-components'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('date-fns'), require('react-day-picker'), require('moment-timezone'), require('react-custom-scrollbars-2'), require('country-explorer'), require('compromise'), require('compromise-dates')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', 'styled-components', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'date-fns', 'react-day-picker', 'moment-timezone', 'react-custom-scrollbars-2', 'country-explorer', 'compromise', 'compromise-dates'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.classNames, global.styled, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.PopperJS, global.reactTransitionGroup, global.moment, global.DateFns, global.DayPicker, global["moment-timezone"], global.reactCustomScrollbars, global.countryExplorer, global.compromise, global.compromiseDates));
-})(this, (function (exports, React, classNames, styled, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, dateFns, reactDayPicker, moment$1, reactCustomScrollbars2, countryExplorer, nlp, plg) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('styled-components'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('date-fns'), require('react-day-picker'), require('moment-timezone'), require('@tanstack/react-virtual'), require('country-explorer'), require('compromise'), require('compromise-dates')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', 'styled-components', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'date-fns', 'react-day-picker', 'moment-timezone', '@tanstack/react-virtual', 'country-explorer', 'compromise', 'compromise-dates'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.classNames, global.styled, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.PopperJS, global.reactTransitionGroup, global.moment, global.DateFns, global.DayPicker, global["moment-timezone"], global.reactVirtual, global.countryExplorer, global.compromise, global.compromiseDates));
+})(this, (function (exports, React, classNames, styled, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, dateFns, reactDayPicker, moment$1, reactVirtual, countryExplorer, nlp, plg) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14274,14 +14274,24 @@
     componentId: "sc-ce8kcp-6"
   })(["font-size:24px;margin-right:4px;"]);
   StyledFlagTriggerLabel.displayName = "StyledOptionFlag";
-  var StyledOptionName = styled__default["default"].span.withConfig({
+  var StyledOptionName = styled__default["default"](Body2).withConfig({
     displayName: "Styles__StyledOptionName",
     componentId: "sc-ce8kcp-7"
   })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
   StyledOptionName.displayName = "StyledOptionName";
+  var StyledOptionCode = styled__default["default"](Body2).withConfig({
+    displayName: "Styles__StyledOptionCode",
+    componentId: "sc-ce8kcp-8"
+  })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;color:var(--color-theme-600);flex-shrink:0;"]);
+  StyledOptionCode.displayName = "StyledOptionCode";
+  var StyledOptionRowEnd = styled__default["default"].span.withConfig({
+    displayName: "Styles__StyledOptionRowEnd",
+    componentId: "sc-ce8kcp-9"
+  })(["display:flex;align-items:center;gap:8px;"]);
+  StyledOptionRowEnd.displayName = "StyledOptionRowEnd";
   var StyledOptionWrapper = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledOptionWrapper",
-    componentId: "sc-ce8kcp-8"
+    componentId: "sc-ce8kcp-10"
   })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;display:flex;justify-items:center;align-items:center;"]);
   StyledOptionWrapper.displayName = "StyledOptionWrapper";
 
@@ -14970,6 +14980,7 @@
     var matchCase = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var textComparator = text;
     var searchByComparator = searchBy;
+    if (!text) return;
     if (!matchCase) {
       textComparator = text.toLowerCase();
       searchByComparator = searchBy.toLowerCase();
@@ -15019,7 +15030,7 @@
   var StyledOptionGroupLi = styled__default["default"].li.withConfig({
     displayName: "Styles__StyledOptionGroupLi",
     componentId: "sc-16v5afu-0"
-  })(["flex-direction:column;"]);
+  })(["flex-direction:column;cursor:pointer;"]);
   var StyledOptionGroup = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledOptionGroup",
     componentId: "sc-16v5afu-1"
@@ -15051,19 +15062,12 @@
       options = _ref.options,
       type = _ref.type,
       hover = _ref.hover,
-      filter = _ref.filter,
       checked = _ref.checked,
       onChange = _ref.onChange,
       setHover = _ref.setHover,
-      renderOptions = _ref.renderOptions,
       optionGroupClassName = _ref.optionGroupClassName,
       _ref$mixedOptions = _ref.mixedOptions,
       mixedOptions = _ref$mixedOptions === void 0 ? [] : _ref$mixedOptions;
-    var list = React.useMemo(function () {
-      return filter ? options.filter(function (v) {
-        return v.name.toLowerCase().includes(filter.trim().toLowerCase());
-      }) : options;
-    }, [filter, options]);
     React.useEffect(function () {
       if (hover === id && type !== "single") {
         var _document$getElementB;
@@ -15076,13 +15080,10 @@
       });
     }, [options, checked]);
     var handleHover = React.useCallback(function () {
-      if (options.some(function (option) {
-        return checked.includes(option.id);
-      })) return;
       if (setHover) {
         setHover(type === "single" ? undefined : id);
       }
-    }, [setHover, type, id, checked, options]);
+    }, [setHover, type, id]);
     var allOptionValues = React.useMemo(function () {
       return options.map(function (option) {
         return option.id;
@@ -15097,6 +15098,7 @@
     }, [allOptionValues, checked, isAllOptionsChecked, mixedOptions, options]);
     var handleClick = React.useCallback(function (e) {
       e.stopPropagation();
+      e.preventDefault();
       if (onChange) {
         if (isAllOptionsChecked) {
           onChange(checked.filter(function (i) {
@@ -15113,7 +15115,8 @@
     }, [allOptionValues, checked, isAllOptionsChecked, onChange]);
     return /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupLi, {
       key: id,
-      className: classNames__default["default"]("c-option-group", optionGroupClassName)
+      className: classNames__default["default"]("c-option-group", optionGroupClassName),
+      onClick: handleClick
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
       key: id
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupOption, {
@@ -15127,9 +15130,7 @@
       mixed: isMixed,
       onChange: handleClick,
       type: "checkbox"
-    }))), /*#__PURE__*/React__default["default"].createElement(List, null, list.map(function (item, index) {
-      return typeof renderOptions === "function" ? renderOptions(item, index) : item.name;
-    }))));
+    })))));
   };
   OptionGroup.displayName = "OptionGroup";
 
@@ -15165,9 +15166,11 @@
       autoHeightMax = _ref$autoHeightMax === void 0 ? 340 : _ref$autoHeightMax,
       clearInputOnSelect = _ref.clearInputOnSelect,
       _ref$mixedOptions = _ref.mixedOptions,
-      mixedOptions = _ref$mixedOptions === void 0 ? [] : _ref$mixedOptions;
+      mixedOptions = _ref$mixedOptions === void 0 ? [] : _ref$mixedOptions,
+      filterCriteria = _ref.filterCriteria,
+      disableVirtualization = _ref.disableVirtualization;
+    var listContainerRef = React.useRef(null);
     var itemRef = React.useRef(null);
-    var listRef = React.useRef(null);
     var selectedOptions = React.useMemo(function () {
       if (Array.isArray(selected)) {
         return selected;
@@ -15209,9 +15212,9 @@
       } else {
         return opts.sort(sortOptions);
       }
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mixedOptions, selectedOptions]);
     var sortList = React.useCallback(function (options) {
       var _options$;
       if (disabledInternalSort) {
@@ -15235,20 +15238,27 @@
         return handleSort(_sortedOptions);
       }
     }, [sortDirection, disabledInternalSort, handleSort]);
-    var sortedList = React.useMemo(function () {
-      return sortList(options);
-    }, [options, sortList]);
-    var _useState = React.useState({
+    var _useState = React.useState(function () {
+        return sortList(options);
+      }),
+      _useState2 = _slicedToArray(_useState, 2),
+      sortedList = _useState2[0],
+      setSortedList = _useState2[1];
+    React.useEffect(function () {
+      setSortedList(sortList(options));
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [options]);
+    var _useState3 = React.useState({
         item: undefined,
         by: undefined
       }),
-      _useState2 = _slicedToArray(_useState, 2),
-      hover = _useState2[0],
-      setHover = _useState2[1];
-    var _useState3 = React.useState(""),
       _useState4 = _slicedToArray(_useState3, 2),
-      filter = _useState4[0],
-      setFilter = _useState4[1];
+      hover = _useState4[0],
+      setHover = _useState4[1];
+    var _useState5 = React.useState(""),
+      _useState6 = _slicedToArray(_useState5, 2),
+      filter = _useState6[0],
+      setFilter = _useState6[1];
     var handleEmpty = React.useCallback(function (e) {
       if (e && e.button !== 0) {
         return;
@@ -15276,24 +15286,20 @@
         return option.name.toLowerCase() !== filter.trim().toLowerCase();
       }));
     }, [emptyValue, filter, options]);
-    var renderAddNew = React.useMemo(function () {
-      return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteNewItem, {
-        ref: hover.item === "addNew" ? itemRef : null,
-        key: "emptyValue",
-        hover: hover.item === "addNew",
-        onMouseDown: handleEmpty,
-        onMouseEnter: onAddNewMouseEnter
-      }, emptyValue);
-    }, [emptyValue, handleEmpty, hover, onAddNewMouseEnter]);
     var filterOptions = React.useCallback(function (options, filter) {
       var trimmedFilter = filter.trim();
       var isGrouped = options[0] && isOptionGroup(options[0]);
+      var matchesFilter = function matchesFilter(option) {
+        var nameMatch = option.name.toLowerCase().includes(trimmedFilter.toLowerCase());
+        if (filterCriteria && trimmedFilter) {
+          return nameMatch || filterCriteria(option, trimmedFilter);
+        }
+        return nameMatch;
+      };
       if (isGrouped) {
         var hovered = false;
         return options.reduce(function (acc, groupedOption) {
-          var filteredOptions = groupedOption.options.filter(function (v) {
-            return v.name.toLowerCase().includes(trimmedFilter.toLowerCase());
-          });
+          var filteredOptions = groupedOption.options.filter(matchesFilter);
           if (filteredOptions.length > 0) {
             if (!hovered && filter) {
               setHover({
@@ -15309,9 +15315,7 @@
           return [...acc];
         }, []);
       } else {
-        var filteredOptions = options.filter(function (v) {
-          return v.name.toLowerCase().includes(trimmedFilter.toLowerCase());
-        });
+        var filteredOptions = options.filter(matchesFilter);
         if (filter && filteredOptions.length > 0) {
           setHover({
             item: filteredOptions[0].id,
@@ -15326,7 +15330,7 @@
         }
         return filteredOptions;
       }
-    }, [emptyValue]);
+    }, [emptyValue, filterCriteria]);
     var list = React.useMemo(function () {
       return filterOptions(sortedList, filter);
     }, [filter, filterOptions, sortedList]);
@@ -15342,6 +15346,67 @@
       }, []);
       return filterOptions(options, filter);
     }, [filter, filterOptions, list]);
+    var showNoResultCondition = React.useMemo(function () {
+      return noResultText && !showAddNew && list.length < 1 && (defaultValue && filter || !defaultValue);
+    }, [noResultText, showAddNew, list.length, defaultValue, filter]);
+    var virtualItems = React.useMemo(function () {
+      var items = [];
+      if (showDefaultOption) {
+        items.push({
+          type: "default",
+          id: "default"
+        });
+      }
+      list.forEach(function (item, index) {
+        if (isOptionGroup(item)) {
+          items.push({
+            type: "group",
+            id: item.id,
+            item
+          });
+          item.options.forEach(function (option) {
+            items.push({
+              type: "option",
+              id: option.id,
+              item: option,
+              index
+            });
+          });
+        } else {
+          items.push({
+            type: "option",
+            id: item.id,
+            item,
+            index
+          });
+        }
+      });
+      if (showNoResultCondition) {
+        items.push({
+          type: "noResult",
+          id: "noResult"
+        });
+      }
+      if (showAddNew) {
+        items.push({
+          type: "addNew",
+          id: "addNew"
+        });
+      }
+      return items;
+    }, [list, showDefaultOption, showNoResultCondition, showAddNew]);
+    var shouldUseVirtualization = !disableVirtualization && virtualItems.length > 40;
+    var rowVirtualizer = reactVirtual.useVirtualizer({
+      count: virtualItems.length,
+      getScrollElement: function getScrollElement() {
+        return listContainerRef.current;
+      },
+      estimateSize: function estimateSize() {
+        return 28;
+      },
+      overscan: 5,
+      gap: 4
+    });
     var handleInputChange = React.useCallback(function (e) {
       if (e.target && !(e.key === "ArrowDown") && !(e.key === "ArrowUp") && !(e.key === "Enter")) {
         setFilter(e.target.value);
@@ -15420,7 +15485,7 @@
       }
       return /*#__PURE__*/React__default["default"].createElement(Option, {
         name: item.name,
-        ref: itemRef,
+        ref: hover.item === item.id ? itemRef : null,
         key: index,
         tooltip: item.tooltip,
         onMouseEnter: handleMouseEnter,
@@ -15446,23 +15511,18 @@
         by: "mouse"
       });
     }, []);
-    var handleScroll = React.useCallback(function (list, itemOffset) {
-      if (list.getClientHeight() + list.getScrollTop() < itemOffset + 40) {
-        return list.scrollTop(itemOffset - list.getClientHeight() + 30);
-      }
-      if (list.getScrollTop() > itemOffset) {
-        return list.scrollTop(itemOffset);
-      }
-    }, []);
     React.useEffect(function () {
       if (hover.by === "keyboard" && hover.item !== undefined) {
-        var item = itemRef.current;
-        var _list = listRef.current;
-        if (itemRef && item && _list) {
-          handleScroll(_list, item.offsetTop);
+        var index = virtualItems.findIndex(function (item) {
+          return item.id === hover.item;
+        });
+        if (index !== -1) {
+          rowVirtualizer.scrollToIndex(index, {
+            align: "center"
+          });
         }
       }
-    }, [handleScroll, hover]);
+    }, [hover, rowVirtualizer, virtualItems]);
     var handleOnKeyDown = React.useCallback(function (e) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -15505,48 +15565,126 @@
         return selectedOptions[0] === null || selectedOptions.length === flatOptions.length;
       }
     }, [flatOptions.length, preselectDefaultValue, selectedOptions]);
-    var showNoResult = React.useMemo(function () {
-      return noResultText && !showAddNew && list.length < 1 && (defaultValue && filter || !defaultValue);
-    }, [noResultText, showAddNew, list.length, defaultValue, filter]);
-    var renderNoResult = React.useMemo(function () {
-      return /*#__PURE__*/React__default["default"].createElement(_StyledStyledOption, null, noResultText);
-    }, [noResultText]);
+    var renderVirtualItem = React.useCallback(function (virtualItem, index) {
+      switch (virtualItem.type) {
+        case "default":
+          return /*#__PURE__*/React__default["default"].createElement(Option, {
+            name: String(defaultValue),
+            ref: hover.item === null ? itemRef : null,
+            hover: hover.item === null,
+            onMouseEnter: handleMouseEnter,
+            onClick: function onClick(e) {
+              e.preventDefault();
+              toggleSelected(null);
+            },
+            renderOption: renderOption({
+              name: defaultValue,
+              id: null
+            }, {
+              checked: isDefaultOptionSelected(),
+              hover: hover.item === null,
+              onChange: function onChange() {
+                return null;
+              }
+            })
+          });
+        case "group":
+          if (!virtualItem.item || !isOptionGroup(virtualItem.item)) return null;
+          return /*#__PURE__*/React__default["default"].createElement(OptionGroup, {
+            checked: selectedOptions,
+            name: virtualItem.item.name,
+            tooltip: virtualItem.item.tooltip,
+            key: virtualItem.item.id,
+            setHover: handleHoverCallback,
+            id: virtualItem.item.id,
+            hover: hover.item,
+            options: virtualItem.item.options,
+            renderOptions: handleRenderOption,
+            type: type,
+            onChange: handleChange,
+            filter: filter,
+            mixedOptions: mixedOptions
+          });
+        case "option":
+          if (!virtualItem.item || isOptionGroup(virtualItem.item)) return null;
+          return /*#__PURE__*/React__default["default"].createElement(Option, {
+            name: virtualItem.item.name,
+            ref: hover.item === virtualItem.id ? itemRef : null,
+            key: index,
+            tooltip: virtualItem.item.tooltip,
+            onMouseEnter: function onMouseEnter() {
+              return handleMouseEnter(virtualItem.id);
+            },
+            onClick: handleClick,
+            id: virtualItem.id,
+            hover: virtualItem.id === hover.item,
+            className: optionClassName,
+            renderOption: renderOption(_objectSpread2(_objectSpread2({}, virtualItem.item), {}, {
+              name: highlightText(virtualItem.item.name, filter)
+            }), {
+              id: "option_".concat(virtualItem.id),
+              checked: selectedOptions && selectedOptions.includes(virtualItem.id),
+              hover: hover.item === virtualItem.id,
+              onChange: function onChange() {
+                return null;
+              }
+            })
+          });
+        case "noResult":
+          return /*#__PURE__*/React__default["default"].createElement(_StyledStyledOption, null, noResultText);
+        case "addNew":
+          return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteNewItem, {
+            ref: hover.item === "addNew" ? itemRef : null,
+            key: "emptyValue",
+            hover: hover.item === "addNew",
+            onMouseDown: handleEmpty,
+            onMouseEnter: onAddNewMouseEnter
+          }, emptyValue);
+        default:
+          return null;
+      }
+    }, [defaultValue, hover.item, handleMouseEnter, renderOption, isDefaultOptionSelected, selectedOptions, handleHoverCallback, handleRenderOption, type, handleChange, filter, mixedOptions, handleClick, optionClassName, noResultText, handleEmpty, onAddNewMouseEnter, emptyValue, toggleSelected]);
     return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteScrollShadow, {
       className: AutocompleteClassName,
       $isHidden: !defaultValue && !emptyValue && !noResultText && list.length < 1
     }, function (_ref2) {
-      var onScroll = _ref2.onScroll;
+      var _onScroll = _ref2.onScroll;
       return /*#__PURE__*/React__default["default"].createElement(StyledAutocompleteBody, {
         key: "body",
         onMouseLeave: handleOnMouseLeave
-      }, /*#__PURE__*/React__default["default"].createElement(reactCustomScrollbars2.Scrollbars, {
-        ref: listRef,
-        key: "scrollBar",
-        autoHeight: true,
-        autoHeightMax: autoHeightMax,
-        onScroll: onScroll
-      }, defaultValue && !filter && /*#__PURE__*/React__default["default"].createElement(Option, {
-        name: defaultValue,
-        ref: itemRef,
-        hover: hover.item === null,
-        onMouseEnter: handleMouseEnter,
-        onClick: function onClick(e) {
-          e.preventDefault();
-          toggleSelected(null);
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        ref: listContainerRef,
+        style: {
+          height: "".concat(Math.min(rowVirtualizer.getTotalSize() + 12, autoHeightMax), "px"),
+          overflow: "auto"
         },
-        renderOption: renderOption({
-          name: defaultValue,
-          id: null
-        }, {
-          checked: isDefaultOptionSelected(),
-          hover: hover.item === null,
-          onChange: function onChange() {
-            return null;
+        onScroll: function onScroll(e) {
+          if (_onScroll) _onScroll(e);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        style: {
+          height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+          width: "100%",
+          position: "relative"
+        }
+      }, shouldUseVirtualization ? rowVirtualizer.getVirtualItems().map(function (virtualRow) {
+        var item = virtualItems[virtualRow.index];
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: virtualRow.index,
+          "data-index": virtualRow.index,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: "translateY(".concat(virtualRow.start, "px)")
           }
-        })
-      }), list.map(function (item, index) {
-        return handleRenderOption(item, index);
-      }), showNoResult && renderNoResult, showAddNew && renderAddNew));
+        }, renderVirtualItem(item, virtualRow.index));
+      }) : virtualItems.map(function (item, index) {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+          key: index
+        }, renderVirtualItem(item, index));
+      }))));
     });
   };
   Autocomplete.displayName = "Autocomplete";
@@ -15555,7 +15693,7 @@
     componentId: "sc-9x4q7e-0"
   })(["cursor:auto"]);
 
-  var _excluded$M = ["type", "mode", "target", "options", "selected", "mixed", "position", "onChange", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption", "handleDefaultOptionChange", "preselectDefaultValue", "startAdornment", "endAdornment", "focusInput"];
+  var _excluded$M = ["type", "mode", "target", "options", "selected", "mixed", "position", "onChange", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption", "handleDefaultOptionChange", "preselectDefaultValue", "startAdornment", "endAdornment", "focusInput", "disableVirtualization"];
   var Select = function Select(_ref) {
     var _ref$type = _ref.type,
       type = _ref$type === void 0 ? "single" : _ref$type,
@@ -15593,6 +15731,7 @@
       endAdornment = _ref.endAdornment,
       _ref$focusInput = _ref.focusInput,
       focusInput = _ref$focusInput === void 0 ? false : _ref$focusInput,
+      disableVirtualization = _ref.disableVirtualization,
       prop = _objectWithoutProperties(_ref, _excluded$M);
     if (disableSearch && (startAdornment || endAdornment)) {
       console.warn("Adornments are not visible when search bar is hidden");
@@ -15760,7 +15899,8 @@
       handleDefaultOptionChange: handleDefaultOptionChangeCallback,
       type: type,
       preselectDefaultValue: preselectDefaultValue,
-      keepSameOptionsOrder: keepSameOptionsOrder
+      keepSameOptionsOrder: keepSameOptionsOrder,
+      disableVirtualization: disableVirtualization
     }))));
   };
   Select.displayName = "Select";
@@ -16529,7 +16669,8 @@
       _ref$keepSameOptionsO = _ref.keepSameOptionsOrder,
       keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? true : _ref$keepSameOptionsO,
       selectedLabel = _ref.selectedLabel,
-      renderOption = _ref.renderOption;
+      renderOption = _ref.renderOption,
+      filterCriteria = _ref.filterCriteria;
     return /*#__PURE__*/React__default["default"].createElement(Select, {
       onChange: onChange,
       forceCloseMenu: true,
@@ -16546,7 +16687,8 @@
       disabledInternalSort: disabledInternalSort,
       keepSameOptionsOrder: keepSameOptionsOrder,
       selected: selected,
-      renderOption: renderOption
+      renderOption: renderOption,
+      filterCriteria: filterCriteria
     });
   };
   var _StyledStyledButton = styled__default["default"](StyledButton).withConfig({
@@ -16700,10 +16842,10 @@
 
   var _excluded$F = ["size", "disabled", "value", "onChange", "defaultCountry"];
   var renderOption$2 = function renderOption(option, data) {
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionFlag, null, countryExplorer.getCountryFlag(option.id)), /*#__PURE__*/React__default["default"].createElement(StyledOptionName, null, option.name)), /*#__PURE__*/React__default["default"].createElement(RadioButton, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionFlag, null, countryExplorer.getCountryFlag(option.id)), /*#__PURE__*/React__default["default"].createElement(StyledOptionName, null, option.name)), /*#__PURE__*/React__default["default"].createElement(StyledOptionRowEnd, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionCode, null, option.additionalInfo), /*#__PURE__*/React__default["default"].createElement(RadioButton, {
       checked: data.checked,
       onChange: data.onChange
-    }));
+    })));
   };
   var InputPhone = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$size = _ref.size,
@@ -16728,7 +16870,8 @@
     var options = countryExplorer.countriesArraySortedByName.map(function (country) {
       return {
         id: country.countryCode,
-        name: "+".concat(country.callingCode, " ").concat(country.name)
+        name: country.name,
+        additionalInfo: "+".concat(country.callingCode)
       };
     });
     var separatePrefixFromValue = function separatePrefixFromValue(fullValue) {
@@ -16741,12 +16884,11 @@
           var code = digits.slice(0, i);
           if (countryExplorer.callingCodeToCountryCodeMap[code]) {
             newPrefix = countryExplorer.callingCodeToCountryCodeMap[code];
-            newValue = fullValue.slice(prefixLength + countryExplorer.getCountryCallingCode(newPrefix).length);
+            var dialCode = countryExplorer.getCountryCallingCode(newPrefix);
+            newValue = fullValue.slice(prefixLength + dialCode.length);
             break;
           }
         }
-      } else if (fullValue.startsWith(prefix)) {
-        newValue = fullValue.slice(prefix.length);
       }
       return {
         newPrefix,
@@ -16817,6 +16959,10 @@
         onChange: handleSelectChange,
         options: options,
         selected: prefix,
+        filterCriteria: function filterCriteria(option, filter) {
+          var _option$additionalInf;
+          return !!(option !== null && option !== void 0 && (_option$additionalInf = option.additionalInfo) !== null && _option$additionalInf !== void 0 && _option$additionalInf.toLowerCase().includes(filter));
+        },
         selectedLabel: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledFlagTriggerLabel, {
           $size: size
         }, countryExplorer.getCountryFlag(prefix)), "+", countryExplorer.getCountryCallingCode(prefix)),
@@ -17027,7 +17173,7 @@
   });
   Chip.displayName = "Chip";
 
-  var _excluded$C = ["options", "selected", "loading", "loadingText", "onChange", "onInputChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue", "open", "onOpen", "triggerMode", "noResultText", "emptyValue"];
+  var _excluded$C = ["options", "selected", "loading", "loadingText", "onChange", "onInputChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue", "open", "onOpen", "triggerMode", "noResultText", "emptyValue", "disableVirtualization"];
   var sizeMap = {
     small: 18,
     regular: 24,
@@ -17075,6 +17221,7 @@
       triggerMode = _ref.triggerMode,
       noResultText = _ref.noResultText,
       emptyValue = _ref.emptyValue,
+      disableVirtualization = _ref.disableVirtualization,
       prop = _objectWithoutProperties(_ref, _excluded$C);
     var selectedName = React.useMemo(function () {
       var value = "";
@@ -17458,7 +17605,8 @@
       options: options,
       type: type,
       defaultValue: defaultValue,
-      handleEmptyAction: emptyAction
+      handleEmptyAction: emptyAction,
+      disableVirtualization: disableVirtualization
     })))))) : null);
   };
   ComboBox.displayName = "ComboBox";
@@ -17493,7 +17641,7 @@
     componentId: "sc-uvsz9l-4"
   })(["display:flex;justify-content:center;"]);
 
-  var _excluded$B = ["mode", "selected", "min", "max", "onChange", "step", "size", "className", "placeholder", "triggerMode", "disabled", "invalid"];
+  var _excluded$B = ["mode", "selected", "min", "max", "onChange", "step", "size", "className", "placeholder", "triggerMode", "disabled", "invalid", "disableVirtualization"];
   nlp__default["default"].plugin(plg__default["default"]);
   var StyledInputTimeWrapper = styled__default["default"].div.withConfig({
     displayName: "InputTime__StyledInputTimeWrapper",
@@ -17521,6 +17669,7 @@
       triggerMode = _ref.triggerMode,
       disabled = _ref.disabled,
       invalid = _ref.invalid,
+      disableVirtualization = _ref.disableVirtualization,
       rest = _objectWithoutProperties(_ref, _excluded$B);
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -17612,7 +17761,8 @@
       onOpen: handleOpen,
       triggerMode: triggerMode,
       disabled: disabled,
-      invalid: invalid
+      invalid: invalid,
+      disableVirtualization: disableVirtualization
     })));
   };