@majoo-ui/react 1.57.7 → 1.57.9

package/index.esm.js

@@ -20,13 +20,13 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
 import InfiniteScroll from 'react-infinite-scroller';
 import debounce from 'lodash.debounce';
-import { useFloating, offset, flip, shift as shift$2, useInteractions, useClick, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useFloating, offset, shift as shift$2, flip, useInteractions, useClick, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import OTPInput, { ResendOTP as ResendOTP$1 } from 'otp-input-react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useDayzed } from 'dayzed';
 import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect } from 'react-table';
@@ -3384,7 +3384,6 @@ const ToastProvider = ({
     const uniqueId = ++toastCount;
     const toastId = toast.id || `${id || 'toast'}-${uniqueId}`;
     const offlineInstance = {
-      id: 'offline-connection',
       title: t('offlineTitle', 'Internet Bermasalah'),
       variant: 'failed',
       description: t('offlineDescription', 'Tidak ada koneksi internet, mohon periksa jaringan'),
@@ -3418,7 +3417,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 65,
+      lineNumber: 64,
       columnNumber: 5
     }
   }, children, /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3427,7 +3426,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 67,
+      lineNumber: 66,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3436,7 +3435,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 71,
+      lineNumber: 70,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3445,7 +3444,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 75,
+      lineNumber: 74,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3454,7 +3453,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 79,
+      lineNumber: 78,
       columnNumber: 7
     }
   }));
@@ -4189,6 +4188,21 @@ const ButtonPrimitive = styled('button', {
         alignItems: 'center',
         justifyContent: 'center'
       }
+    },
+    mobileOnly: {
+      true: {
+        '@md': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@md': {
+          display: 'inherit !important'
+        }
+      }
     }
   }
 });
@@ -4204,9 +4218,11 @@ const Button$4 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
       leftIcon,
       rightIcon,
       icon = false,
-      iconSize
+      iconSize,
+      mobileOnly,
+      desktopOnly
     } = _a,
-    props = __rest(_a, ["children", "type", "buttonType", "size", "disabled", "block", "width", "leftIcon", "rightIcon", "icon", "iconSize"]);
+    props = __rest(_a, ["children", "type", "buttonType", "size", "disabled", "block", "width", "leftIcon", "rightIcon", "icon", "iconSize", "mobileOnly", "desktopOnly"]);
   return jsxs(ButtonPrimitive, Object.assign({
     type: type,
     buttonType: buttonType,
@@ -4214,6 +4230,8 @@ const Button$4 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
     withIcon: Boolean(icon || leftIcon || rightIcon),
     iconSize: icon ? size : undefined,
     disabled: disabled,
+    mobileOnly: mobileOnly,
+    desktopOnly: desktopOnly,
     css: Object.assign(Object.assign({}, props.css), {
       width: block ? '100%' : width
     }),
@@ -7169,6 +7187,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
     ref: ref,
+    getInputRef: ref,
     placeholder: placeholder,
     value: value,
     size: size,
@@ -8375,11 +8394,11 @@ const InputSearchbox = _ref => {
   } = useTranslation(['MajooUI/inputSearchbox', 'translation']);
   const [value, setValue] = useState(defaultValue);
   const inputValue = (_props$value = props === null || props === void 0 ? void 0 : props.value) != null ? _props$value : value;
-  const debounceChange = useCallback(() => debounce(e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), 1000), [onChange]);
+  const debounceChange = useCallback(debounce(e => onChange === null || onChange === void 0 ? void 0 : onChange(e), 1000), [onChange]);
   const handleChange = useCallback(e => {
     setValue(e.target.value);
     if (withDebounce) {
-      debounceChange(e);
+      debounceChange(e.target.value);
     } else {
       onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
     }
@@ -8398,7 +8417,7 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 40,
+      lineNumber: 43,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -8406,14 +8425,14 @@ const InputSearchbox = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 41,
+        lineNumber: 44,
         columnNumber: 35
       }
     }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 41,
+      lineNumber: 44,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, _extends({
@@ -8428,7 +8447,7 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 42,
+      lineNumber: 45,
       columnNumber: 7
     }
   })), /*#__PURE__*/React__default.createElement(InputRightElement, {
@@ -8437,14 +8456,14 @@ const InputSearchbox = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 53,
+        lineNumber: 56,
         columnNumber: 44
       }
     }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 53,
+        lineNumber: 56,
         columnNumber: 91
       }
     }),
@@ -8452,7 +8471,7 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 52,
+      lineNumber: 55,
       columnNumber: 7
     }
   }));
@@ -8623,106 +8642,6 @@ fixRegExpWellKnownSymbolLogic$1('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-const StyledOverlay$3 = styled(DialogPrimitive.Overlay, {
-  backgroundColor: '$bgDimmer',
-  position: 'fixed',
-  inset: 0
-});
-const StyledContent$5 = styled(DialogPrimitive.Content, {
-  position: 'fixed',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  '&:focus': {
-    outline: 'none'
-  },
-  width: '100%',
-  variants: {
-    /**
-    * Size of modal width, the height sized according to content. Size must be placed on DialogContent element
-    * if it's on mobile view will auto set maxWidth to 'unset'.
-    */
-    size: {
-      auto: {
-        '@md': {
-          width: 'auto'
-        }
-      },
-      xs: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '320px'
-        }
-      },
-      sm: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '384px'
-        }
-      },
-      md: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '448px'
-        }
-      },
-      lg: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '512px'
-        }
-      },
-      xl: {
-        maxWidth: 'unset',
-        '@md': {
-          maxWidth: '576px'
-        }
-      },
-      full: {
-        maxWidth: '100vw',
-        minHeight: '100vh'
-      }
-    }
-  },
-  defaultVariants: {
-    size: 'md'
-  }
-});
-const Content$2 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  const {
-      children
-    } = props,
-    rest = __rest(props, ["children"]);
-  return jsx(StyledContent$5, Object.assign({}, rest, {
-    ref: ref
-  }, {
-    children: children
-  }), void 0);
-});
-const StyledTitle$1 = styled(DialogPrimitive.Title, {});
-const StyledDescription$2 = styled(DialogPrimitive.Description, {
-  margin: '10px 0 20px',
-  color: '$textSecondary',
-  fontSize: 15,
-  lineHeight: 1.5
-});
-// Exports
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogContent = Content$2;
-const DialogTitle = StyledTitle$1;
-const DialogDescription = StyledDescription$2;
-const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = StyledOverlay$3;
-const DialogPortal = DialogPrimitive.Portal;
-DialogTrigger.displayName = 'DialogTrigger';
-DialogContent.displayName = 'DialogContent';
-DialogTitle.displayName = 'DialogTitle';
-DialogDescription.displayName = 'DialogDescription';
-DialogClose.displayName = 'DialogClose';
-DialogOverlay.displayName = 'DialogOverlay';
-DialogPortal.displayName = 'DialogPortal';
-
 const _excluded$d = ["children"];
 var _jsxFileName$y = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/popover/Popover.js";
 const {
@@ -8735,7 +8654,9 @@ const Popover = ({
   onOpenChange,
   placement,
   sideOffset: _sideOffset = 5,
-  hideOnScroll: _hideOnScroll = false
+  hideOnScroll: _hideOnScroll = false,
+  flip: _flip = true,
+  onClose
 }) => {
   const [openState, setOpenState] = useState(false);
   useEffect(() => {
@@ -8746,8 +8667,11 @@ const Popover = ({
   }, [openState, onOpenChange]);
   const floatingHook = useFloating({
     open: openState,
-    onOpenChange: setOpenState,
-    middleware: [offset(_sideOffset), flip(), shift$2()],
+    middleware: [offset(_sideOffset), shift$2(), _flip && flip()],
+    onOpenChange: isOpen => {
+      setOpenState(isOpen);
+      !isOpen && (onClose === null || onClose === void 0 ? void 0 : onClose());
+    },
     placement
   });
   const {
@@ -8768,7 +8692,7 @@ const Popover = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$y,
-      lineNumber: 49,
+      lineNumber: 60,
       columnNumber: 10
     }
   }, children);
@@ -8810,14 +8734,14 @@ const PopoverContent = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$y,
-        lineNumber: 67,
+        lineNumber: 78,
         columnNumber: 65
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$y,
-      lineNumber: 67,
+      lineNumber: 78,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
@@ -8828,7 +8752,7 @@ const PopoverContent = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$y,
-      lineNumber: 68,
+      lineNumber: 79,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, getFloatingProps({
@@ -8843,7 +8767,7 @@ const PopoverContent = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$y,
-      lineNumber: 69,
+      lineNumber: 80,
       columnNumber: 9
     }
   }), children))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
@@ -8864,7 +8788,7 @@ const PopoverClose = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$y,
-      lineNumber: 93,
+      lineNumber: 104,
       columnNumber: 5
     }
   }), children);
@@ -9203,9 +9127,10 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
       isLoading = false,
       showTooltip = false,
       css,
-      renderFooter
+      renderFooter,
+      optionCss
     } = _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"]);
+    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"]);
   const {
     t
   } = useTranslation(['MajooUI/inputSelect', 'translation']);
@@ -9439,11 +9364,11 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
                   }, {
                     suppressRefError: true
                   }), {
-                    css: {
+                    css: Object.assign({
                       display: isOpen ? 'block' : 'none',
                       zIndex: '$popover',
                       pointerEvents: 'auto'
-                    },
+                    }, optionCss),
                     withFooter: renderFooter && typeof renderFooter === 'function',
                     placement: placement
                   }, {
@@ -10913,7 +10838,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-const _excluded$c = ["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"];
+const _excluded$c = ["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"];
 var _jsxFileName$w = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
@@ -11175,7 +11100,8 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       toggleInput,
       fetchData,
       onSearch,
-      isLoading
+      isLoading,
+      maxSelectedItem
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const {
@@ -11189,6 +11115,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [inputSelectValue, setInputSelectValue] = React__default.useState(defaultValue || []);
   const [query, setQuery] = React__default.useState('');
   const scrollerRef = React__default.useRef(null);
+  const isShowSelectAll = showSelectAll && !maxSelectedItem;
   useEffect(() => {
     var _scrollerRef$current;
     (_scrollerRef$current = scrollerRef.current) === null || _scrollerRef$current === void 0 ? void 0 : _scrollerRef$current.scrollTo({
@@ -11411,17 +11338,25 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }
   });
+  const getOption = useCallback(() => option === null || option === void 0 ? void 0 : option.map(item => {
+    const isMaxSelectedItem = maxSelectedItem && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) >= maxSelectedItem;
+    if (isMaxSelectedItem && !(selectedValue !== null && selectedValue !== void 0 && selectedValue.includes(item.id))) {
+      item.hideCheck = true;
+      item.isDisabled = true;
+    }
+    return item;
+  }), [maxSelectedItem, option, selectedValue]);
   useEffect(() => {
     sortItems();
-    setItems(showSelectAll ? [{
+    setItems(isShowSelectAll ? [{
       id: '!all',
       name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
-    }, ...option] : option);
-    setInitItems(showSelectAll ? [{
+    }, ...getOption()] : getOption());
+    setInitItems(isShowSelectAll ? [{
       id: '!all',
       name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
-    }, ...option] : option);
-  }, [option, showSelectAll]);
+    }, ...getOption()] : getOption());
+  }, [getOption, isShowSelectAll]);
   useEffect(() => {
     if (selectedValue.length > 0 && disabledOptions.length === 0) {
       setInitItems(sortValue);
@@ -11434,16 +11369,16 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   useEffect(() => {
     if (disabledOptions.length > 0) {
       const options = generateOptions(sortDisabled);
-      setItems(showSelectAll ? [{
+      setItems(isShowSelectAll ? [{
         id: '!all',
         name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
       }, ...options] : options);
-      setInitItems(showSelectAll ? [{
+      setInitItems(isShowSelectAll ? [{
         id: '!all',
         name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
       }, ...options] : options);
     }
-  }, [disabledOptions, showSelectAll]);
+  }, [disabledOptions, isShowSelectAll]);
   useEffect(() => {
     setSelectedValue(items.length > 0 && inputSelectValue.length === items.length - 1 ? ['!all', ...inputSelectValue] : inputSelectValue);
   }, [inputSelectValue, items]);
@@ -11463,7 +11398,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 596,
+      lineNumber: 611,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -11473,7 +11408,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 597,
+      lineNumber: 612,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -11488,7 +11423,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 598,
+      lineNumber: 613,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -11506,7 +11441,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 608,
+      lineNumber: 623,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -11519,7 +11454,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 615,
+      lineNumber: 630,
       columnNumber: 13
     }
   }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -11530,7 +11465,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 625,
+      lineNumber: 640,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -11538,7 +11473,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 630,
+      lineNumber: 645,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11551,7 +11486,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 634,
+      lineNumber: 649,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -11559,7 +11494,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 640,
+      lineNumber: 655,
       columnNumber: 13
     }
   }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -11579,7 +11514,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 642,
+      lineNumber: 657,
       columnNumber: 17
     }
   }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -11609,7 +11544,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 670,
+      lineNumber: 685,
       columnNumber: 21
     }
   }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11618,7 +11553,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 692,
+      lineNumber: 707,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11628,14 +11563,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 693,
+      lineNumber: 708,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 694,
+      lineNumber: 709,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11649,7 +11584,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 695,
+      lineNumber: 710,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -11657,7 +11592,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 701,
+      lineNumber: 716,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -11665,7 +11600,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 703,
+      lineNumber: 718,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11677,14 +11612,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 705,
+      lineNumber: 720,
       columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 709,
+      lineNumber: 724,
       columnNumber: 19
     }
   })), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11695,7 +11630,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 711,
+      lineNumber: 726,
       columnNumber: 17
     }
   }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter3 === void 0 ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11707,7 +11642,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 721,
+      lineNumber: 736,
       columnNumber: 11
     }
   }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter4 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter4 === void 0 ? void 0 : _selectedItems$filter4.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -11719,7 +11654,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 728,
+      lineNumber: 743,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11740,7 +11675,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 734,
+      lineNumber: 749,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -11748,7 +11683,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 750,
+      lineNumber: 765,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -11759,7 +11694,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 756,
+      lineNumber: 771,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -11774,14 +11709,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 760,
+        lineNumber: 775,
         columnNumber: 19
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 757,
+      lineNumber: 772,
       columnNumber: 15
     }
   }, isOpen && items.map((item, index) => {
@@ -11801,7 +11736,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 772,
+        lineNumber: 787,
         columnNumber: 21
       }
     }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -11814,37 +11749,37 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 785,
+        lineNumber: 800,
         columnNumber: 23
       }
-    }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
+    }, !(item !== null && item !== void 0 && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
       color: colors$7.iconDisable,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 794,
-        columnNumber: 27
+        lineNumber: 810,
+        columnNumber: 29
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
       color: colors$7.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 798,
-        columnNumber: 29
+        lineNumber: 814,
+        columnNumber: 31
       }
-    }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
+    })), isShowSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 805,
+        lineNumber: 821,
         columnNumber: 27
       }
     }, "-") : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 807,
+        lineNumber: 823,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -11855,7 +11790,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 810,
+        lineNumber: 826,
         columnNumber: 23
       }
     }, item.render ? (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item.name) : item.name));
@@ -11869,14 +11804,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 818,
+      lineNumber: 834,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 819,
+      lineNumber: 835,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -11886,7 +11821,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 820,
+      lineNumber: 836,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -11898,7 +11833,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 821,
+      lineNumber: 837,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -11932,7 +11867,8 @@ InputSelectCheck.propTypes = {
   fetchData: PropTypes.func,
   onSearch: PropTypes.func,
   isLoading: PropTypes.bool,
-  showTagSelectAll: PropTypes.bool
+  showTagSelectAll: PropTypes.bool,
+  maxSelectedItem: PropTypes.number
 };
 InputSelectCheck.defaultProps = {
   size: 'lg',
@@ -11991,7 +11927,8 @@ InputSelectTag.propTypes = {
   fetchData: PropTypes.func,
   onSearch: PropTypes.func,
   isLoading: PropTypes.bool,
-  showTagSelectAll: PropTypes.bool
+  showTagSelectAll: PropTypes.bool,
+  maxSelectedItem: PropTypes.number
 };
 InputSelectTag.defaultProps = {
   size: 'lg',
@@ -13645,7 +13582,7 @@ const StyledTrigger$1 = styled(TabsPrimitive.Trigger, {
     size: 'lg'
   }
 });
-const StyledContent$4 = styled(TabsPrimitive.Content, {
+const StyledContent$5 = styled(TabsPrimitive.Content, {
   flexGrow: 1,
   borderRadius: '$lg',
   backgroundColor: '$white',
@@ -13865,7 +13802,7 @@ const TabsTrigger$1 = _ref3 => {
 };
 const TabsContent$1 = _ref4 => {
   let props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
-  return /*#__PURE__*/React__default.createElement(StyledContent$4, _extends({}, props, {
+  return /*#__PURE__*/React__default.createElement(StyledContent$5, _extends({}, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
@@ -14548,6 +14485,106 @@ const IconButton = styled('button', {
   }
 });
 
+const StyledOverlay$3 = styled(DialogPrimitive.Overlay, {
+  backgroundColor: '$bgDimmer',
+  position: 'fixed',
+  inset: 0
+});
+const StyledContent$4 = styled(DialogPrimitive.Content, {
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  '&:focus': {
+    outline: 'none'
+  },
+  width: '100%',
+  variants: {
+    /**
+    * Size of modal width, the height sized according to content. Size must be placed on DialogContent element
+    * if it's on mobile view will auto set maxWidth to 'unset'.
+    */
+    size: {
+      auto: {
+        '@md': {
+          width: 'auto'
+        }
+      },
+      xs: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '320px'
+        }
+      },
+      sm: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '384px'
+        }
+      },
+      md: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '448px'
+        }
+      },
+      lg: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '512px'
+        }
+      },
+      xl: {
+        maxWidth: 'unset',
+        '@md': {
+          maxWidth: '576px'
+        }
+      },
+      full: {
+        maxWidth: '100vw',
+        minHeight: '100vh'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});
+const Content$2 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+      children
+    } = props,
+    rest = __rest(props, ["children"]);
+  return jsx(StyledContent$4, Object.assign({}, rest, {
+    ref: ref
+  }, {
+    children: children
+  }), void 0);
+});
+const StyledTitle$1 = styled(DialogPrimitive.Title, {});
+const StyledDescription$2 = styled(DialogPrimitive.Description, {
+  margin: '10px 0 20px',
+  color: '$textSecondary',
+  fontSize: 15,
+  lineHeight: 1.5
+});
+// Exports
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogContent = Content$2;
+const DialogTitle = StyledTitle$1;
+const DialogDescription = StyledDescription$2;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = StyledOverlay$3;
+const DialogPortal = DialogPrimitive.Portal;
+DialogTrigger.displayName = 'DialogTrigger';
+DialogContent.displayName = 'DialogContent';
+DialogTitle.displayName = 'DialogTitle';
+DialogDescription.displayName = 'DialogDescription';
+DialogClose.displayName = 'DialogClose';
+DialogOverlay.displayName = 'DialogOverlay';
+DialogPortal.displayName = 'DialogPortal';
+
 const ModalDialogFooter = styled('div');
 ModalDialogFooter.displayName = 'ModalDialogFooter';
 const ModalDialogTitle = styled('div');
@@ -17148,6 +17185,7 @@ const CalendarRangePicker = _a => {
       isMultiDatePicker,
       isRangeControl,
       onChange,
+      onDateSelected: onSelectedDate,
       onClose,
       onReset,
       advanceView,
@@ -17157,7 +17195,7 @@ const CalendarRangePicker = _a => {
       maxDate,
       allowReset
     } = _a,
-    props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onClose", "onReset", "advanceView", "selected", "disabled", "minDate", "maxDate", "allowReset"]);
+    props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onDateSelected", "onClose", "onReset", "advanceView", "selected", "disabled", "minDate", "maxDate", "allowReset"]);
   const today = new Date();
   const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
   const [dateValue, setDateValue] = useState([]);
@@ -17176,11 +17214,14 @@ const CalendarRangePicker = _a => {
     }
     if (!dateValue.length || dateValue.length === 2) {
       setDateValue([selectedDate.date]);
+      onSelectedDate === null || onSelectedDate === void 0 ? void 0 : onSelectedDate([selectedDate.date]);
     } else {
       if (new Date(dateValue[0]) > selectedDate.date) {
         setDateValue([selectedDate.date, dateValue[0]]);
+        onSelectedDate === null || onSelectedDate === void 0 ? void 0 : onSelectedDate([selectedDate.date, dateValue[0]]);
       } else {
         setDateValue([dateValue[0], selectedDate.date]);
+        onSelectedDate === null || onSelectedDate === void 0 ? void 0 : onSelectedDate([dateValue[0], selectedDate.date]);
       }
     }
   };
@@ -17660,6 +17701,7 @@ function InputDatePicker({
   size = 'sm',
   disabled,
   onChange,
+  onDateSelected,
   defaultValue: defaultDateValue,
   value: dateValue,
   defaultDate,
@@ -17674,7 +17716,8 @@ function InputDatePicker({
   readOnly,
   isInvalid,
   allowReset,
-  portalled
+  portalled,
+  onClose
 }) {
   const {
     t,
@@ -17804,6 +17847,7 @@ function InputDatePicker({
       selected: selectedDate,
       isMultiDatePicker: type !== SINGLE_PICKER || showRangeControl,
       onChange: handleDatePickerChange,
+      onDateSelected: e => onDateSelected === null || onDateSelected === void 0 ? void 0 : onDateSelected(e),
       onClose: () => setOpenPicker(false),
       showTimePicker: showTimePicker,
       timePickerProps: timePickerProps,
@@ -17813,8 +17857,10 @@ function InputDatePicker({
     }, void 0);
   };
   return !isMobile ? jsxs(Popover, Object.assign({
+    flip: false,
     open: openPicker,
     onOpenChange: setOpenPicker,
+    onClose: onClose,
     placement: placement
   }, {
     children: [disabled || readOnly ? jsx(Box, Object.assign({
@@ -17879,7 +17925,10 @@ function InputDatePicker({
       }), void 0)
     }), void 0), jsx(Drawer, Object.assign({
       open: openPicker,
-      onOpenChange: handleChange,
+      onOpenChange: isOpen => {
+        handleChange();
+        !isOpen && (onClose === null || onClose === void 0 ? void 0 : onClose());
+      },
       side: "bottom",
       portalled: false
     }, {