@majoo-ui/react 1.58.0 → 1.58.2

package/index.umd.js

@@ -9608,29 +9608,28 @@
       if (formattedValue !== lastValue) {
         var _formattedValue, _formattedValue2;
         //start adjustment
-        const cloneProps = Object.assign({}, ref);
-        const {
+        let {
           prefix = '',
           suffix = '',
           allowLeadingZeros,
           format
-        } = cloneProps;
+        } = Object.assign({}, ref);
         const formattedValueStartsWithZero = (_formattedValue = formattedValue) === null || _formattedValue === void 0 ? void 0 : _formattedValue.startsWith(`${prefix}0`);
         const formattedWithZeroAndSuffix = (_formattedValue2 = formattedValue) === null || _formattedValue2 === void 0 ? void 0 : _formattedValue2.endsWith(`0${suffix}`);
         const emptyFormattedValue = prefix || suffix || prefix + suffix || '';
         if ((formattedValueStartsWithZero || formattedWithZeroAndSuffix) && !allowLeadingZeros && !format) {
-          var _input$value;
+          var _formattedValue3, _input$value;
           const isSpecialChar = /^[+-]/.test(formattedValue);
-          if (formattedValue !== `${prefix}0${suffix}`) {
-            var _formattedValue3, _numAsString;
-            formattedValue = (_formattedValue3 = formattedValue) === null || _formattedValue3 === void 0 ? void 0 : _formattedValue3.replace(new RegExp(`^${isSpecialChar ? '\\' : ''}${prefix}0+${suffix}`), emptyFormattedValue);
+          if (formattedValue !== `${prefix}0${suffix}` && !((_formattedValue3 = formattedValue) !== null && _formattedValue3 !== void 0 && _formattedValue3.includes('0,'))) {
+            var _formattedValue4, _numAsString;
+            formattedValue = (_formattedValue4 = formattedValue) === null || _formattedValue4 === void 0 ? void 0 : _formattedValue4.replace(new RegExp(`^${isSpecialChar ? '\\' : ''}${prefix}0+${suffix}`), emptyFormattedValue);
             numAsString = (_numAsString = numAsString) === null || _numAsString === void 0 ? void 0 : _numAsString.replace(/^0+/, '');
           }
           if (formattedValue === emptyFormattedValue && !numAsString && [`${prefix}00${suffix}`, `${prefix}0${suffix}`].includes(input === null || input === void 0 ? void 0 : input.value)) {
             formattedValue = `${prefix}0${suffix}`;
             numAsString = '0';
           } else if (input !== null && input !== void 0 && (_input$value = input.value) !== null && _input$value !== void 0 && _input$value.includes('0,')) {
-            cloneProps.allowLeadingZeros = true;
+            allowLeadingZeros = true;
             formattedValue = input === null || input === void 0 ? void 0 : input.value;
             numAsString = this.removeFormatting(input === null || input === void 0 ? void 0 : input.value);
           }
@@ -17405,7 +17404,11 @@
     value,
     disabled,
     disabledHour,
+    disabledHourIncrease,
+    disabledHourDecrease,
     disabledMinute,
+    disabledMinuteIncrease,
+    disabledMinuteDecrease,
     minDate,
     maxDate
   }) => {
@@ -17421,11 +17424,11 @@
     function handleUp(type) {
       if (!disabled) {
         if (type === 'hour') {
-          if ((!maxDate || moment__default["default"](date).add(1, 'hours') <= moment__default["default"](maxDate)) && !disabledHour) {
+          if ((!maxDate || moment__default["default"](date).add(1, 'hours') <= moment__default["default"](maxDate)) && !disabledHour && !disabledHourIncrease) {
             setNewDate(moment__default["default"](date).add(1, 'hours'));
           }
         } else {
-          if ((!maxDate || moment__default["default"](date).add(1, 'minutes') <= moment__default["default"](maxDate)) && !disabledMinute) {
+          if ((!maxDate || moment__default["default"](date).add(1, 'minutes') <= moment__default["default"](maxDate)) && !disabledMinute && !disabledMinuteIncrease) {
             setNewDate(moment__default["default"](date).add(1, 'minutes'));
           }
         }
@@ -17434,11 +17437,11 @@
     function handleDown(type) {
       if (!disabled) {
         if (type === 'hour') {
-          if ((!minDate || moment__default["default"](date).subtract(1, 'hours') >= moment__default["default"](minDate)) && !disabledHour) {
+          if ((!minDate || moment__default["default"](date).subtract(1, 'hours') >= moment__default["default"](minDate)) && !disabledHour && !disabledHourDecrease) {
             setNewDate(moment__default["default"](date).subtract(1, 'hours'));
           }
         } else {
-          if ((!minDate || moment__default["default"](date).subtract(1, 'minutes') >= moment__default["default"](minDate)) && !disabledMinute) {
+          if ((!minDate || moment__default["default"](date).subtract(1, 'minutes') >= moment__default["default"](minDate)) && !disabledMinute && !disabledMinuteDecrease) {
             setNewDate(moment__default["default"](date).subtract(1, 'minutes'));
           }
         }
@@ -17455,7 +17458,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 169,
+        lineNumber: 185,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -17464,27 +17467,27 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 175,
+        lineNumber: 191,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
       type: "up",
-      disabled: disabled || disabledHour,
+      disabled: disabled || disabledHour || disabledHourIncrease,
       onClick: () => handleUp('hour'),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 176,
+        lineNumber: 192,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
       type: "up",
-      disabled: disabled || disabledMinute,
+      disabled: disabled || disabledMinute || disabledMinuteIncrease,
       onClick: () => handleUp('minutes'),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 177,
+        lineNumber: 197,
         columnNumber: 9
       }
     })), /*#__PURE__*/React__default["default"].createElement(Input$3, {
@@ -17495,7 +17498,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 179,
+        lineNumber: 203,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Time, {
@@ -17503,7 +17506,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 180,
+        lineNumber: 204,
         columnNumber: 7
       }
     }, moment__default["default"](date).format(format)), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -17512,27 +17515,27 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 181,
+        lineNumber: 205,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
       type: "down",
-      disabled: disabled || disabledHour,
+      disabled: disabled || disabledHour || disabledHourDecrease,
       onClick: () => handleDown('hour'),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 182,
+        lineNumber: 206,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
       type: "down",
-      disabled: disabled || disabledMinute,
+      disabled: disabled || disabledMinute || disabledMinuteDecrease,
       onClick: () => handleDown('minutes'),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 183,
+        lineNumber: 211,
         columnNumber: 9
       }
     })));
@@ -17562,10 +17565,26 @@
       Disabled hour state.
      */
     disabledHour: PropTypes__default["default"].bool,
+    /**
+      Disabled increase hour state.
+     */
+    disabledHourIncrease: PropTypes__default["default"].bool,
+    /**
+      Disabled decrease hour state.
+     */
+    disabledHourDecrease: PropTypes__default["default"].bool,
     /**
       Disabled minute state.
      */
     disabledMinute: PropTypes__default["default"].bool,
+    /**
+      Disabled increase minute state.
+     */
+    disabledMinuteIncrease: PropTypes__default["default"].bool,
+    /**
+      Disabled decrease minute state.
+     */
+    disabledMinuteDecrease: PropTypes__default["default"].bool,
     /**
       Specify the minimum date.
      */
@@ -17582,7 +17601,11 @@
     value,
     disabled,
     disabledHour,
+    disabledHourIncrease,
+    disabledHourDecrease,
     disabledMinute,
+    disabledMinuteIncrease,
+    disabledMinuteDecrease,
     css,
     minDate,
     maxDate
@@ -17597,14 +17620,18 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 241,
+        lineNumber: 293,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
       size: size,
       disabled: disabled,
       disabledHour: disabledHour,
+      disabledHourIncrease: disabledHourIncrease,
+      disabledHourDecrease: disabledHourDecrease,
       disabledMinute: disabledMinute,
+      disabledMinuteIncrease: disabledMinuteIncrease,
+      disabledMinuteDecrease: disabledMinuteDecrease,
       onChange: onChange,
       defaultValue: defaultValue,
       value: value,
@@ -17613,7 +17640,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 242,
+        lineNumber: 294,
         columnNumber: 7
       }
     }));
@@ -17648,10 +17675,26 @@
      Disabled hour state.
     */
     disabledHour: PropTypes__default["default"].bool,
+    /**
+      Disabled increase hour state.
+     */
+    disabledHourIncrease: PropTypes__default["default"].bool,
+    /**
+        Disabled decrease hour state.
+       */
+    disabledHourDecrease: PropTypes__default["default"].bool,
     /**
      Disabled minute state.
     */
     disabledMinute: PropTypes__default["default"].bool,
+    /**
+      Disabled increase minute state.
+     */
+    disabledMinuteIncrease: PropTypes__default["default"].bool,
+    /**
+        Disabled decrease minute state.
+       */
+    disabledMinuteDecrease: PropTypes__default["default"].bool,
     /**
       Specify the minimum date.
      */
@@ -17678,7 +17721,11 @@
     css,
     disabled,
     disabledHour,
+    disabledHourIncrease,
+    disabledHourDecrease,
     disabledMinute,
+    disabledMinuteIncrease,
+    disabledMinuteDecrease,
     readOnly,
     minDate,
     maxDate,
@@ -17699,7 +17746,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 41,
+        lineNumber: 45,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -17708,14 +17755,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 42,
+          lineNumber: 46,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 42,
+        lineNumber: 46,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -17730,7 +17777,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 43,
+        lineNumber: 47,
         columnNumber: 7
       }
     }));
@@ -17738,7 +17785,11 @@
       size: size,
       disabled: disabled,
       disabledHour: disabledHour,
+      disabledHourIncrease: disabledHourIncrease,
+      disabledHourDecrease: disabledHourDecrease,
       disabledMinute: disabledMinute,
+      disabledMinuteIncrease: disabledMinuteIncrease,
+      disabledMinuteDecrease: disabledMinuteDecrease,
       defaultValue: defaultValue,
       value: value,
       onChange: onChange,
@@ -17747,7 +17798,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 56,
+        lineNumber: 60,
         columnNumber: 5
       }
     });
@@ -17758,7 +17809,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 70,
+        lineNumber: 78,
         columnNumber: 5
       }
     }, disabled || readOnly ? /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -17766,14 +17817,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 72,
+        lineNumber: 80,
         columnNumber: 9
       }
     }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 74,
+        lineNumber: 82,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -17781,14 +17832,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 75,
+        lineNumber: 83,
         columnNumber: 11
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 78,
+        lineNumber: 86,
         columnNumber: 7
       }
     }, renderTimePicker()));
@@ -17810,10 +17861,26 @@
      Disabled hour state.
     */
     disabledHour: PropTypes__default["default"].bool,
+    /**
+      Disabled increase hour state.
+     */
+    disabledHourIncrease: PropTypes__default["default"].bool,
+    /**
+          Disabled decrease hour state.
+         */
+    disabledHourDecrease: PropTypes__default["default"].bool,
     /**
       Disabled minute state.
      */
     disabledMinute: PropTypes__default["default"].bool,
+    /**
+      Disabled increase minute state.
+     */
+    disabledMinuteIncrease: PropTypes__default["default"].bool,
+    /**
+          Disabled decrease minute state.
+         */
+    disabledMinuteDecrease: PropTypes__default["default"].bool,
     /**
      ReadOnly state.
     */
@@ -20452,6 +20519,64 @@
       }
     }
   });
+  const GoToPageBox = styled(Flex$1, {
+    height: 28,
+    width: 'fit-content',
+    minWidth: 28,
+    border: '1px solid $bgBorder',
+    borderRadius: 5,
+    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.07)',
+    fontSize: '$label',
+    cursor: 'pointer'
+  });
+  const PrevNextButtonIcon = ({
+    onClick,
+    iconType,
+    hidden
+  }) => {
+    const [isHover, setIsHover] = React.useState(false);
+    function handleEnter() {
+      setIsHover(true);
+    }
+    function handleLeave() {
+      setIsHover(false);
+    }
+    return /*#__PURE__*/React__default["default"].createElement(Button$4, {
+      css: {
+        height: 40,
+        width: 48,
+        minWidth: 48
+      },
+      hidden: hidden,
+      type: "button",
+      buttonType: "ghost",
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      onClick: onClick,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 68,
+        columnNumber: 5
+      }
+    }, iconType === 'prev' ? /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
+      color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 82,
+        columnNumber: 9
+      }
+    }) : /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
+      color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 84,
+        columnNumber: 9
+      }
+    }));
+  };
   const PageButton = _ref => {
     let {
         isActive,
@@ -20464,16 +20589,20 @@
       buttonType: !isActive ? 'ghost' : 'primary',
       css: {
         minWidth: 'initial',
-        width: 28,
-        height: 28,
+        width: 40,
+        height: 40,
         padding: 0,
-        color: !isActive && '$textSecondary'
+        color: !isActive && '$textSecondary',
+        '@md': {
+          width: 28,
+          height: 28
+        }
       }
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 35,
+        lineNumber: 92,
         columnNumber: 5
       }
     }));
@@ -20494,6 +20623,8 @@
       }
     };
     const inputPageRef = React.useRef();
+    const dialogPageRef = React.useRef();
+    const [goToPage, setGoToPage] = React.useState();
     React.useEffect(() => {
       if (inputPageRef.current) {
         inputPageRef.current.value = '';
@@ -20501,13 +20632,17 @@
     }, [currentPage]);
     const debouncedGoToPage = React.useCallback(debounce__default["default"](handleSelectPage, 1000), [totalPages]);
     const generatePages = () => {
-      const maxButtons = isLg ? 1 : 5;
+      const maxButtons = isLg ? currentPage < 3 ? 3 : currentPage >= 4 ? currentPage > totalPages - 2 ? 3 : 1 : 2 : 5;
       const pageButtons = [];
       let startPage;
       let endPage;
       if (maxButtons && maxButtons < totalPages) {
         startPage = Math.max(Math.min(currentPage - Math.floor(maxButtons / 2), totalPages - maxButtons + 1), 1);
-        endPage = startPage + maxButtons - 1;
+        if (isLg && currentPage === totalPages - 2) {
+          endPage = startPage + maxButtons + 1;
+        } else {
+          endPage = startPage + maxButtons - 1;
+        }
       } else {
         startPage = 1;
         endPage = totalPages;
@@ -20517,13 +20652,11 @@
       for (let page = startPage; page <= endPage; ++page) {
         pageButtons.push(page);
       }
-      if (!isLg) {
-        if (startPage > 1) {
-          if (startPage > 2) {
-            pageButtons.unshift('\u2026');
-          }
-          pageButtons.unshift(1);
+      if (startPage > 1) {
+        if (startPage > 2) {
+          pageButtons.unshift('\u2026');
         }
+        pageButtons.unshift(1);
       }
       if (endPage < totalPages) {
         if (endPage < totalPages - 1) {
@@ -20533,8 +20666,8 @@
       }
       return pageButtons;
     };
-    const isMobilePagination = useMediaQuery('(max-width: 360px)');
-    return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+    const isMobilePagination = useMediaQuery('(max-width: 767px)');
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
       direction: isMobilePagination ? 'column' : 'row',
       gap: isMobilePagination ? 2 : 0,
@@ -20544,8 +20677,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 109,
-        columnNumber: 5
+        lineNumber: 179,
+        columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
@@ -20553,8 +20686,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 115,
-        columnNumber: 7
+        lineNumber: 185,
+        columnNumber: 9
       }
     }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
       type: "button",
@@ -20564,18 +20697,30 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 119,
-        columnNumber: 15
+        lineNumber: 189,
+        columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
       color: currentPage === 1 ? colors$7.iconDisable : colors$7.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 125,
+        lineNumber: 195,
+        columnNumber: 19
+      }
+    })), isLg ? /*#__PURE__*/React__default["default"].createElement(PrevNextButtonIcon, {
+      type: "button",
+      buttonType: "ghost",
+      iconType: "prev",
+      hidden: totalPages < 2,
+      onClick: () => handleSelectPage(currentPage - 1),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 199,
         columnNumber: 17
       }
-    })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
+    }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
       isDisabled: currentPage === 1,
       color: currentPage === 1 ? 'disable' : 'primary',
@@ -20583,8 +20728,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 128,
-        columnNumber: 13
+        lineNumber: 207,
+        columnNumber: 17
       }
     }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
       return /*#__PURE__*/React__default["default"].createElement(PageButton, {
@@ -20594,11 +20739,23 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$k,
-          lineNumber: 140,
-          columnNumber: 13
+          lineNumber: 220,
+          columnNumber: 15
         }
       }, page);
-    }), (currentPage < totalPages || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
+    }), (currentPage < totalPages || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isLg ? /*#__PURE__*/React__default["default"].createElement(PrevNextButtonIcon, {
+      type: "button",
+      buttonType: "ghost",
+      iconType: "next",
+      hidden: totalPages < 2,
+      onClick: () => handleSelectPage(currentPage + 1),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 232,
+        columnNumber: 17
+      }
+    }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
       isDisabled: currentPage === totalPages,
       color: currentPage === totalPages ? 'disable' : 'primary',
@@ -20606,8 +20763,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 151,
-        columnNumber: 13
+        lineNumber: 240,
+        columnNumber: 17
       }
     }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
       type: "button",
@@ -20617,16 +20774,16 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 160,
-        columnNumber: 15
+        lineNumber: 251,
+        columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
       color: currentPage === totalPages ? colors$7.iconDisable : colors$7.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 166,
-        columnNumber: 17
+        lineNumber: 257,
+        columnNumber: 19
       }
     })))), !hideInputPageSection && totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       orientation: "vertical",
@@ -20638,8 +20795,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 175,
-        columnNumber: 11
+        lineNumber: 266,
+        columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
@@ -20651,23 +20808,40 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 183,
-        columnNumber: 11
+        lineNumber: 274,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "caption",
-      css: {
+      css: Object.assign({
         fontSize: 12,
         fontWeight: 400,
         color: '$textPrimary'
+      }, isMobilePagination && {
+        backgroundColor: '$bgWhite',
+        padding: 4,
+        borderRadius: 4
+      }),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 275,
+        columnNumber: 15
+      }
+    }, t('gotoPageText', 'Ke Halaman')), isMobilePagination ? /*#__PURE__*/React__default["default"].createElement(GoToPageBox, {
+      align: "center",
+      justify: "center",
+      onClick: () => {
+        var _dialogPageRef$curren;
+        return (_dialogPageRef$curren = dialogPageRef.current) === null || _dialogPageRef$curren === void 0 ? void 0 : _dialogPageRef$curren.click();
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 184,
-        columnNumber: 13
+        lineNumber: 287,
+        columnNumber: 17
       }
-    }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default["default"].createElement(InputNumber, {
+    }, goToPage) : /*#__PURE__*/React__default["default"].createElement(InputNumber, {
       ref: inputPageRef,
       isAllowed: ({
         floatValue
@@ -20691,10 +20865,126 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 187,
+        lineNumber: 291,
+        columnNumber: 17
+      }
+    })))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 319,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
+      style: {
+        display: 'none'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 320,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: dialogPageRef,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 321,
+        columnNumber: 11
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 323,
+        columnNumber: 9
+      }
+    }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 324,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("form", {
+      onSubmit: () => {
+        var _dialogPageRef$curren2;
+        debouncedGoToPage(Number(goToPage));
+        (_dialogPageRef$curren2 = dialogPageRef.current) === null || _dialogPageRef$curren2 === void 0 ? void 0 : _dialogPageRef$curren2.click();
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 325,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(InputNumber, {
+      ref: inputPageRef,
+      placeholder: t('goToPagePlaceholder', 'Contoh: 10'),
+      isAllowed: ({
+        floatValue
+      }) => floatValue === undefined || floatValue > 0 && floatValue <= totalPages,
+      allowNegative: false,
+      onChange: e => {
+        var _e$target;
+        return setGoToPage((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 331,
         columnNumber: 13
       }
-    }))));
+    }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 340,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      css: {
+        width: '100%'
+      },
+      gap: 4,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 341,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
+      block: true,
+      type: "button",
+      buttonType: "ghost",
+      onClick: () => {
+        var _dialogPageRef$curren3;
+        setGoToPage(null);
+        (_dialogPageRef$curren3 = dialogPageRef.current) === null || _dialogPageRef$curren3 === void 0 ? void 0 : _dialogPageRef$curren3.click();
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 342,
+        columnNumber: 13
+      }
+    }, t('btnCancelText', 'Batal')), /*#__PURE__*/React__default["default"].createElement(Button$4, {
+      block: true,
+      type: "button",
+      buttonType: "primary",
+      onClick: () => {
+        var _dialogPageRef$curren4;
+        debouncedGoToPage(Number(goToPage));
+        (_dialogPageRef$curren4 = dialogPageRef.current) === null || _dialogPageRef$curren4 === void 0 ? void 0 : _dialogPageRef$curren4.click();
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$k,
+        lineNumber: 353,
+        columnNumber: 13
+      }
+    }, t('btnSubmitText', 'Lanjutkan'))))));
   };
 
   const _excluded$3 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
@@ -20727,14 +21017,16 @@
     const {
       t
     } = reactI18next.useTranslation('MajooUI/pagination');
-    return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+    const dialogLimitRef = React.useRef();
+    const isMobilePagination = useMediaQuery('(max-width: 767px)');
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
       gap: 3,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 30,
-        columnNumber: 5
+        lineNumber: 38,
+        columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       color: "secondary",
@@ -20742,54 +21034,69 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 31,
-        columnNumber: 7
+        lineNumber: 39,
+        columnNumber: 9
       }
     }, t('showingText', 'Tampilkan:')), /*#__PURE__*/React__default["default"].createElement(Popover, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 34,
-        columnNumber: 7
+        lineNumber: 42,
+        columnNumber: 9
       }
-    }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+    }, /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
+      condition: !isMobilePagination,
+      wrapper: child => /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$j,
+          lineNumber: 45,
+          columnNumber: 31
+        }
+      }, child),
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 35,
-        columnNumber: 9
+        lineNumber: 43,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(LimitContainer, {
       align: "center",
+      onClick: () => {
+        if (isMobilePagination) {
+          var _dialogLimitRef$curre;
+          (_dialogLimitRef$curre = dialogLimitRef.current) === null || _dialogLimitRef$curre === void 0 ? void 0 : _dialogLimitRef$curre.click();
+        }
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 36,
-        columnNumber: 11
+        lineNumber: 47,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "status",
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 37,
-        columnNumber: 13
+        lineNumber: 55,
+        columnNumber: 15
       }
     }, selectedLimit.toString()), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
       color: colors$7.gray400,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 38,
-        columnNumber: 13
+        lineNumber: 56,
+        columnNumber: 15
       }
     }))), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       placement: "top",
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 41,
-        columnNumber: 9
+        lineNumber: 59,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "column",
@@ -20801,8 +21108,8 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 42,
-        columnNumber: 11
+        lineNumber: 60,
+        columnNumber: 13
       }
     }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
       key: limit,
@@ -20811,16 +21118,16 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 51,
-        columnNumber: 15
+        lineNumber: 69,
+        columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "status",
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 56,
-        columnNumber: 17
+        lineNumber: 74,
+        columnNumber: 19
       }
     }, limit.toString())))))), /*#__PURE__*/React__default["default"].createElement(Text$1, {
       color: "secondary",
@@ -20828,14 +21135,89 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 62,
-        columnNumber: 7
+        lineNumber: 80,
+        columnNumber: 9
       }
     }, t('showingCountText', `Ditampilkan ${(currentPage - 1) * selectedLimit + 1} - ${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`, {
       start: (currentPage - 1) * selectedLimit + 1,
       end: selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData,
       totalData
-    })));
+    }))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 94,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
+      style: {
+        display: 'none'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 95,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: dialogLimitRef,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 96,
+        columnNumber: 11
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 98,
+        columnNumber: 9
+      }
+    }, t('dialogShowingText', 'Tampilkan Data')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
+      style: {
+        padding: 0
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 99,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: {
+        padding: '$spacing-04 0px'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 100,
+        columnNumber: 11
+      }
+    }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      css: {
+        height: 44,
+        width: '100%',
+        padding: '$spacing-03 $spacing-06',
+        cursor: 'pointer',
+        background: selectedLimit === limit && '$green50',
+        '&:hover': {
+          background: '$gray50'
+        }
+      },
+      align: "center",
+      onClick: () => {
+        var _dialogLimitRef$curre2;
+        onChange(limit);
+        (_dialogLimitRef$curre2 = dialogLimitRef.current) === null || _dialogLimitRef$curre2 === void 0 ? void 0 : _dialogLimitRef$curre2.click();
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 102,
+        columnNumber: 15
+      }
+    }, limit.toString()))))));
   }
 
   const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions", "hidePagination", "hideInputPageSection"];
@@ -21912,7 +22294,7 @@
     var renderFooter = function renderFooter() {
       return jsxRuntime.jsx(Pagination, {
         hidePagination: hidePagination,
-        hideInputPageSection: isMobile,
+        hideInputPageSection: false,
         limit: pageSize,
         currentPage: pageIndex + 1,
         totalData: totalData,