@majoo-ui/react 1.58.0 → 1.58.2

package/index.esm.js

@@ -9527,29 +9527,28 @@ var NumberFormat = /*@__PURE__*/function (superclass) {
     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);
         }
@@ -17151,7 +17150,11 @@ const NativeTimePicker = ({
   value,
   disabled,
   disabledHour,
+  disabledHourIncrease,
+  disabledHourDecrease,
   disabledMinute,
+  disabledMinuteIncrease,
+  disabledMinuteDecrease,
   minDate,
   maxDate
 }) => {
@@ -17167,11 +17170,11 @@ const NativeTimePicker = ({
   function handleUp(type) {
     if (!disabled) {
       if (type === 'hour') {
-        if ((!maxDate || moment(date).add(1, 'hours') <= moment(maxDate)) && !disabledHour) {
+        if ((!maxDate || moment(date).add(1, 'hours') <= moment(maxDate)) && !disabledHour && !disabledHourIncrease) {
           setNewDate(moment(date).add(1, 'hours'));
         }
       } else {
-        if ((!maxDate || moment(date).add(1, 'minutes') <= moment(maxDate)) && !disabledMinute) {
+        if ((!maxDate || moment(date).add(1, 'minutes') <= moment(maxDate)) && !disabledMinute && !disabledMinuteIncrease) {
           setNewDate(moment(date).add(1, 'minutes'));
         }
       }
@@ -17180,11 +17183,11 @@ const NativeTimePicker = ({
   function handleDown(type) {
     if (!disabled) {
       if (type === 'hour') {
-        if ((!minDate || moment(date).subtract(1, 'hours') >= moment(minDate)) && !disabledHour) {
+        if ((!minDate || moment(date).subtract(1, 'hours') >= moment(minDate)) && !disabledHour && !disabledHourDecrease) {
           setNewDate(moment(date).subtract(1, 'hours'));
         }
       } else {
-        if ((!minDate || moment(date).subtract(1, 'minutes') >= moment(minDate)) && !disabledMinute) {
+        if ((!minDate || moment(date).subtract(1, 'minutes') >= moment(minDate)) && !disabledMinute && !disabledMinuteDecrease) {
           setNewDate(moment(date).subtract(1, 'minutes'));
         }
       }
@@ -17201,7 +17204,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 169,
+      lineNumber: 185,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -17210,27 +17213,27 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 175,
+      lineNumber: 191,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__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.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.createElement(Input$3, {
@@ -17241,7 +17244,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 179,
+      lineNumber: 203,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Time, {
@@ -17249,7 +17252,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 180,
+      lineNumber: 204,
       columnNumber: 7
     }
   }, moment(date).format(format)), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -17258,27 +17261,27 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 181,
+      lineNumber: 205,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__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.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
     }
   })));
@@ -17308,10 +17311,26 @@ NativeTimePicker.propTypes = {
     Disabled hour state.
    */
   disabledHour: PropTypes.bool,
+  /**
+    Disabled increase hour state.
+   */
+  disabledHourIncrease: PropTypes.bool,
+  /**
+    Disabled decrease hour state.
+   */
+  disabledHourDecrease: PropTypes.bool,
   /**
     Disabled minute state.
    */
   disabledMinute: PropTypes.bool,
+  /**
+    Disabled increase minute state.
+   */
+  disabledMinuteIncrease: PropTypes.bool,
+  /**
+    Disabled decrease minute state.
+   */
+  disabledMinuteDecrease: PropTypes.bool,
   /**
     Specify the minimum date.
    */
@@ -17328,7 +17347,11 @@ const TimePicker = ({
   value,
   disabled,
   disabledHour,
+  disabledHourIncrease,
+  disabledHourDecrease,
   disabledMinute,
+  disabledMinuteIncrease,
+  disabledMinuteDecrease,
   css,
   minDate,
   maxDate
@@ -17343,14 +17366,18 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 241,
+      lineNumber: 293,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__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,
@@ -17359,7 +17386,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 242,
+      lineNumber: 294,
       columnNumber: 7
     }
   }));
@@ -17394,10 +17421,26 @@ TimePicker.propTypes = {
    Disabled hour state.
   */
   disabledHour: PropTypes.bool,
+  /**
+    Disabled increase hour state.
+   */
+  disabledHourIncrease: PropTypes.bool,
+  /**
+      Disabled decrease hour state.
+     */
+  disabledHourDecrease: PropTypes.bool,
   /**
    Disabled minute state.
   */
   disabledMinute: PropTypes.bool,
+  /**
+    Disabled increase minute state.
+   */
+  disabledMinuteIncrease: PropTypes.bool,
+  /**
+      Disabled decrease minute state.
+     */
+  disabledMinuteDecrease: PropTypes.bool,
   /**
     Specify the minimum date.
    */
@@ -17424,7 +17467,11 @@ function InputTimePicker({
   css,
   disabled,
   disabledHour,
+  disabledHourIncrease,
+  disabledHourDecrease,
   disabledMinute,
+  disabledMinuteIncrease,
+  disabledMinuteDecrease,
   readOnly,
   minDate,
   maxDate,
@@ -17445,7 +17492,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 41,
+      lineNumber: 45,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -17454,14 +17501,14 @@ function InputTimePicker({
       __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.createElement(InputText, {
@@ -17476,7 +17523,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 43,
+      lineNumber: 47,
       columnNumber: 7
     }
   }));
@@ -17484,7 +17531,11 @@ function InputTimePicker({
     size: size,
     disabled: disabled,
     disabledHour: disabledHour,
+    disabledHourIncrease: disabledHourIncrease,
+    disabledHourDecrease: disabledHourDecrease,
     disabledMinute: disabledMinute,
+    disabledMinuteIncrease: disabledMinuteIncrease,
+    disabledMinuteDecrease: disabledMinuteDecrease,
     defaultValue: defaultValue,
     value: value,
     onChange: onChange,
@@ -17493,7 +17544,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 56,
+      lineNumber: 60,
       columnNumber: 5
     }
   });
@@ -17504,7 +17555,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 70,
+      lineNumber: 78,
       columnNumber: 5
     }
   }, disabled || readOnly ? /*#__PURE__*/React__default.createElement(Box, {
@@ -17512,14 +17563,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 72,
+      lineNumber: 80,
       columnNumber: 9
     }
   }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 74,
+      lineNumber: 82,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -17527,14 +17578,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 75,
+      lineNumber: 83,
       columnNumber: 11
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 78,
+      lineNumber: 86,
       columnNumber: 7
     }
   }, renderTimePicker()));
@@ -17556,10 +17607,26 @@ InputTimePicker.propTypes = {
    Disabled hour state.
   */
   disabledHour: PropTypes.bool,
+  /**
+    Disabled increase hour state.
+   */
+  disabledHourIncrease: PropTypes.bool,
+  /**
+        Disabled decrease hour state.
+       */
+  disabledHourDecrease: PropTypes.bool,
   /**
     Disabled minute state.
    */
   disabledMinute: PropTypes.bool,
+  /**
+    Disabled increase minute state.
+   */
+  disabledMinuteIncrease: PropTypes.bool,
+  /**
+        Disabled decrease minute state.
+       */
+  disabledMinuteDecrease: PropTypes.bool,
   /**
    ReadOnly state.
   */
@@ -20160,6 +20227,64 @@ const PrevNextButton = styled(Text$1, {
     }
   }
 });
+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] = useState(false);
+  function handleEnter() {
+    setIsHover(true);
+  }
+  function handleLeave() {
+    setIsHover(false);
+  }
+  return /*#__PURE__*/React__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.createElement(ArrowLeftOutline, {
+    color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 82,
+      columnNumber: 9
+    }
+  }) : /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
+    color: isHover ? colors$7.iconGreen : colors$7.iconPrimary,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 84,
+      columnNumber: 9
+    }
+  }));
+};
 const PageButton = _ref => {
   let {
       isActive,
@@ -20172,16 +20297,20 @@ const PageButton = _ref => {
     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
     }
   }));
@@ -20202,6 +20331,8 @@ const PaginationButton = ({
     }
   };
   const inputPageRef = useRef();
+  const dialogPageRef = useRef();
+  const [goToPage, setGoToPage] = useState();
   useEffect(() => {
     if (inputPageRef.current) {
       inputPageRef.current.value = '';
@@ -20209,13 +20340,17 @@ const PaginationButton = ({
   }, [currentPage]);
   const debouncedGoToPage = useCallback(debounce(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;
@@ -20225,13 +20360,11 @@ const PaginationButton = ({
     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) {
@@ -20241,8 +20374,8 @@ const PaginationButton = ({
     }
     return pageButtons;
   };
-  const isMobilePagination = useMediaQuery('(max-width: 360px)');
-  return /*#__PURE__*/React__default.createElement(Flex$1, {
+  const isMobilePagination = useMediaQuery('(max-width: 767px)');
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Flex$1, {
     align: "center",
     direction: isMobilePagination ? 'column' : 'row',
     gap: isMobilePagination ? 2 : 0,
@@ -20252,8 +20385,8 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 109,
-      columnNumber: 5
+      lineNumber: 179,
+      columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
     align: "center",
@@ -20261,8 +20394,8 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 115,
-      columnNumber: 7
+      lineNumber: 185,
+      columnNumber: 9
     }
   }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
     type: "button",
@@ -20272,18 +20405,30 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 119,
-      columnNumber: 15
+      lineNumber: 189,
+      columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(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.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.createElement(PrevNextButton, {
+  }) : /*#__PURE__*/React__default.createElement(PrevNextButton, {
     variant: "caption",
     isDisabled: currentPage === 1,
     color: currentPage === 1 ? 'disable' : 'primary',
@@ -20291,8 +20436,8 @@ const PaginationButton = ({
     __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.createElement(PageButton, {
@@ -20302,11 +20447,23 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 140,
-        columnNumber: 13
+        lineNumber: 220,
+        columnNumber: 15
       }
     }, page);
-  }), (currentPage < totalPages || totalPages === 1) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PrevNextButton, {
+  }), (currentPage < totalPages || totalPages === 1) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isLg ? /*#__PURE__*/React__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.createElement(PrevNextButton, {
     variant: "caption",
     isDisabled: currentPage === totalPages,
     color: currentPage === totalPages ? 'disable' : 'primary',
@@ -20314,8 +20471,8 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 151,
-      columnNumber: 13
+      lineNumber: 240,
+      columnNumber: 17
     }
   }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
     type: "button",
@@ -20325,16 +20482,16 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 160,
-      columnNumber: 15
+      lineNumber: 251,
+      columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Separator$2, {
     orientation: "vertical",
@@ -20346,8 +20503,8 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 175,
-      columnNumber: 11
+      lineNumber: 266,
+      columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
     css: {
@@ -20359,23 +20516,40 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 183,
-      columnNumber: 11
+      lineNumber: 274,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__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.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.createElement(InputNumber, {
+  }, goToPage) : /*#__PURE__*/React__default.createElement(InputNumber, {
     ref: inputPageRef,
     isAllowed: ({
       floatValue
@@ -20399,10 +20573,126 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 187,
+      lineNumber: 291,
+      columnNumber: 17
+    }
+  })))), /*#__PURE__*/React__default.createElement(ModalDialog, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 319,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
+    style: {
+      display: 'none'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 320,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: dialogPageRef,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 321,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 323,
+      columnNumber: 9
+    }
+  }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 324,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__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.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.createElement(ModalDialogFooter, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 340,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(Flex$1, {
+    css: {
+      width: '100%'
+    },
+    gap: 4,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$k,
+      lineNumber: 341,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__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.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"];
@@ -20435,14 +20725,16 @@ function PaginationInfo(_ref) {
   const {
     t
   } = useTranslation('MajooUI/pagination');
-  return /*#__PURE__*/React__default.createElement(Flex$1, {
+  const dialogLimitRef = useRef();
+  const isMobilePagination = useMediaQuery('(max-width: 767px)');
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__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.createElement(Text$1, {
     color: "secondary",
@@ -20450,54 +20742,69 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 31,
-      columnNumber: 7
+      lineNumber: 39,
+      columnNumber: 9
     }
   }, t('showingText', 'Tampilkan:')), /*#__PURE__*/React__default.createElement(Popover, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 34,
-      columnNumber: 7
+      lineNumber: 42,
+      columnNumber: 9
     }
-  }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
+  }, /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: !isMobilePagination,
+    wrapper: child => /*#__PURE__*/React__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.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.createElement(Text$1, {
     variant: "status",
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 37,
-      columnNumber: 13
+      lineNumber: 55,
+      columnNumber: 15
     }
   }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
     color: colors$7.gray400,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 38,
-      columnNumber: 13
+      lineNumber: 56,
+      columnNumber: 15
     }
   }))), /*#__PURE__*/React__default.createElement(PopoverContent, {
     placement: "top",
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 41,
-      columnNumber: 9
+      lineNumber: 59,
+      columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "column",
@@ -20509,8 +20816,8 @@ function PaginationInfo(_ref) {
     __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.createElement(PopoverClose, {
     key: limit,
@@ -20519,16 +20826,16 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 51,
-      columnNumber: 15
+      lineNumber: 69,
+      columnNumber: 17
     }
   }, /*#__PURE__*/React__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.createElement(Text$1, {
     color: "secondary",
@@ -20536,14 +20843,89 @@ function PaginationInfo(_ref) {
     __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.createElement(ModalDialog, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 94,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
+    style: {
+      display: 'none'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 95,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: dialogLimitRef,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 96,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 98,
+      columnNumber: 9
+    }
+  }, t('dialogShowingText', 'Tampilkan Data')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
+    style: {
+      padding: 0
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 99,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__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.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"];
@@ -21572,7 +21954,7 @@ function Table({
   };
   const renderFooter = () => jsx(Pagination, {
     hidePagination: hidePagination,
-    hideInputPageSection: isMobile,
+    hideInputPageSection: false,
     limit: pageSize,
     currentPage: pageIndex + 1,
     totalData: totalData,