funda-ui 2.9.305 → 3.0.105

package/Checkbox/index.js

@@ -198,6 +198,7 @@ var Checkbox = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     ,
     "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
     "data-checkbox": true,
+    "data-checked": val,
     disabled: disabled || null,
     required: required || null,
     onChange: handleChange,

package/MultipleCheckboxes/index.js

@@ -393,6 +393,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
             "data-checkbox": true,
+            "data-checked": val,
             disabled: disabled || null,
             required: required || null,
             onChange: handleChange,

package/Table/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare type TableProps = {
-    ref?: React.RefObject<any>;
+    tableCheckRef?: React.RefObject<any>;
     wrapperClassName?: string;
     tableClassName?: string;
     bodyClassName?: string;

package/Table/index.js

@@ -393,6 +393,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
             "data-checkbox": true,
+            "data-checked": val,
             disabled: disabled || null,
             required: required || null,
             onChange: handleChange,
@@ -825,7 +826,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var TableFieldRow = function TableFieldRow(props) {
   var _latestCheckedData$fi;
-  var ref = props.ref,
+  var tableRootRef = props.tableRootRef,
+    tableCheckRef = props.tableCheckRef,
     _props$rowActiveClass = props.rowActiveClassName,
     rowActiveClassName = _props$rowActiveClass === void 0 ? 'active' : _props$rowActiveClass,
     fieldsChecked = props.fieldsChecked,
@@ -862,13 +864,82 @@ var TableFieldRow = function TableFieldRow(props) {
   var rowIndex = rowKey === null || rowKey === void 0 ? void 0 : rowKey.replace('row-', '');
 
   // exposes the following methods
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(ref, function () {
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(tableCheckRef, function () {
     return {
-      check: function check(e, val) {
-        checkedAct(e, val);
+      check: function check(data, cb) {
+        var _checkedData = getCheckedData;
+        var _res = [];
+
+        // STEP 1:
+        // Update checked data
+        //-----------
+        data.forEach(function (v, i) {
+          var _curKey = "row-".concat(v.index);
+          if (v.value === true) {
+            setCheckboxCheckedData(_checkedData, _curKey, true);
+          } else {
+            setCheckboxCheckedData(_checkedData, _curKey, false);
+          }
+        });
+        updategetCheckedData(_checkedData);
+
+        // STEP 2:
+        // get per checkbox value
+        //----------- 
+        if (tableRootRef.current !== null) {
+          _checkedData.forEach(function (item) {
+            if (item.checked === true) {
+              var _index = item.key.replace('row-', '');
+              var curCheckbox = tableRootRef.current.querySelector('table').querySelector("tbody [data-key=\"row-".concat(_index, "\"]"));
+              _res.push(formatRowControlVal(curCheckbox, checkboxNamePrefix));
+            } else {
+              _res = removeItemOnce(_res, item.key);
+            }
+          });
+        }
+
+        // STEP 3:
+        // Update checked print
+        //-----------
+        updateCheckedPrint(_res);
+
+        // STEP 4:
+        // Update root checkbox
+        //-----------
+        var _headRow = tableRootRef.current.querySelector('table').querySelectorAll('thead th')[0];
+        var allChecked = _checkedData.every(function (item) {
+          return item.checked === true;
+        });
+        if (allChecked) {
+          updategetCheckedRootData([{
+            key: "row-all",
+            checked: true
+          }]);
+        } else {
+          updategetCheckedRootData([{
+            key: "row-all",
+            checked: false
+          }]);
+        }
+        if (typeof _headRow !== 'undefined') {
+          var _rootCheckbox = _headRow.querySelector('[type="checkbox"]');
+          var hasAnyChecked = _checkedData.some(function (item) {
+            return item.checked === true;
+          });
+          if (hasAnyChecked && !allChecked) {
+            _rootCheckbox.indeterminate = true;
+          } else {
+            _rootCheckbox.indeterminate = false;
+          }
+        }
+
+        // STEP 5:
+        // callback
+        //-----------
+        cb === null || cb === void 0 ? void 0 : cb(_res);
       }
     };
-  }, [ref]);
+  }, [tableCheckRef]);
 
   // initialize actived checkboxes
   var latestCheckedData = function latestCheckedData() {
@@ -885,40 +956,14 @@ var TableFieldRow = function TableFieldRow(props) {
       return getCheckedData;
     }
   };
-  function checkedAct(e, val) {
-    var _curKey = e.target.value;
-    var _checkedData = getCheckedData;
-    var _res = getCheckedPrint;
-
-    // STEP 1:
-    // Current checkbox
-    //-----------
-    if (val === true) {
-      _res.push(formatCheckboxControlVal(e.target));
-      setCheckboxCheckedData(_checkedData, _curKey, true);
-    } else {
-      setCheckboxCheckedData(_checkedData, _curKey, false);
-      _res = removeItemOnce(_res, _curKey);
-    }
-
-    // STEP 2:
-    // Array deduplication
-    //-----------
-    _res = _res.filter(function (item, index, self) {
-      return index === self.findIndex(function (t) {
-        return t.key === item.key;
-      });
-    });
-
-    // STEP 3:
-    // ALl parent checkboxes
-    //-----------
-    var _headRow = e.target.closest('table').querySelectorAll('thead th')[0];
+  function updateRootcheckbox(el) {
+    if (el === null) return;
+    var _headRow = el.closest('table').querySelectorAll('thead th')[0];
     if (typeof _headRow !== 'undefined') {
       var _rootCheckbox = _headRow.querySelector('[type="checkbox"]');
-      var _checkboxes = (0,dom.getChildren)(e.target.closest('table').querySelector('tbody'), '[type="checkbox"]');
-      var _checkedLength = _checkboxes.filter(function (el) {
-        return el.checked === true;
+      var _checkboxes = (0,dom.getChildren)(el.closest('table').querySelector('tbody'), '[type="checkbox"]');
+      var _checkedLength = _checkboxes.filter(function (checkbox) {
+        return checkbox.checked === true;
       }).length;
       if (_checkedLength === 0) {
         _rootCheckbox.indeterminate = false;
@@ -943,6 +988,37 @@ var TableFieldRow = function TableFieldRow(props) {
         }
       }
     }
+  }
+  function checkedAct(el, val) {
+    if (el === null) return;
+    var _curKey = el.value;
+    var _checkedData = getCheckedData;
+    var _res = getCheckedPrint;
+
+    // STEP 1:
+    // Current checkbox
+    //-----------
+    if (val === true) {
+      _res.push(formatCheckboxControlVal(el));
+      setCheckboxCheckedData(_checkedData, _curKey, true);
+    } else {
+      setCheckboxCheckedData(_checkedData, _curKey, false);
+      _res = removeItemOnce(_res, _curKey);
+    }
+
+    // STEP 2:
+    // Array deduplication
+    //-----------
+    _res = _res.filter(function (item, index, self) {
+      return index === self.findIndex(function (t) {
+        return t.key === item.key;
+      });
+    });
+
+    // STEP 3:
+    // ALl parent checkboxes
+    //-----------
+    updateRootcheckbox(el);
 
     // STEP 4:
     // Update checked data
@@ -1103,7 +1179,7 @@ var TableFieldRow = function TableFieldRow(props) {
       return cur.key === rowKey;
     })[0]) === null || _latestCheckedData$fi === void 0 ? void 0 : _latestCheckedData$fi.checked,
     onChange: function onChange(e, val) {
-      checkedAct(e, val);
+      checkedAct(e.target, val);
     }
   }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     ref: contentRef
@@ -1127,7 +1203,8 @@ function TableRow_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var TableRow = function TableRow(props) {
   var _filter$, _filter$2;
-  var ref = props.ref,
+  var tableRootRef = props.tableRootRef,
+    tableCheckRef = props.tableCheckRef,
     _props$rowActiveClass = props.rowActiveClassName,
     rowActiveClassName = _props$rowActiveClass === void 0 ? 'active' : _props$rowActiveClass,
     fieldsChecked = props.fieldsChecked,
@@ -1205,7 +1282,8 @@ var TableRow = function TableRow(props) {
     if (i === 0) {
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(src_TableFieldRow, {
         key: 'th-row' + i,
-        ref: ref,
+        tableRootRef: tableRootRef,
+        tableCheckRef: tableCheckRef,
         rowActiveClassName: rowActiveClassName,
         fieldsChecked: fieldsChecked,
         updateFirstInitCheckboxesClassName: setFirstInitCheckboxesClassName,
@@ -1277,7 +1355,8 @@ var TableHeaders = function TableHeaders(props) {
     evHeadCellMouseEnter = props.evHeadCellMouseEnter,
     evHeadCellMouseLeave = props.evHeadCellMouseLeave,
     evHeadCellClick = props.evHeadCellClick;
-  function checkedAct(e, val) {
+  function checkedAct(el, val) {
+    if (el === null) return;
     var _checkedData = getCheckedData;
     var _res = getCheckedPrint;
 
@@ -1299,7 +1378,7 @@ var TableHeaders = function TableHeaders(props) {
     // STEP 2:
     // All child checkboxes
     //-----------
-    var _checkboxes = (0,dom.getChildren)(e.target.closest('table').querySelector('tbody'), '[type="checkbox"]');
+    var _checkboxes = (0,dom.getChildren)(el.closest('table').querySelector('tbody'), '[type="checkbox"]');
     [].slice.call(_checkboxes).forEach(function (node) {
       if (val === true) {
         setCheckboxCheckedData(_checkedData, node.dataset.key, true);
@@ -1373,7 +1452,7 @@ var TableHeaders = function TableHeaders(props) {
         return cur.key === 'row-all';
       })[0]) === null || _filter$ === void 0 ? void 0 : _filter$.checked,
       onChange: function onChange(e, val) {
-        checkedAct(e, val);
+        checkedAct(e.target, val);
       }
     })) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       dangerouslySetInnerHTML: {
@@ -1452,7 +1531,7 @@ function src_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 var Table = function Table(props) {
-  var ref = props.ref,
+  var tableCheckRef = props.tableCheckRef,
     wrapperClassName = props.wrapperClassName,
     tableClassName = props.tableClassName,
     bodyClassName = props.bodyClassName,
@@ -1905,7 +1984,8 @@ var Table = function Table(props) {
       key: i + String(mainUpdate) // Trigger child component update when prop of parent changes
       ,
       index: i,
-      ref: ref,
+      tableRootRef: rootRef,
+      tableCheckRef: tableCheckRef,
       rowActiveClassName: rowActiveClassName,
       fieldsChecked: _fieldsChecked,
       rowKey: "row-".concat(i),

package/Tree/index.js

@@ -393,6 +393,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
             "data-checkbox": true,
+            "data-checked": val,
             disabled: disabled || null,
             required: required || null,
             onChange: handleChange,

package/lib/cjs/Checkbox/index.js

@@ -198,6 +198,7 @@ var Checkbox = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     ,
     "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
     "data-checkbox": true,
+    "data-checked": val,
     disabled: disabled || null,
     required: required || null,
     onChange: handleChange,

package/lib/cjs/MultipleCheckboxes/index.js

@@ -393,6 +393,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
             "data-checkbox": true,
+            "data-checked": val,
             disabled: disabled || null,
             required: required || null,
             onChange: handleChange,

package/lib/cjs/Table/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare type TableProps = {
-    ref?: React.RefObject<any>;
+    tableCheckRef?: React.RefObject<any>;
     wrapperClassName?: string;
     tableClassName?: string;
     bodyClassName?: string;

package/lib/cjs/Table/index.js

@@ -393,6 +393,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
             "data-checkbox": true,
+            "data-checked": val,
             disabled: disabled || null,
             required: required || null,
             onChange: handleChange,
@@ -825,7 +826,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var TableFieldRow = function TableFieldRow(props) {
   var _latestCheckedData$fi;
-  var ref = props.ref,
+  var tableRootRef = props.tableRootRef,
+    tableCheckRef = props.tableCheckRef,
     _props$rowActiveClass = props.rowActiveClassName,
     rowActiveClassName = _props$rowActiveClass === void 0 ? 'active' : _props$rowActiveClass,
     fieldsChecked = props.fieldsChecked,
@@ -862,13 +864,82 @@ var TableFieldRow = function TableFieldRow(props) {
   var rowIndex = rowKey === null || rowKey === void 0 ? void 0 : rowKey.replace('row-', '');
 
   // exposes the following methods
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(ref, function () {
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(tableCheckRef, function () {
     return {
-      check: function check(e, val) {
-        checkedAct(e, val);
+      check: function check(data, cb) {
+        var _checkedData = getCheckedData;
+        var _res = [];
+
+        // STEP 1:
+        // Update checked data
+        //-----------
+        data.forEach(function (v, i) {
+          var _curKey = "row-".concat(v.index);
+          if (v.value === true) {
+            setCheckboxCheckedData(_checkedData, _curKey, true);
+          } else {
+            setCheckboxCheckedData(_checkedData, _curKey, false);
+          }
+        });
+        updategetCheckedData(_checkedData);
+
+        // STEP 2:
+        // get per checkbox value
+        //----------- 
+        if (tableRootRef.current !== null) {
+          _checkedData.forEach(function (item) {
+            if (item.checked === true) {
+              var _index = item.key.replace('row-', '');
+              var curCheckbox = tableRootRef.current.querySelector('table').querySelector("tbody [data-key=\"row-".concat(_index, "\"]"));
+              _res.push(formatRowControlVal(curCheckbox, checkboxNamePrefix));
+            } else {
+              _res = removeItemOnce(_res, item.key);
+            }
+          });
+        }
+
+        // STEP 3:
+        // Update checked print
+        //-----------
+        updateCheckedPrint(_res);
+
+        // STEP 4:
+        // Update root checkbox
+        //-----------
+        var _headRow = tableRootRef.current.querySelector('table').querySelectorAll('thead th')[0];
+        var allChecked = _checkedData.every(function (item) {
+          return item.checked === true;
+        });
+        if (allChecked) {
+          updategetCheckedRootData([{
+            key: "row-all",
+            checked: true
+          }]);
+        } else {
+          updategetCheckedRootData([{
+            key: "row-all",
+            checked: false
+          }]);
+        }
+        if (typeof _headRow !== 'undefined') {
+          var _rootCheckbox = _headRow.querySelector('[type="checkbox"]');
+          var hasAnyChecked = _checkedData.some(function (item) {
+            return item.checked === true;
+          });
+          if (hasAnyChecked && !allChecked) {
+            _rootCheckbox.indeterminate = true;
+          } else {
+            _rootCheckbox.indeterminate = false;
+          }
+        }
+
+        // STEP 5:
+        // callback
+        //-----------
+        cb === null || cb === void 0 ? void 0 : cb(_res);
       }
     };
-  }, [ref]);
+  }, [tableCheckRef]);
 
   // initialize actived checkboxes
   var latestCheckedData = function latestCheckedData() {
@@ -885,40 +956,14 @@ var TableFieldRow = function TableFieldRow(props) {
       return getCheckedData;
     }
   };
-  function checkedAct(e, val) {
-    var _curKey = e.target.value;
-    var _checkedData = getCheckedData;
-    var _res = getCheckedPrint;
-
-    // STEP 1:
-    // Current checkbox
-    //-----------
-    if (val === true) {
-      _res.push(formatCheckboxControlVal(e.target));
-      setCheckboxCheckedData(_checkedData, _curKey, true);
-    } else {
-      setCheckboxCheckedData(_checkedData, _curKey, false);
-      _res = removeItemOnce(_res, _curKey);
-    }
-
-    // STEP 2:
-    // Array deduplication
-    //-----------
-    _res = _res.filter(function (item, index, self) {
-      return index === self.findIndex(function (t) {
-        return t.key === item.key;
-      });
-    });
-
-    // STEP 3:
-    // ALl parent checkboxes
-    //-----------
-    var _headRow = e.target.closest('table').querySelectorAll('thead th')[0];
+  function updateRootcheckbox(el) {
+    if (el === null) return;
+    var _headRow = el.closest('table').querySelectorAll('thead th')[0];
     if (typeof _headRow !== 'undefined') {
       var _rootCheckbox = _headRow.querySelector('[type="checkbox"]');
-      var _checkboxes = (0,dom.getChildren)(e.target.closest('table').querySelector('tbody'), '[type="checkbox"]');
-      var _checkedLength = _checkboxes.filter(function (el) {
-        return el.checked === true;
+      var _checkboxes = (0,dom.getChildren)(el.closest('table').querySelector('tbody'), '[type="checkbox"]');
+      var _checkedLength = _checkboxes.filter(function (checkbox) {
+        return checkbox.checked === true;
       }).length;
       if (_checkedLength === 0) {
         _rootCheckbox.indeterminate = false;
@@ -943,6 +988,37 @@ var TableFieldRow = function TableFieldRow(props) {
         }
       }
     }
+  }
+  function checkedAct(el, val) {
+    if (el === null) return;
+    var _curKey = el.value;
+    var _checkedData = getCheckedData;
+    var _res = getCheckedPrint;
+
+    // STEP 1:
+    // Current checkbox
+    //-----------
+    if (val === true) {
+      _res.push(formatCheckboxControlVal(el));
+      setCheckboxCheckedData(_checkedData, _curKey, true);
+    } else {
+      setCheckboxCheckedData(_checkedData, _curKey, false);
+      _res = removeItemOnce(_res, _curKey);
+    }
+
+    // STEP 2:
+    // Array deduplication
+    //-----------
+    _res = _res.filter(function (item, index, self) {
+      return index === self.findIndex(function (t) {
+        return t.key === item.key;
+      });
+    });
+
+    // STEP 3:
+    // ALl parent checkboxes
+    //-----------
+    updateRootcheckbox(el);
 
     // STEP 4:
     // Update checked data
@@ -1103,7 +1179,7 @@ var TableFieldRow = function TableFieldRow(props) {
       return cur.key === rowKey;
     })[0]) === null || _latestCheckedData$fi === void 0 ? void 0 : _latestCheckedData$fi.checked,
     onChange: function onChange(e, val) {
-      checkedAct(e, val);
+      checkedAct(e.target, val);
     }
   }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     ref: contentRef
@@ -1127,7 +1203,8 @@ function TableRow_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var TableRow = function TableRow(props) {
   var _filter$, _filter$2;
-  var ref = props.ref,
+  var tableRootRef = props.tableRootRef,
+    tableCheckRef = props.tableCheckRef,
     _props$rowActiveClass = props.rowActiveClassName,
     rowActiveClassName = _props$rowActiveClass === void 0 ? 'active' : _props$rowActiveClass,
     fieldsChecked = props.fieldsChecked,
@@ -1205,7 +1282,8 @@ var TableRow = function TableRow(props) {
     if (i === 0) {
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(src_TableFieldRow, {
         key: 'th-row' + i,
-        ref: ref,
+        tableRootRef: tableRootRef,
+        tableCheckRef: tableCheckRef,
         rowActiveClassName: rowActiveClassName,
         fieldsChecked: fieldsChecked,
         updateFirstInitCheckboxesClassName: setFirstInitCheckboxesClassName,
@@ -1277,7 +1355,8 @@ var TableHeaders = function TableHeaders(props) {
     evHeadCellMouseEnter = props.evHeadCellMouseEnter,
     evHeadCellMouseLeave = props.evHeadCellMouseLeave,
     evHeadCellClick = props.evHeadCellClick;
-  function checkedAct(e, val) {
+  function checkedAct(el, val) {
+    if (el === null) return;
     var _checkedData = getCheckedData;
     var _res = getCheckedPrint;
 
@@ -1299,7 +1378,7 @@ var TableHeaders = function TableHeaders(props) {
     // STEP 2:
     // All child checkboxes
     //-----------
-    var _checkboxes = (0,dom.getChildren)(e.target.closest('table').querySelector('tbody'), '[type="checkbox"]');
+    var _checkboxes = (0,dom.getChildren)(el.closest('table').querySelector('tbody'), '[type="checkbox"]');
     [].slice.call(_checkboxes).forEach(function (node) {
       if (val === true) {
         setCheckboxCheckedData(_checkedData, node.dataset.key, true);
@@ -1373,7 +1452,7 @@ var TableHeaders = function TableHeaders(props) {
         return cur.key === 'row-all';
       })[0]) === null || _filter$ === void 0 ? void 0 : _filter$.checked,
       onChange: function onChange(e, val) {
-        checkedAct(e, val);
+        checkedAct(e.target, val);
       }
     })) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
       dangerouslySetInnerHTML: {
@@ -1452,7 +1531,7 @@ function src_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 var Table = function Table(props) {
-  var ref = props.ref,
+  var tableCheckRef = props.tableCheckRef,
     wrapperClassName = props.wrapperClassName,
     tableClassName = props.tableClassName,
     bodyClassName = props.bodyClassName,
@@ -1905,7 +1984,8 @@ var Table = function Table(props) {
       key: i + String(mainUpdate) // Trigger child component update when prop of parent changes
       ,
       index: i,
-      ref: ref,
+      tableRootRef: rootRef,
+      tableCheckRef: tableCheckRef,
       rowActiveClassName: rowActiveClassName,
       fieldsChecked: _fieldsChecked,
       rowKey: "row-".concat(i),

package/lib/cjs/Tree/index.js

@@ -393,6 +393,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
             "data-checkbox": true,
+            "data-checked": val,
             disabled: disabled || null,
             required: required || null,
             onChange: handleChange,

package/lib/esm/Checkbox/index.tsx

@@ -131,6 +131,7 @@ const Checkbox = forwardRef((props: CheckboxProps, ref: any) => {
                         // Don't use "name", it's just a container to display the label
                         data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
                         data-checkbox
+                        data-checked={val}
                         disabled={disabled || null}
                         required={required || null}
                         onChange={handleChange}

package/lib/esm/Table/TableFieldRow.tsx

@@ -6,12 +6,15 @@ import Checkbox from 'funda-checkbox';
 
 
 import { getChildren } from './utils/dom';
-import { removeItemOnce, formatCheckboxControlVal, setCheckboxCheckedData } from './table-utils';
+import { removeItemOnce, formatCheckboxControlVal, setCheckboxCheckedData, formatRowControlVal } from './table-utils';
+
+
 
 /* Table Field Row
 -------------------------------------------------*/
 type TableFieldRowProps = {
-    ref?: React.RefObject<any>;
+    tableRootRef: React.RefObject<any>;
+    tableCheckRef?: React.RefObject<any>;
     rowActiveClassName?: string;
     fieldsChecked?: boolean[] | boolean;
     updateFirstInitCheckboxesClassName?: any;
@@ -43,7 +46,8 @@ const TableFieldRow = (props: TableFieldRowProps) => {
 
 
     const {
-        ref,
+        tableRootRef,
+        tableCheckRef,
         rowActiveClassName = 'active',
         fieldsChecked,
         updateFirstInitCheckboxesClassName,
@@ -81,13 +85,90 @@ const TableFieldRow = (props: TableFieldRowProps) => {
 
     // exposes the following methods
     useImperativeHandle(
-        ref,
+        tableCheckRef,
         () => ({
-            check: (e: any, val: any) => {
-                checkedAct(e, val);
+            check: (data: any, cb: any) => {
+
+                const _checkedData: any = getCheckedData;
+                let _res: any[] = [];
+        
+                // STEP 1:
+                // Update checked data
+                //-----------
+                data.forEach((v: any, i: number) => {
+                    
+                    const _curKey: string = `row-${v.index}`;
+                    if (v.value === true) {
+                        setCheckboxCheckedData(_checkedData, _curKey, true);
+                    } else {
+                        setCheckboxCheckedData(_checkedData, _curKey, false);
+                    }
+                });
+                updategetCheckedData(_checkedData);
+
+                // STEP 2:
+                // get per checkbox value
+                //----------- 
+                if (tableRootRef.current !== null) {
+                    _checkedData.forEach((item: any) => {
+
+                        if (item.checked === true) {
+                            const _index = item.key.replace('row-', '');
+                            const curCheckbox = tableRootRef.current.querySelector('table').querySelector(`tbody [data-key="row-${_index}"]`);
+
+                            _res.push(formatRowControlVal(curCheckbox, checkboxNamePrefix as string));
+                        } else {
+                            _res = removeItemOnce(_res, item.key);
+                        }
+                   
+                    });
+                }
+
+
+                // STEP 3:
+                // Update checked print
+                //-----------
+                updateCheckedPrint(_res);
+
+
+                // STEP 4:
+                // Update root checkbox
+                //-----------
+                const _headRow = tableRootRef.current.querySelector('table').querySelectorAll('thead th')[0];
+                const allChecked = _checkedData.every((item: any) => item.checked === true);
+                
+                if (allChecked) {
+                    updategetCheckedRootData([{
+                        key: `row-all`,
+                        checked: true
+                    }]);
+                } else {
+                    updategetCheckedRootData([{
+                        key: `row-all`,
+                        checked: false
+                    }]);
+                }
+
+                if (typeof _headRow !== 'undefined') {
+                    const _rootCheckbox = _headRow.querySelector('[type="checkbox"]');
+                    const hasAnyChecked = _checkedData.some((item: any) => item.checked === true);
+                    if (hasAnyChecked && !allChecked) {
+                        _rootCheckbox.indeterminate = true;
+                    } else {
+                        _rootCheckbox.indeterminate = false;
+                    }
+                }
+
+                // STEP 5:
+                // callback
+                //-----------
+                cb?.(_res);
+
+
+
             },
         }),
-        [ref],
+        [tableCheckRef],
     );
 
 
@@ -110,43 +191,16 @@ const TableFieldRow = (props: TableFieldRowProps) => {
         }
     };
 
-    function checkedAct(e: any, val: any) {
-        
-        const _curKey: string = e.target.value;
-        const _checkedData: any = getCheckedData;
-
-        let _res: any = getCheckedPrint;
-
-
-        // STEP 1:
-        // Current checkbox
-        //-----------
-        if (val === true) {
-            _res.push(formatCheckboxControlVal(e.target));
-            setCheckboxCheckedData(_checkedData, _curKey, true);
-        } else {
-            setCheckboxCheckedData(_checkedData, _curKey, false);
-            _res = removeItemOnce(_res, _curKey);
-
-        }
-
-        // STEP 2:
-        // Array deduplication
-        //-----------
-        _res = _res.filter((item: any, index: number, self: any[]) => index === self.findIndex((t) => (t.key === item.key)))
-
-
 
+    function updateRootcheckbox(el: any) {
+        if (el === null) return;
 
-        // STEP 3:
-        // ALl parent checkboxes
-        //-----------
-        const _headRow = e.target.closest('table').querySelectorAll('thead th')[0];
+        const _headRow = el.closest('table').querySelectorAll('thead th')[0];
         if (typeof _headRow !== 'undefined') {
             const _rootCheckbox = _headRow.querySelector('[type="checkbox"]');
-            const _checkboxes = getChildren(e.target.closest('table').querySelector('tbody'), '[type="checkbox"]');
-            const _checkedLength = _checkboxes.filter((el: any) => {
-                return el.checked === true;
+            const _checkboxes = getChildren(el.closest('table').querySelector('tbody'), '[type="checkbox"]');
+            const _checkedLength = _checkboxes.filter((checkbox: any) => {
+                return checkbox.checked === true;
             }).length;
 
             if (_checkedLength === 0) {
@@ -176,6 +230,43 @@ const TableFieldRow = (props: TableFieldRowProps) => {
 
         }
 
+    }
+
+    function checkedAct(el: any, val: any) {
+
+        if (el === null) return;
+
+
+        const _curKey: string = el.value;
+        const _checkedData: any = getCheckedData;
+
+        let _res: any = getCheckedPrint;
+
+        // STEP 1:
+        // Current checkbox
+        //-----------
+        if (val === true) {
+            _res.push(formatCheckboxControlVal(el));
+            setCheckboxCheckedData(_checkedData, _curKey, true);
+        } else {
+            setCheckboxCheckedData(_checkedData, _curKey, false);
+            _res = removeItemOnce(_res, _curKey);
+
+        }
+
+        // STEP 2:
+        // Array deduplication
+        //-----------
+        _res = _res.filter((item: any, index: number, self: any[]) => index === self.findIndex((t) => (t.key === item.key)))
+
+
+
+
+        // STEP 3:
+        // ALl parent checkboxes
+        //-----------
+        updateRootcheckbox(el);
+       
 
         // STEP 4:
         // Update checked data
@@ -193,6 +284,7 @@ const TableFieldRow = (props: TableFieldRowProps) => {
         // callback
         //-----------
         onCheck?.(_res);
+
     }
 
 
@@ -315,7 +407,7 @@ const TableFieldRow = (props: TableFieldRowProps) => {
                             value={`${rowKey}`}
                             checked={latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked}
                             onChange={(e: any, val: any) => {
-                                checkedAct(e, val);
+                                checkedAct(e.target, val);
                             }}
                         />
                     </>}

package/lib/esm/Table/TableHeaders.tsx

@@ -49,7 +49,9 @@ const TableHeaders = (props: TableHeadersProps) => {
     } = props;
 
 
-    function checkedAct(e: any, val: any) {
+    function checkedAct(el: any, val: any) {
+
+        if (el === null) return;
 
         const _checkedData: any = getCheckedData;
         let _res: any = getCheckedPrint;
@@ -74,7 +76,7 @@ const TableHeaders = (props: TableHeadersProps) => {
         // STEP 2:
         // All child checkboxes
         //-----------
-        const _checkboxes = getChildren(e.target.closest('table').querySelector('tbody'), '[type="checkbox"]');
+        const _checkboxes = getChildren(el.closest('table').querySelector('tbody'), '[type="checkbox"]');
         [].slice.call(_checkboxes).forEach((node: any) => {
             if (val === true) {
                 setCheckboxCheckedData(_checkedData, node.dataset.key, true);
@@ -146,7 +148,7 @@ const TableHeaders = (props: TableHeadersProps) => {
                                     value={`row-all`}
                                     checked={getCheckedRootData!.filter((cur: any) => cur.key === 'row-all')[0]?.checked}
                                     onChange={(e: any, val: any) => {
-                                        checkedAct(e, val);
+                                        checkedAct(e.target, val);
                                     }}
                                 />
                             </span> : null}

package/lib/esm/Table/TableRow.tsx

@@ -10,7 +10,8 @@ import { formatPerlineControlVal } from './table-utils';
 /* Table Row
 -------------------------------------------------*/
 type TableRowProps = {
-    ref?: React.RefObject<any>;
+    tableRootRef: React.RefObject<any>;
+    tableCheckRef?: React.RefObject<any>;
     rowActiveClassName?: string;
     fieldsChecked?: boolean[] | boolean;
     index: React.Key;
@@ -41,7 +42,8 @@ type TableRowProps = {
 const TableRow = (props: TableRowProps) => {
 
     const {
-        ref,
+        tableRootRef,
+        tableCheckRef,
         rowActiveClassName = 'active',
         fieldsChecked,
         index,
@@ -122,7 +124,8 @@ const TableRow = (props: TableRowProps) => {
                     if ( i === 0 ) {
                         return <TableFieldRow 
                                     key={'th-row' + i} 
-                                    ref={ref}
+                                    tableRootRef={tableRootRef}
+                                    tableCheckRef={tableCheckRef}
                                     rowActiveClassName={rowActiveClassName}
                                     fieldsChecked={fieldsChecked}
                                     updateFirstInitCheckboxesClassName={setFirstInitCheckboxesClassName}

package/lib/esm/Table/index.tsx

@@ -14,7 +14,7 @@ import { formatRowControlVal } from './table-utils';
 
 
 type TableProps = {
-    ref?: React.RefObject<any>;
+    tableCheckRef?: React.RefObject<any>;
     wrapperClassName?: string;
     tableClassName?: string;
     bodyClassName?: string;
@@ -51,7 +51,7 @@ type TableProps = {
 
 const Table = (props: TableProps) => {
     const {
-        ref,
+        tableCheckRef,
         wrapperClassName,
         tableClassName,
         bodyClassName,
@@ -576,7 +576,8 @@ const Table = (props: TableProps) => {
                             return <TableRow 
                                         key={i + String(mainUpdate)} // Trigger child component update when prop of parent changes
                                         index={i}
-                                        ref={ref}
+                                        tableRootRef={rootRef}
+                                        tableCheckRef={tableCheckRef}
                                         rowActiveClassName={rowActiveClassName}
                                         fieldsChecked={_fieldsChecked}
                                         rowKey={`row-${i}`} 

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "2.9.305",
+  "version": "3.0.105",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",