@majoo-ui/react 1.52.5 → 1.52.6

package/components/editableTable/EditableTable.d.ts

@@ -31,6 +31,32 @@ interface EditableTableProps<Data extends object> {
      * Additional customize one of the rows based on the specified condition
      */
     customRows?: (row: Row<object>) => CustomRows[];
+    /**
+     * Show checkbox table selection.
+     */
+    showCheckbox?: boolean;
+    /**
+     * Change event handler table selection.
+     */
+    onSelectedChange?: (data: any) => void;
+    /**
+     * Checkbox callback props.
+     */
+    getCheckboxProps?: (data: any) => void;
+    /**
+     * 	Row's unique key (for selectedIds & onSelectedChange purpose).
+     */
+    keyId?: string;
+    /**
+     * Selected data id (based on the keyId prop).
+     * Example:<br/>
+     * {
+     *   '8192389219289': true,
+     *   '2130912039281': true,
+     *   '2130912039382': true
+     * }
+     */
+    selectedIds?: Record<string, boolean>;
 }
 interface RemoveProps {
     position?: 'leftBottom' | 'rightBottom' | 'leftTop' | 'rightTop';

package/index.esm.js

@@ -4633,8 +4633,8 @@ const ContainerFallback = styled(Flex$1, {
   border: '2px dashed #C0C4C4',
   borderRadius: 8,
   backgroundColor: '$gray50',
-  minHeight: 120,
-  minWidth: 188,
+  height: 120,
+  width: 188,
   variants: {
     rounded: {
       true: {
@@ -6312,7 +6312,7 @@ InputRadioGroup.propTypes = {
 };
 InputRadioGroup.displayName = 'InputRadioGroup';
 
-const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps"];
+const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description"];
 var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
@@ -6427,7 +6427,8 @@ const InputRadio = _ref => {
     disabled,
     css,
     inputType,
-    inputProps
+    inputProps,
+    description
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6439,7 +6440,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 124,
+            lineNumber: 125,
             columnNumber: 16
           }
         }));
@@ -6450,7 +6451,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 127,
+            lineNumber: 128,
             columnNumber: 16
           }
         }));
@@ -6470,7 +6471,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 131,
+            lineNumber: 132,
             columnNumber: 11
           }
         }, props.label);
@@ -6481,7 +6482,7 @@ const InputRadio = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$E,
-      lineNumber: 150,
+      lineNumber: 151,
       columnNumber: 5
     }
   }, ({
@@ -6491,8 +6492,7 @@ const InputRadio = _ref => {
   }) => {
     const checked = value !== null && value !== void 0 ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(Container$8, {
-      align: "center",
-      gap: 4,
+      direction: "column",
       outlined: outlined,
       disabled: disabled,
       active: outlined && checked === props.value && !disabled,
@@ -6500,9 +6500,18 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 155,
+        lineNumber: 156,
         columnNumber: 11
       }
+    }, /*#__PURE__*/React__default.createElement(Flex$1, {
+      align: "center",
+      gap: 4,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 163,
+        columnNumber: 13
+      }
     }, /*#__PURE__*/React__default.createElement(StyledRadio, _extends({
       id: id,
       disabled: disabled
@@ -6510,17 +6519,29 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 163,
-        columnNumber: 13
+        lineNumber: 164,
+        columnNumber: 15
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 164,
+        lineNumber: 165,
+        columnNumber: 17
+      }
+    })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "caption",
+      color: "secondary",
+      css: {
+        marginTop: '10px'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 171,
         columnNumber: 15
       }
-    })), renderInputType(inputType, checked));
+    }, description));
   });
 };
 InputRadio.propTypes = {
@@ -6530,7 +6551,8 @@ InputRadio.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   css: PropTypes.object,
   inputType: PropTypes.oneOf(['number', 'text', 'default']),
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  description: PropTypes.string
 };
 InputRadio.displayName = 'InputRadio';
 
@@ -9017,41 +9039,6 @@ $$f({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-var $$e = _export;
-var uncurryThis$f = functionUncurryThis;
-var getOwnPropertyDescriptor$2 = objectGetOwnPropertyDescriptor.f;
-var toLength$2 = toLength$4;
-var toString$a = toString$h;
-var notARegExp = notARegexp;
-var requireObjectCoercible$5 = requireObjectCoercible$a;
-var correctIsRegExpLogic = correctIsRegexpLogic;
-
-// eslint-disable-next-line es-x/no-string-prototype-startswith -- safe
-var un$StartsWith = uncurryThis$f(''.startsWith);
-var stringSlice$7 = uncurryThis$f(''.slice);
-var min$2 = Math.min;
-
-var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
-// https://github.com/zloirock/core-js/pull/702
-var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
-  var descriptor = getOwnPropertyDescriptor$2(String.prototype, 'startsWith');
-  return descriptor && !descriptor.writable;
-}();
-
-// `String.prototype.startsWith` method
-// https://tc39.es/ecma262/#sec-string.prototype.startswith
-$$e({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
-  startsWith: function startsWith(searchString /* , position = 0 */) {
-    var that = toString$a(requireObjectCoercible$5(this));
-    notARegExp(searchString);
-    var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
-    var search = toString$a(searchString);
-    return un$StartsWith
-      ? un$StartsWith(that, search, index)
-      : stringSlice$7(that, index, index + search.length) === search;
-  }
-});
-
 var _jsxFileName$w = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\icon\\CheckOutline.js";
 
 const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
@@ -9197,8 +9184,12 @@ const Input$6 = styled('input', {
   outline: 'none',
   border: 'none',
   cursor: 'text',
+  color: '$textPrimary',
   '&:disabled': {
-    cursor: 'not-allowed'
+    cursor: 'not-allowed',
+    '&::placeholder': {
+      color: '$textDisable'
+    }
   },
   variants: {
     hiddden: {
@@ -9299,7 +9290,6 @@ const ItemWrapper$1 = styled(Box, {
   display: 'flex',
   position: 'relative',
   flex: 'auto',
-  flexWrap: 'wrap',
   maxWidth: '100%',
   cursor: 'pointer',
   alignItems: 'center',
@@ -9448,7 +9438,11 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         return setItems(sortValue);
       }
     } else {
-      let filterItems = option.filter(item => item.name.toLowerCase().startsWith(input.toLocaleLowerCase()));
+      let filterItems = option === null || option === void 0 ? void 0 : option.filter(item => {
+        var _item$name, _item$name$toLowerCas, _item$name$toLowerCas2, _input$toLocaleLowerC;
+
+        return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) === null || _item$name$toLowerCas === void 0 ? void 0 : (_item$name$toLowerCas2 = _item$name$toLowerCas.includes) === null || _item$name$toLowerCas2 === void 0 ? void 0 : _item$name$toLowerCas2.call(_item$name$toLowerCas, input === null || input === void 0 ? void 0 : (_input$toLocaleLowerC = input.toLocaleLowerCase) === null || _input$toLocaleLowerC === void 0 ? void 0 : _input$toLocaleLowerC.call(input));
+      });
       setItems(filterItems);
     }
   };
@@ -9581,7 +9575,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 490,
+      lineNumber: 495,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -9591,7 +9585,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 491,
+      lineNumber: 496,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9606,7 +9600,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 492,
+      lineNumber: 497,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -9622,7 +9616,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 502,
+      lineNumber: 507,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9635,7 +9629,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 508,
+      lineNumber: 513,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9646,7 +9640,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 518,
+      lineNumber: 523,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -9654,7 +9648,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 523,
+      lineNumber: 528,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -9667,7 +9661,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 527,
+      lineNumber: 532,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
@@ -9675,12 +9669,12 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 532,
+      lineNumber: 537,
       columnNumber: 11
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
-    isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     disabled: disabled,
+    isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     size: size,
     readOnly: readOnly,
     key: `selected-item-${index}`
@@ -9699,7 +9693,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 534,
+      lineNumber: 539,
       columnNumber: 15
     }
   }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -9711,7 +9705,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 555,
+      lineNumber: 560,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -9720,7 +9714,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 560,
+      lineNumber: 565,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -9738,7 +9732,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 563,
+      lineNumber: 568,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -9751,7 +9745,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 576,
+      lineNumber: 581,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9759,7 +9753,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 585,
+      lineNumber: 590,
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9767,7 +9761,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 589,
+      lineNumber: 594,
       columnNumber: 27
     }
   })), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -9777,7 +9771,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 593,
+      lineNumber: 598,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -9790,14 +9784,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 598,
+      lineNumber: 603,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 599,
+      lineNumber: 604,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9807,7 +9801,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 600,
+      lineNumber: 605,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -9819,7 +9813,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 601,
+      lineNumber: 606,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -10333,6 +10327,41 @@ function InputResourceList({
   }), void 0);
 }
 
+var $$e = _export;
+var uncurryThis$f = functionUncurryThis;
+var getOwnPropertyDescriptor$2 = objectGetOwnPropertyDescriptor.f;
+var toLength$2 = toLength$4;
+var toString$a = toString$h;
+var notARegExp = notARegexp;
+var requireObjectCoercible$5 = requireObjectCoercible$a;
+var correctIsRegExpLogic = correctIsRegexpLogic;
+
+// eslint-disable-next-line es-x/no-string-prototype-startswith -- safe
+var un$StartsWith = uncurryThis$f(''.startsWith);
+var stringSlice$7 = uncurryThis$f(''.slice);
+var min$2 = Math.min;
+
+var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
+// https://github.com/zloirock/core-js/pull/702
+var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
+  var descriptor = getOwnPropertyDescriptor$2(String.prototype, 'startsWith');
+  return descriptor && !descriptor.writable;
+}();
+
+// `String.prototype.startsWith` method
+// https://tc39.es/ecma262/#sec-string.prototype.startswith
+$$e({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+  startsWith: function startsWith(searchString /* , position = 0 */) {
+    var that = toString$a(requireObjectCoercible$5(this));
+    notARegExp(searchString);
+    var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
+    var search = toString$a(searchString);
+    return un$StartsWith
+      ? un$StartsWith(that, search, index)
+      : stringSlice$7(that, index, index + search.length) === search;
+  }
+});
+
 const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   var {
     options: items = [],
@@ -19264,6 +19293,7 @@ function AlertDialog(props) {
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
+    paragraph: "longContentRegular",
     css: {
       textAlign: 'justify'
     },
@@ -19280,7 +19310,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 238,
+      lineNumber: 240,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -19288,7 +19318,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 239,
+      lineNumber: 241,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -19302,7 +19332,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 240,
+      lineNumber: 242,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -19310,7 +19340,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 242,
+      lineNumber: 244,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19325,7 +19355,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 243,
+      lineNumber: 245,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -19333,7 +19363,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 256,
+      lineNumber: 258,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19349,7 +19379,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 257,
+      lineNumber: 259,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -19357,7 +19387,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 271,
+      lineNumber: 273,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19372,7 +19402,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 272,
+      lineNumber: 274,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -27524,7 +27554,6 @@ const VariantItem = styled('p', {
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: 60,
   textAlign: 'center',
   margin: 0,
   '@md': {
@@ -27686,21 +27715,87 @@ function EditableTable(props) {
     emptyDataMessage,
     rowHeight,
     align,
-    customRows
+    customRows,
+    showCheckbox,
+    onSelectedChange,
+    getCheckboxProps,
+    keyId = 'id',
+    selectedIds
   } = props;
+  const [selectedIndex, setSelectedIndex] = useState(null);
+
+  const IndeterminateCheckbox = props => {
+    function handleCheckedChange(checked) {
+      props === null || props === void 0 ? void 0 : props.onChange({
+        target: {
+          checked
+        }
+      });
+      setSelectedIndex(Object.assign({}, props));
+    }
+
+    return jsx(InputCheckbox, Object.assign({}, props, getCheckboxProps === null || getCheckboxProps === void 0 ? void 0 : getCheckboxProps(props === null || props === void 0 ? void 0 : props.row), {
+      onCheckedChange: handleCheckedChange
+    }), void 0);
+  };
+
+  const getInitialState = () => {
+    const initialState = {};
+
+    if (selectedIds) {
+      Object.assign(initialState, {
+        selectedRowIds: selectedIds
+      });
+    }
+
+    return Object.keys(initialState).length > 0 ? initialState : undefined;
+  };
+
   const instance = useTable({
     columns,
     data,
-    autoResetExpanded: false
-  }, useExpanded);
+    initialState: getInitialState(),
+    autoResetExpanded: false,
+    getRowId: row => row[keyId] || JSON.stringify(row)
+  }, useExpanded, useRowSelect, hooks => {
+    showCheckbox && hooks.visibleColumns.push(columns => {
+      return [{
+        id: 'selection',
+        Header: ({
+          getToggleAllRowsSelectedProps
+        }) => jsx(IndeterminateCheckbox, Object.assign({
+          index: "header"
+        }, getToggleAllRowsSelectedProps()), void 0),
+        Cell: ({
+          row
+        }) => jsx(IndeterminateCheckbox, Object.assign({
+          row: row
+        }, row.getToggleRowSelectedProps()), void 0),
+        width: 30
+      }, ...columns];
+    });
+  });
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
-    visibleColumns
+    visibleColumns,
+    state: {
+      selectedRowIds
+    }
   } = instance;
+  useEffect(() => {
+    if (data && data.length > 0 && selectedRowIds && onSelectedChange && selectedIndex) {
+      const selected = selectedRowIds ? Object.keys(selectedRowIds) : [];
+      onSelectedChange({
+        selected,
+        row: selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.row,
+        state: !(selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.checked)
+      });
+    }
+  }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
   const isDesktop = useMediaQuery('(min-width: 767px)');
   return isDesktop ? jsx(TableContainer$1, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css

package/index.umd.js

@@ -4713,8 +4713,8 @@
     border: '2px dashed #C0C4C4',
     borderRadius: 8,
     backgroundColor: '$gray50',
-    minHeight: 120,
-    minWidth: 188,
+    height: 120,
+    width: 188,
     variants: {
       rounded: {
         true: {
@@ -6392,7 +6392,7 @@
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps"];
+  const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description"];
   var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
@@ -6507,7 +6507,8 @@
       disabled,
       css,
       inputType,
-      inputProps
+      inputProps,
+      description
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6519,7 +6520,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 124,
+              lineNumber: 125,
               columnNumber: 16
             }
           }));
@@ -6530,7 +6531,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 127,
+              lineNumber: 128,
               columnNumber: 16
             }
           }));
@@ -6550,7 +6551,7 @@
             __self: this,
             __source: {
               fileName: _jsxFileName$E,
-              lineNumber: 131,
+              lineNumber: 132,
               columnNumber: 11
             }
           }, props.label);
@@ -6561,7 +6562,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 150,
+        lineNumber: 151,
         columnNumber: 5
       }
     }, ({
@@ -6571,8 +6572,7 @@
     }) => {
       const checked = value !== null && value !== void 0 ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(Container$8, {
-        align: "center",
-        gap: 4,
+        direction: "column",
         outlined: outlined,
         disabled: disabled,
         active: outlined && checked === props.value && !disabled,
@@ -6580,9 +6580,18 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 155,
+          lineNumber: 156,
           columnNumber: 11
         }
+      }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        align: "center",
+        gap: 4,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$E,
+          lineNumber: 163,
+          columnNumber: 13
+        }
       }, /*#__PURE__*/React__default["default"].createElement(StyledRadio, _extends({
         id: id,
         disabled: disabled
@@ -6590,17 +6599,29 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 163,
-          columnNumber: 13
+          lineNumber: 164,
+          columnNumber: 15
         }
       }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$E,
-          lineNumber: 164,
+          lineNumber: 165,
+          columnNumber: 17
+        }
+      })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        variant: "caption",
+        color: "secondary",
+        css: {
+          marginTop: '10px'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$E,
+          lineNumber: 171,
           columnNumber: 15
         }
-      })), renderInputType(inputType, checked));
+      }, description));
     });
   };
   InputRadio.propTypes = {
@@ -6610,7 +6631,8 @@
     label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
     css: PropTypes__default["default"].object,
     inputType: PropTypes__default["default"].oneOf(['number', 'text', 'default']),
-    onChange: PropTypes__default["default"].func
+    onChange: PropTypes__default["default"].func,
+    description: PropTypes__default["default"].string
   };
   InputRadio.displayName = 'InputRadio';
 
@@ -9154,41 +9176,6 @@
     }
   });
 
-  var $$e = _export;
-  var uncurryThis$f = functionUncurryThis;
-  var getOwnPropertyDescriptor$2 = objectGetOwnPropertyDescriptor.f;
-  var toLength$2 = toLength$4;
-  var toString$a = toString$h;
-  var notARegExp = notARegexp;
-  var requireObjectCoercible$5 = requireObjectCoercible$a;
-  var correctIsRegExpLogic = correctIsRegexpLogic;
-
-  // eslint-disable-next-line es-x/no-string-prototype-startswith -- safe
-  var un$StartsWith = uncurryThis$f(''.startsWith);
-  var stringSlice$7 = uncurryThis$f(''.slice);
-  var min$2 = Math.min;
-
-  var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
-  // https://github.com/zloirock/core-js/pull/702
-  var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
-    var descriptor = getOwnPropertyDescriptor$2(String.prototype, 'startsWith');
-    return descriptor && !descriptor.writable;
-  }();
-
-  // `String.prototype.startsWith` method
-  // https://tc39.es/ecma262/#sec-string.prototype.startswith
-  $$e({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
-    startsWith: function startsWith(searchString /* , position = 0 */) {
-      var that = toString$a(requireObjectCoercible$5(this));
-      notARegExp(searchString);
-      var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
-      var search = toString$a(searchString);
-      return un$StartsWith
-        ? un$StartsWith(that, search, index)
-        : stringSlice$7(that, index, index + search.length) === search;
-    }
-  });
-
   var _jsxFileName$w = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\icon\\CheckOutline.js";
 
   const CheckOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
@@ -9334,8 +9321,12 @@
     outline: 'none',
     border: 'none',
     cursor: 'text',
+    color: '$textPrimary',
     '&:disabled': {
-      cursor: 'not-allowed'
+      cursor: 'not-allowed',
+      '&::placeholder': {
+        color: '$textDisable'
+      }
     },
     variants: {
       hiddden: {
@@ -9436,7 +9427,6 @@
     display: 'flex',
     position: 'relative',
     flex: 'auto',
-    flexWrap: 'wrap',
     maxWidth: '100%',
     cursor: 'pointer',
     alignItems: 'center',
@@ -9585,7 +9575,11 @@
           return setItems(sortValue);
         }
       } else {
-        let filterItems = option.filter(item => item.name.toLowerCase().startsWith(input.toLocaleLowerCase()));
+        let filterItems = option === null || option === void 0 ? void 0 : option.filter(item => {
+          var _item$name, _item$name$toLowerCas, _item$name$toLowerCas2, _input$toLocaleLowerC;
+
+          return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) === null || _item$name$toLowerCas === void 0 ? void 0 : (_item$name$toLowerCas2 = _item$name$toLowerCas.includes) === null || _item$name$toLowerCas2 === void 0 ? void 0 : _item$name$toLowerCas2.call(_item$name$toLowerCas, input === null || input === void 0 ? void 0 : (_input$toLocaleLowerC = input.toLocaleLowerCase) === null || _input$toLocaleLowerC === void 0 ? void 0 : _input$toLocaleLowerC.call(input));
+        });
         setItems(filterItems);
       }
     };
@@ -9718,7 +9712,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 490,
+        lineNumber: 495,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9728,7 +9722,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 491,
+        lineNumber: 496,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9743,7 +9737,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 492,
+        lineNumber: 497,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -9759,7 +9753,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 502,
+        lineNumber: 507,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9772,7 +9766,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 508,
+        lineNumber: 513,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9783,7 +9777,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 518,
+        lineNumber: 523,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -9791,7 +9785,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 523,
+        lineNumber: 528,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9804,7 +9798,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 527,
+        lineNumber: 532,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
@@ -9812,12 +9806,12 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 532,
+        lineNumber: 537,
         columnNumber: 11
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
-      isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       disabled: disabled,
+      isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       size: size,
       readOnly: readOnly,
       key: `selected-item-${index}`
@@ -9836,7 +9830,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 534,
+        lineNumber: 539,
         columnNumber: 15
       }
     }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -9848,7 +9842,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 555,
+        lineNumber: 560,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -9857,7 +9851,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 560,
+        lineNumber: 565,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -9875,7 +9869,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 563,
+        lineNumber: 568,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -9888,7 +9882,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 576,
+        lineNumber: 581,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9896,7 +9890,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 585,
+        lineNumber: 590,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -9904,7 +9898,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 589,
+        lineNumber: 594,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -9914,7 +9908,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 593,
+        lineNumber: 598,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -9927,14 +9921,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 598,
+        lineNumber: 603,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 599,
+        lineNumber: 604,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -9944,7 +9938,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 600,
+        lineNumber: 605,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -9956,7 +9950,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 601,
+        lineNumber: 606,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -10496,6 +10490,41 @@
     }), void 0);
   }
 
+  var $$e = _export;
+  var uncurryThis$f = functionUncurryThis;
+  var getOwnPropertyDescriptor$2 = objectGetOwnPropertyDescriptor.f;
+  var toLength$2 = toLength$4;
+  var toString$a = toString$h;
+  var notARegExp = notARegexp;
+  var requireObjectCoercible$5 = requireObjectCoercible$a;
+  var correctIsRegExpLogic = correctIsRegexpLogic;
+
+  // eslint-disable-next-line es-x/no-string-prototype-startswith -- safe
+  var un$StartsWith = uncurryThis$f(''.startsWith);
+  var stringSlice$7 = uncurryThis$f(''.slice);
+  var min$2 = Math.min;
+
+  var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
+  // https://github.com/zloirock/core-js/pull/702
+  var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
+    var descriptor = getOwnPropertyDescriptor$2(String.prototype, 'startsWith');
+    return descriptor && !descriptor.writable;
+  }();
+
+  // `String.prototype.startsWith` method
+  // https://tc39.es/ecma262/#sec-string.prototype.startswith
+  $$e({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+    startsWith: function startsWith(searchString /* , position = 0 */) {
+      var that = toString$a(requireObjectCoercible$5(this));
+      notARegExp(searchString);
+      var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
+      var search = toString$a(searchString);
+      return un$StartsWith
+        ? un$StartsWith(that, search, index)
+        : stringSlice$7(that, index, index + search.length) === search;
+    }
+  });
+
   var InputCombobox = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var _b = _a.options,
         items = _b === void 0 ? [] : _b,
@@ -19603,6 +19632,7 @@
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      paragraph: "longContentRegular",
       css: {
         textAlign: 'justify'
       },
@@ -19619,7 +19649,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 238,
+        lineNumber: 240,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19627,7 +19657,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 239,
+        lineNumber: 241,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -19641,7 +19671,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 240,
+        lineNumber: 242,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19649,7 +19679,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 242,
+        lineNumber: 244,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19664,7 +19694,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 243,
+        lineNumber: 245,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -19672,7 +19702,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 256,
+        lineNumber: 258,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19688,7 +19718,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 257,
+        lineNumber: 259,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19696,7 +19726,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 271,
+        lineNumber: 273,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19711,7 +19741,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 272,
+        lineNumber: 274,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -27908,7 +27938,6 @@
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    maxWidth: 60,
     textAlign: 'center',
     margin: 0,
     '@md': {
@@ -28071,18 +28100,90 @@
         emptyDataMessage = props.emptyDataMessage,
         rowHeight = props.rowHeight,
         align = props.align,
-        customRows = props.customRows;
+        customRows = props.customRows,
+        showCheckbox = props.showCheckbox,
+        onSelectedChange = props.onSelectedChange,
+        getCheckboxProps = props.getCheckboxProps,
+        _a = props.keyId,
+        keyId = _a === void 0 ? 'id' : _a,
+        selectedIds = props.selectedIds;
+
+    var _b = React.useState(null),
+        selectedIndex = _b[0],
+        setSelectedIndex = _b[1];
+
+    var IndeterminateCheckbox = function IndeterminateCheckbox(props) {
+      function handleCheckedChange(checked) {
+        props === null || props === void 0 ? void 0 : props.onChange({
+          target: {
+            checked: checked
+          }
+        });
+        setSelectedIndex(__assign({}, props));
+      }
+
+      return jsxRuntime.jsx(InputCheckbox, __assign({}, props, getCheckboxProps === null || getCheckboxProps === void 0 ? void 0 : getCheckboxProps(props === null || props === void 0 ? void 0 : props.row), {
+        onCheckedChange: handleCheckedChange
+      }), void 0);
+    };
+
+    var getInitialState = function getInitialState() {
+      var initialState = {};
+
+      if (selectedIds) {
+        Object.assign(initialState, {
+          selectedRowIds: selectedIds
+        });
+      }
+
+      return Object.keys(initialState).length > 0 ? initialState : undefined;
+    };
+
     var instance = reactTable.useTable({
       columns: columns,
       data: data,
-      autoResetExpanded: false
-    }, reactTable.useExpanded);
+      initialState: getInitialState(),
+      autoResetExpanded: false,
+      getRowId: function (row) {
+        return row[keyId] || JSON.stringify(row);
+      }
+    }, reactTable.useExpanded, reactTable.useRowSelect, function (hooks) {
+      showCheckbox && hooks.visibleColumns.push(function (columns) {
+        return __spreadArray([{
+          id: 'selection',
+          Header: function (_a) {
+            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps;
+            return jsxRuntime.jsx(IndeterminateCheckbox, __assign({
+              index: "header"
+            }, getToggleAllRowsSelectedProps()), void 0);
+          },
+          Cell: function (_a) {
+            var row = _a.row;
+            return jsxRuntime.jsx(IndeterminateCheckbox, __assign({
+              row: row
+            }, row.getToggleRowSelectedProps()), void 0);
+          },
+          width: 30
+        }], columns, true);
+      });
+    });
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
         rows = instance.rows,
         prepareRow = instance.prepareRow,
-        visibleColumns = instance.visibleColumns;
+        visibleColumns = instance.visibleColumns,
+        selectedRowIds = instance.state.selectedRowIds;
+    React.useEffect(function () {
+      if (data && data.length > 0 && selectedRowIds && onSelectedChange && selectedIndex) {
+        var selected = selectedRowIds ? Object.keys(selectedRowIds) : [];
+        onSelectedChange({
+          selected: selected,
+          row: selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.row,
+          state: !(selectedIndex === null || selectedIndex === void 0 ? void 0 : selectedIndex.checked)
+        });
+      }
+    }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
     var isDesktop = useMediaQuery('(min-width: 767px)');
     return isDesktop ? jsxRuntime.jsx(TableContainer$1, __assign({
       css: props === null || props === void 0 ? void 0 : props.css

package/package.json

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