@majoo-ui/react 1.52.6 → 1.52.7

package/components/editableTable/EditableMobile.d.ts

@@ -5,6 +5,7 @@ interface EditableMobileProps<Data extends object> {
     data: Data[];
     instance: UseTableHooks;
     emptyDataMessage?: string;
+    showCheckbox?: boolean;
 }
 export default function EditableTableMobile(props: EditableMobileProps<any>): JSX.Element;
 export {};

package/index.esm.js

@@ -9185,11 +9185,11 @@ const Input$6 = styled('input', {
   border: 'none',
   cursor: 'text',
   color: '$textPrimary',
+  '&::placeholder': {
+    color: '$textDisable'
+  },
   '&:disabled': {
-    cursor: 'not-allowed',
-    '&::placeholder': {
-      color: '$textDisable'
-    }
+    cursor: 'not-allowed'
   },
   variants: {
     hiddden: {
@@ -9307,6 +9307,17 @@ const StyledDiv$1 = styled('div', {
   color: '$textDisable',
   display: 'inline-flex'
 });
+const IndeterminateFilled = styled('div', {
+  width: 16,
+  height: 16,
+  background: '$primary500',
+  color: '$textWhite',
+  borderRadius: 3,
+  fontSize: 14,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
 const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     placeholder,
@@ -9575,7 +9586,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 495,
+      lineNumber: 507,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -9585,7 +9596,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 496,
+      lineNumber: 508,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9600,7 +9611,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 497,
+      lineNumber: 509,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -9616,7 +9627,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 507,
+      lineNumber: 519,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9629,7 +9640,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 513,
+      lineNumber: 525,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9640,7 +9651,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 523,
+      lineNumber: 535,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -9648,7 +9659,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 528,
+      lineNumber: 540,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -9661,7 +9672,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 532,
+      lineNumber: 544,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
@@ -9669,7 +9680,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 537,
+      lineNumber: 549,
       columnNumber: 11
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -9693,7 +9704,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 539,
+      lineNumber: 551,
       columnNumber: 15
     }
   }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -9705,7 +9716,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 560,
+      lineNumber: 572,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -9714,7 +9725,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 565,
+      lineNumber: 577,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -9732,7 +9743,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 568,
+      lineNumber: 580,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -9745,7 +9756,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 581,
+      lineNumber: 593,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9753,7 +9764,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 590,
+      lineNumber: 602,
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9761,9 +9772,23 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 594,
+      lineNumber: 606,
       columnNumber: 27
     }
+  }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 613,
+      columnNumber: 25
+    }
+  }, "-") : /*#__PURE__*/React__default.createElement("div", {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 615,
+      columnNumber: 25
+    }
   })), /*#__PURE__*/React__default.createElement(Item$2, {
     css: {
       backgroundColor: 'unset'
@@ -9771,7 +9796,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 598,
+      lineNumber: 618,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -9784,14 +9809,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 603,
+      lineNumber: 623,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 604,
+      lineNumber: 624,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9801,7 +9826,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 605,
+      lineNumber: 625,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -9813,7 +9838,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 606,
+      lineNumber: 626,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -27252,7 +27277,8 @@ const Required$2 = styled('span', {
 function EditableTableMobile(props) {
   const {
     instance,
-    emptyDataMessage
+    emptyDataMessage,
+    showCheckbox
   } = props;
   const {
     getTableProps,
@@ -27276,17 +27302,21 @@ function EditableTableMobile(props) {
           });
           return /*#__PURE__*/createElement$2(TableHeadRow$2, Object.assign({}, headerGroup.getHeaderGroupProps(), {
             key: index
-          }), visibleHeaders.map((column, index) => (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/createElement$2(TableHeadCell$2, Object.assign({}, column.getHeaderProps({
-            style: {
-              minWidth: column.minWidth,
-              width: column.width,
-              maxWidth: column.maxWidth
-            }
-          }), {
-            key: index
-          }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$2, {
-            children: "*"
-          }, void 0) : '')));
+          }), visibleHeaders.map((column, index) => {
+            const isMobileHeader = column === null || column === void 0 ? void 0 : column.isMobileHeader;
+            const isSelector = (column === null || column === void 0 ? void 0 : column.id) === 'selection';
+            return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableHeadCell$2, Object.assign({}, column.getHeaderProps({
+              style: {
+                minWidth: column.minWidth,
+                width: isSelector ? 10 : column.width,
+                maxWidth: isSelector ? 10 : column.maxWidth
+              }
+            }), {
+              key: index
+            }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$2, {
+              children: "*"
+            }, void 0) : '');
+          }));
         })
       }, void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
         children: rows.map((row, index) => {
@@ -27295,17 +27325,21 @@ function EditableTableMobile(props) {
             children: [/*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
               key: `row_mobile_${index}`
             }), row.cells.map((cell, index) => {
-              return cell.column.isMobileHeader && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
+              var _a, _b;
+
+              const isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+              const isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+              return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
                 style: {
                   minWidth: cell.column.minWidth,
-                  width: cell.column.width,
-                  maxWidth: cell.column.maxWidth
+                  width: isSelector ? 10 : cell.column.width,
+                  maxWidth: isSelector ? 10 : cell.column.maxWidth
                 }
               }), {
                 key: index
               }), jsxs(Flex$1, Object.assign({
-                justify: "between",
                 align: "center",
+                justify: "between",
                 css: {
                   cursor: 'pointer',
                   minHeight: 40
@@ -27313,7 +27347,7 @@ function EditableTableMobile(props) {
               }, {
                 children: [jsx(Box, {
                   children: cell.render('Cell')
-                }, void 0), jsx(Flex$1, Object.assign({
+                }, void 0), !isSelector && jsx(Flex$1, Object.assign({
                   justify: "center",
                   align: "center",
                   onClick: () => {
@@ -27332,7 +27366,7 @@ function EditableTableMobile(props) {
               css: {
                 backgroundColor: '$gray50'
               }
-            }), jsx(TableCellCollapse, {
+            }), showCheckbox && jsx(TableCell$2, {}, void 0), jsx(TableCellCollapse, {
               children: jsx(Collapalse, Object.assign({
                 isOpen: row.isExpanded
               }, {
@@ -27347,10 +27381,12 @@ function EditableTableMobile(props) {
 
                     return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
                   }).map((cell, index) => {
-                    var _a, _b;
+                    var _a, _b, _c, _d;
 
                     const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-                    return !cell.column.isMobileHeader && jsx(Flex$1, Object.assign({
+                    const isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+                    const isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+                    return !isMobileHeader && !isSelector && jsx(Flex$1, Object.assign({
                       direction: "column",
                       justify: "center",
                       css: {
@@ -27376,7 +27412,7 @@ function EditableTableMobile(props) {
                             color: "secondary"
                           }, {
                             children: typeof headerRender === 'string' ? jsxs(Fragment, {
-                              children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isRequired) ? jsx(Required$2, {
+                              children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsx(Required$2, {
                                 children: "*"
                               }, void 0) : '']
                             }, void 0) : headerRender
@@ -27764,7 +27800,7 @@ function EditableTable(props) {
         Header: ({
           getToggleAllRowsSelectedProps
         }) => jsx(IndeterminateCheckbox, Object.assign({
-          index: "header"
+          row: "header"
         }, getToggleAllRowsSelectedProps()), void 0),
         Cell: ({
           row
@@ -27949,7 +27985,8 @@ function EditableTable(props) {
   }), void 0) : jsx(EditableTableMobile, {
     css: props === null || props === void 0 ? void 0 : props.css,
     instance: instance,
-    emptyDataMessage: emptyDataMessage
+    emptyDataMessage: emptyDataMessage,
+    showCheckbox: showCheckbox
   }, void 0);
 }
 

package/index.umd.js

@@ -9322,11 +9322,11 @@
     border: 'none',
     cursor: 'text',
     color: '$textPrimary',
+    '&::placeholder': {
+      color: '$textDisable'
+    },
     '&:disabled': {
-      cursor: 'not-allowed',
-      '&::placeholder': {
-        color: '$textDisable'
-      }
+      cursor: 'not-allowed'
     },
     variants: {
       hiddden: {
@@ -9444,6 +9444,17 @@
     color: '$textDisable',
     display: 'inline-flex'
   });
+  const IndeterminateFilled = styled('div', {
+    width: 16,
+    height: 16,
+    background: '$primary500',
+    color: '$textWhite',
+    borderRadius: 3,
+    fontSize: 14,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  });
   const InputSelectCheck = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       placeholder,
@@ -9712,7 +9723,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 495,
+        lineNumber: 507,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9722,7 +9733,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 496,
+        lineNumber: 508,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9737,7 +9748,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 497,
+        lineNumber: 509,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -9753,7 +9764,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 507,
+        lineNumber: 519,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9766,7 +9777,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 513,
+        lineNumber: 525,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9777,7 +9788,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 523,
+        lineNumber: 535,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -9785,7 +9796,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 528,
+        lineNumber: 540,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9798,7 +9809,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 532,
+        lineNumber: 544,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
@@ -9806,7 +9817,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 537,
+        lineNumber: 549,
         columnNumber: 11
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -9830,7 +9841,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 539,
+        lineNumber: 551,
         columnNumber: 15
       }
     }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -9842,7 +9853,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 560,
+        lineNumber: 572,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9851,7 +9862,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 565,
+        lineNumber: 577,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9869,7 +9880,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 568,
+        lineNumber: 580,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9882,7 +9893,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 581,
+        lineNumber: 593,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9890,7 +9901,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 590,
+        lineNumber: 602,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9898,9 +9909,23 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 594,
+        lineNumber: 606,
         columnNumber: 27
       }
+    }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 613,
+        columnNumber: 25
+      }
+    }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 615,
+        columnNumber: 25
+      }
     })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
       css: {
         backgroundColor: 'unset'
@@ -9908,7 +9933,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 598,
+        lineNumber: 618,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -9921,14 +9946,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 603,
+        lineNumber: 623,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 604,
+        lineNumber: 624,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -9938,7 +9963,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 605,
+        lineNumber: 625,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -9950,7 +9975,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 606,
+        lineNumber: 626,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -27637,7 +27662,8 @@
   });
   function EditableTableMobile(props) {
     var instance = props.instance,
-        emptyDataMessage = props.emptyDataMessage;
+        emptyDataMessage = props.emptyDataMessage,
+        showCheckbox = props.showCheckbox;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -27659,11 +27685,13 @@
             return /*#__PURE__*/React.createElement(TableHeadRow$2, __assign({}, headerGroup.getHeaderGroupProps(), {
               key: index
             }), visibleHeaders.map(function (column, index) {
-              return (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/React.createElement(TableHeadCell$2, __assign({}, column.getHeaderProps({
+              var isMobileHeader = column === null || column === void 0 ? void 0 : column.isMobileHeader;
+              var isSelector = (column === null || column === void 0 ? void 0 : column.id) === 'selection';
+              return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableHeadCell$2, __assign({}, column.getHeaderProps({
                 style: {
                   minWidth: column.minWidth,
-                  width: column.width,
-                  maxWidth: column.maxWidth
+                  width: isSelector ? 10 : column.width,
+                  maxWidth: isSelector ? 10 : column.maxWidth
                 }
               }), {
                 key: index
@@ -27679,17 +27707,21 @@
               children: [/*#__PURE__*/React.createElement(TableRow$2, __assign({}, row.getRowProps(), {
                 key: "row_mobile_".concat(index)
               }), row.cells.map(function (cell, index) {
-                return cell.column.isMobileHeader && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
+                var _a, _b;
+
+                var isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+                var isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+                return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
                   style: {
                     minWidth: cell.column.minWidth,
-                    width: cell.column.width,
-                    maxWidth: cell.column.maxWidth
+                    width: isSelector ? 10 : cell.column.width,
+                    maxWidth: isSelector ? 10 : cell.column.maxWidth
                   }
                 }), {
                   key: index
                 }), jsxRuntime.jsxs(Flex$1, __assign({
-                  justify: "between",
                   align: "center",
+                  justify: "between",
                   css: {
                     cursor: 'pointer',
                     minHeight: 40
@@ -27697,7 +27729,7 @@
                 }, {
                   children: [jsxRuntime.jsx(Box, {
                     children: cell.render('Cell')
-                  }, void 0), jsxRuntime.jsx(Flex$1, __assign({
+                  }, void 0), !isSelector && jsxRuntime.jsx(Flex$1, __assign({
                     justify: "center",
                     align: "center",
                     onClick: function () {
@@ -27716,7 +27748,7 @@
                 css: {
                   backgroundColor: '$gray50'
                 }
-              }), jsxRuntime.jsx(TableCellCollapse, {
+              }), showCheckbox && jsxRuntime.jsx(TableCell$2, {}, void 0), jsxRuntime.jsx(TableCellCollapse, {
                 children: jsxRuntime.jsx(Collapalse, __assign({
                   isOpen: row.isExpanded
                 }, {
@@ -27731,10 +27763,12 @@
 
                       return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
                     }).map(function (cell, index) {
-                      var _a, _b;
+                      var _a, _b, _c, _d;
 
                       var headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-                      return !cell.column.isMobileHeader && jsxRuntime.jsx(Flex$1, __assign({
+                      var isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+                      var isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+                      return !isMobileHeader && !isSelector && jsxRuntime.jsx(Flex$1, __assign({
                         direction: "column",
                         justify: "center",
                         css: {
@@ -27760,7 +27794,7 @@
                               color: "secondary"
                             }, {
                               children: typeof headerRender === 'string' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                                children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isRequired) ? jsxRuntime.jsx(Required$2, {
+                                children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsxRuntime.jsx(Required$2, {
                                   children: "*"
                                 }, void 0) : '']
                               }, void 0) : headerRender
@@ -28154,7 +28188,7 @@
           Header: function (_a) {
             var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps;
             return jsxRuntime.jsx(IndeterminateCheckbox, __assign({
-              index: "header"
+              row: "header"
             }, getToggleAllRowsSelectedProps()), void 0);
           },
           Cell: function (_a) {
@@ -28347,7 +28381,8 @@
     }), void 0) : jsxRuntime.jsx(EditableTableMobile, {
       css: props === null || props === void 0 ? void 0 : props.css,
       instance: instance,
-      emptyDataMessage: emptyDataMessage
+      emptyDataMessage: emptyDataMessage,
+      showCheckbox: showCheckbox
     }, void 0);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.52.6",
+  "version": "1.52.7",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",