@majoo-ui/react 1.57.8 → 1.57.10-rc.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('@radix-ui/react-dialog'), require('otp-input-react'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', '@radix-ui/react-dialog', 'otp-input-react', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-accordion', 'dayzed', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.DialogPrimitive, global.OTPInput, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.AccordionPrimitive, global.dayzed, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, DialogPrimitive, OTPInput, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, AccordionPrimitive, dayzed, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,12 +39,12 @@
   var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
   var InfiniteScroll__default = /*#__PURE__*/_interopDefaultLegacy(InfiniteScroll);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-  var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var OTPInput__default = /*#__PURE__*/_interopDefaultLegacy(OTPInput);
   var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
   var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
   var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
   var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+  var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var ADialog__namespace = /*#__PURE__*/_interopNamespace(ADialog);
@@ -4271,6 +4271,21 @@
           alignItems: 'center',
           justifyContent: 'center'
         }
+      },
+      mobileOnly: {
+        true: {
+          '@md': {
+            display: 'none !important'
+          }
+        }
+      },
+      desktopOnly: {
+        true: {
+          display: 'none !important',
+          '@md': {
+            display: 'inherit !important'
+          }
+        }
       }
     }
   });
@@ -4291,7 +4306,9 @@
       _f = _a.icon,
       icon = _f === void 0 ? false : _f;
       _a.iconSize;
-      var props = __rest(_a, ["children", "type", "buttonType", "size", "disabled", "block", "width", "leftIcon", "rightIcon", "icon", "iconSize"]);
+      var mobileOnly = _a.mobileOnly,
+      desktopOnly = _a.desktopOnly,
+      props = __rest(_a, ["children", "type", "buttonType", "size", "disabled", "block", "width", "leftIcon", "rightIcon", "icon", "iconSize", "mobileOnly", "desktopOnly"]);
     return jsxRuntime.jsxs(ButtonPrimitive, __assign({
       type: type,
       buttonType: buttonType,
@@ -4299,6 +4316,8 @@
       withIcon: Boolean(icon || leftIcon || rightIcon),
       iconSize: icon ? size : undefined,
       disabled: disabled,
+      mobileOnly: mobileOnly,
+      desktopOnly: desktopOnly,
       css: __assign(__assign({}, props.css), {
         width: block ? '100%' : width
       }),
@@ -8707,104 +8726,6 @@
     ];
   });
 
-  var StyledOverlay$3 = styled(DialogPrimitive__namespace.Overlay, {
-    backgroundColor: '$bgDimmer',
-    position: 'fixed',
-    inset: 0
-  });
-  var StyledContent$5 = styled(DialogPrimitive__namespace.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'
-    }
-  });
-  var Content$2 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var children = props.children,
-      rest = __rest(props, ["children"]);
-    return jsxRuntime.jsx(StyledContent$5, __assign({}, rest, {
-      ref: ref
-    }, {
-      children: children
-    }), void 0);
-  });
-  var StyledTitle$1 = styled(DialogPrimitive__namespace.Title, {});
-  var StyledDescription$2 = styled(DialogPrimitive__namespace.Description, {
-    margin: '10px 0 20px',
-    color: '$textSecondary',
-    fontSize: 15,
-    lineHeight: 1.5
-  });
-  // Exports
-  var Dialog = DialogPrimitive__namespace.Root;
-  var DialogTrigger = DialogPrimitive__namespace.Trigger;
-  var DialogContent = Content$2;
-  var DialogTitle = StyledTitle$1;
-  var DialogDescription = StyledDescription$2;
-  var DialogClose = DialogPrimitive__namespace.Close;
-  var DialogOverlay = StyledOverlay$3;
-  var DialogPortal = DialogPrimitive__namespace.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 {
@@ -8817,7 +8738,9 @@
     onOpenChange,
     placement,
     sideOffset: _sideOffset = 5,
-    hideOnScroll: _hideOnScroll = false
+    hideOnScroll: _hideOnScroll = false,
+    flip: _flip = true,
+    onClose
   }) => {
     const [openState, setOpenState] = React.useState(false);
     React.useEffect(() => {
@@ -8828,8 +8751,11 @@
     }, [openState, onOpenChange]);
     const floatingHook = react$1.useFloating({
       open: openState,
-      onOpenChange: setOpenState,
-      middleware: [react$1.offset(_sideOffset), react$1.flip(), react$1.shift()],
+      middleware: [react$1.offset(_sideOffset), react$1.shift(), _flip && react$1.flip()],
+      onOpenChange: isOpen => {
+        setOpenState(isOpen);
+        !isOpen && (onClose === null || onClose === void 0 ? void 0 : onClose());
+      },
       placement
     });
     const {
@@ -8850,7 +8776,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$y,
-        lineNumber: 49,
+        lineNumber: 60,
         columnNumber: 10
       }
     }, children);
@@ -8892,14 +8818,14 @@
         __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["default"].createElement(react$1.FloatingFocusManager, {
@@ -8910,7 +8836,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$y,
-        lineNumber: 68,
+        lineNumber: 79,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", _extends({}, getFloatingProps({
@@ -8925,7 +8851,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$y,
-        lineNumber: 69,
+        lineNumber: 80,
         columnNumber: 9
       }
     }), children))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
@@ -8946,7 +8872,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$y,
-        lineNumber: 93,
+        lineNumber: 104,
         columnNumber: 5
       }
     }), children);
@@ -9297,7 +9223,8 @@
       showTooltip = _q === void 0 ? false : _q,
       css = _a.css,
       renderFooter = _a.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 = _a.optionCss,
+      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"]);
     var t = reactI18next.useTranslation(['MajooUI/inputSelect', 'translation']).t;
     var _r = React.useState([]),
       options = _r[0],
@@ -9562,11 +9489,11 @@
                     }, {
                       suppressRefError: true
                     }), {
-                      css: {
+                      css: __assign({
                         display: isOpen ? 'block' : 'none',
                         zIndex: '$popover',
                         pointerEvents: 'auto'
-                      },
+                      }, optionCss),
                       withFooter: renderFooter && typeof renderFooter === 'function',
                       placement: placement
                     }, {
@@ -11038,7 +10965,7 @@
     }
   }));
 
-  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";
   function _await(value, then, direct) {
     if (direct) {
@@ -11321,7 +11248,8 @@
         toggleInput,
         fetchData,
         onSearch,
-        isLoading
+        isLoading,
+        maxSelectedItem
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     const {
@@ -11335,6 +11263,7 @@
     const [inputSelectValue, setInputSelectValue] = React__default["default"].useState(defaultValue || []);
     const [query, setQuery] = React__default["default"].useState('');
     const scrollerRef = React__default["default"].useRef(null);
+    const isShowSelectAll = showSelectAll && !maxSelectedItem;
     React.useEffect(() => {
       var _scrollerRef$current;
       (_scrollerRef$current = scrollerRef.current) === null || _scrollerRef$current === void 0 ? void 0 : _scrollerRef$current.scrollTo({
@@ -11558,17 +11487,28 @@
         }
       }
     });
+    const getOption = React.useCallback(() => {
+      const selectValue = inputSelectValue || selectedValue;
+      return option === null || option === void 0 ? void 0 : option.map(item => {
+        const isMaxSelectedItem = maxSelectedItem && (selectValue === null || selectValue === void 0 ? void 0 : selectValue.length) >= maxSelectedItem;
+        if (isMaxSelectedItem && !(selectValue !== null && selectValue !== void 0 && selectValue.includes(item.id))) {
+          item.hideCheck = true;
+          item.isDisabled = true;
+        }
+        return item;
+      });
+    }, [maxSelectedItem, option, selectedValue, inputSelectValue]);
     React.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, selectAllLabel, sortItems, t]);
     React.useEffect(() => {
       if (selectedValue.length > 0 && disabledOptions.length === 0) {
         setInitItems(sortValue);
@@ -11581,16 +11521,16 @@
     React.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]);
     React.useEffect(() => {
       setSelectedValue(items.length > 0 && inputSelectValue.length === items.length - 1 ? ['!all', ...inputSelectValue] : inputSelectValue);
     }, [inputSelectValue, items]);
@@ -11610,7 +11550,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 596,
+        lineNumber: 610,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -11620,7 +11560,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 597,
+        lineNumber: 611,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -11635,7 +11575,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 598,
+        lineNumber: 612,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -11653,7 +11593,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 608,
+        lineNumber: 622,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -11666,7 +11606,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 615,
+        lineNumber: 629,
         columnNumber: 13
       }
     }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -11677,7 +11617,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 625,
+        lineNumber: 639,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -11685,7 +11625,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 630,
+        lineNumber: 644,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11698,7 +11638,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 634,
+        lineNumber: 648,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
@@ -11706,7 +11646,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 640,
+        lineNumber: 654,
         columnNumber: 13
       }
     }, isShowTagSelectAll ? /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -11726,7 +11666,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 642,
+        lineNumber: 656,
         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) => {
@@ -11756,7 +11696,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 670,
+        lineNumber: 684,
         columnNumber: 21
       }
     }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11765,7 +11705,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 692,
+        lineNumber: 706,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11775,14 +11715,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 693,
+        lineNumber: 707,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 694,
+        lineNumber: 708,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11796,7 +11736,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 695,
+        lineNumber: 709,
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -11804,7 +11744,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 701,
+        lineNumber: 715,
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -11812,7 +11752,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 703,
+        lineNumber: 717,
         columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11824,14 +11764,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 705,
+        lineNumber: 719,
         columnNumber: 21
       }
     }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 709,
+        lineNumber: 723,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11842,7 +11782,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 711,
+        lineNumber: 725,
         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["default"].createElement(Paragraph, {
@@ -11854,7 +11794,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 721,
+        lineNumber: 735,
         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["default"].createElement(OptionWrapper$1, {
@@ -11866,7 +11806,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 728,
+        lineNumber: 742,
         columnNumber: 9
       }
     }, isLoading && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11887,7 +11827,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 734,
+        lineNumber: 748,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -11895,7 +11835,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 750,
+        lineNumber: 764,
         columnNumber: 15
       }
     }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({
@@ -11906,7 +11846,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 756,
+        lineNumber: 770,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -11921,14 +11861,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 760,
+          lineNumber: 774,
           columnNumber: 19
         }
       }, child),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 757,
+        lineNumber: 771,
         columnNumber: 15
       }
     }, isOpen && items.map((item, index) => {
@@ -11948,7 +11888,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 772,
+          lineNumber: 786,
           columnNumber: 21
         }
       }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -11961,37 +11901,37 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 785,
+          lineNumber: 799,
           columnNumber: 23
         }
-      }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
+      }, !(item !== null && item !== void 0 && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
         color: colors$7.iconDisable,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 794,
-          columnNumber: 27
+          lineNumber: 809,
+          columnNumber: 29
         }
       }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
         color: colors$7.iconGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 798,
-          columnNumber: 29
+          lineNumber: 813,
+          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["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["default"].createElement(IndeterminateFilled, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 805,
+          lineNumber: 820,
           columnNumber: 27
         }
       }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 807,
+          lineNumber: 822,
           columnNumber: 27
         }
       })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -12002,7 +11942,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 810,
+          lineNumber: 825,
           columnNumber: 23
         }
       }, item.render ? (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item.name) : item.name));
@@ -12016,14 +11956,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 818,
+        lineNumber: 833,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 819,
+        lineNumber: 834,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -12033,7 +11973,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 820,
+        lineNumber: 835,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -12045,7 +11985,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 821,
+        lineNumber: 836,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -12079,7 +12019,8 @@
     fetchData: PropTypes__default["default"].func,
     onSearch: PropTypes__default["default"].func,
     isLoading: PropTypes__default["default"].bool,
-    showTagSelectAll: PropTypes__default["default"].bool
+    showTagSelectAll: PropTypes__default["default"].bool,
+    maxSelectedItem: PropTypes__default["default"].number
   };
   InputSelectCheck.defaultProps = {
     size: 'lg',
@@ -12138,7 +12079,8 @@
     fetchData: PropTypes__default["default"].func,
     onSearch: PropTypes__default["default"].func,
     isLoading: PropTypes__default["default"].bool,
-    showTagSelectAll: PropTypes__default["default"].bool
+    showTagSelectAll: PropTypes__default["default"].bool,
+    maxSelectedItem: PropTypes__default["default"].number
   };
   InputSelectTag.defaultProps = {
     size: 'lg',
@@ -13827,7 +13769,7 @@
       size: 'lg'
     }
   });
-  const StyledContent$4 = styled(TabsPrimitive__namespace.Content, {
+  const StyledContent$5 = styled(TabsPrimitive__namespace.Content, {
     flexGrow: 1,
     borderRadius: '$lg',
     backgroundColor: '$white',
@@ -14047,7 +13989,7 @@
   };
   const TabsContent$1 = _ref4 => {
     let props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
-    return /*#__PURE__*/React__default["default"].createElement(StyledContent$4, _extends({}, props, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledContent$5, _extends({}, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
@@ -14730,6 +14672,104 @@
     }
   });
 
+  var StyledOverlay$3 = styled(DialogPrimitive__namespace.Overlay, {
+    backgroundColor: '$bgDimmer',
+    position: 'fixed',
+    inset: 0
+  });
+  var StyledContent$4 = styled(DialogPrimitive__namespace.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'
+    }
+  });
+  var Content$2 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+    var children = props.children,
+      rest = __rest(props, ["children"]);
+    return jsxRuntime.jsx(StyledContent$4, __assign({}, rest, {
+      ref: ref
+    }, {
+      children: children
+    }), void 0);
+  });
+  var StyledTitle$1 = styled(DialogPrimitive__namespace.Title, {});
+  var StyledDescription$2 = styled(DialogPrimitive__namespace.Description, {
+    margin: '10px 0 20px',
+    color: '$textSecondary',
+    fontSize: 15,
+    lineHeight: 1.5
+  });
+  // Exports
+  var Dialog = DialogPrimitive__namespace.Root;
+  var DialogTrigger = DialogPrimitive__namespace.Trigger;
+  var DialogContent = Content$2;
+  var DialogTitle = StyledTitle$1;
+  var DialogDescription = StyledDescription$2;
+  var DialogClose = DialogPrimitive__namespace.Close;
+  var DialogOverlay = StyledOverlay$3;
+  var DialogPortal = DialogPrimitive__namespace.Portal;
+  DialogTrigger.displayName = 'DialogTrigger';
+  DialogContent.displayName = 'DialogContent';
+  DialogTitle.displayName = 'DialogTitle';
+  DialogDescription.displayName = 'DialogDescription';
+  DialogClose.displayName = 'DialogClose';
+  DialogOverlay.displayName = 'DialogOverlay';
+  DialogPortal.displayName = 'DialogPortal';
+
   var ModalDialogFooter = styled('div');
   ModalDialogFooter.displayName = 'ModalDialogFooter';
   var ModalDialogTitle = styled('div');
@@ -17947,7 +17987,8 @@
       readOnly = _a.readOnly,
       isInvalid = _a.isInvalid,
       allowReset = _a.allowReset,
-      portalled = _a.portalled;
+      portalled = _a.portalled,
+      onClose = _a.onClose;
     var _f = reactI18next.useTranslation('MajooUI/datePicker'),
       t = _f.t,
       i18n = _f.i18n;
@@ -18095,8 +18136,10 @@
       }, void 0);
     };
     return !isMobile ? jsxRuntime.jsxs(Popover, __assign({
+      flip: false,
       open: openPicker,
       onOpenChange: setOpenPicker,
+      onClose: onClose,
       placement: placement
     }, {
       children: [disabled || readOnly ? jsxRuntime.jsx(Box, __assign({
@@ -18167,7 +18210,10 @@
         }), void 0)
       }), void 0), jsxRuntime.jsx(Drawer, __assign({
         open: openPicker,
-        onOpenChange: handleChange,
+        onOpenChange: function (isOpen) {
+          handleChange();
+          !isOpen && (onClose === null || onClose === void 0 ? void 0 : onClose());
+        },
         side: "bottom",
         portalled: false
       }, {