@majoo-ui/react 1.61.20 → 1.61.21

package/index.esm.js

@@ -14185,8 +14185,14 @@ function OptionGroupItem({
   }), void 0);
 }
 
-const _excluded$d = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "showTagSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput", "fetchData", "onSearch", "isLoading", "maxSelectedItem", "mobileOnly", "desktopOnly", "label", "tagCss", "checkBoxCss", "optionListCss", "showCollapsibleCounter", "collapsibleLimit", "pageIndex", "onSelectAllChecked", "totalOptions", "clearSearchOnSelect", "onItemClick"];
+const _excluded$d = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "disabledSortChecked", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "showTagSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput", "fetchData", "onSearch", "isLoading", "maxSelectedItem", "mobileOnly", "desktopOnly", "label", "tagCss", "checkBoxCss", "optionListCss", "showCollapsibleCounter", "collapsibleLimit", "pageIndex", "onSelectAllChecked", "totalOptions", "clearSearchOnSelect", "onItemClick", "virtualized", "virtualizedThreshold"];
 var _jsxFileName$x = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
+
+// Polyfill for startTransition (React 17 compatibility)
+const startTransition = React__default.startTransition || (callback => {
+  // For React 17, use setTimeout to defer updates
+  setTimeout(callback, 0);
+});
 const Wrapper$1 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -14442,7 +14448,7 @@ const IndeterminateFilled$1 = styled('div', {
   alignItems: 'center'
 });
 const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _initItem$reduce, _ref2, _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3;
+  var _ref2, _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3;
   let {
       placeholder,
       option,
@@ -14455,6 +14461,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       readOnly,
       placement,
       disabledOptions,
+      disabledSortChecked,
       textEmptyItem,
       onRemoveItem,
       isInvalid,
@@ -14485,7 +14492,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       onSelectAllChecked,
       totalOptions,
       clearSearchOnSelect,
-      onItemClick
+      onItemClick,
+      virtualized,
+      virtualizedThreshold
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const {
@@ -14503,6 +14512,100 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [query, setQuery] = React__default.useState('');
   const scrollerRef = React__default.useRef(null);
   const isShowSelectAll = showSelectAll && !maxSelectedItem;
+
+  // Use Set for O(1) lookup performance with large datasets
+  const selectedValueSet = useMemo(() => new Set(selectedValue), [selectedValue]);
+
+  // Calculate total item count efficiently without creating full array
+  const totalItemCount = useMemo(() => {
+    return items.reduce((count, item) => {
+      if (item != null && item.children) {
+        return count + 1 + item.children.length; // parent + children
+      }
+      return count + 1;
+    }, 0);
+  }, [items]);
+
+  // Batched onChange to prevent multiple rapid calls
+  const onChangeTimeoutRef = useRef(null);
+  const batchedOnChange = useCallback(values => {
+    // Clear any pending onChange calls
+    if (onChangeTimeoutRef.current) {
+      clearTimeout(onChangeTimeoutRef.current);
+    }
+
+    // For large datasets, batch the onChange call to prevent freezing
+    if (totalItemCount > 10000) {
+      onChangeTimeoutRef.current = setTimeout(() => {
+        onChange == null || onChange(values);
+      }, 0);
+    } else {
+      // For smaller datasets, call immediately
+      onChange == null || onChange(values);
+    }
+  }, [onChange, totalItemCount]);
+
+  // Determine if virtualization should be enabled
+  const shouldVirtualize = virtualized && totalItemCount >= virtualizedThreshold;
+
+  // Lazy item lookup function - only compute when needed
+  const getItemAtIndex = useCallback(index => {
+    let currentIndex = 0;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item != null && item.children) {
+        // Check if index is the group header
+        if (currentIndex === index) {
+          return {
+            type: 'group',
+            item,
+            originalIndex: i
+          };
+        }
+        currentIndex++;
+
+        // Check if index is within children
+        for (let j = 0; j < item.children.length; j++) {
+          if (currentIndex === index) {
+            return {
+              type: 'child',
+              item: item.children[j],
+              originalIndex: i,
+              childIndex: j
+            };
+          }
+          currentIndex++;
+        }
+      } else {
+        // Regular item
+        if (currentIndex === index) {
+          return {
+            type: 'item',
+            item,
+            originalIndex: i
+          };
+        }
+        currentIndex++;
+      }
+    }
+    return null;
+  }, [items]);
+
+  // Dynamic overscan based on dataset size
+  const overscanCount = useMemo(() => {
+    if (totalItemCount > 10000) return 5;
+    if (totalItemCount > 1000) return 8;
+    return 10;
+  }, [totalItemCount]);
+
+  // Setup virtualization
+  const rowVirtualizer = useVirtual({
+    size: totalItemCount,
+    parentRef: scrollerRef,
+    estimateSize: useCallback(() => 44, []),
+    // Estimated height of each item
+    overscan: overscanCount
+  });
   useMountedLayoutEffect(() => {
     var _scrollerRef$current;
     (_scrollerRef$current = scrollerRef.current) == null || _scrollerRef$current.scrollTo({
@@ -14528,7 +14631,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       return [...res, ...filterOption]; // add the missing elements
     }
   }, []) : option;
-  const sortDisabled = disabledOptions.length > 0 ? disabledOptions.reduce((res, id, i, {
+  const sortDisabled = disabledOptions.length > 0 && !disabledSortChecked ? disabledOptions.reduce((res, id, i, {
     [i + 1]: next
   }) => {
     let sortData = option.find(option => option.id === id);
@@ -14538,6 +14641,43 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       return [...res, ...filterOption]; // add the missing elements
     }
   }, []) : option;
+
+  // Create a fast lookup map for item names (for large datasets)
+  const itemLookupMap = useMemo(() => {
+    if ((initItem == null ? void 0 : initItem.length) <= 10000) return null;
+    const map = new Map();
+    for (let i = 0; i < initItem.length; i++) {
+      const item = initItem[i];
+      map.set(item.id, item);
+      if (item.children) {
+        for (let j = 0; j < item.children.length; j++) {
+          const child = item.children[j];
+          map.set(child.id, child);
+        }
+      }
+    }
+    return map;
+  }, [initItem]);
+
+  // Memoize selected items to prevent expensive recalculation on every render
+  const memoizedSelectedItems = useMemo(() => {
+    var _initItem$reduce;
+    if (selectedValue.length === 0) return [];
+
+    // For very large datasets, use lookup map for O(1) access
+    if ((initItem == null ? void 0 : initItem.length) > 10000 && itemLookupMap) {
+      return selectedValue.map(id => {
+        const item = itemLookupMap.get(id);
+        return item || {
+          id,
+          name: id
+        }; // Fallback to id as name if not found
+      });
+    }
+
+    // For smaller datasets, do the full flatten and filter
+    return (initItem == null || (_initItem$reduce = initItem.reduce((acc, item) => [...acc, item, ...(item.children ? item.children : [])], [])) == null ? void 0 : _initItem$reduce.filter(item => selectedValueSet.has(item.id))) || [];
+  }, [selectedValue, initItem, selectedValueSet, itemLookupMap]);
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -14545,7 +14685,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     removeSelectedItem,
     selectedItems
   } = useMultipleSelection({
-    selectedItems: selectedValue.length > 0 ? initItem == null || (_initItem$reduce = initItem.reduce((acc, item) => [...acc, item, ...(item.children ? item.children : [])], [])) == null ? void 0 : _initItem$reduce.filter(item => selectedValue.includes(item.id)) : []
+    selectedItems: memoizedSelectedItems
   });
   const generateOptions = data => {
     return data.map(option => {
@@ -14610,7 +14750,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       if ((selected == null ? void 0 : selected.id) === 'counter') {
         setSelectedValue([]);
         setInputSelectValue([]);
-        onChange == null || onChange([]);
+        batchedOnChange([]);
         for (let i = 0; i < selectedValue.length; i++) {
           removeSelectedItem(selectedValue[i]);
         }
@@ -14620,11 +14760,28 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         setSelectedValue(filterItems);
         setInputSelectValue(filterItems);
         if (selected.id !== '!all') {
-          onChange == null || onChange(filterItems);
+          batchedOnChange(filterItems);
         }
       }
     }
   };
+
+  // Memoize flattened items for useCombobox to prevent recalculation on every render
+  const flattenedItemsForCombobox = useMemo(() => {
+    // We need all items for selection to work properly, even for large datasets
+    // Optimize by using for loops instead of reduce/spread for better performance
+    const result = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      result.push(item);
+      if (item.children) {
+        for (let j = 0; j < item.children.length; j++) {
+          result.push(item.children[j]);
+        }
+      }
+    }
+    return result;
+  }, [items]);
   const {
     getToggleButtonProps,
     getMenuProps,
@@ -14636,7 +14793,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     isOpen
   } = useCombobox({
     inputValue,
-    items: items.reduce((acc, item) => [...acc, item, ...(item.children ? item.children : [])], []),
+    items: flattenedItemsForCombobox,
     selectedItem: selectedValue,
     itemToString: item => item ? item.name : '',
     onStateChange: ({
@@ -14670,9 +14827,13 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                       removeSelectedItem(item);
                     }
                   });
-                  setSelectedValue([]);
-                  setInputSelectValue([]);
-                  onChange == null || onChange([]);
+
+                  // Use startTransition for non-urgent state updates
+                  startTransition(() => {
+                    setSelectedValue([]);
+                    setInputSelectValue([]);
+                  });
+                  batchedOnChange([]);
                 } else {
                   removeItem(selectedItem);
                 }
@@ -14680,27 +14841,34 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
               }
             } else {
               if (selectedItem.id === '!all') {
+                // Optimized select all - batch operations instead of individual calls
                 const itemIds = [];
+                const itemsToAdd = [];
                 items.filter(item => !item.isDisabled).forEach(item => {
                   var _item$children3;
                   if (item != null && (_item$children3 = item.children) != null && _item$children3.length) {
-                    var _item$children4;
-                    item == null || (_item$children4 = item.children) == null || _item$children4.filter(item => !item.isDisabled).forEach(item => {
-                      addSelectedItem(item);
-                      itemIds.push(item.id);
+                    item.children.filter(child => !child.isDisabled).forEach(child => {
+                      itemsToAdd.push(child);
+                      itemIds.push(child.id);
                     });
                   } else {
-                    addSelectedItem(item);
+                    itemsToAdd.push(item);
                     itemIds.push(item.id);
                   }
                 });
-                setSelectedValue(itemIds);
-                setInputSelectValue(itemIds);
-                // onChange?.(itemIds.slice(1).filter(id => !items.find(item => item.id === id)?.children?.length));
+
+                // Batch add all items at once instead of one by one
+                itemsToAdd.forEach(item => addSelectedItem(item));
+
+                // Use startTransition for non-urgent state updates
+                startTransition(() => {
+                  setSelectedValue(itemIds);
+                  setInputSelectValue(itemIds);
+                });
                 if (onSelectAllChecked) {
                   onSelectAllChecked(itemIds.slice(1));
                 } else {
-                  onChange == null || onChange(itemIds.slice(1));
+                  batchedOnChange(itemIds.slice(1));
                 }
               } else {
                 var _selectedItem$childre;
@@ -14709,34 +14877,48 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                   var _selectedItem$childre2;
                   const itemIdsSelect = [];
                   const itemIdsUnSelect = [];
+                  const itemsToAdd = [];
+                  const itemsToRemove = [];
                   selectedItem == null || (_selectedItem$childre2 = selectedItem.children) == null || _selectedItem$childre2.filter(item => !item.isDisabled).forEach(item => {
-                    if (selectedValue != null && selectedValue.includes(item.id)) {
-                      removeSelectedItem(item);
+                    if (selectedValueSet.has(item.id)) {
+                      itemsToRemove.push(item);
                       itemIdsUnSelect.push(item.id);
                     } else {
-                      addSelectedItem(item);
+                      itemsToAdd.push(item);
                       itemIdsSelect.push(item.id);
                     }
                   });
 
+                  // Batch add/remove operations
+                  itemsToAdd.forEach(item => addSelectedItem(item));
+                  itemsToRemove.forEach(item => removeSelectedItem(item));
+
                   //select all child in one of the option groups
                   if (itemIdsSelect.length) {
-                    setSelectedValue([...selectedValue, ...itemIdsSelect]);
-                    setInputSelectValue([...selectedValue, ...itemIdsSelect]);
-                    const _filteredSelectedValues = selectedValue.filter(val => val !== '!all');
-                    onChange == null || onChange([..._filteredSelectedValues, ...itemIdsSelect]);
+                    const _newSelectedValue = [...selectedValue, ...itemIdsSelect];
+
+                    // Use startTransition for non-urgent updates
+                    startTransition(() => {
+                      setSelectedValue(_newSelectedValue);
+                      setInputSelectValue(_newSelectedValue);
+                    });
+                    const _filteredSelectedValues = _newSelectedValue.filter(val => val !== '!all');
+                    batchedOnChange(_filteredSelectedValues);
                   }
 
                   //unselect all child in one of the option groups
                   if (itemIdsUnSelect.length) {
-                    const newSelectedValue = selectedValue.filter(selId => {
-                      var _itemIdsUnSelect$filt;
-                      return ((_itemIdsUnSelect$filt = itemIdsUnSelect.filter(unselId => unselId === selId && unselId)) == null ? void 0 : _itemIdsUnSelect$filt[0]) !== selId && selId;
+                    // Use Set for O(1) lookup instead of nested filter
+                    const unSelectSet = new Set(itemIdsUnSelect);
+                    const _newSelectedValue2 = selectedValue.filter(selId => !unSelectSet.has(selId) && selId);
+
+                    // Use startTransition for non-urgent updates
+                    startTransition(() => {
+                      setSelectedValue(_newSelectedValue2);
+                      setInputSelectValue(_newSelectedValue2);
                     });
-                    setSelectedValue(newSelectedValue);
-                    setInputSelectValue(newSelectedValue);
-                    const _filteredSelectedValues2 = newSelectedValue.filter(val => val !== '!all');
-                    onChange == null || onChange(_filteredSelectedValues2);
+                    const _filteredSelectedValues2 = _newSelectedValue2.filter(val => val !== '!all');
+                    batchedOnChange(_filteredSelectedValues2);
                   }
                   return;
                 }
@@ -14750,10 +14932,15 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                 //end check the child from one of the option groups
 
                 addSelectedItem(selectedItem);
-                setSelectedValue([...selectedValue, selectedItem.id]);
-                setInputSelectValue([...selectedValue, selectedItem.id]);
+                const newSelectedValue = [...selectedValue, selectedItem.id];
+
+                // Use startTransition for non-urgent updates
+                startTransition(() => {
+                  setSelectedValue(newSelectedValue);
+                  setInputSelectValue(newSelectedValue);
+                });
                 const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
-                onChange == null || onChange([...filteredSelectedValues, selectedItem.id]);
+                batchedOnChange([...filteredSelectedValues, selectedItem.id]);
               }
               selectItem(null);
             }
@@ -14786,8 +14973,15 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   });
   const memoOptions = useMemo(() => {
+    // Skip expensive operations for very large datasets
+    const isVeryLarge = (option == null ? void 0 : option.length) > 10000;
+
+    // For very large datasets, skip sorting and copying to improve performance
+    if (isVeryLarge && !maxSelectedItem) {
+      return option || [];
+    }
     const optionsCopy = option ? [...option] : [];
-    if (sortBy === 'id') {
+    if (sortBy === 'id' && !isVeryLarge) {
       optionsCopy.sort((a, b) => {
         const idA = typeof a.id === 'string' ? a.id.toUpperCase() : a.id;
         const idB = typeof b.id === 'string' ? b.id.toUpperCase() : b.id;
@@ -14797,7 +14991,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         if (idA > idB) return 1;
         return 0;
       });
-    } else if (sortBy === 'name') {
+    } else if (sortBy === 'name' && !isVeryLarge) {
       optionsCopy.sort((a, b) => {
         const nameA = typeof a.name === 'string' ? a.name.toUpperCase() : a.name;
         const nameB = typeof b.name === 'string' ? b.name.toUpperCase() : b.name;
@@ -14820,10 +15014,20 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       return item;
     }) : optionsCopy;
   }, [maxSelectedItem, option, selectedValue, sortBy]);
-  const memoOptionsString = useMemo(() => JSON.stringify(memoOptions), [memoOptions]);
-  const itemsLength = items == null ? void 0 : items.reduce((acc, item) => {
-    return [...acc, ...(item.children ? item.children : [item])];
-  }, []).length;
+  const memoOptionsString = useMemo(() => {
+    // For very large datasets, skip JSON.stringify as it's expensive
+    if ((memoOptions == null ? void 0 : memoOptions.length) > 10000) {
+      return `${memoOptions.length}-${Date.now()}`;
+    }
+    return JSON.stringify(memoOptions);
+  }, [memoOptions]);
+
+  // Optimize itemsLength calculation - avoid creating arrays
+  const itemsLength = useMemo(() => {
+    return (items == null ? void 0 : items.reduce((count, item) => {
+      return count + (item.children ? item.children.length : 1);
+    }, 0)) || 0;
+  }, [items]);
   useEffect(() => {
     if (!inputValue || fetchData) {
       setItems(isShowSelectAll ? [{
@@ -14889,7 +15093,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         }
         onItemClick({
           item,
-          isSelected: !selectedValue.includes(item.id)
+          isSelected: !selectedValueSet.has(item.id)
         });
       },
       css: {
@@ -14901,7 +15105,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 774,
+        lineNumber: 972,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -14915,7 +15119,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 793,
+        lineNumber: 991,
         columnNumber: 11
       }
     }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14923,29 +15127,29 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 805,
+        lineNumber: 1003,
         columnNumber: 17
       }
-    }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
+    }) : selectedValueSet.has(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
       color: colors$7.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 809,
+        lineNumber: 1007,
         columnNumber: 19
       }
     })), isShowSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < itemsLength ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 813,
+        lineNumber: 1011,
         columnNumber: 15
       }
     }, "-") : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 815,
+        lineNumber: 1013,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -14956,18 +15160,18 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 818,
+        lineNumber: 1016,
         columnNumber: 11
       }
     }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name));
   };
   let lastGroupIndex = showSelectAll ? 1 : 0;
   const renderOptionGroupItem = (item, index) => {
-    var _item$children5, _item$children6, _item$children7, _item$children8;
+    var _item$children4, _item$children5, _item$children6, _item$children7;
     // const groupIndex = (index > (showSelectAll ? 1 : 0)) ? lastGroupIndex : 0;
     const groupIndex = lastGroupIndex;
-    lastGroupIndex += ((item == null || (_item$children5 = item.children) == null ? void 0 : _item$children5.length) || 0) + 1;
-    const filterSelectedChild = item == null || (_item$children6 = item.children) == null ? void 0 : _item$children6.filter(e => selectedValue.includes(e.id) && !e.isDisabled);
+    lastGroupIndex += ((item == null || (_item$children4 = item.children) == null ? void 0 : _item$children4.length) || 0) + 1;
+    const filterSelectedChild = item == null || (_item$children5 = item.children) == null ? void 0 : _item$children5.filter(e => selectedValueSet.has(e.id) && !e.isDisabled);
     return /*#__PURE__*/React__default.createElement(OptionGroupItem, {
       item: /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
         key: item.id
@@ -14984,7 +15188,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 834,
+          lineNumber: 1032,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -14997,7 +15201,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 847,
+          lineNumber: 1045,
           columnNumber: 15
         }
       }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -15005,22 +15209,22 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 857,
+          lineNumber: 1055,
           columnNumber: 19
         }
-      }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) === (item == null || (_item$children7 = item.children) == null || (_item$children7 = _item$children7.filter(e => !e.isDisabled)) == null ? void 0 : _item$children7.length) ? /*#__PURE__*/React__default.createElement(CheckOutline, {
+      }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) === (item == null || (_item$children6 = item.children) == null || (_item$children6 = _item$children6.filter(e => !e.isDisabled)) == null ? void 0 : _item$children6.length) ? /*#__PURE__*/React__default.createElement(CheckOutline, {
         color: colors$7.iconGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 859,
+          lineNumber: 1057,
           columnNumber: 19
         }
       }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) > 0 ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 861,
+          lineNumber: 1059,
           columnNumber: 19
         }
       }, "-") : null), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -15031,17 +15235,17 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 864,
+          lineNumber: 1062,
           columnNumber: 15
         }
       }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name)),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 832,
+        lineNumber: 1030,
         columnNumber: 9
       }
-    }, item == null || (_item$children8 = item.children) == null ? void 0 : _item$children8.map((optItem, optIndex) => renderOptionItem(optItem, groupIndex + optIndex + 1, true)));
+    }, item == null || (_item$children7 = item.children) == null ? void 0 : _item$children7.map((optItem, optIndex) => renderOptionItem(optItem, groupIndex + optIndex + 1, true)));
   };
   return /*#__PURE__*/React__default.createElement(Wrapper$1, _extends({
     css: css
@@ -15051,7 +15255,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 876,
+      lineNumber: 1074,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -15061,7 +15265,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 877,
+      lineNumber: 1075,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -15076,7 +15280,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 878,
+      lineNumber: 1076,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -15094,7 +15298,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 888,
+      lineNumber: 1086,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -15108,7 +15312,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 895,
+      lineNumber: 1093,
       columnNumber: 13
     }
   }), (_ref2 = label != null ? label : placeholder) != null ? _ref2 : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -15119,7 +15323,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 906,
+      lineNumber: 1104,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -15127,7 +15331,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 911,
+      lineNumber: 1109,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15140,7 +15344,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 915,
+      lineNumber: 1113,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -15148,7 +15352,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 921,
+      lineNumber: 1119,
       columnNumber: 13
     }
   }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -15169,7 +15373,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 923,
+      lineNumber: 1121,
       columnNumber: 17
     }
   }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems == null || (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null || (_selectedItems$filter = _selectedItems$filter.filter((_, idx) => {
@@ -15200,7 +15404,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 952,
+      lineNumber: 1150,
       columnNumber: 21
     }
   }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems == null ? void 0 : selectedItems.length) > collapsibleLimit && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15209,7 +15413,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 975,
+      lineNumber: 1173,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15219,14 +15423,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 976,
+      lineNumber: 1174,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 977,
+      lineNumber: 1175,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15240,7 +15444,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 978,
+      lineNumber: 1176,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -15248,7 +15452,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 984,
+      lineNumber: 1182,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -15256,7 +15460,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 986,
+      lineNumber: 1184,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15268,14 +15472,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 988,
+      lineNumber: 1186,
       columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 992,
+      lineNumber: 1190,
       columnNumber: 19
     }
   })), showCollapsibleCounter && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15286,7 +15490,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 995,
+      lineNumber: 1193,
       columnNumber: 19
     }
   }, `${totalOptions ? totalOptions : selectedItems == null || (_selectedItems$filter2 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter2.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15298,7 +15502,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1006,
+      lineNumber: 1204,
       columnNumber: 11
     }
   }, `${totalOptions ? totalOptions : selectedItems == null || (_selectedItems$filter3 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -15311,7 +15515,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1013,
+      lineNumber: 1211,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15333,7 +15537,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1023,
+      lineNumber: 1221,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -15341,7 +15545,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1040,
+      lineNumber: 1238,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -15353,7 +15557,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1045,
+      lineNumber: 1243,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -15376,17 +15580,127 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1049,
+        lineNumber: 1247,
         columnNumber: 19
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1046,
+      lineNumber: 1244,
       columnNumber: 15
     }
-  }, isOpen && items.map((item, index) => item != null && item.children ? renderOptionGroupItem(item) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
+  }, isOpen && shouldVirtualize ?
+  /*#__PURE__*/
+  // Virtualized rendering for large lists
+  React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      height: `${rowVirtualizer.totalSize}px`,
+      position: 'relative',
+      width: '100%'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$x,
+      lineNumber: 1268,
+      columnNumber: 21
+    }
+  }, rowVirtualizer.virtualItems.map(virtualRow => {
+    var _item$children8, _item$children9, _item$children0;
+    const virtualItem = getItemAtIndex(virtualRow.index);
+    if (!virtualItem) return null;
+    const {
+      type,
+      item
+    } = virtualItem;
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: `${type}-${item.id}-${virtualRow.index}`,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        transform: `translateY(${virtualRow.start}px)`
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$x,
+        lineNumber: 1276,
+        columnNumber: 27
+      }
+    }, type === 'group' ?
+    /*#__PURE__*/
+    // Render option group header (without children, as they're rendered separately)
+    React__default.createElement(ItemWrapper$1, _extends({}, getItemProps({
+      item,
+      index: virtualRow.index,
+      disabled: item.isDisabled
+    }), {
+      css: {
+        backgroundColor: highlightedIndex === virtualRow.index ? '$bgGray' : '$bgWhite',
+        cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+        color: item.isDisabled ? '$textDisable' : 'textPrimary',
+        fontWeight: 600
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$x,
+        lineNumber: 1288,
+        columnNumber: 31
+      }
+    }), /*#__PURE__*/React__default.createElement(IconWrapper, {
+      css: Object.assign({
+        width: '16px',
+        height: '16px',
+        border: '1px solid $bgBorder',
+        cursor: item.isDisabled ? 'not-allowed' : 'pointer'
+      }, checkBoxCss),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$x,
+        lineNumber: 1301,
+        columnNumber: 33
+      }
+    }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
+      color: colors$7.iconDisable,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$x,
+        lineNumber: 1311,
+        columnNumber: 37
+      }
+    }) : (item == null || (_item$children8 = item.children) == null || (_item$children8 = _item$children8.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)) == null ? void 0 : _item$children8.length) === (item == null || (_item$children9 = item.children) == null || (_item$children9 = _item$children9.filter(e => !e.isDisabled)) == null ? void 0 : _item$children9.length) ? /*#__PURE__*/React__default.createElement(CheckOutline, {
+      color: colors$7.iconGreen,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$x,
+        lineNumber: 1315,
+        columnNumber: 39
+      }
+    }) : (item == null || (_item$children0 = item.children) == null || (_item$children0 = _item$children0.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)) == null ? void 0 : _item$children0.length) > 0 ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$x,
+        lineNumber: 1317,
+        columnNumber: 39
+      }
+    }, "-") : null), /*#__PURE__*/React__default.createElement(Item$2, {
+      css: {
+        backgroundColor: 'unset',
+        width: '100%'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$x,
+        lineNumber: 1321,
+        columnNumber: 33
+      }
+    }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name)) :
+    // Render regular item or child item
+    renderOptionItem(item, virtualRow.index, type === 'child'));
+  }))) :
+  // Non-virtualized rendering for small lists
+  isOpen && items.map((item, index) => item != null && item.children ? renderOptionGroupItem(item) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
     css: {
       height: 'auto'
     }
@@ -15396,14 +15710,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1074,
+      lineNumber: 1344,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1075,
+      lineNumber: 1345,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15413,7 +15727,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1076,
+      lineNumber: 1346,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -15425,7 +15739,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1077,
+      lineNumber: 1347,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -15444,6 +15758,7 @@ InputSelectCheck.propTypes = {
   search: PropTypes.bool,
   placement: PropTypes.oneOf(['top', 'bottom']),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  disabledSortChecked: PropTypes.bool,
   unremovableTags: PropTypes.arrayOf(PropTypes.string),
   textEmptyItem: PropTypes.string,
   showSelectAll: PropTypes.bool,
@@ -15470,7 +15785,9 @@ InputSelectCheck.propTypes = {
   showCollapsibleCounter: PropTypes.bool,
   collapsibleLimit: PropTypes.number,
   clearSearchOnSelect: PropTypes.bool,
-  onItemClick: PropTypes.func
+  onItemClick: PropTypes.func,
+  virtualized: PropTypes.bool,
+  virtualizedThreshold: PropTypes.number
 };
 InputSelectCheck.defaultProps = {
   size: 'lg',
@@ -15481,6 +15798,7 @@ InputSelectCheck.defaultProps = {
   placement: 'bottom',
   value: [],
   disabledOptions: [],
+  disabledSortChecked: false,
   unremovableTags: [],
   sortBy: 'name',
   showSelectAll: true,
@@ -15495,7 +15813,9 @@ InputSelectCheck.defaultProps = {
   showCollapsibleCounter: true,
   collapsibleLimit: 5,
   clearSearchOnSelect: true,
-  onItemClick: changes => {}
+  onItemClick: () => {},
+  virtualized: true,
+  virtualizedThreshold: 100
 };
 
 var _jsxFileName$w = "/Users/hanabyan/Sourcecode/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
@@ -15527,6 +15847,7 @@ InputSelectTag.propTypes = {
   placement: PropTypes.oneOf(['top', 'bottom']),
   unremovableTags: PropTypes.arrayOf(PropTypes.string),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  disabledSortChecked: PropTypes.bool,
   textEmptyItem: PropTypes.string,
   helperText: PropTypes.string,
   showCounter: PropTypes.bool,
@@ -15551,6 +15872,7 @@ InputSelectTag.defaultProps = {
   placement: 'bottom',
   value: [],
   disabledOptions: [],
+  disabledSortChecked: false,
   unremovableTags: [],
   sortBy: 'name',
   showCounter: false,
@@ -57692,13 +58014,13 @@ var getNative = _getNative,
     root = _root;
 
 /* Built-in method references that are verified to be native. */
-var Map$1 = getNative(root, 'Map');
+var Map$2 = getNative(root, 'Map');
 
-var _Map = Map$1;
+var _Map = Map$2;
 
 var Hash = _Hash,
     ListCache = _ListCache,
-    Map = _Map;
+    Map$1 = _Map;
 
 /**
  * Removes all key-value entries from the map.
@@ -57711,7 +58033,7 @@ function mapCacheClear$1() {
   this.size = 0;
   this.__data__ = {
     'hash': new Hash,
-    'map': new (Map || ListCache),
+    'map': new (Map$1 || ListCache),
     'string': new Hash
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.61.20",
+  "version": "1.61.21",
   "main": "./index.esm.js",
   "exports": {
     ".": {