@majoo-ui/react 1.55.18 → 1.55.20

package/index.esm.js

@@ -2530,7 +2530,7 @@ const StyledDiv$3 = styled(Flex$1, {
   marginLeft: 'auto',
   marginRight: 'auto',
   '@sm': {
-    padding: '$spacing-04 $spacing-05',
+    padding: '0 $spacing-05 $spacing-06',
     backgroundColor: '$white',
     width: '100%'
   },
@@ -6488,7 +6488,8 @@ InputRadioGroup.propTypes = {
   defaultValue: PropTypes.string,
   value: PropTypes.string,
   onValueChange: PropTypes.func,
-  outlined: PropTypes.bool
+  outlined: PropTypes.bool,
+  block: PropTypes.bool
 };
 InputRadioGroup.displayName = 'InputRadioGroup';
 
@@ -6622,6 +6623,11 @@ const Container$a = styled(Flex$1, {
       true: {
         padding: '0 $spacing-03'
       }
+    },
+    block: {
+      true: {
+        flex: 1
+      }
     }
   },
   compoundVariants: [{
@@ -6634,7 +6640,14 @@ const Container$a = styled(Flex$1, {
 });
 const ContainerLabel = styled('label', {
   width: 'fit-content',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  variants: {
+    outlined: {
+      true: {
+        display: 'contents'
+      }
+    }
+  }
 });
 const InputRadio = _ref => {
   let {
@@ -6661,7 +6674,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$G,
-            lineNumber: 162,
+            lineNumber: 171,
             columnNumber: 11
           }
         }));
@@ -6678,7 +6691,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$G,
-            lineNumber: 175,
+            lineNumber: 184,
             columnNumber: 11
           }
         }));
@@ -6697,7 +6710,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$G,
-            lineNumber: 189,
+            lineNumber: 198,
             columnNumber: 11
           }
         }, props.label);
@@ -6707,22 +6720,24 @@ const InputRadio = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$G,
-      lineNumber: 208,
+      lineNumber: 217,
       columnNumber: 5
     }
   }, ({
     defaultValue,
     value,
     outlined,
-    onValueChange
+    onValueChange,
+    block
   }) => {
     const checkedValue = value != null ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(ContainerLabel, {
       htmlFor: id,
+      outlined: outlined,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 213,
+        lineNumber: 222,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Container$a, {
@@ -6732,11 +6747,12 @@ const InputRadio = _ref => {
       disabled: disabled,
       active: outlined && checkedValue === props.value && !disabled && !readOnly,
       withInputProps: !!inputProps,
+      block: block,
       css: css,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 214,
+        lineNumber: 223,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -6745,7 +6761,7 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 223,
+        lineNumber: 233,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(StyledRadio, _extends({
@@ -6756,14 +6772,14 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 224,
+        lineNumber: 234,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 225,
+        lineNumber: 235,
         columnNumber: 19
       }
     })), renderInputType(inputType, checkedValue, onValueChange)), description && /*#__PURE__*/React__default.createElement(Text$1, {
@@ -6775,7 +6791,7 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 230,
+        lineNumber: 240,
         columnNumber: 17
       }
     }, description)));
@@ -8823,7 +8839,8 @@ const StyledFooter = styled('div', {
   right: 0,
   backgroundColor: '$bgWhite',
   boxShadow: '0px 4px 6px #00000014',
-  borderTop: '1px solid $bgBorder'
+  borderTop: '1px solid $bgBorder',
+  pointerEvents: 'auto'
 });
 const StyledDiv$2 = styled('div', {
   color: '$textDisable',
@@ -15493,7 +15510,8 @@ const CalendarBox = ({
             },
             onClick: onReset,
             disabled: disabled,
-            size: "sm"
+            size: "sm",
+            type: "button"
           }, {
             children: "Reset"
           }), void 0) : jsx(Button$4, Object.assign({
@@ -15503,7 +15521,8 @@ const CalendarBox = ({
             },
             onClick: onCancel,
             disabled: disabled,
-            size: "sm"
+            size: "sm",
+            type: "button"
           }, {
             children: t('label.cancel', 'Batal', {
               ns: 'translation'
@@ -15514,7 +15533,8 @@ const CalendarBox = ({
             },
             onClick: onUpdate,
             disabled: disabled || !selected || selected.length <= 1,
-            size: "sm"
+            size: "sm",
+            type: "button"
           }, {
             children: t('label.process', 'Proses', {
               ns: 'translation'
@@ -15788,7 +15808,7 @@ const MobileCalendarBox = ({
   const {
     t,
     i18n
-  } = useTranslation('MajooUI/datePicker');
+  } = useTranslation(['MajooUI/datePicker', 'translation']);
   const [pickerState, setPickerState] = useState({
     type: DATE_PICKER,
     selectedMonth: Number(calendars[0].month),
@@ -16062,7 +16082,7 @@ const MobileCalendarBox = ({
       }, {
         children: [allowReset ? jsx(Button$4, Object.assign({
           buttonType: "ghost",
-          size: "sm",
+          size: "md",
           css: {
             width: '160px',
             fontWeight: 600,
@@ -16070,12 +16090,13 @@ const MobileCalendarBox = ({
             flex: 1
           },
           onClick: onReset,
-          disabled: disabled
+          disabled: disabled,
+          type: "button"
         }, {
           children: "Reset"
         }), void 0) : jsx(Button$4, Object.assign({
           buttonType: "ghost",
-          size: "sm",
+          size: "md",
           css: {
             width: '160px',
             fontWeight: 600,
@@ -16083,11 +16104,14 @@ const MobileCalendarBox = ({
             flex: 1
           },
           onClick: onCancel,
-          disabled: disabled
+          disabled: disabled,
+          type: "button"
         }, {
-          children: "Batal"
+          children: t('label.cancel', 'Batal', {
+            ns: 'translation'
+          })
         }), void 0), jsx(Button$4, Object.assign({
-          size: "sm",
+          size: "md",
           css: {
             width: '160px',
             fontWeight: 600,
@@ -16095,9 +16119,12 @@ const MobileCalendarBox = ({
             flex: 1
           },
           onClick: onUpdate,
-          disabled: disabled
+          disabled: disabled,
+          type: "button"
         }, {
-          children: "Proses"
+          children: t('label.process', 'Proses', {
+            ns: 'translation'
+          })
         }), void 0)]
       }), void 0)]
     }), void 0);
@@ -18265,7 +18292,7 @@ const TableHeadRow$4 = styled('tr', {
   }
 });
 const TableHeadCell$4 = styled('th', {
-  height: '40px'
+  height: '48px'
 });
 const TableRow$4 = styled('tr', {
   borderBottom: '1pt solid $bgBorder',
@@ -18326,6 +18353,31 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
         return 'center';
     }
   };
+  const getIsMobileHeader = useCallback(() => {
+    var _a, _b, _c;
+    let isMobileHeader;
+    for (let i = 0; i < (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length); i++) {
+      for (let x = 0; x < ((_b = (_a = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[i]) === null || _a === void 0 ? void 0 : _a.headers) === null || _b === void 0 ? void 0 : _b.length); x++) {
+        const headerData = (_c = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[i]) === null || _c === void 0 ? void 0 : _c.headers[x];
+        if (headerData === null || headerData === void 0 ? void 0 : headerData.isMobileHeader) {
+          isMobileHeader = true;
+        }
+      }
+    }
+    return isMobileHeader;
+  }, [headerGroups]);
+  let indexDefaultHeader = 0;
+  const filterMobileHeader = (column, index) => {
+    switch (column.id) {
+      case 'selection':
+        indexDefaultHeader += 1;
+        break;
+      case 'expander':
+        indexDefaultHeader += 1;
+        break;
+    }
+    return (getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader) || column.id === 'selection';
+  };
   return jsxs(TableContainer$4, Object.assign({
     css: css,
     ref: ref
@@ -18333,7 +18385,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
     children: [infiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
       children: [jsx(TableHead$3, {
         children: headerGroups.map(headerGroup => jsx(TableHeadRow$4, Object.assign({}, headerGroup.getHeaderGroupProps(), {
-          children: headerGroup.headers.filter(column => column.isMobileHeader || column.id === 'selection').map(column => {
+          children: headerGroup.headers.filter((column, index) => filterMobileHeader(column, index)).map(column => {
             const headerRender = column.render('Header');
             return jsx(TableHeadCell$4, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
               title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
@@ -18383,7 +18435,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
             }), void 0)), jsx(TableRow$4, Object.assign({
               css: customStyle
             }, row.getRowProps(), {
-              children: row.cells.filter(cell => cell.column.isMobileHeader || cell.column.id === 'selection').map(cell => {
+              children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection').map(cell => {
                 var _a;
                 const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
                 const exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
@@ -18407,26 +18459,37 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                   children: cell.render('Cell')
                 }), void 0);
                 return jsx(TableCell$4, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                  onClick: () => {
-                    if (!exceptionId) {
-                      handleRowClick(row, i);
-                    }
-                  }
-                }, {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
                     justify: "between",
                     align: "center",
-                    onClick: () => {
-                      if (!Object.keys(state.expanded).includes(row.id)) {
-                        toggleAllRowsExpanded(false);
-                      }
-                      row.toggleRowExpanded(!row.isExpanded);
-                    },
                     css: {
-                      cursor: 'pointer'
+                      cursor: 'pointer',
+                      height: '100%'
                     }
                   }, {
-                    children: [renderCell(), row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)]
+                    children: [jsx(Flex$1, Object.assign({
+                      align: "center",
+                      css: {
+                        flex: 1,
+                        height: '100%'
+                      },
+                      onClick: () => {
+                        if (!exceptionId) {
+                          handleRowClick(row, i);
+                        }
+                      }
+                    }, {
+                      children: renderCell()
+                    }), void 0), jsx(Box, Object.assign({
+                      onClick: () => {
+                        if (!Object.keys(state.expanded).includes(row.id)) {
+                          toggleAllRowsExpanded(false);
+                        }
+                        row.toggleRowExpanded(!row.isExpanded);
+                      }
+                    }, {
+                      children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
+                    }), void 0)]
                   }), void 0) : renderCell()
                 }), void 0);
               })
@@ -18437,7 +18500,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                 children: [jsx(Flex$1, Object.assign({
                   direction: "column"
                 }, {
-                  children: row.cells.filter(cell => !cell.column.isMobileHeader && cell.column.accessor).map(cell => {
+                  children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? !cell.column.isMobileHeader : indexCell !== indexDefaultHeader) && cell.column.accessor).map(cell => {
                     var _a;
                     return jsxs(Flex$1, Object.assign({
                       align: "center",
@@ -19023,7 +19086,7 @@ function Table({
       const isMenu = ((_d = (_c = (_b = row === null || row === void 0 ? void 0 : row.cells) === null || _b === void 0 ? void 0 : _b[_i]) === null || _c === void 0 ? void 0 : _c.column) === null || _d === void 0 ? void 0 : _d.id) === 'menu';
       clickable = !isMenu;
     }
-    clickable && !isMobile && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i));
+    clickable && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i));
     setDataRow(row);
   };
   useLayoutEffect(() => {
@@ -19869,29 +19932,27 @@ const rowMenuColumn = (options, icon, config) => ({
     };
     const currentConfig = Object.assign({}, defaultConfig, config);
     const {
-      mobileTitle,
       cssContent,
       cssMenuItem
     } = currentConfig;
-    const [openModal, setOpenModal] = useState(false);
     const [openDrop, setOpenDrop] = useState(false);
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownMenu, {
+    return /*#__PURE__*/React__default.createElement(DropdownMenu, {
       align: currentConfig.align,
       open: openDrop,
       onOpenchange: setOpenDrop,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 39,
-        columnNumber: 9
+        lineNumber: 31,
+        columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
       asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 40,
-        columnNumber: 11
+        lineNumber: 32,
+        columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
       css: {
@@ -19903,8 +19964,8 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 41,
-        columnNumber: 13
+        lineNumber: 33,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       type: "button",
@@ -19917,22 +19978,22 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 42,
-        columnNumber: 15
+        lineNumber: 34,
+        columnNumber: 13
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 50,
-        columnNumber: 26
+        lineNumber: 42,
+        columnNumber: 24
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 54,
-        columnNumber: 11
+        lineNumber: 46,
+        columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
       onInteractOutside: () => setOpenDrop(false),
@@ -19954,16 +20015,16 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 55,
-        columnNumber: 13
+        lineNumber: 47,
+        columnNumber: 11
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: `${option.title}dd-${index}`,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 75,
-        columnNumber: 17
+        lineNumber: 67,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
       onClick: () => {
@@ -19974,8 +20035,8 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 76,
-        columnNumber: 19
+        lineNumber: 68,
+        columnNumber: 17
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
       key: `${option.title}ds`,
@@ -19985,130 +20046,10 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 85,
-        columnNumber: 19
-      }
-    })))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
-      isMobile: true,
-      modal: true,
-      open: openModal,
-      onOpenChange: setOpenModal,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 91,
-        columnNumber: 9
-      }
-    }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
-      asChild: true,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 92,
-        columnNumber: 11
-      }
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      css: {
-        display: 'block',
-        '@md': {
-          display: 'none'
-        }
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 93,
-        columnNumber: 13
-      }
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
-      type: "button",
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 94,
-        columnNumber: 15
-      }
-    }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 94,
-        columnNumber: 50
-      }
-    })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 97,
-        columnNumber: 11
-      }
-    }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
-      css: {
-        padding: '20px 16px'
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 98,
-        columnNumber: 11
-      }
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      css: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 20,
-        '& > *:last-child': {
-          display: 'none'
-        }
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 99,
-        columnNumber: 13
-      }
-    }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: `${option.title}mb-${index}`,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 101,
+        lineNumber: 77,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      type: "button",
-      role: "button",
-      css: {
-        cursor: 'pointer'
-      },
-      onClick: () => {
-        setOpenModal(false);
-        option.onClick(props);
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 102,
-        columnNumber: 19
-      }
-    }, /*#__PURE__*/React__default.createElement(Paragraph, {
-      paragraph: "shortContentRegular",
-      color: "primary",
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 113,
-        columnNumber: 21
-      }
-    }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
-      key: `${option.title}ms`,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 117,
-        columnNumber: 19
-      }
-    })))))));
+    }))))));
   },
   unsortable: true
 });

package/index.umd.js

@@ -2640,7 +2640,7 @@
     marginLeft: 'auto',
     marginRight: 'auto',
     '@sm': {
-      padding: '$spacing-04 $spacing-05',
+      padding: '0 $spacing-05 $spacing-06',
       backgroundColor: '$white',
       width: '100%'
     },
@@ -6564,7 +6564,8 @@
     defaultValue: PropTypes__default["default"].string,
     value: PropTypes__default["default"].string,
     onValueChange: PropTypes__default["default"].func,
-    outlined: PropTypes__default["default"].bool
+    outlined: PropTypes__default["default"].bool,
+    block: PropTypes__default["default"].bool
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
@@ -6698,6 +6699,11 @@
         true: {
           padding: '0 $spacing-03'
         }
+      },
+      block: {
+        true: {
+          flex: 1
+        }
       }
     },
     compoundVariants: [{
@@ -6710,7 +6716,14 @@
   });
   const ContainerLabel = styled('label', {
     width: 'fit-content',
-    cursor: 'pointer'
+    cursor: 'pointer',
+    variants: {
+      outlined: {
+        true: {
+          display: 'contents'
+        }
+      }
+    }
   });
   const InputRadio = _ref => {
     let {
@@ -6737,7 +6750,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$G,
-              lineNumber: 162,
+              lineNumber: 171,
               columnNumber: 11
             }
           }));
@@ -6754,7 +6767,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$G,
-              lineNumber: 175,
+              lineNumber: 184,
               columnNumber: 11
             }
           }));
@@ -6773,7 +6786,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$G,
-              lineNumber: 189,
+              lineNumber: 198,
               columnNumber: 11
             }
           }, props.label);
@@ -6783,22 +6796,24 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$G,
-        lineNumber: 208,
+        lineNumber: 217,
         columnNumber: 5
       }
     }, ({
       defaultValue,
       value,
       outlined,
-      onValueChange
+      onValueChange,
+      block
     }) => {
       const checkedValue = value != null ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(ContainerLabel, {
         htmlFor: id,
+        outlined: outlined,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$G,
-          lineNumber: 213,
+          lineNumber: 222,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Container$a, {
@@ -6808,11 +6823,12 @@
         disabled: disabled,
         active: outlined && checkedValue === props.value && !disabled && !readOnly,
         withInputProps: !!inputProps,
+        block: block,
         css: css,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$G,
-          lineNumber: 214,
+          lineNumber: 223,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -6821,7 +6837,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$G,
-          lineNumber: 223,
+          lineNumber: 233,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(StyledRadio, _extends({
@@ -6832,14 +6848,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$G,
-          lineNumber: 224,
+          lineNumber: 234,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$G,
-          lineNumber: 225,
+          lineNumber: 235,
           columnNumber: 19
         }
       })), renderInputType(inputType, checkedValue, onValueChange)), description && /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -6851,7 +6867,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$G,
-          lineNumber: 230,
+          lineNumber: 240,
           columnNumber: 17
         }
       }, description)));
@@ -8897,7 +8913,8 @@
     right: 0,
     backgroundColor: '$bgWhite',
     boxShadow: '0px 4px 6px #00000014',
-    borderTop: '1px solid $bgBorder'
+    borderTop: '1px solid $bgBorder',
+    pointerEvents: 'auto'
   });
   var StyledDiv$2 = styled('div', {
     color: '$textDisable',
@@ -15675,7 +15692,8 @@
               },
               onClick: onReset,
               disabled: disabled,
-              size: "sm"
+              size: "sm",
+              type: "button"
             }, {
               children: "Reset"
             }), void 0) : jsxRuntime.jsx(Button$4, __assign({
@@ -15685,7 +15703,8 @@
               },
               onClick: onCancel,
               disabled: disabled,
-              size: "sm"
+              size: "sm",
+              type: "button"
             }, {
               children: t('label.cancel', 'Batal', {
                 ns: 'translation'
@@ -15696,7 +15715,8 @@
               },
               onClick: onUpdate,
               disabled: disabled || !selected || selected.length <= 1,
-              size: "sm"
+              size: "sm",
+              type: "button"
             }, {
               children: t('label.process', 'Proses', {
                 ns: 'translation'
@@ -15973,7 +15993,7 @@
       minDate = _a.minDate,
       maxDate = _a.maxDate,
       allowReset = _a.allowReset;
-    var _b = reactI18next.useTranslation('MajooUI/datePicker'),
+    var _b = reactI18next.useTranslation(['MajooUI/datePicker', 'translation']),
       t = _b.t,
       i18n = _b.i18n;
     var _c = React.useState({
@@ -16281,7 +16301,7 @@
         }, {
           children: [allowReset ? jsxRuntime.jsx(Button$4, __assign({
             buttonType: "ghost",
-            size: "sm",
+            size: "md",
             css: {
               width: '160px',
               fontWeight: 600,
@@ -16289,12 +16309,13 @@
               flex: 1
             },
             onClick: onReset,
-            disabled: disabled
+            disabled: disabled,
+            type: "button"
           }, {
             children: "Reset"
           }), void 0) : jsxRuntime.jsx(Button$4, __assign({
             buttonType: "ghost",
-            size: "sm",
+            size: "md",
             css: {
               width: '160px',
               fontWeight: 600,
@@ -16302,11 +16323,14 @@
               flex: 1
             },
             onClick: onCancel,
-            disabled: disabled
+            disabled: disabled,
+            type: "button"
           }, {
-            children: "Batal"
+            children: t('label.cancel', 'Batal', {
+              ns: 'translation'
+            })
           }), void 0), jsxRuntime.jsx(Button$4, __assign({
-            size: "sm",
+            size: "md",
             css: {
               width: '160px',
               fontWeight: 600,
@@ -16314,9 +16338,12 @@
               flex: 1
             },
             onClick: onUpdate,
-            disabled: disabled
+            disabled: disabled,
+            type: "button"
           }, {
-            children: "Proses"
+            children: t('label.process', 'Proses', {
+              ns: 'translation'
+            })
           }), void 0)]
         }), void 0)]
       }), void 0);
@@ -18518,7 +18545,7 @@
     }
   });
   var TableHeadCell$4 = styled('th', {
-    height: '40px'
+    height: '48px'
   });
   var TableRow$4 = styled('tr', {
     borderBottom: '1pt solid $bgBorder',
@@ -18572,6 +18599,31 @@
           return 'center';
       }
     };
+    var getIsMobileHeader = React.useCallback(function () {
+      var _a, _b, _c;
+      var isMobileHeader;
+      for (var i = 0; i < (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length); i++) {
+        for (var x = 0; x < ((_b = (_a = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[i]) === null || _a === void 0 ? void 0 : _a.headers) === null || _b === void 0 ? void 0 : _b.length); x++) {
+          var headerData = (_c = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[i]) === null || _c === void 0 ? void 0 : _c.headers[x];
+          if (headerData === null || headerData === void 0 ? void 0 : headerData.isMobileHeader) {
+            isMobileHeader = true;
+          }
+        }
+      }
+      return isMobileHeader;
+    }, [headerGroups]);
+    var indexDefaultHeader = 0;
+    var filterMobileHeader = function filterMobileHeader(column, index) {
+      switch (column.id) {
+        case 'selection':
+          indexDefaultHeader += 1;
+          break;
+        case 'expander':
+          indexDefaultHeader += 1;
+          break;
+      }
+      return (getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader) || column.id === 'selection';
+    };
     return jsxRuntime.jsxs(TableContainer$4, __assign({
       css: css,
       ref: ref
@@ -18580,8 +18632,8 @@
         children: [jsxRuntime.jsx(TableHead$3, {
           children: headerGroups.map(function (headerGroup) {
             return jsxRuntime.jsx(TableHeadRow$4, __assign({}, headerGroup.getHeaderGroupProps(), {
-              children: headerGroup.headers.filter(function (column) {
-                return column.isMobileHeader || column.id === 'selection';
+              children: headerGroup.headers.filter(function (column, index) {
+                return filterMobileHeader(column, index);
               }).map(function (column) {
                 var headerRender = column.render('Header');
                 return jsxRuntime.jsx(TableHeadCell$4, __assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
@@ -18635,8 +18687,8 @@
               }), void 0)), jsxRuntime.jsx(TableRow$4, __assign({
                 css: customStyle
               }, row.getRowProps(), {
-                children: row.cells.filter(function (cell) {
-                  return cell.column.isMobileHeader || cell.column.id === 'selection';
+                children: row.cells.filter(function (cell, indexCell) {
+                  return (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection';
                 }).map(function (cell) {
                   var _a;
                   var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
@@ -18667,26 +18719,37 @@
                     }), void 0);
                   };
                   return jsxRuntime.jsx(TableCell$4, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                    onClick: function () {
-                      if (!exceptionId) {
-                        handleRowClick(row, i);
-                      }
-                    }
-                  }, {
                     children: cell.column.accessor ? jsxRuntime.jsxs(Flex$1, __assign({
                       justify: "between",
                       align: "center",
-                      onClick: function () {
-                        if (!Object.keys(state.expanded).includes(row.id)) {
-                          toggleAllRowsExpanded(false);
-                        }
-                        row.toggleRowExpanded(!row.isExpanded);
-                      },
                       css: {
-                        cursor: 'pointer'
+                        cursor: 'pointer',
+                        height: '100%'
                       }
                     }, {
-                      children: [renderCell(), row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)]
+                      children: [jsxRuntime.jsx(Flex$1, __assign({
+                        align: "center",
+                        css: {
+                          flex: 1,
+                          height: '100%'
+                        },
+                        onClick: function () {
+                          if (!exceptionId) {
+                            handleRowClick(row, i);
+                          }
+                        }
+                      }, {
+                        children: renderCell()
+                      }), void 0), jsxRuntime.jsx(Box, __assign({
+                        onClick: function () {
+                          if (!Object.keys(state.expanded).includes(row.id)) {
+                            toggleAllRowsExpanded(false);
+                          }
+                          row.toggleRowExpanded(!row.isExpanded);
+                        }
+                      }, {
+                        children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
+                      }), void 0)]
                     }), void 0) : renderCell()
                   }), void 0);
                 })
@@ -18697,8 +18760,8 @@
                   children: [jsxRuntime.jsx(Flex$1, __assign({
                     direction: "column"
                   }, {
-                    children: row.cells.filter(function (cell) {
-                      return !cell.column.isMobileHeader && cell.column.accessor;
+                    children: row.cells.filter(function (cell, indexCell) {
+                      return (getIsMobileHeader() ? !cell.column.isMobileHeader : indexCell !== indexDefaultHeader) && cell.column.accessor;
                     }).map(function (cell) {
                       var _a;
                       return jsxRuntime.jsxs(Flex$1, __assign({
@@ -19322,7 +19385,7 @@
         var isMenu = ((_d = (_c = (_b = row === null || row === void 0 ? void 0 : row.cells) === null || _b === void 0 ? void 0 : _b[i_1]) === null || _c === void 0 ? void 0 : _c.column) === null || _d === void 0 ? void 0 : _d.id) === 'menu';
         clickable = !isMenu;
       }
-      clickable && !isMobile && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i));
+      clickable && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i));
       setDataRow(row);
     };
     React.useLayoutEffect(function () {
@@ -20195,29 +20258,27 @@
       };
       const currentConfig = Object.assign({}, defaultConfig, config);
       const {
-        mobileTitle,
         cssContent,
         cssMenuItem
       } = currentConfig;
-      const [openModal, setOpenModal] = React.useState(false);
       const [openDrop, setOpenDrop] = React.useState(false);
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
+      return /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
         align: currentConfig.align,
         open: openDrop,
         onOpenchange: setOpenDrop,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 39,
-          columnNumber: 9
+          lineNumber: 31,
+          columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
         asChild: true,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 40,
-          columnNumber: 11
+          lineNumber: 32,
+          columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
         css: {
@@ -20229,8 +20290,8 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 41,
-          columnNumber: 13
+          lineNumber: 33,
+          columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         type: "button",
@@ -20243,22 +20304,22 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 42,
-          columnNumber: 15
+          lineNumber: 34,
+          columnNumber: 13
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 50,
-          columnNumber: 26
+          lineNumber: 42,
+          columnNumber: 24
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 54,
-          columnNumber: 11
+          lineNumber: 46,
+          columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
         onInteractOutside: () => setOpenDrop(false),
@@ -20280,16 +20341,16 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 55,
-          columnNumber: 13
+          lineNumber: 47,
+          columnNumber: 11
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: `${option.title}dd-${index}`,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 75,
-          columnNumber: 17
+          lineNumber: 67,
+          columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
         onClick: () => {
@@ -20300,8 +20361,8 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 76,
-          columnNumber: 19
+          lineNumber: 68,
+          columnNumber: 17
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
         key: `${option.title}ds`,
@@ -20311,130 +20372,10 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 85,
-          columnNumber: 19
-        }
-      })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
-        isMobile: true,
-        modal: true,
-        open: openModal,
-        onOpenChange: setOpenModal,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 91,
-          columnNumber: 9
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
-        asChild: true,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 92,
-          columnNumber: 11
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(Box, {
-        css: {
-          display: 'block',
-          '@md': {
-            display: 'none'
-          }
-        },
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 93,
-          columnNumber: 13
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
-        type: "button",
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 94,
-          columnNumber: 15
-        }
-      }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 94,
-          columnNumber: 50
-        }
-      })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 97,
-          columnNumber: 11
-        }
-      }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
-        css: {
-          padding: '20px 16px'
-        },
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 98,
-          columnNumber: 11
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(Box, {
-        css: {
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 20,
-          '& > *:last-child': {
-            display: 'none'
-          }
-        },
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 99,
-          columnNumber: 13
-        }
-      }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-        key: `${option.title}mb-${index}`,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 101,
+          lineNumber: 77,
           columnNumber: 17
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box, {
-        type: "button",
-        role: "button",
-        css: {
-          cursor: 'pointer'
-        },
-        onClick: () => {
-          setOpenModal(false);
-          option.onClick(props);
-        },
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 102,
-          columnNumber: 19
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
-        paragraph: "shortContentRegular",
-        color: "primary",
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 113,
-          columnNumber: 21
-        }
-      }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
-        key: `${option.title}ms`,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$d,
-          lineNumber: 117,
-          columnNumber: 19
-        }
-      })))))));
+      }))))));
     },
     unsortable: true
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.55.18",
+  "version": "1.55.20",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",