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

package/components/form/components/InputSelect/InputSelect.esm.js

@@ -0,0 +1,964 @@
+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.map.js';
+import 'core-js/modules/es.iterator.reduce.js';
+import { __rest, __awaiter } from 'tslib';
+import * as React from 'react';
+import { useState, useRef, useEffect, createElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { renderToString } from 'react-dom/server';
+import Downshift from 'downshift';
+import { CircleInfoOutline, SearchOutline, CloseFilled, CaretDownOutline } from '@majoo-ui/icons';
+import isFunction from 'lodash/isFunction';
+import { styled, colors } from '../../../../config/stitches.config.esm.js';
+import Text from '../../../text/Text.esm.js';
+import { InputGroup } from '../InputGroup/InputGroup.esm.js';
+import Box from '../../../../layout/box/Box.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import { InputLeftElement, InputRightElement } from '../InputElement/InputElement.esm.js';
+import InputSearchbox from '../InputSearchbox/InputSearchbox.esm.js';
+import InfiniteScroll from 'react-infinite-scroller';
+import { ConditionalWrapper } from '../../../../wrapper/ConditionalWrapper.esm.js';
+import debounce from 'lodash.debounce';
+import { useTranslation } from 'react-i18next';
+import { Portal } from '@majoo-ui/helpers';
+import { foundations } from '@majoo-ui/core';
+import ModalDialog, { ModalDialogTitle, ModalDialogContent } from '../../../modalDialog/ModalDialog.esm.js';
+import Paragraph from '../../../paragraph/Paragraph.esm.js';
+import { extractStringFromHTML } from '../../../../utils/strings.esm.js';
+import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from '../../../popover/Popover.esm.js';
+import Tooltip from '../../../tooltip/Tooltip.esm.js';
+
+const {
+  zIndices
+} = foundations;
+const SelectContainer = 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: '$textPrimary',
+  width: '100%',
+  variants: {
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'block !important'
+        }
+      }
+    }
+  }
+});
+const SelectBox = styled(Flex, {
+  margin: 0,
+  position: 'relative',
+  appearance: 'none',
+  background: 'none',
+  boxSizing: 'border-box',
+  border: '1px solid $bgOutline',
+  borderRadius: '$lg',
+  outline: 'none',
+  '&:focus-within': {
+    border: '1px solid $primary400'
+  },
+  '&:hover': {
+    border: '1px solid $primary600'
+  },
+  variants: {
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&:hover': {
+          border: '1px solid $bgOutline'
+        },
+        '&:focus-within': {
+          border: '1px solid $bgOutline'
+        }
+      }
+    },
+    readOnly: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textPrimary',
+        '&: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 Button = styled('button', {
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  flex: 1,
+  minWidth: 0,
+  background: 'none',
+  outline: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  color: '$textContent',
+  alignItems: 'center',
+  '&:disabled': {
+    cursor: 'not-allowed',
+    color: '$textDisable'
+  },
+  variants: {
+    size: {
+      sm: {
+        padding: '5px 16px'
+      },
+      lg: {
+        padding: '11px 16px 12px'
+      }
+    },
+    readOnly: {
+      true: {
+        color: '$textPrimary'
+      }
+    }
+  }
+});
+const Input = styled('input', {
+  marginLeft: '$spacing-05',
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  background: 'none',
+  outline: 'none',
+  border: 'none',
+  cursor: 'text',
+  color: '$textPrimary',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  '&:disabled': {
+    cursor: 'not-allowed',
+    color: '$textDisable'
+  },
+  '&::placeholder': {
+    color: '$textDisable',
+    opacity: 1
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        color: '$textPrimary'
+      }
+    }
+  }
+});
+const IconContainer = styled('div', {
+  flex: ' 0 0 auto',
+  width: 'auto',
+  display: 'flex',
+  alignItems: 'center',
+  paddingRight: '$spacing-05',
+  cursor: 'pointer',
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed'
+      }
+    }
+  }
+});
+const OptionWrapper = styled('div', {
+  display: 'none',
+  overflow: 'auto',
+  fontFamily: 'inherit',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  fontWeight: '400',
+  textAlign: 'left',
+  zIndex: 1,
+  borderRadius: '$sm',
+  backgroundColor: '$bgWhite',
+  boxShadow: '0px 2px 12px #00000014',
+  width: '100%',
+  maxHeight: '300px',
+  position: 'absolute',
+  float: 'left',
+  top: '100%',
+  left: '0',
+  variants: {
+    placement: {
+      bottom: {
+        top: '100%',
+        left: '0',
+        transform: 'none'
+      },
+      top: {
+        top: '0',
+        left: '0',
+        transform: 'translate(0, -100%)'
+      }
+    },
+    withFooter: {
+      true: {
+        maxHeight: 'calc(100vh - 64px - 96px)'
+      }
+    },
+    isMobile: {
+      true: {
+        display: 'block',
+        position: 'unset',
+        boxShadow: 'none',
+        inset: 'unset',
+        borderRadius: 'unset',
+        maxHeight: 'calc(100vh - 64px - 56px)'
+      }
+    }
+  },
+  defaultVariants: {
+    placement: 'bottom'
+  }
+});
+const SelectOption = styled('div', {
+  flexDirection: 'column',
+  display: 'block',
+  borderRadius: '$lg',
+  padding: '12px 16px',
+  overflowY: 'auto',
+  minHeight: '40px',
+  height: '100%'
+});
+const SelectItem = styled('div', {
+  overflow: 'hidden',
+  padding: '$spacing-05 0',
+  backgroundColor: 'rgb(235, 245, 255)',
+  cursor: 'pointer',
+  lineHeight: '20px',
+  '&:not(:last-child)': {
+    borderBottom: '1px solid $bgBorder'
+  },
+  variants: {
+    hasGroup: {
+      true: {
+        paddingLeft: '$spacing-06'
+      }
+    },
+    isGroup: {
+      true: {
+        padding: '$spacing-03 0',
+        borderBottom: 'none !important'
+      }
+    }
+  }
+});
+const StyledFooter = styled('div', {
+  position: 'sticky',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  backgroundColor: '$bgWhite',
+  boxShadow: '0px 4px 6px #00000014',
+  borderTop: '1px solid $bgBorder',
+  pointerEvents: 'auto'
+});
+const StyledDiv = styled('div', {
+  color: '$textDisable',
+  display: 'flex',
+  alignItems: 'center'
+});
+const StyledText = {
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+};
+const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      showLeadingIcon = false,
+      showClearIcon = true,
+      disabled,
+      placeholder,
+      readOnly,
+      inputProps,
+      handleInputValue,
+      noStyling,
+      onChange
+    } = _a,
+    props = __rest(_a, ["showLeadingIcon", "showClearIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"]);
+  const inputRef = React.useRef(null);
+  return jsxs(InputGroup, {
+    css: !noStyling && {
+      height: '100%',
+      border: 'none',
+      '&:hover': {
+        border: 'none'
+      }
+    },
+    disabled: disabled,
+    children: [jsx(InputLeftElement, {
+      children: showLeadingIcon && jsx(SearchOutline, {}),
+      css: !showLeadingIcon ? {
+        width: '$spacing-05',
+        padding: 0
+      } : undefined
+    }), jsx(Input, Object.assign({}, inputProps, props, {
+      placeholder: placeholder,
+      readOnly: readOnly,
+      isReadOnly: readOnly,
+      ref: forwardedRef,
+      disabled: disabled,
+      css: {
+        marginLeft: 0,
+        height: 'fit-content'
+      }
+    })), showClearIcon ? jsx(InputRightElement, {
+      children: showClearIcon && (inputProps.value || '').length > 0 && !disabled ? jsx(CloseFilled, {}) : jsx("div", {}),
+      onClick: e => {
+        if (!disabled) {
+          inputProps.onChange(Object.assign(Object.assign({}, e), {
+            target: Object.assign(Object.assign({}, e.target), {
+              value: ''
+            })
+          }));
+          if (handleInputValue) handleInputValue('');
+          if (inputRef.current) inputRef.current.focus();
+        }
+      }
+    }) : null]
+  });
+});
+function isHTMLElement(element) {
+  return 'offsetTop' in element;
+}
+const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      option,
+      onChange,
+      value,
+      placeholder,
+      searchPlaceholder,
+      embedSearch = false,
+      size = 'lg',
+      disabled = false,
+      search = false,
+      iconColor = 'currentColor',
+      hideArrowicon = false,
+      showLeadingIcon,
+      placement = 'bottom',
+      disabledOptions,
+      textSelector = 'name',
+      valueSelector = 'value',
+      readOnly = false,
+      isInvalid = false,
+      noOptionIcon = false,
+      fetchData,
+      onSearch,
+      isLoading = false,
+      showTooltip = false,
+      css,
+      renderFooter,
+      optionCss,
+      emptyDataMessage,
+      mobileOnly,
+      desktopOnly,
+      onStateChange,
+      isMobile = false,
+      mobileTitle,
+      withDebounce = true,
+      renderAsLabel = true
+    } = _a,
+    props = __rest(_a, ["option", "onChange", "value", "placeholder", "searchPlaceholder", "embedSearch", "size", "disabled", "search", "iconColor", "hideArrowicon", "showLeadingIcon", "placement", "disabledOptions", "textSelector", "valueSelector", "readOnly", "isInvalid", "noOptionIcon", "fetchData", "onSearch", "isLoading", "showTooltip", "css", "renderFooter", "optionCss", "emptyDataMessage", "mobileOnly", "desktopOnly", "onStateChange", "isMobile", "mobileTitle", "withDebounce", "renderAsLabel"]);
+  const {
+    t
+  } = useTranslation(['MajooUI/inputSelect', 'translation']);
+  const [options, setOptions] = useState([]);
+  const [item, setItem] = useState([]);
+  const [groupedItems, setGroupedItems] = useState([]);
+  const [selectedValue, setSelectedValue] = useState(value);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [query, setQuery] = useState();
+  const [openOptions, setOpenOptions] = useState(false);
+  const [open, setOpen] = useState(false);
+  const selectBoxRef = useRef(null);
+  const scrollerRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (search && Boolean(query)) {
+      (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        top: 0
+      });
+      return;
+    }
+    const scrollToSelectedElement = () => {
+      const element = document.querySelector(`[data-index="${selectedIndex}"]`);
+      const scrollContainer = scrollerRef.current;
+      if (element && isHTMLElement(element) && scrollContainer) {
+        const elementPosition = element.offsetTop - scrollContainer.offsetTop;
+        scrollContainer.scrollTop = elementPosition;
+      }
+    };
+    scrollToSelectedElement();
+  }, [query, search, openOptions, open, selectedIndex]);
+  const handleInputValue = (value, isReset = false) => {
+    if (onSearch && !isReset) onSearch(value);
+    if (fetchData) return;
+    if (value === '') {
+      return setItem(options);
+    } else {
+      setItem(options.filter(item => {
+        const nameIsIncluded = item.name.toLowerCase().includes(value.toLocaleLowerCase());
+        if (item.render && isFunction(item.render)) {
+          const extractedString = item.render() ? extractStringFromHTML(renderToString(item.render())).join(',') : '';
+          return nameIsIncluded || extractedString.toLowerCase().includes(value.toLocaleLowerCase());
+        }
+        return nameIsIncluded;
+      }));
+    }
+  };
+  const generateOptions = (data, valueSelector = '', textSelector = '') => {
+    return data.map(option => {
+      if (typeof option === 'object') {
+        const name = textSelector ? option[textSelector] : Object.values(option)[0];
+        const value = valueSelector ? option[valueSelector] : Object.values(option)[1];
+        return {
+          name,
+          value,
+          isDisabled: option.isDisabled === undefined && disabledOptions && disabledOptions.length > 0 ? disabledOptions.includes(value) : option.isDisabled,
+          render: option.render,
+          group: option.group
+        };
+      }
+      return {
+        name: option,
+        value: option,
+        isDisabled: disabledOptions && disabledOptions.includes(option),
+        render: option.render,
+        group: option.group
+      };
+    });
+  };
+  const debouncedSearch = React.useRef(debounce(query => __awaiter(void 0, void 0, void 0, function* () {
+    setQuery(query);
+    if (onSearch) onSearch(query);
+  }), 1000)).current;
+  useEffect(() => {
+    var _a;
+    (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+      top: 0
+    });
+  }, [query]);
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (groupedItems && value) {
+      const itemIndex = (groupedItems.length > 0 ? groupedItems : item !== null && item !== void 0 ? item : []).findIndex(val => String(val.value) === String(value.value));
+      if (itemIndex >= 0) {
+        setSelectedIndex(itemIndex);
+      }
+    }
+  }, [value, groupedItems, item]);
+  useEffect(() => {
+    const generatedOption = generateOptions(option, valueSelector, textSelector);
+    setItem(generatedOption);
+    setOptions(generatedOption);
+  }, [option, disabledOptions, valueSelector, textSelector]);
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+  useEffect(() => {
+    setGroupedItems(item.sort(function (a, b) {
+      const nameA = (typeof a.group === 'string' ? a.group.toUpperCase() : a.group) || ''; // ignore upper and lowercase
+      const nameB = (typeof b.group === 'string' ? b.group.toUpperCase() : b.group) || ''; // ignore upper and lowercase
+      if (!a.group) return 1;
+      if (!b.group) return -1;
+      if (nameA < nameB) {
+        return -1;
+      }
+      if (nameA > nameB) {
+        return 1;
+      }
+      return 0;
+    }).reduce((prev, current) => {
+      let addedGroupItems = [];
+      if (prev) addedGroupItems = [...prev];
+      const group = current.group;
+      if ((!prev || !prev.find(val => val.value === `#group#${group}#`)) && group) {
+        addedGroupItems.push({
+          name: group,
+          value: `#group#${group}#`,
+          isGroup: true,
+          render: () => jsx(Paragraph, {
+            color: "primary",
+            paragraph: "shortContentBold",
+            children: group
+          })
+        });
+      }
+      addedGroupItems.push(current);
+      return addedGroupItems;
+    }, []));
+  }, [item]);
+  const stateReducer = (_, changes) => {
+    switch (changes.type) {
+      case Downshift.stateChangeTypes.blurButton:
+        return {
+          isOpen: true
+        };
+      default:
+        return changes;
+    }
+  };
+  return jsx(Downshift, Object.assign({}, props, {
+    onChange: onChange,
+    itemToString: item => item ? item.name : '',
+    selectedItem: selectedValue !== undefined ? selectedValue : null,
+    onSelect: (selectedItem, _) => setSelectedValue(selectedItem),
+    onStateChange: state => {
+      if (state && (state.type === '__autocomplete_mouseup__' || String(state.type) === '1') && 'inputValue' in state) {
+        handleInputValue(String(state.inputValue ? state.inputValue : '').toLowerCase());
+      }
+      if (!('isOpen' in state)) return;
+      if (state.isOpen && embedSearch) handleInputValue('', true);
+      if (!state.isOpen && fetchData && query && query.length > 0 && onSearch) {
+        onSearch('');
+        setQuery('');
+      }
+      if (onStateChange) onStateChange(state);
+    },
+    stateReducer: stateReducer,
+    children: ({
+      getRootProps,
+      getToggleButtonProps,
+      getMenuProps,
+      getInputProps,
+      getItemProps,
+      isOpen,
+      selectedItem,
+      highlightedIndex
+    }) => {
+      var _a, _b;
+      const handleDownOption = () => {
+        if (hideArrowicon || noOptionIcon) {
+          return null;
+        }
+        return jsx(IconContainer, Object.assign({}, getToggleButtonProps({
+          disabled: disabled || readOnly
+        }), {
+          disabled: disabled,
+          readOnly: readOnly,
+          children: jsx(CaretDownOutline, {
+            color: readOnly ? colors.gray300 : iconColor
+          })
+        }));
+      };
+      setOpen(isOpen);
+      return !isMobile ? jsx(Popover, {
+        open: openOptions,
+        onOpenChange: setOpenOptions,
+        placement: placement,
+        hideOnScroll: true,
+        children: jsxs(SelectContainer, {
+          css: css,
+          ref: selectBoxRef,
+          mobileOnly: mobileOnly,
+          desktopOnly: desktopOnly,
+          children: [jsx(ConditionalWrapper, {
+            condition: showTooltip && selectedValue,
+            wrapper: children => jsx(Tooltip, {
+              color: "dark",
+              label: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name,
+              children: children
+            }),
+            children: jsx(PopoverTrigger, {
+              children: jsxs(SelectBox, Object.assign({}, getRootProps({
+                refKey: 'ref'
+              }, {
+                suppressRefError: true
+              }), {
+                size: size,
+                disabled: disabled,
+                readOnly: readOnly,
+                isInvalid: isInvalid,
+                children: [search && !disabled && !readOnly ? jsx(Box, {
+                  style: {
+                    width: '100%',
+                    flex: 1
+                  },
+                  children: jsx(SelectInputSearch, {
+                    ref: ref,
+                    showLeadingIcon: showLeadingIcon,
+                    showClearIcon: hideArrowicon,
+                    disabled: disabled,
+                    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item'),
+                    readOnly: readOnly,
+                    handleInputValue: !fetchData ? handleInputValue : query => {
+                      if (onSearch) onSearch(query);
+                      setQuery(query);
+                    },
+                    inputProps: getInputProps({
+                      onChange: event => {
+                        setOpenOptions(true);
+                        if (event.type !== 'change') return;
+                        const query = event.target.value;
+                        if (!fetchData) handleInputValue(query);else debouncedSearch(query);
+                      },
+                      disabled
+                    }),
+                    onClick: !isOpen ? getToggleButtonProps({
+                      disabled: disabled || readOnly
+                    }).onClick : undefined
+                  })
+                }) : jsx(Button, Object.assign({
+                  ref: ref
+                }, getToggleButtonProps({
+                  disabled: disabled || readOnly
+                }), {
+                  disabled: disabled,
+                  size: size,
+                  readOnly: readOnly,
+                  type: "button",
+                  children: selectedItem ? selectedItem.render && renderAsLabel ? selectedItem.render(selectedItem) : jsx(Text, {
+                    color: disabled ? 'disable' : 'primary',
+                    css: StyledText,
+                    children: selectedItem.name
+                  }) : jsx(Text, {
+                    color: "disable",
+                    css: StyledText,
+                    children: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item')
+                  })
+                })), handleDownOption()]
+              }))
+            })
+          }), jsx(Portal, {
+            children: jsx(PopoverContent, {
+              style: {
+                width: (_b = (_a = selectBoxRef === null || selectBoxRef === void 0 ? void 0 : selectBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0,
+                zIndex: zIndices.tooltip
+              },
+              children: jsxs(Fragment, {
+                children: [isOpen && isLoading && jsx(Flex, {
+                  justify: "center",
+                  align: "center",
+                  css: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: '$tooltip',
+                    top: item.length > 0 ? '0px' : placement === 'top' ? '-20px' : '20px',
+                    // bottom: '80px',
+                    width: '100%',
+                    height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
+                    backgroundColor: '$bgWhite',
+                    opacity: 0.8,
+                    transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+                  },
+                  children: jsx(Text, {
+                    variant: "caption",
+                    children: "Loading...."
+                  })
+                }), jsx(ConditionalWrapper, {
+                  condition: renderFooter && typeof renderFooter === 'function',
+                  wrapper: child => jsxs(Box, {
+                    css: {
+                      position: 'absolute',
+                      float: 'left',
+                      display: isOpen ? 'block' : 'none',
+                      zIndex: '$popover',
+                      width: '100%'
+                    },
+                    children: [child, renderFooter && typeof renderFooter === 'function' && jsx(StyledFooter, {
+                      children: renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter()
+                    })]
+                  }),
+                  children: jsxs(OptionWrapper, Object.assign({}, getMenuProps({
+                    ref: scrollerRef
+                  }, {
+                    suppressRefError: true
+                  }), {
+                    css: Object.assign({
+                      display: isOpen ? 'block' : 'none',
+                      zIndex: '$popover',
+                      pointerEvents: 'auto'
+                    }, optionCss),
+                    withFooter: renderFooter && typeof renderFooter === 'function',
+                    placement: placement,
+                    children: [!search && embedSearch && isOpen && jsx(SelectContainer, {
+                      css: {
+                        position: 'sticky',
+                        top: 0,
+                        zIndex: '$sticky',
+                        padding: '$spacing-04 $spacing-05 0',
+                        backgroundColor: '$bgWhite'
+                      },
+                      children: jsx(InputSearchbox, {
+                        size: 'sm',
+                        onChange: handleInputValue,
+                        placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t('searchPlaceholder', 'Cari ...'),
+                        withDebounce: withDebounce
+                      })
+                    }), item.length > 0 || isLoading ? jsx(ConditionalWrapper, {
+                      condition: !!fetchData && item.length > 0,
+                      wrapper: children => jsx(InfiniteScroll, {
+                        loadMore: _ => {
+                          if (!isLoading && fetchData) fetchData({
+                            query
+                          });
+                        },
+                        hasMore: true,
+                        threshold: 5,
+                        useWindow: false,
+                        children: children
+                      }),
+                      children: jsx(PopoverClose, {
+                        css: {
+                          display: 'block !important'
+                        },
+                        children: jsx(SelectOption, {
+                          children: (groupedItems.length > 0 ? groupedItems : item).map((item, index) => {
+                            var _a;
+                            return /*#__PURE__*/createElement(SelectItem, Object.assign({}, getItemProps({
+                              item,
+                              disabled: item.isDisabled || item.isGroup,
+                              onClick: () => setSelectedIndex(index)
+                            }), {
+                              key: (_a = item.value) !== null && _a !== void 0 ? _a : index,
+                              hasGroup: !!item.group,
+                              isGroup: item.isGroup,
+                              "data-index": index,
+                              css: Object.assign({}, !item.isGroup ? item.isDisabled ? {
+                                backgroundColor: 'unset',
+                                cursor: 'not-allowed',
+                                color: '$textDisable'
+                              } : {
+                                backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                                fontWeight: 'normal',
+                                color: selectedItem && selectedItem.value === item.value ? '$textBrand' : '$textPrimary'
+                              } : {
+                                backgroundColor: 'unset',
+                                cursor: 'default'
+                              })
+                            }), item.render ? item.render(selectedItem) : item.name);
+                          })
+                        })
+                      })
+                    }) : jsx(SelectOption, {
+                      children: jsxs(StyledDiv, {
+                        children: [jsx("div", {
+                          style: {
+                            marginRight: '6px'
+                          },
+                          children: jsx(CircleInfoOutline, {
+                            size: "16px",
+                            color: colors.iconDisable,
+                            style: {
+                              verticalAlign: 'text-bottom'
+                            }
+                          })
+                        }), emptyDataMessage || t('noItemPlaceholder', 'Item tidak ditemukan')]
+                      })
+                    })]
+                  }))
+                })]
+              })
+            })
+          })]
+        })
+      }) : jsx(SelectContainer, {
+        css: css,
+        ref: selectBoxRef,
+        mobileOnly: mobileOnly,
+        desktopOnly: desktopOnly,
+        children: jsxs(ConditionalWrapper, {
+          condition: showTooltip && selectedValue,
+          wrapper: children => jsx(Tooltip, {
+            color: "dark",
+            label: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name,
+            children: children
+          }),
+          children: [jsxs(SelectBox, Object.assign({}, getRootProps({
+            refKey: 'ref'
+          }, {
+            suppressRefError: true
+          }), {
+            size: size,
+            disabled: disabled,
+            readOnly: readOnly,
+            isInvalid: isInvalid,
+            children: [jsx(Button, Object.assign({
+              ref: ref
+            }, getToggleButtonProps({
+              disabled: disabled || readOnly
+            }), {
+              disabled: disabled,
+              size: size,
+              readOnly: readOnly,
+              type: "button",
+              children: selectedItem ? selectedItem.render && renderAsLabel ? selectedItem.render(selectedItem) : jsx(Text, {
+                color: disabled ? 'disable' : 'primary',
+                css: StyledText,
+                children: selectedItem.name
+              }) : jsx(Text, {
+                color: "disable",
+                css: StyledText,
+                children: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item')
+              })
+            })), handleDownOption()]
+          })), jsxs(ModalDialog, {
+            isMobile: true,
+            open: isOpen,
+            children: [jsx(ModalDialogTitle, {
+              children: mobileTitle || placeholder || t('placeholder', 'Pilih Item')
+            }), jsx(ModalDialogContent, {
+              css: {
+                padding: 0,
+                maxHeight: 'unset',
+                position: 'relative'
+              },
+              children: jsxs(Fragment, {
+                children: [isOpen && isLoading && jsx(Flex, {
+                  justify: "center",
+                  align: "center",
+                  css: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: '$tooltip',
+                    top: item.length > 0 ? '0px' : placement === 'top' ? '-20px' : '20px',
+                    // bottom: '80px',
+                    width: '100%',
+                    height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
+                    backgroundColor: '$bgWhite',
+                    opacity: 0.8
+                  },
+                  children: jsx(Text, {
+                    variant: "caption",
+                    children: "Loading...."
+                  })
+                }), jsxs(OptionWrapper, Object.assign({}, getMenuProps({
+                  ref: scrollerRef
+                }, {
+                  suppressRefError: true
+                }), {
+                  css: Object.assign({
+                    pointerEvents: 'auto'
+                  }, optionCss),
+                  withFooter: renderFooter && typeof renderFooter === 'function',
+                  isMobile: true,
+                  children: [(search || embedSearch) && isOpen && jsx(SelectContainer, {
+                    css: {
+                      position: 'sticky',
+                      top: 0,
+                      zIndex: '$sticky',
+                      padding: '$spacing-04 $spacing-05 0',
+                      backgroundColor: '$bgWhite'
+                    },
+                    children: jsx(InputSearchbox, {
+                      size: 'sm',
+                      onChange: handleInputValue,
+                      placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t('searchPlaceholder', 'Cari ...'),
+                      withDebounce: withDebounce
+                    })
+                  }), item.length > 0 || isLoading ? jsx(ConditionalWrapper, {
+                    condition: !!fetchData && item.length > 0,
+                    wrapper: children => jsx(InfiniteScroll, {
+                      loadMore: _ => {
+                        if (!isLoading && fetchData) fetchData({
+                          query
+                        });
+                      },
+                      hasMore: true,
+                      threshold: 5,
+                      useWindow: false,
+                      children: children
+                    }),
+                    children: jsx(SelectOption, {
+                      children: (groupedItems.length > 0 ? groupedItems : item).map((item, index) => {
+                        var _a;
+                        return /*#__PURE__*/createElement(SelectItem, Object.assign({}, getItemProps({
+                          item,
+                          disabled: item.isDisabled || item.isGroup
+                        }), {
+                          key: (_a = item.value) !== null && _a !== void 0 ? _a : index,
+                          isGroup: item.isGroup,
+                          css: Object.assign({}, !item.isGroup ? item.isDisabled ? {
+                            backgroundColor: 'unset',
+                            cursor: 'not-allowed',
+                            color: '$textDisable'
+                          } : {
+                            backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                            fontWeight: 'normal',
+                            color: selectedItem && selectedItem.value === item.value ? '$textBrand' : '$textPrimary'
+                          } : {
+                            backgroundColor: 'unset',
+                            cursor: 'default'
+                          })
+                        }), item.render ? item.render(selectedItem) : item.name);
+                      })
+                    })
+                  }) : jsx(SelectOption, {
+                    children: jsxs(StyledDiv, {
+                      children: [jsx("div", {
+                        style: {
+                          marginRight: '6px'
+                        },
+                        children: jsx(CircleInfoOutline, {
+                          size: "16px",
+                          color: colors.iconDisable,
+                          style: {
+                            verticalAlign: 'text-bottom'
+                          }
+                        })
+                      }), emptyDataMessage || t('noItemPlaceholder', 'Item tidak ditemukan')]
+                    })
+                  }), renderFooter && typeof renderFooter === 'function' && jsx(StyledFooter, {
+                    children: renderFooter()
+                  })]
+                }))]
+              })
+            })]
+          })]
+        })
+      });
+    }
+  }));
+});
+
+export { IconContainer, Input, InputSelect, OptionWrapper, SelectBox, SelectContainer, SelectItem, SelectOption, InputSelect as default };