@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/form/components/InputSelectCheck/InputSelectCheck.esm.js

@@ -0,0 +1,1388 @@
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.array.push.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.find.js';
+import 'core-js/modules/es.iterator.for-each.js';
+import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.iterator.reduce.js';
+import 'core-js/modules/es.iterator.some.js';
+import 'core-js/modules/es.json.stringify.js';
+import 'core-js/modules/es.map.get-or-insert.js';
+import 'core-js/modules/es.map.get-or-insert-computed.js';
+import 'core-js/modules/es.set.difference.v2.js';
+import 'core-js/modules/es.set.intersection.v2.js';
+import 'core-js/modules/es.set.is-disjoint-from.v2.js';
+import 'core-js/modules/es.set.is-subset-of.v2.js';
+import 'core-js/modules/es.set.is-superset-of.v2.js';
+import 'core-js/modules/es.set.symmetric-difference.v2.js';
+import 'core-js/modules/es.set.union.v2.js';
+import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
+import { useMultipleSelection, useCombobox } from 'downshift';
+import Box from '../../../../layout/box/Box.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import Paragraph from '../../../paragraph/Paragraph.esm.js';
+import { Separator } from '../../../separator/Separator.esm.js';
+import Text from '../../../text/Text.esm.js';
+import { Tag } from '../../../tag/Tag.esm.js';
+import { ChevronUpOutline, ChevronDownOutline, CircleInfoOutline, CaretDownOutline } from '@majoo-ui/icons';
+import { colors, styled } from '../../../../config/stitches.config.esm.js';
+import CheckOutline from './icon/CheckOutline.esm.js';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import debounce from 'lodash.debounce';
+import InfiniteScroll from 'react-infinite-scroller';
+import { ConditionalWrapper } from '../../../../wrapper/ConditionalWrapper.esm.js';
+import OptionGroupItem from './OptionGroupItem.esm.js';
+import { useMountedLayoutEffect } from 'react-table';
+import { useVirtual } from 'react-virtual';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+const startTransition = React__default.startTransition || (callback => {
+  // For React 17, use setTimeout to defer updates
+  setTimeout(callback, 0);
+});
+const Wrapper = styled('div', {
+  margin: 0,
+  flexDirection: 'column',
+  display: 'block',
+  position: 'relative',
+  fontFamily: 'inherit',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  fontWeight: '400',
+  textAlign: 'left',
+  alignItems: 'center',
+  letterSpacing: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  color: '$textDisable',
+  width: '100%',
+  variants: {
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'block !important'
+        }
+      }
+    }
+  }
+});
+const Select = styled('div', {
+  margin: 0,
+  display: 'flex',
+  position: 'relative',
+  width: '100%',
+  appearance: 'none',
+  background: 'none',
+  boxSizing: 'border-box',
+  border: '1px solid $bgOutline',
+  borderRadius: '$md',
+  outline: 'none',
+  '&:focus-within': {
+    border: '1px solid $primary400'
+  },
+  '&:hover': {
+    border: '1px solid $primary400'
+  },
+  variants: {
+    size: {
+      sm: {
+        height: 32,
+        maxHeight: 32,
+        padding: '2px 16px'
+      },
+      lg: {
+        height: 40,
+        maxHeight: 40,
+        padding: '8px 16px'
+      }
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&:hover': {
+          border: '1px solid $bgOutline'
+        },
+        '&:focus-within': {
+          border: '1px solid $bgOutline'
+        }
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $formError',
+        '&:focus-within': {
+          border: '1px solid $formError'
+        },
+        '&:hover': {
+          border: '1px solid $formError'
+        }
+      }
+    }
+  }
+});
+const InputWrapper = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  flex: 'auto',
+  flexWrap: 'wrap',
+  maxWidth: '100%',
+  cursor: 'pointer',
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        color: '$textDisable'
+      }
+    }
+  }
+});
+const Input = styled('input', {
+  width: '100%',
+  textAlign: 'left',
+  background: 'unset',
+  outline: 'none',
+  border: 'none',
+  cursor: 'text',
+  color: '$textPrimary',
+  '&::placeholder': {
+    color: '$textDisable'
+  },
+  '&:disabled': {
+    cursor: 'not-allowed'
+  },
+  variants: {
+    hidden: {
+      true: {
+        display: 'none'
+      }
+    }
+  }
+});
+const Button = styled('button', {
+  background: 'none',
+  outline: 'none',
+  border: 'none',
+  color: '$textDisable',
+  cursor: 'pointer',
+  width: '100%',
+  textAlign: 'left',
+  '&:disabled': {
+    cursor: 'not-allowed'
+  },
+  variants: {
+    hidden: {
+      true: {
+        display: 'none'
+      }
+    },
+    withLabel: {
+      true: {
+        color: '$textPrimary'
+      }
+    }
+  }
+});
+const IconWrapper = styled('div', {
+  flex: ' 0 0 auto',
+  width: 'auto',
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed'
+      }
+    },
+    readOnly: {
+      true: {
+        cursor: 'not-allowed'
+      }
+    }
+  }
+});
+const IconCaretDown = styled(CaretDownOutline, {
+  size: '24px'
+});
+const TagWrapper = styled(Box, {
+  display: 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  maxWidth: '100%',
+  margin: '10px 0',
+  gap: '5px'
+});
+const OptionWrapper = styled('div', {
+  display: 'none',
+  overflow: 'hidden',
+  zIndex: 12,
+  borderRadius: '$sm',
+  backgroundColor: '$bgWhite',
+  boxShadow: '0px 2px 12px #00000014',
+  width: '100%',
+  // height: '160px',
+  position: 'absolute',
+  float: 'left',
+  // top: '40px',
+  left: '0px',
+  color: '$textPrimary',
+  variants: {
+    placement: {
+      bottom: {
+        top: '100%',
+        left: '0',
+        transform: 'none'
+      },
+      top: {
+        top: '0',
+        left: '0',
+        transform: 'translate(0, -100%)'
+      }
+    }
+  }
+});
+const Option = styled('div', {
+  flexDirection: 'column',
+  display: 'block',
+  borderRadius: '$lg',
+  overflowY: 'auto',
+  padding: '8px 16px',
+  maxHeight: '160px',
+  height: 'auto',
+  '@sm': {
+    borderRadius: 'unset'
+  }
+});
+const ItemWrapper = styled(Box, {
+  display: 'flex',
+  position: 'relative',
+  flex: 'auto',
+  maxWidth: '100%',
+  cursor: 'pointer',
+  alignItems: 'center',
+  borderBottom: '1px solid $bgBorder'
+});
+const Item = styled('div', {
+  overflow: 'hidden',
+  backgroundColor: '$bgWhite',
+  lineHeight: '20px',
+  marginLeft: '10px',
+  padding: '12px 0'
+});
+const StyledDiv = styled('div', {
+  padding: '6px 0',
+  color: '$textDisable',
+  display: 'inline-flex'
+});
+const IndeterminateFilled = styled('div', {
+  width: 16,
+  height: 16,
+  background: '$primary500',
+  color: '$textWhite',
+  borderRadius: 3,
+  fontSize: 14,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const InputSelectCheck = /*#__PURE__*/forwardRef(({
+  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,
+  ...props
+}, ref) => {
+  const {
+    t,
+    i18n: {
+      language
+    }
+  } = useTranslation(['MajooUI/inputSelectCheck', 'translation']);
+  const [initItem, setInitItems] = React__default.useState(option); //init filter selectedItems on useMultipleSelection
+  const [items, setItems] = React__default.useState([]);
+  const [selectedValue, setSelectedValue] = React__default.useState([]);
+  const [inputValue, setInputValue] = React__default.useState('');
+  const [showAllTags, setShowAllTags] = React__default.useState(false);
+  const [inputSelectValue, setInputSelectValue] = React__default.useState(defaultValue || []);
+  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?.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?.(values);
+      }, 0);
+    } else {
+      // For smaller datasets, call immediately
+      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?.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(() => {
+    scrollerRef.current?.scrollTo({
+      top: 0
+    });
+  }, [query]);
+  useEffect(() => {
+    if (defaultValue?.length) {
+      if (value?.length) {
+        setInputSelectValue(value);
+      }
+    } else {
+      setInputSelectValue(value);
+    }
+  }, [value, defaultValue]);
+  const sortValue = selectedValue.length > 0 && disabledOptions.length === 0 ? inputSelectValue.reduce((res, id, i, {
+    [i + 1]: next
+  }) => {
+    let sortData = option.find(option => option.id === id);
+    if (sortData) res.push(sortData); // if exist in option
+    if (next) return res;else {
+      let filterOption = option.filter(option => !res.some(item => item.id === option.id));
+      return [...res, ...filterOption]; // add the missing elements
+    }
+  }, []) : option;
+  const sortDisabled = disabledOptions.length > 0 && !disabledSortChecked ? disabledOptions.reduce((res, id, i, {
+    [i + 1]: next
+  }) => {
+    let sortData = option.find(option => option.id === id);
+    if (sortData) res.push(sortData); // if exist in option
+    if (next) return res;else {
+      let filterOption = option.filter(option => !res.some(item => item.id === option.id));
+      return [...res, ...filterOption]; // add the missing elements
+    }
+  }, []) : option;
+
+  // Create a fast lookup map for item names (for large datasets)
+  const itemLookupMap = useMemo(() => {
+    if (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(() => {
+    if (selectedValue.length === 0) return [];
+
+    // For very large datasets, use lookup map for O(1) access
+    if (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?.reduce((acc, item) => [...acc, item, ...(item.children ? item.children : [])], [])?.filter(item => selectedValueSet.has(item.id)) || [];
+  }, [selectedValue, initItem, selectedValueSet, itemLookupMap]);
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    addSelectedItem,
+    removeSelectedItem,
+    selectedItems
+  } = useMultipleSelection({
+    selectedItems: memoizedSelectedItems
+  });
+  const generateOptions = data => {
+    return data.map(option => {
+      if (typeof option === 'object') {
+        const {
+          id
+        } = option;
+        let children = option?.children;
+        let isDisabled = disabledOptions.length > 0 ? disabledOptions.includes(id) : false;
+        if (children && Array.isArray(children)) {
+          children = generateOptions(children);
+          if (children.length === children.filter(child => child.isDisabled).length) isDisabled = true;
+        }
+        return {
+          ...option,
+          children,
+          isDisabled
+        };
+      }
+      return {
+        name: option,
+        value: option,
+        isDisabled: disabledOptions.includes(option)
+      };
+    });
+  };
+  const debouncedSearch = React__default.useRef(debounce(async query => {
+    setQuery(query);
+    onSearch?.(query);
+  }, 1000)).current;
+  React__default.useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+  const handleInputValue = input => {
+    onSearch?.(input);
+    if (input === '') {
+      if (disabledOptions.length > 0) {
+        const options = generateOptions(sortDisabled);
+        setItems(isShowSelectAll ? [{
+          id: '!all',
+          name: selectAllLabel ?? t('selectAllLabelText', 'Pilih Semua')
+        }, ...options] : options);
+      } else {
+        setItems(isShowSelectAll ? [{
+          id: '!all',
+          name: selectAllLabel ?? t('selectAllLabelText', 'Pilih Semua')
+        }, ...option] : option);
+      }
+    } else {
+      let filterItems = option?.filter(item => item?.name?.toLowerCase()?.includes?.(input?.toLocaleLowerCase?.()));
+      setItems(filterItems);
+    }
+  };
+  const removeItem = selected => {
+    if (disabled || readOnly) {
+      return selectedValue;
+    } else {
+      if (selected?.id === 'counter') {
+        setSelectedValue([]);
+        setInputSelectValue([]);
+        batchedOnChange([]);
+        for (let i = 0; i < selectedValue.length; i++) {
+          removeSelectedItem(selectedValue[i]);
+        }
+      } else {
+        const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
+        removeSelectedItem(selected);
+        setSelectedValue(filterItems);
+        setInputSelectValue(filterItems);
+        if (selected.id !== '!all') {
+          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,
+    getInputProps,
+    getComboboxProps,
+    getItemProps,
+    selectItem,
+    highlightedIndex,
+    isOpen
+  } = useCombobox({
+    inputValue,
+    items: flattenedItemsForCombobox,
+    selectedItem: selectedValue,
+    itemToString: item => item ? item.name : '',
+    onStateChange: ({
+      inputValue,
+      type,
+      selectedItem
+    }) => {
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputChange:
+          setInputValue(inputValue);
+          if (fetchData) debouncedSearch(inputValue);else handleInputValue(inputValue);
+          break;
+        case useCombobox.stateChangeTypes.ItemClick:
+          {
+            if (clearSearchOnSelect) setInputValue('');
+          }
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.InputBlur:
+          if (selectedItem) {
+            if (selectedItems.length !== 0 && selectedValue.includes(selectedItem.id)) {
+              if (disabled === false && readOnly === false) {
+                if (selectedItem.id === '!all') {
+                  items.forEach(item => {
+                    if (item?.children?.length) {
+                      item?.children?.forEach(item => {
+                        removeSelectedItem(item);
+                      });
+                    } else {
+                      removeSelectedItem(item);
+                    }
+                  });
+
+                  // Use startTransition for non-urgent state updates
+                  startTransition(() => {
+                    setSelectedValue([]);
+                    setInputSelectValue([]);
+                  });
+                  batchedOnChange([]);
+                } else {
+                  removeItem(selectedItem);
+                }
+                selectItem(null);
+              }
+            } 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 => {
+                  if (item?.children?.length) {
+                    item.children.filter(child => !child.isDisabled).forEach(child => {
+                      itemsToAdd.push(child);
+                      itemIds.push(child.id);
+                    });
+                  } else {
+                    itemsToAdd.push(item);
+                    itemIds.push(item.id);
+                  }
+                });
+
+                // 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 {
+                  batchedOnChange(itemIds.slice(1));
+                }
+              } else {
+                //start check if item have children (option group)
+                if (selectedItem?.children?.length) {
+                  const itemIdsSelect = [];
+                  const itemIdsUnSelect = [];
+                  const itemsToAdd = [];
+                  const itemsToRemove = [];
+                  selectedItem?.children?.filter(item => !item.isDisabled).forEach(item => {
+                    if (selectedValueSet.has(item.id)) {
+                      itemsToRemove.push(item);
+                      itemIdsUnSelect.push(item.id);
+                    } else {
+                      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) {
+                    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) {
+                    // Use Set for O(1) lookup instead of nested filter
+                    const unSelectSet = new Set(itemIdsUnSelect);
+                    const newSelectedValue = selectedValue.filter(selId => !unSelectSet.has(selId) && selId);
+
+                    // Use startTransition for non-urgent updates
+                    startTransition(() => {
+                      setSelectedValue(newSelectedValue);
+                      setInputSelectValue(newSelectedValue);
+                    });
+                    const filteredSelectedValues = newSelectedValue.filter(val => val !== '!all');
+                    batchedOnChange(filteredSelectedValues);
+                  }
+                  return;
+                }
+                //end check if item have children (option group)
+
+                //start check the child from one of the option groups
+                if (selectedValue.includes(selectedItem.id)) {
+                  removeItem(selectedItem);
+                  return;
+                }
+                //end check the child from one of the option groups
+
+                addSelectedItem(selectedItem);
+                const newSelectedValue = [...selectedValue, selectedItem.id];
+
+                // Use startTransition for non-urgent updates
+                startTransition(() => {
+                  setSelectedValue(newSelectedValue);
+                  setInputSelectValue(newSelectedValue);
+                });
+                const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
+                batchedOnChange([...filteredSelectedValues, selectedItem.id]);
+              }
+              selectItem(null);
+            }
+          }
+          break;
+        case useCombobox.stateChangeTypes.MenuMouseLeave:
+      }
+    },
+    stateReducer: (state, actionAndChanges) => {
+      const {
+        changes,
+        type
+      } = actionAndChanges;
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            isOpen: true,
+            // keep menu open after selection.
+            highlightedIndex: state.highlightedIndex
+          };
+        case useCombobox.stateChangeTypes.InputBlur:
+          if (changes.inputValue) {
+            return {
+              ...changes
+              // isOpen: true, // keep menu open after selection.
+            };
+          }
+          return changes;
+        default:
+          return changes;
+      }
+    }
+  });
+  const memoOptions = useMemo(() => {
+    // Skip expensive operations for very large datasets
+    const isVeryLarge = 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' && !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;
+        if (a.id === '!all') return -1;
+        if (b.id === '!all') return 1;
+        if (idA < idB) return -1;
+        if (idA > idB) return 1;
+        return 0;
+      });
+    } 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;
+        if (a.id === '!all') return -1;
+        if (b.id === '!all') return 1;
+        if (nameA < nameB) return -1;
+        if (nameA > nameB) return 1;
+        return 0;
+      });
+    }
+    return maxSelectedItem ? optionsCopy.map(item => {
+      const isMaxSelectedItem = maxSelectedItem && selectedValue?.length >= maxSelectedItem;
+      if (isMaxSelectedItem && !selectedValue?.includes(item.id)) {
+        item.hideCheck = true;
+        item.isDisabled = true;
+      } else {
+        item.hideCheck = false;
+        item.isDisabled = false;
+      }
+      return item;
+    }) : optionsCopy;
+  }, [maxSelectedItem, option, selectedValue, sortBy]);
+  const memoOptionsString = useMemo(() => {
+    // For very large datasets, skip JSON.stringify as it's expensive
+    if (memoOptions?.length > 10000) {
+      return `${memoOptions.length}-${Date.now()}`;
+    }
+    return JSON.stringify(memoOptions);
+  }, [memoOptions]);
+
+  // Optimize itemsLength calculation - avoid creating arrays
+  const itemsLength = useMemo(() => {
+    return items?.reduce((count, item) => {
+      return count + (item.children ? item.children.length : 1);
+    }, 0) || 0;
+  }, [items]);
+  useEffect(() => {
+    if (!inputValue || fetchData) {
+      setItems(isShowSelectAll ? [{
+        id: '!all',
+        name: selectAllLabel ?? (language === 'en' ? 'Select All' : 'Pilih Semua')
+      }, ...memoOptions] : memoOptions);
+      setInitItems(isShowSelectAll ? [{
+        id: '!all',
+        name: selectAllLabel ?? (language === 'en' ? 'Select All' : 'Pilih Semua')
+      }, ...memoOptions] : memoOptions);
+    }
+  }, [isShowSelectAll, selectAllLabel, language, memoOptionsString, inputValue, sortBy]);
+  useEffect(() => {
+    if (selectedValue.length > 0 && disabledOptions.length === 0) {
+      setInitItems(sortValue);
+      setItems(sortValue);
+    }
+  }, []);
+  useEffect(() => {
+    if (disabledOptions.length > 0) {
+      const options = generateOptions(sortDisabled);
+      setItems(isShowSelectAll ? [{
+        id: '!all',
+        name: selectAllLabel ?? t('selectAllLabelText', 'Pilih Semua')
+      }, ...options] : options);
+      setInitItems(isShowSelectAll ? [{
+        id: '!all',
+        name: selectAllLabel ?? t('selectAllLabelText', 'Pilih Semua')
+      }, ...options] : options);
+    }
+  }, [disabledOptions, isShowSelectAll]);
+  useMountedLayoutEffect(() => {
+    const selectedVal = itemsLength > 0 && inputSelectValue.length === itemsLength - 1 ? ['!all', ...inputSelectValue] : inputSelectValue;
+    setSelectedValue(selectedVal);
+  }, [inputSelectValue, items]);
+  useEffect(() => {
+    if (!!label && label !== '') {
+      setInputValue(label);
+    }
+  }, [label, isOpen]);
+  const toggleCollapsible = () => setShowAllTags(!showAllTags);
+  const handleRemoveAllItem = () => {
+    onChange?.([]);
+    setSelectedValue([]);
+    setInputSelectValue([]);
+    for (let i = 0; i < selectedValue.length; i++) {
+      removeSelectedItem(selectedValue[i]);
+    }
+  };
+  const isShowTagSelectAll = showTagSelectAll && selectedItems?.length > option?.length;
+  const renderOptionItem = (item, index, asChild) => {
+    const itemProps = getItemProps({
+      item,
+      index,
+      disabled: item.isDisabled
+    });
+    return /*#__PURE__*/jsxs(ItemWrapper, {
+      ...itemProps,
+      onClick: e => {
+        if (itemProps && itemProps.onClick && typeof itemProps.onClick === 'function') {
+          itemProps.onClick(e);
+        }
+        onItemClick({
+          item,
+          isSelected: !selectedValueSet.has(item.id)
+        });
+      },
+      css: {
+        backgroundColor: highlightedIndex === index ? '$bgGray' : '$bgWhite',
+        cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+        color: item.isDisabled ? '$textDisable' : 'textPrimary',
+        padding: asChild ? '0px $spacing-05' : 0
+      },
+      children: [/*#__PURE__*/jsxs(IconWrapper, {
+        css: {
+          width: '16px',
+          height: '16px',
+          border: '1px solid $iconDisable',
+          cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+          borderRadius: '$sm',
+          ...checkBoxCss
+        },
+        children: [!item?.hideCheck && (item.isDisabled ? /*#__PURE__*/jsx(CheckOutline, {
+          color: colors.iconDisable
+        }) : selectedValueSet.has(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/jsx(CheckOutline, {
+          color: colors.iconBrand
+        })), isShowSelectAll && item?.id === '!all' && selectedValue?.length && selectedValue?.length < itemsLength && !selectedValueSet.has('!all') ? /*#__PURE__*/jsx(IndeterminateFilled, {
+          children: "-"
+        }) : /*#__PURE__*/jsx("div", {})]
+      }), /*#__PURE__*/jsx(Item, {
+        css: {
+          backgroundColor: 'unset',
+          width: '100%'
+        },
+        children: item.render ? item.render?.(item.name) : item.name
+      })]
+    }, item.id);
+  };
+  let lastGroupIndex = showSelectAll ? 1 : 0;
+  const renderOptionGroupItem = (item, index) => {
+    // const groupIndex = (index > (showSelectAll ? 1 : 0)) ? lastGroupIndex : 0;
+    const groupIndex = lastGroupIndex;
+    lastGroupIndex += (item?.children?.length || 0) + 1;
+    const filterSelectedChild = item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled);
+    return /*#__PURE__*/jsx(OptionGroupItem, {
+      item: /*#__PURE__*/jsxs(ItemWrapper, {
+        ...getItemProps({
+          item,
+          index: groupIndex,
+          disabled: item.isDisabled
+        }),
+        css: {
+          backgroundColor: highlightedIndex === groupIndex ? '$bgGray' : '$bgWhite',
+          cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+          color: item.isDisabled ? '$textDisable' : 'textPrimary'
+        },
+        children: [/*#__PURE__*/jsx(IconWrapper, {
+          css: {
+            width: '16px',
+            height: '16px',
+            border: '1px solid $bgBorder',
+            cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+            ...checkBoxCss
+          },
+          children: !item?.hideCheck && item.isDisabled ? /*#__PURE__*/jsx(CheckOutline, {
+            color: colors.iconDisable
+          }) : filterSelectedChild?.length === item?.children?.filter(e => !e.isDisabled)?.length ? /*#__PURE__*/jsx(CheckOutline, {
+            color: colors.iconBrand
+          }) : filterSelectedChild?.length > 0 ? /*#__PURE__*/jsx(IndeterminateFilled, {
+            children: "-"
+          }) : null
+        }), /*#__PURE__*/jsx(Item, {
+          css: {
+            backgroundColor: 'unset',
+            width: '100%'
+          },
+          children: item.render ? item.render?.(item.name) : item.name
+        })]
+      }, item.id),
+      children: item?.children?.map((optItem, optIndex) => renderOptionItem(optItem, groupIndex + optIndex + 1, true))
+    });
+  };
+  return /*#__PURE__*/jsxs(Wrapper, {
+    css: css,
+    ...props,
+    mobileOnly: mobileOnly,
+    desktopOnly: desktopOnly,
+    children: [/*#__PURE__*/jsxs(Select, {
+      size: size,
+      disabled: disabled || readOnly,
+      isInvalid: isInvalid,
+      children: [/*#__PURE__*/jsxs(InputWrapper, {
+        ...getComboboxProps(getDropdownProps({
+          preventKeyAction: isOpen,
+          disabled: disabled || readOnly
+        }, {
+          suppressRefError: true
+        }), {
+          suppressRefError: true
+        }),
+        disabled: disabled || readOnly,
+        children: [/*#__PURE__*/jsx(Input, {
+          ...getInputProps({
+            disabled: disabled || readOnly,
+            refKey: 'ref',
+            ref
+          }, {
+            suppressRefError: true
+          }),
+          ...(toggleInput && getToggleButtonProps({
+            disabled: disabled || readOnly
+          })),
+          placeholder: placeholder ?? t('placeholder', 'Pilih Item'),
+          disabled: disabled || readOnly,
+          hidden: !search
+        }), /*#__PURE__*/jsx(Button, {
+          ...getToggleButtonProps({
+            disabled: disabled || readOnly
+          }),
+          disabled: disabled || readOnly,
+          size: size,
+          type: "button",
+          hidden: search,
+          withLabel: !!label,
+          children: label ?? placeholder ?? t('placeholder', 'Pilih Item')
+        })]
+      }), /*#__PURE__*/jsx(IconWrapper, {
+        ...getToggleButtonProps({
+          disabled: disabled || readOnly
+        }),
+        disabled: disabled,
+        readOnly: readOnly,
+        children: /*#__PURE__*/jsx(IconCaretDown, {
+          color: disabled || readOnly ? colors.iconDisable : colors.iconPrimary
+        })
+      })]
+    }), helperText && /*#__PURE__*/jsx(Paragraph, {
+      shortContentRegular: true,
+      css: {
+        paddingTop: 8,
+        fontSize: 12,
+        color: '$textSecondary'
+      },
+      children: helperText
+    }), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(TagWrapper, {
+        disabled: disabled,
+        children: isShowTagSelectAll ? /*#__PURE__*/jsx(Tag, {
+          disabled: disabled,
+          isRemovable: readOnly || disabled || unremovableTags.includes('!all') ? false : true,
+          size: "lg",
+          readOnly: readOnly,
+          ...getSelectedItemProps({
+            selectedItem: {
+              id: '!all',
+              name: selectAllLabel ?? t('selectAllLabelText', 'Pilih Semua')
+            },
+            index: 0
+          }),
+          onRemove: handleRemoveAllItem,
+          css: tagCss,
+          children: selectAllLabel ?? t('selectAllLabelText', 'Pilih Semua')
+        }, `selected-item-!all`) : selectedItems?.filter(item => item?.id !== '!all')?.filter((_, idx) => {
+          if (showAllTags || !collapsible) {
+            return true;
+          } else {
+            return idx < 5;
+          }
+        })?.map((selectedItem, index) => /*#__PURE__*/jsx(Tag, {
+          disabled: disabled,
+          isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
+          size: "lg",
+          readOnly: readOnly,
+          ...getSelectedItemProps({
+            selectedItem,
+            index
+          }),
+          onRemove: event => {
+            if (onRemoveItem) {
+              return onRemoveItem(selectedItem);
+            } else {
+              event.stopPropagation();
+              removeItem(selectedItem);
+            }
+          },
+          css: tagCss,
+          children: selectedItem.name
+        }, `selected-item-${index}`))
+      }), collapsible && !isShowTagSelectAll && selectedItems?.length > collapsibleLimit && /*#__PURE__*/jsxs(Flex, {
+        direction: "column",
+        gap: 4,
+        children: [/*#__PURE__*/jsxs(Flex, {
+          align: "center",
+          justify: "center",
+          onClick: toggleCollapsible,
+          children: [/*#__PURE__*/jsx(Separator, {}), /*#__PURE__*/jsxs(Flex, {
+            align: "center",
+            justify: "center",
+            css: {
+              cursor: 'pointer',
+              userSelect: 'none',
+              padding: '0px 8px'
+            },
+            children: [showAllTags ? /*#__PURE__*/jsx(ChevronUpOutline, {
+              color: colors.iconSecondary
+            }) : /*#__PURE__*/jsx(ChevronDownOutline, {
+              color: colors.iconSecondary
+            }), /*#__PURE__*/jsx(Paragraph, {
+              css: {
+                fontWeight: 600,
+                whiteSpace: 'nowrap'
+              },
+              color: "secondary",
+              children: showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua')
+            })]
+          }), /*#__PURE__*/jsx(Separator, {})]
+        }), showCollapsibleCounter && /*#__PURE__*/jsx(Paragraph, {
+          css: {
+            fontSize: '$label'
+          },
+          color: "brand",
+          children: `${totalOptions ? totalOptions : selectedItems?.filter(item => item?.id !== '!all')?.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`
+        })]
+      })]
+    }), showCounter && !isShowTagSelectAll && Boolean(selectedItems?.length) && /*#__PURE__*/jsx(Paragraph, {
+      css: {
+        fontSize: '$label',
+        marginTop: '$spacing-01'
+      },
+      color: "brand",
+      children: `${totalOptions ? totalOptions : selectedItems?.filter(item => item?.id !== '!all')?.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`
+    }), /*#__PURE__*/jsxs(OptionWrapper, {
+      placement: placement,
+      css: {
+        display: isOpen && disabled === false ? 'block' : 'none',
+        top: size === 'lg' ? '45px' : '35px',
+        minHeight: isLoading ? 40 : 0
+      },
+      children: [isLoading && /*#__PURE__*/jsx(Flex, {
+        justify: "center",
+        align: "center",
+        css: {
+          position: 'absolute',
+          inset: 0,
+          zIndex: '$tooltip',
+          top: items.length > 0 ? '0px' : placement === 'top' ? '-20px' : '0px',
+          // bottom: '80px',
+          width: '100%',
+          minHeight: 40,
+          height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
+          backgroundColor: '$bgWhite',
+          opacity: 0.8,
+          transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+        },
+        children: /*#__PURE__*/jsx(Text, {
+          variant: "caption",
+          children: "Loading...."
+        })
+      }), items.length > 0 || isLoading ? /*#__PURE__*/jsx(Option, {
+        ...getMenuProps({
+          ref: scrollerRef
+        }, {
+          suppressRefError: true
+        }),
+        css: optionListCss,
+        children: /*#__PURE__*/jsx(ConditionalWrapper, {
+          condition: !!fetchData && items.length > 0,
+          wrapper: child => /*#__PURE__*/jsx(InfiniteScroll, {
+            loadMore: () => {
+              if (!isLoading) {
+                if (scrollerRef.current) {
+                  scrollerRef.current.scrollBy(0, -5);
+                }
+                fetchData?.({
+                  query
+                });
+              }
+            },
+            hasMore: true,
+            threshold: 0,
+            useWindow: false,
+            children: child
+          }, isLoading),
+          children: isOpen && shouldVirtualize ?
+          /*#__PURE__*/
+          // Virtualized rendering for large lists
+          jsx(Fragment, {
+            children: /*#__PURE__*/jsx("div", {
+              style: {
+                height: `${rowVirtualizer.totalSize}px`,
+                position: 'relative',
+                width: '100%'
+              },
+              children: rowVirtualizer.virtualItems.map(virtualRow => {
+                const virtualItem = getItemAtIndex(virtualRow.index);
+                if (!virtualItem) return null;
+                const {
+                  type,
+                  item
+                } = virtualItem;
+                return /*#__PURE__*/jsx("div", {
+                  style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${virtualRow.start}px)`
+                  },
+                  children: type === 'group' ?
+                  /*#__PURE__*/
+                  // Render option group header (without children, as they're rendered separately)
+                  jsxs(ItemWrapper, {
+                    ...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
+                    },
+                    children: [/*#__PURE__*/jsx(IconWrapper, {
+                      css: {
+                        width: '16px',
+                        height: '16px',
+                        border: '1px solid $bgBorder',
+                        cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+                        ...checkBoxCss
+                      },
+                      children: !item?.hideCheck && item.isDisabled ? /*#__PURE__*/jsx(CheckOutline, {
+                        color: colors.iconDisable
+                      }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length === item?.children?.filter(e => !e.isDisabled)?.length ? /*#__PURE__*/jsx(CheckOutline, {
+                        color: colors.iconBrand
+                      }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length > 0 ? /*#__PURE__*/jsx(IndeterminateFilled, {
+                        children: "-"
+                      }) : null
+                    }), /*#__PURE__*/jsx(Item, {
+                      css: {
+                        backgroundColor: 'unset',
+                        width: '100%'
+                      },
+                      children: item.render ? item.render?.(item.name) : item.name
+                    })]
+                  }) :
+                  // Render regular item or child item
+                  renderOptionItem(item, virtualRow.index, type === 'child')
+                }, `${type}-${item.id}-${virtualRow.index}`);
+              })
+            })
+          }) :
+          // Non-virtualized rendering for small lists
+          isOpen && items.map((item, index) => item?.children ? renderOptionGroupItem(item) : renderOptionItem(item, index))
+        })
+      }) : /*#__PURE__*/jsx(Option, {
+        css: {
+          height: 'auto'
+        },
+        ...getMenuProps({}, {
+          suppressRefError: true
+        }),
+        children: /*#__PURE__*/jsxs(StyledDiv, {
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              marginRight: '6px'
+            },
+            children: /*#__PURE__*/jsx(CircleInfoOutline, {
+              size: "16px",
+              color: colors.iconDisable,
+              style: {
+                verticalAlign: 'text-bottom'
+              }
+            })
+          }), textEmptyItem ?? t('emptyItemText', 'Item tidak ditemukan')]
+        })
+      })]
+    })]
+  });
+});
+InputSelectCheck.propTypes = {
+  placeholder: PropTypes.string,
+  option: PropTypes.array.isRequired,
+  size: PropTypes.string,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  isInvalid: PropTypes.bool,
+  sortBy: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
+  onChange: PropTypes.func,
+  onRemoveItem: PropTypes.func,
+  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,
+  selectAllLabel: PropTypes.string,
+  showSelectedTag: PropTypes.bool,
+  css: PropTypes.object,
+  helperText: PropTypes.string,
+  showCounter: PropTypes.bool,
+  labelCounter: PropTypes.string,
+  collapsible: PropTypes.bool,
+  toggleInput: PropTypes.bool,
+  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
+  fetchData: PropTypes.func,
+  onSearch: PropTypes.func,
+  isLoading: PropTypes.bool,
+  showTagSelectAll: PropTypes.bool,
+  maxSelectedItem: PropTypes.number,
+  mobileOnly: PropTypes.bool,
+  desktopOnly: PropTypes.bool,
+  label: PropTypes.string,
+  tagCss: PropTypes.object,
+  checkBoxCss: PropTypes.object,
+  optionListCss: PropTypes.object,
+  showCollapsibleCounter: PropTypes.bool,
+  collapsibleLimit: PropTypes.number,
+  clearSearchOnSelect: PropTypes.bool,
+  onItemClick: PropTypes.func,
+  virtualized: PropTypes.bool,
+  virtualizedThreshold: PropTypes.number
+};
+InputSelectCheck.defaultProps = {
+  size: 'lg',
+  disabled: false,
+  readOnly: false,
+  isInvalid: false,
+  search: true,
+  placement: 'bottom',
+  value: [],
+  disabledOptions: [],
+  disabledSortChecked: false,
+  unremovableTags: [],
+  sortBy: 'name',
+  showSelectAll: true,
+  showCounter: false,
+  collapsible: true,
+  toggleInput: true,
+  defaultValue: [],
+  label: undefined,
+  tagCss: {},
+  checkBoxCss: {},
+  optionListCss: {},
+  showCollapsibleCounter: true,
+  collapsibleLimit: 5,
+  clearSearchOnSelect: true,
+  onItemClick: () => {},
+  virtualized: true,
+  virtualizedThreshold: 100
+};
+
+export { InputSelectCheck as default };