@majoo-ui/react 1.57.6 → 1.57.8

package/index.umd.js

@@ -2972,6 +2972,22 @@
     }), void 0);
   });
 
+  function useMediaQuery(query) {
+    const [matches, setMatches] = React.useState(false);
+    React.useEffect(() => {
+      const media = window.matchMedia(query);
+      if (media.matches !== matches) {
+        setMatches(media.matches);
+      }
+      const listener = () => {
+        setMatches(media.matches);
+      };
+      media.addEventListener('change', listener);
+      return () => media.removeEventListener('change', listener);
+    }, [matches, query]);
+    return matches;
+  }
+
   const _excluded$A = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
   var _jsxFileName$10 = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/toast/Toast.js";
   const TOAST_WIDTH = 576;
@@ -3107,7 +3123,8 @@
     display: '-webkit-box',
     '-webkit-line-clamp': '3',
     '-webkit-box-orient': 'vertical',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    whiteSpace: 'unset'
   });
   const CloseButton$2 = styled(Flex$1, {
     cursor: 'pointer',
@@ -3142,6 +3159,7 @@
       } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
+    const isMobile = useMediaQuery(`(max-width: 767px`);
     const close = React__namespace.useCallback(() => {
       setIsOpen(false);
     }, [setIsOpen]);
@@ -3169,19 +3187,22 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 212,
+        lineNumber: 216,
         columnNumber: 5
       }
     }, state => /*#__PURE__*/React__namespace.createElement(Root, _extends({
       id: id,
       state: state,
+      css: {
+        maxWidth: isMobile ? '80vw' : TOAST_WIDTH
+      },
       hPosition: position.includes('left') ? 'left' : 'right',
       vPosition: position.includes('top') ? 'top' : 'bottom'
     }, rest, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 223,
+        lineNumber: 227,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledToast, {
@@ -3191,7 +3212,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 230,
+        lineNumber: 235,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3199,7 +3220,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 231,
+        lineNumber: 236,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3207,7 +3228,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 232,
+        lineNumber: 237,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(LeftBar, {
@@ -3215,7 +3236,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 233,
+        lineNumber: 238,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3227,7 +3248,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 234,
+        lineNumber: 239,
         columnNumber: 17
       }
     }, title && /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3235,7 +3256,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 242,
+        lineNumber: 247,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__namespace.createElement(Heading, {
@@ -3243,14 +3264,14 @@
       css: {
         lineHeight: '$long-content-regular',
         flex: 1,
-        whiteSpace: 'nowrap',
+        whiteSpace: 'unset',
         overflow: 'hidden',
         textOverflow: 'ellipsis'
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 243,
+        lineNumber: 248,
         columnNumber: 23
       }
     }, title)), /*#__PURE__*/React__namespace.createElement(DescriptionField, {
@@ -3259,7 +3280,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 257,
+        lineNumber: 262,
         columnNumber: 19
       }
     }, description)), /*#__PURE__*/React__namespace.createElement(CloseButton$2, {
@@ -3274,7 +3295,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 261,
+        lineNumber: 266,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3283,7 +3304,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 271,
+        lineNumber: 276,
         columnNumber: 19
       }
     }))), (hrefOfAction || isExternalOfAction || onClickOfAction) && /*#__PURE__*/React__namespace.createElement(Link, {
@@ -3298,7 +3319,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$10,
-        lineNumber: 275,
+        lineNumber: 280,
         columnNumber: 17
       }
     }, captionOfAction)))));
@@ -3312,7 +3333,8 @@
     dismissAfter: PropTypes__default["default"].number,
     variant: PropTypes__default["default"].string.isRequired,
     onClick: PropTypes__default["default"].func,
-    onRemove: PropTypes__default["default"].func
+    onRemove: PropTypes__default["default"].func,
+    disabledOfflineIntercept: PropTypes__default["default"].bool
   };
   Toast.defaultProps = {
     dismissAfter: 5000
@@ -3399,27 +3421,64 @@
     })));
   };
 
-  const _excluded$y = ["id"];
+  var getOnLineStatus = function getOnLineStatus() {
+    return typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
+  };
+  var useNavigatorOnLine = function useNavigatorOnLine() {
+    var _a = React__default["default"].useState(getOnLineStatus()),
+      status = _a[0],
+      setStatus = _a[1];
+    var setOnline = function setOnline() {
+      return setStatus(true);
+    };
+    var setOffline = function setOffline() {
+      return setStatus(false);
+    };
+    React__default["default"].useEffect(function () {
+      window.addEventListener('online', setOnline);
+      window.addEventListener('offline', setOffline);
+      return function () {
+        window.removeEventListener('online', setOnline);
+        window.removeEventListener('offline', setOffline);
+      };
+    }, []);
+    return status;
+  };
+
+  const _excluded$y = ["id", "disabledOfflineIntercept"];
   var _jsxFileName$_ = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
   const ToastProvider = ({
     children
   }) => {
+    const isOnline = useNavigatorOnLine();
     const [toasts, setToasts] = React__namespace.useState([]);
-    const createToastInstance = toast => {
+    const {
+      t
+    } = reactI18next.useTranslation(['MajooUI/toast', 'translation']);
+    const createToastInstance = React__namespace.useCallback(toast => {
       const {
-          id
+          id,
+          disabledOfflineIntercept
         } = toast,
         rest = _objectWithoutPropertiesLoose(toast, _excluded$y);
 
       // eslint-disable-next-line no-plusplus
       const uniqueId = ++toastCount;
       const toastId = toast.id || `${id || 'toast'}-${uniqueId}`;
+      const offlineInstance = {
+        title: t('offlineTitle', 'Internet Bermasalah'),
+        variant: 'failed',
+        description: t('offlineDescription', 'Tidak ada koneksi internet, mohon periksa jaringan'),
+        hrefOfAction: false,
+        onClickOfAction: false,
+        isExternalOfAction: false
+      };
       return Object.assign({
         id: toastId,
         position: TOP_RIGHT_POSITION
-      }, rest);
-    };
+      }, rest, !isOnline && !disabledOfflineIntercept && offlineInstance);
+    }, [isOnline, t]);
     const addToast = React__namespace.useCallback(toast => {
       const toastInstance = createToastInstance(toast);
       setToasts(toastItems => {
@@ -3429,7 +3488,7 @@
         return toastItems;
       });
       return toastInstance;
-    }, [toasts, setToasts]);
+    }, [createToastInstance]);
     const removeToast = React__namespace.useCallback(id => {
       setToasts(toastItems => toastItems.filter(t => t.id !== id));
     }, [setToasts]);
@@ -3441,7 +3500,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 47,
+        lineNumber: 64,
         columnNumber: 5
       }
     }, children, /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -3450,7 +3509,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 49,
+        lineNumber: 66,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -3459,7 +3518,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 53,
+        lineNumber: 70,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -3468,7 +3527,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 57,
+        lineNumber: 74,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -3477,7 +3536,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 61,
+        lineNumber: 78,
         columnNumber: 7
       }
     }));
@@ -7193,6 +7252,7 @@
       props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
       ref: ref,
+      getInputRef: ref,
       placeholder: placeholder,
       value: value,
       size: size,
@@ -8399,11 +8459,11 @@
     } = reactI18next.useTranslation(['MajooUI/inputSearchbox', 'translation']);
     const [value, setValue] = React.useState(defaultValue);
     const inputValue = (_props$value = props === null || props === void 0 ? void 0 : props.value) != null ? _props$value : value;
-    const debounceChange = React.useCallback(() => debounce__default["default"](e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), 1000), [onChange]);
+    const debounceChange = React.useCallback(debounce__default["default"](e => onChange === null || onChange === void 0 ? void 0 : onChange(e), 1000), [onChange]);
     const handleChange = React.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);
       }
@@ -8422,7 +8482,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 40,
+        lineNumber: 43,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -8430,14 +8490,14 @@
         __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["default"].createElement(InputText, _extends({
@@ -8452,7 +8512,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 42,
+        lineNumber: 45,
         columnNumber: 7
       }
     })), /*#__PURE__*/React__default["default"].createElement(InputRightElement, {
@@ -8461,14 +8521,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$z,
-          lineNumber: 53,
+          lineNumber: 56,
           columnNumber: 44
         }
       }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$z,
-          lineNumber: 53,
+          lineNumber: 56,
           columnNumber: 91
         }
       }),
@@ -8476,7 +8536,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 52,
+        lineNumber: 55,
         columnNumber: 7
       }
     }));
@@ -10978,7 +11038,7 @@
     }
   }));
 
-  const _excluded$c = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "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"];
   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) {
@@ -11249,6 +11309,7 @@
         isInvalid,
         sortBy,
         showSelectAll,
+        showTagSelectAll,
         selectAllLabel,
         showSelectedTag,
         unremovableTags,
@@ -11534,13 +11595,22 @@
       setSelectedValue(items.length > 0 && inputSelectValue.length === items.length - 1 ? ['!all', ...inputSelectValue] : inputSelectValue);
     }, [inputSelectValue, items]);
     const toggleCollapsible = () => setShowAllTags(!showAllTags);
+    const handleRemoveAllItem = () => {
+      onChange === null || onChange === void 0 ? void 0 : onChange([]);
+      setSelectedValue([]);
+      setInputSelectValue([]);
+      for (let i = 0; i < selectedValue.length; i++) {
+        removeSelectedItem(selectedValue[i]);
+      }
+    };
+    const isShowTagSelectAll = showTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > (option === null || option === void 0 ? void 0 : option.length);
     return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, _extends({
       css: css
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 584,
+        lineNumber: 596,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -11550,7 +11620,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 585,
+        lineNumber: 597,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -11565,7 +11635,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 586,
+        lineNumber: 598,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -11583,7 +11653,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 596,
+        lineNumber: 608,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -11596,7 +11666,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 603,
+        lineNumber: 615,
         columnNumber: 13
       }
     }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -11607,7 +11677,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 613,
+        lineNumber: 625,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -11615,7 +11685,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 618,
+        lineNumber: 630,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11628,7 +11698,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 622,
+        lineNumber: 634,
         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, {
@@ -11636,10 +11706,30 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 628,
+        lineNumber: 640,
         columnNumber: 13
       }
-    }, 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) => {
+    }, isShowTagSelectAll ? /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
+      disabled: disabled,
+      isRemovable: readOnly || disabled || unremovableTags.includes('!all') ? false : true,
+      size: "lg",
+      readOnly: readOnly,
+      key: `selected-item-!all`
+    }, getSelectedItemProps({
+      selectedItem: {
+        id: '!all',
+        name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
+      },
+      index: 0
+    }), {
+      onRemove: handleRemoveAllItem,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 642,
+        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) => {
       if (showAllTags || !collapsible) {
         return true;
       } else {
@@ -11666,16 +11756,16 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 639,
-        columnNumber: 19
+        lineNumber: 670,
+        columnNumber: 21
       }
-    }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+    }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "column",
       gap: 4,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 660,
+        lineNumber: 692,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11685,14 +11775,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 661,
+        lineNumber: 693,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 662,
+        lineNumber: 694,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11706,7 +11796,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 663,
+        lineNumber: 695,
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -11714,7 +11804,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 669,
+        lineNumber: 701,
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -11722,7 +11812,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 671,
+        lineNumber: 703,
         columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11734,14 +11824,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 673,
+        lineNumber: 705,
         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: 677,
+        lineNumber: 709,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11752,10 +11842,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 679,
+        lineNumber: 711,
         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 && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+    }, `${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, {
       css: {
         fontSize: '$label',
         marginTop: '$spacing-01'
@@ -11764,7 +11854,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 689,
+        lineNumber: 721,
         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, {
@@ -11776,7 +11866,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 696,
+        lineNumber: 728,
         columnNumber: 9
       }
     }, isLoading && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11797,7 +11887,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 702,
+        lineNumber: 734,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -11805,7 +11895,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 718,
+        lineNumber: 750,
         columnNumber: 15
       }
     }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({
@@ -11816,7 +11906,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 724,
+        lineNumber: 756,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -11831,14 +11921,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 728,
+          lineNumber: 760,
           columnNumber: 19
         }
       }, child),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 725,
+        lineNumber: 757,
         columnNumber: 15
       }
     }, isOpen && items.map((item, index) => {
@@ -11858,7 +11948,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 740,
+          lineNumber: 772,
           columnNumber: 21
         }
       }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -11871,7 +11961,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 753,
+          lineNumber: 785,
           columnNumber: 23
         }
       }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -11879,7 +11969,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 762,
+          lineNumber: 794,
           columnNumber: 27
         }
       }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -11887,21 +11977,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 766,
+          lineNumber: 798,
           columnNumber: 29
         }
       }), 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, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 773,
+          lineNumber: 805,
           columnNumber: 27
         }
       }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 775,
+          lineNumber: 807,
           columnNumber: 27
         }
       })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -11912,7 +12002,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 778,
+          lineNumber: 810,
           columnNumber: 23
         }
       }, item.render ? (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item.name) : item.name));
@@ -11926,14 +12016,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 786,
+        lineNumber: 818,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 787,
+        lineNumber: 819,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -11943,7 +12033,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 788,
+        lineNumber: 820,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -11955,7 +12045,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 789,
+        lineNumber: 821,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -11988,7 +12078,8 @@
     defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)]),
     fetchData: PropTypes__default["default"].func,
     onSearch: PropTypes__default["default"].func,
-    isLoading: PropTypes__default["default"].bool
+    isLoading: PropTypes__default["default"].bool,
+    showTagSelectAll: PropTypes__default["default"].bool
   };
   InputSelectCheck.defaultProps = {
     size: 'lg',
@@ -12046,7 +12137,8 @@
     defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)]),
     fetchData: PropTypes__default["default"].func,
     onSearch: PropTypes__default["default"].func,
-    isLoading: PropTypes__default["default"].bool
+    isLoading: PropTypes__default["default"].bool,
+    showTagSelectAll: PropTypes__default["default"].bool
   };
   InputSelectTag.defaultProps = {
     size: 'lg',
@@ -15323,22 +15415,6 @@
   var AccordionItem = StyledItem$1;
   var AccordionContent = AccordionPrimitive__namespace.Content;
 
-  function useMediaQuery(query) {
-    const [matches, setMatches] = React.useState(false);
-    React.useEffect(() => {
-      const media = window.matchMedia(query);
-      if (media.matches !== matches) {
-        setMatches(media.matches);
-      }
-      const listener = () => {
-        setMatches(media.matches);
-      };
-      media.addEventListener('change', listener);
-      return () => media.removeEventListener('change', listener);
-    }, [matches, query]);
-    return matches;
-  }
-
   var ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
   var Item$1 = styled(ButtonGroupItem, {
     fontSize: '$label',
@@ -15392,7 +15468,7 @@
   };
   const getCalendarStartYear = year => year - year % 10 + 1;
   const getCalendarStartYearRange = year => year - year % 100 + 1;
-  const toDateFormat = (date, locale = 'id') => moment__default["default"](date).locale(locale).format('D MMMM YYYY');
+  const toDateFormat = (date, locale = 'id') => moment__default["default"](date).locale(locale).format('DD MMMM YYYY');
 
   var DateNumber = styled('div', {
     display: 'inline-flex',
@@ -17331,6 +17407,7 @@
     var isMultiDatePicker = _a.isMultiDatePicker,
       isRangeControl = _a.isRangeControl,
       onChange = _a.onChange,
+      onSelectedDate = _a.onDateSelected,
       onClose = _a.onClose;
       _a.onReset;
       var advanceView = _a.advanceView,
@@ -17339,7 +17416,7 @@
       minDate = _a.minDate,
       maxDate = _a.maxDate,
       allowReset = _a.allowReset,
-      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"]);
     var today = new Date();
     var prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
     var _b = React.useState([]),
@@ -17364,11 +17441,14 @@
       }
       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]);
         }
       }
     };
@@ -17851,6 +17931,7 @@
       size = _d === void 0 ? 'sm' : _d,
       disabled = _a.disabled,
       onChange = _a.onChange,
+      onDateSelected = _a.onDateSelected,
       defaultDateValue = _a.defaultValue,
       dateValue = _a.value,
       defaultDate = _a.defaultDate,
@@ -18000,6 +18081,9 @@
         selected: selectedDate,
         isMultiDatePicker: type !== SINGLE_PICKER || showRangeControl,
         onChange: handleDatePickerChange,
+        onDateSelected: function (e) {
+          return onDateSelected === null || onDateSelected === void 0 ? void 0 : onDateSelected(e);
+        },
         onClose: function () {
           return setOpenPicker(false);
         },