funda-ui 4.1.345 → 4.1.354

package/CascadingSelect/index.d.ts

@@ -6,7 +6,7 @@ declare module 'react' {
 }
 declare type CascadingSelectOptionChangeFnType = (input: any, currentData: any, index: any, depth: any, value: any, closeFunc: any) => void;
 declare type CascadingSelectProps = {
-    popupRef?: React.RefObject<any>;
+    popupRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/CascadingSelectE2E/index.d.ts

@@ -15,7 +15,7 @@ interface fetchArrayConfig {
     doubleIndent?: boolean;
 }
 declare type CascadingSelectE2EProps = {
-    popupRef?: React.RefObject<any>;
+    popupRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/Checkbox/index.d.ts

@@ -6,7 +6,7 @@ declare module 'react' {
 }
 declare type CheckboxOptionChangeFnType = (arg1: any, arg2: any) => void;
 declare type CheckboxProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     itemSelectedClassName?: string;
     value: string | boolean;

package/Checkbox/index.js

@@ -225,7 +225,7 @@ var Checkbox = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     onFocus: handleFocus,
     onBlur: handleBlur,
     defaultValue: value || '',
-    checked: val // component status will not change if defaultChecked is used
+    checked: val || false // component status will not change if defaultChecked is used,  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
     ,
     style: _objectSpread({
       cursor: 'pointer'

package/ColorPicker/index.js

@@ -226,7 +226,8 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     type: "hidden",
     id: idRes,
     name: name,
-    value: changedVal,
+    value: changedVal // do not use `defaultValue`
+    ,
     required: required || null
   }, attributes)), changedVal !== '' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     tabIndex: -1,

package/Date/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare type DateProps = {
-    contentRef?: React.RefObject<any>;
-    popupRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
+    popupRef?: React.ForwardedRef<any>;
     popupClassName?: string;
     triggerClassName?: string;
     wrapperClassName?: string;

package/DropdownMenu/index.js

@@ -4287,7 +4287,7 @@ var DropdownMenu = function DropdownMenu(props) {
     name: name || '',
     type: "hidden",
     value: selected === null || selected === void 0 ? void 0 : selected.value
-  }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
+  }), " ", /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
     show: true,
     containerClassName: "DropdownMenu"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {

package/Input/index.d.ts

@@ -5,7 +5,7 @@ declare module 'react' {
     }
 }
 declare type InputProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/LiveSearch/index.d.ts

@@ -7,8 +7,8 @@ interface OptionConfig {
     queryString: string | number;
 }
 declare type LiveSearchProps = {
-    contentRef?: React.RefObject<any>;
-    popupRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
+    popupRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/MultiFuncSelect/index.d.ts

@@ -33,8 +33,8 @@ interface CleanTriggerConfig {
     cleanValueLabel?: string;
 }
 declare type MultiFuncSelectProps = {
-    contentRef?: React.RefObject<any>;
-    popupRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
+    popupRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/MultipleCheckboxes/index.d.ts

@@ -3,7 +3,7 @@ interface OptionConfig {
     [propName: string]: string | number | boolean;
 }
 declare type MultipleCheckboxesProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     tableLayout?: boolean;
     tableLayoutClassName?: string;

package/MultipleCheckboxes/index.js

@@ -4247,7 +4247,8 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
     type: "hidden",
     id: idRes,
     name: name,
-    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valRes(selectedItems)) : valRes(selectedItems).join(','),
+    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valRes(selectedItems)) : valRes(selectedItems).join(',') // do not use `defaultValue`
+    ,
     required: required || null
   }, attributes))))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     id: "multiple-checkboxes__wrapper-".concat(idRes),
@@ -4270,7 +4271,8 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
     type: "hidden",
     id: idRes,
     name: name,
-    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valRes(selectedItems)) : valRes(selectedItems).join(','),
+    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valRes(selectedItems)) : valRes(selectedItems).join(',') // do not use `defaultValue`
+    ,
     required: required || null
   }, attributes))))));
 });

package/MultipleSelect/index.js

@@ -4143,7 +4143,8 @@ var MultipleSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
     type: "hidden",
     id: idRes,
     name: name,
-    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valSelected) : valSelected.join(','),
+    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valSelected) : valSelected.join(',') // do not use `defaultValue`
+    ,
     required: required || null
   }, attributes)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "m-select-inner"

package/Radio/index.d.ts

@@ -9,7 +9,7 @@ interface OptionConfig {
 }
 declare type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any, arg4?: any) => void;
 declare type RadioProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     groupWrapperClassName?: string;
     groupLabelClassName?: string;

package/Table/index.d.ts

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

package/Table/index.js

@@ -3975,7 +3975,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 -------------------------------------------------*/
 
 var TableFieldRow = function TableFieldRow(props) {
-  var _latestCheckedData$fi;
+  var _latestCheckedData$fi3;
   var tableRootRef = props.tableRootRef,
     tableCheckRef = props.tableCheckRef,
     _props$rowActiveClass = props.rowActiveClassName,
@@ -4012,6 +4012,10 @@ var TableFieldRow = function TableFieldRow(props) {
     _useState2 = _slicedToArray(_useState, 2),
     firstInitCheckboxes = _useState2[0],
     setFirstInitCheckboxes = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    checkboxDefaultVal = _useState4[0],
+    setCheckboxDefaultVal = _useState4[1];
 
   //
   var _ref = fieldsCheckedAct || [null, null],
@@ -4106,8 +4110,9 @@ var TableFieldRow = function TableFieldRow(props) {
       if (typeof rowKey !== 'undefined' && typeof getCheckedData !== 'undefined') setCheckboxCheckedData(getCheckedData, rowKey, fieldsChecked[Number(rowIndex)]);
       // Update checked data
       updategetCheckedData(_checkedData);
-      setFirstInitCheckboxes(true);
       updateFirstInitCheckboxesClassName(true);
+      //
+      setFirstInitCheckboxes(true);
       return _checkedData;
     } else {
       return getCheckedData;
@@ -4214,6 +4219,14 @@ var TableFieldRow = function TableFieldRow(props) {
     var _e$target$closest;
     (_e$target$closest = e.target.closest('table')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('tbody').classList.add('drag-trigger-mousedown');
   }
+
+  // to aviod `Warning: Cannot update a component (ComponentName) while rendering a different component`
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    var _latestCheckedData$fi;
+    setCheckboxDefaultVal(((_latestCheckedData$fi = latestCheckedData().filter(function (cur) {
+      return cur.key === rowKey;
+    })[0]) === null || _latestCheckedData$fi === void 0 ? void 0 : _latestCheckedData$fi.checked) || false); // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+  }, []);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("th", {
     scope: "row",
     colSpan: cols,
@@ -4348,7 +4361,7 @@ var TableFieldRow = function TableFieldRow(props) {
     className: "form-check__wrapper"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "form-check d-inline-block"
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
+  }, checkboxDefaultVal === null ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
     type: "checkbox",
     className: "form-check-input",
     name: "checkbox-".concat(checkboxNamePrefix, "-").concat(rowIndex),
@@ -4357,17 +4370,34 @@ var TableFieldRow = function TableFieldRow(props) {
     "data-index": "".concat(rowIndex),
     "data-key": "".concat(rowKey),
     "data-use": dataUse,
-    value: "".concat(rowKey),
-    checked: (_latestCheckedData$fi = latestCheckedData().filter(function (cur) {
-      return cur.key === rowKey;
-    })[0]) === null || _latestCheckedData$fi === void 0 ? void 0 : _latestCheckedData$fi.checked,
+    defaultValue: "".concat(rowKey),
+    checked: checkboxDefaultVal !== null ? checkboxDefaultVal : false,
     onChange: function onChange(e) {
       var _latestCheckedData$fi2;
       checkedAct(e.target, !((_latestCheckedData$fi2 = latestCheckedData().filter(function (cur) {
         return cur.key === rowKey;
       })[0]) !== null && _latestCheckedData$fi2 !== void 0 && _latestCheckedData$fi2.checked));
     }
-  }))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+  })) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
+    type: "checkbox",
+    className: "form-check-input",
+    name: "checkbox-".concat(checkboxNamePrefix, "-").concat(rowIndex),
+    ref: checkboxRef,
+    tabIndex: -1,
+    "data-index": "".concat(rowIndex),
+    "data-key": "".concat(rowKey),
+    "data-use": dataUse,
+    defaultValue: "".concat(rowKey),
+    checked: (_latestCheckedData$fi3 = latestCheckedData().filter(function (cur) {
+      return cur.key === rowKey;
+    })[0]) === null || _latestCheckedData$fi3 === void 0 ? void 0 : _latestCheckedData$fi3.checked,
+    onChange: function onChange(e) {
+      var _latestCheckedData$fi4;
+      checkedAct(e.target, !((_latestCheckedData$fi4 = latestCheckedData().filter(function (cur) {
+        return cur.key === rowKey;
+      })[0]) !== null && _latestCheckedData$fi4 !== void 0 && _latestCheckedData$fi4.checked));
+    }
+  })))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     ref: contentRef
   }, content)));
 };
@@ -4735,10 +4765,11 @@ var TableHeaders = function TableHeaders(props) {
       "data-index": -1,
       "data-key": "row-all",
       "data-use": "",
-      value: "row-all",
-      checked: (_filter$ = getCheckedRootData.filter(function (cur) {
+      defaultValue: "row-all",
+      checked: ((_filter$ = getCheckedRootData.filter(function (cur) {
         return cur.key === 'row-all';
-      })[0]) === null || _filter$ === void 0 ? void 0 : _filter$.checked,
+      })[0]) === null || _filter$ === void 0 ? void 0 : _filter$.checked) || false // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+      ,
       onChange: function onChange(e) {
         var _filter$2;
         checkedAct(e.target, !((_filter$2 = getCheckedRootData.filter(function (cur) {
@@ -4950,6 +4981,7 @@ var Table = function Table(props) {
     existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
   };
   var allRows = function allRows() {
+    if (tbodyRef.current === null) return [];
     return [].slice.call(tbodyRef.current.children);
   };
   var printData = function printData(data) {
@@ -5025,6 +5057,7 @@ var Table = function Table(props) {
   // checkboxes data
   // ================================================================
   function initCheckboxesData() {
+    if (rootRef.current === null) return;
     var _checkboxes = (0,cjs.getChildren)(rootRef.current.querySelector('table').querySelector('tbody'), '[type="checkbox"]');
     var _data = [];
     [].slice.call(_checkboxes).forEach(function (node, i) {

package/TagInput/index.js

@@ -4087,7 +4087,8 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
       return item.content;
     })) : items.map(function (item) {
       return item.content;
-    }).join(','),
+    }).join(',') // do not use `defaultValue`
+    ,
     required: required || null
   }))));
 });

package/Textarea/index.d.ts

@@ -5,7 +5,7 @@ declare module 'react' {
     }
 }
 declare type TextareaProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

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

@@ -6,7 +6,7 @@ declare module 'react' {
 }
 declare type CascadingSelectOptionChangeFnType = (input: any, currentData: any, index: any, depth: any, value: any, closeFunc: any) => void;
 declare type CascadingSelectProps = {
-    popupRef?: React.RefObject<any>;
+    popupRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

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

@@ -15,7 +15,7 @@ interface fetchArrayConfig {
     doubleIndent?: boolean;
 }
 declare type CascadingSelectE2EProps = {
-    popupRef?: React.RefObject<any>;
+    popupRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

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

@@ -6,7 +6,7 @@ declare module 'react' {
 }
 declare type CheckboxOptionChangeFnType = (arg1: any, arg2: any) => void;
 declare type CheckboxProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     itemSelectedClassName?: string;
     value: string | boolean;

package/lib/cjs/Checkbox/index.js

@@ -225,7 +225,7 @@ var Checkbox = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     onFocus: handleFocus,
     onBlur: handleBlur,
     defaultValue: value || '',
-    checked: val // component status will not change if defaultChecked is used
+    checked: val || false // component status will not change if defaultChecked is used,  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
     ,
     style: _objectSpread({
       cursor: 'pointer'

package/lib/cjs/ColorPicker/index.js

@@ -226,7 +226,8 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     type: "hidden",
     id: idRes,
     name: name,
-    value: changedVal,
+    value: changedVal // do not use `defaultValue`
+    ,
     required: required || null
   }, attributes)), changedVal !== '' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     tabIndex: -1,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 declare type DateProps = {
-    contentRef?: React.RefObject<any>;
-    popupRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
+    popupRef?: React.ForwardedRef<any>;
     popupClassName?: string;
     triggerClassName?: string;
     wrapperClassName?: string;

package/lib/cjs/DropdownMenu/index.js

@@ -4287,7 +4287,7 @@ var DropdownMenu = function DropdownMenu(props) {
     name: name || '',
     type: "hidden",
     value: selected === null || selected === void 0 ? void 0 : selected.value
-  }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
+  }), " ", /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
     show: true,
     containerClassName: "DropdownMenu"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {

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

@@ -5,7 +5,7 @@ declare module 'react' {
     }
 }
 declare type InputProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

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

@@ -7,8 +7,8 @@ interface OptionConfig {
     queryString: string | number;
 }
 declare type LiveSearchProps = {
-    contentRef?: React.RefObject<any>;
-    popupRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
+    popupRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

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

@@ -33,8 +33,8 @@ interface CleanTriggerConfig {
     cleanValueLabel?: string;
 }
 declare type MultiFuncSelectProps = {
-    contentRef?: React.RefObject<any>;
-    popupRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
+    popupRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

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

@@ -3,7 +3,7 @@ interface OptionConfig {
     [propName: string]: string | number | boolean;
 }
 declare type MultipleCheckboxesProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     tableLayout?: boolean;
     tableLayoutClassName?: string;

package/lib/cjs/MultipleCheckboxes/index.js

@@ -4247,7 +4247,8 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
     type: "hidden",
     id: idRes,
     name: name,
-    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valRes(selectedItems)) : valRes(selectedItems).join(','),
+    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valRes(selectedItems)) : valRes(selectedItems).join(',') // do not use `defaultValue`
+    ,
     required: required || null
   }, attributes))))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     id: "multiple-checkboxes__wrapper-".concat(idRes),
@@ -4270,7 +4271,8 @@ var MultipleCheckboxes = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forw
     type: "hidden",
     id: idRes,
     name: name,
-    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valRes(selectedItems)) : valRes(selectedItems).join(','),
+    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valRes(selectedItems)) : valRes(selectedItems).join(',') // do not use `defaultValue`
+    ,
     required: required || null
   }, attributes))))));
 });

package/lib/cjs/MultipleSelect/index.js

@@ -4143,7 +4143,8 @@ var MultipleSelect = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardR
     type: "hidden",
     id: idRes,
     name: name,
-    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valSelected) : valSelected.join(','),
+    value: VALUE_BY_BRACKETS ? (0,funda_utils__WEBPACK_IMPORTED_MODULE_1__.convertArrToValByBrackets)(valSelected) : valSelected.join(',') // do not use `defaultValue`
+    ,
     required: required || null
   }, attributes)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "m-select-inner"

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

@@ -9,7 +9,7 @@ interface OptionConfig {
 }
 declare type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any, arg4?: any) => void;
 declare type RadioProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     groupWrapperClassName?: string;
     groupLabelClassName?: string;

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

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

package/lib/cjs/Table/index.js

@@ -3975,7 +3975,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 -------------------------------------------------*/
 
 var TableFieldRow = function TableFieldRow(props) {
-  var _latestCheckedData$fi;
+  var _latestCheckedData$fi3;
   var tableRootRef = props.tableRootRef,
     tableCheckRef = props.tableCheckRef,
     _props$rowActiveClass = props.rowActiveClassName,
@@ -4012,6 +4012,10 @@ var TableFieldRow = function TableFieldRow(props) {
     _useState2 = _slicedToArray(_useState, 2),
     firstInitCheckboxes = _useState2[0],
     setFirstInitCheckboxes = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    checkboxDefaultVal = _useState4[0],
+    setCheckboxDefaultVal = _useState4[1];
 
   //
   var _ref = fieldsCheckedAct || [null, null],
@@ -4106,8 +4110,9 @@ var TableFieldRow = function TableFieldRow(props) {
       if (typeof rowKey !== 'undefined' && typeof getCheckedData !== 'undefined') setCheckboxCheckedData(getCheckedData, rowKey, fieldsChecked[Number(rowIndex)]);
       // Update checked data
       updategetCheckedData(_checkedData);
-      setFirstInitCheckboxes(true);
       updateFirstInitCheckboxesClassName(true);
+      //
+      setFirstInitCheckboxes(true);
       return _checkedData;
     } else {
       return getCheckedData;
@@ -4214,6 +4219,14 @@ var TableFieldRow = function TableFieldRow(props) {
     var _e$target$closest;
     (_e$target$closest = e.target.closest('table')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('tbody').classList.add('drag-trigger-mousedown');
   }
+
+  // to aviod `Warning: Cannot update a component (ComponentName) while rendering a different component`
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    var _latestCheckedData$fi;
+    setCheckboxDefaultVal(((_latestCheckedData$fi = latestCheckedData().filter(function (cur) {
+      return cur.key === rowKey;
+    })[0]) === null || _latestCheckedData$fi === void 0 ? void 0 : _latestCheckedData$fi.checked) || false); // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+  }, []);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("th", {
     scope: "row",
     colSpan: cols,
@@ -4348,7 +4361,7 @@ var TableFieldRow = function TableFieldRow(props) {
     className: "form-check__wrapper"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "form-check d-inline-block"
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
+  }, checkboxDefaultVal === null ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
     type: "checkbox",
     className: "form-check-input",
     name: "checkbox-".concat(checkboxNamePrefix, "-").concat(rowIndex),
@@ -4357,17 +4370,34 @@ var TableFieldRow = function TableFieldRow(props) {
     "data-index": "".concat(rowIndex),
     "data-key": "".concat(rowKey),
     "data-use": dataUse,
-    value: "".concat(rowKey),
-    checked: (_latestCheckedData$fi = latestCheckedData().filter(function (cur) {
-      return cur.key === rowKey;
-    })[0]) === null || _latestCheckedData$fi === void 0 ? void 0 : _latestCheckedData$fi.checked,
+    defaultValue: "".concat(rowKey),
+    checked: checkboxDefaultVal !== null ? checkboxDefaultVal : false,
     onChange: function onChange(e) {
       var _latestCheckedData$fi2;
       checkedAct(e.target, !((_latestCheckedData$fi2 = latestCheckedData().filter(function (cur) {
         return cur.key === rowKey;
       })[0]) !== null && _latestCheckedData$fi2 !== void 0 && _latestCheckedData$fi2.checked));
     }
-  }))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+  })) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", {
+    type: "checkbox",
+    className: "form-check-input",
+    name: "checkbox-".concat(checkboxNamePrefix, "-").concat(rowIndex),
+    ref: checkboxRef,
+    tabIndex: -1,
+    "data-index": "".concat(rowIndex),
+    "data-key": "".concat(rowKey),
+    "data-use": dataUse,
+    defaultValue: "".concat(rowKey),
+    checked: (_latestCheckedData$fi3 = latestCheckedData().filter(function (cur) {
+      return cur.key === rowKey;
+    })[0]) === null || _latestCheckedData$fi3 === void 0 ? void 0 : _latestCheckedData$fi3.checked,
+    onChange: function onChange(e) {
+      var _latestCheckedData$fi4;
+      checkedAct(e.target, !((_latestCheckedData$fi4 = latestCheckedData().filter(function (cur) {
+        return cur.key === rowKey;
+      })[0]) !== null && _latestCheckedData$fi4 !== void 0 && _latestCheckedData$fi4.checked));
+    }
+  })))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     ref: contentRef
   }, content)));
 };
@@ -4735,10 +4765,11 @@ var TableHeaders = function TableHeaders(props) {
       "data-index": -1,
       "data-key": "row-all",
       "data-use": "",
-      value: "row-all",
-      checked: (_filter$ = getCheckedRootData.filter(function (cur) {
+      defaultValue: "row-all",
+      checked: ((_filter$ = getCheckedRootData.filter(function (cur) {
         return cur.key === 'row-all';
-      })[0]) === null || _filter$ === void 0 ? void 0 : _filter$.checked,
+      })[0]) === null || _filter$ === void 0 ? void 0 : _filter$.checked) || false // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+      ,
       onChange: function onChange(e) {
         var _filter$2;
         checkedAct(e.target, !((_filter$2 = getCheckedRootData.filter(function (cur) {
@@ -4950,6 +4981,7 @@ var Table = function Table(props) {
     existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
   };
   var allRows = function allRows() {
+    if (tbodyRef.current === null) return [];
     return [].slice.call(tbodyRef.current.children);
   };
   var printData = function printData(data) {
@@ -5025,6 +5057,7 @@ var Table = function Table(props) {
   // checkboxes data
   // ================================================================
   function initCheckboxesData() {
+    if (rootRef.current === null) return;
     var _checkboxes = (0,cjs.getChildren)(rootRef.current.querySelector('table').querySelector('tbody'), '[type="checkbox"]');
     var _data = [];
     [].slice.call(_checkboxes).forEach(function (node, i) {

package/lib/cjs/TagInput/index.js

@@ -4087,7 +4087,8 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
       return item.content;
     })) : items.map(function (item) {
       return item.content;
-    }).join(','),
+    }).join(',') // do not use `defaultValue`
+    ,
     required: required || null
   }))));
 });

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

@@ -5,7 +5,7 @@ declare module 'react' {
     }
 }
 declare type TextareaProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/lib/esm/CascadingSelect/index.tsx

@@ -25,7 +25,7 @@ type CascadingSelectOptionChangeFnType = (input: any, currentData: any, index: a
 
 
 type CascadingSelectProps = {
-    popupRef?: React.RefObject<any>;
+    popupRef?: React.ForwardedRef<any>; // could use "Array" on popupRef.current, such as popupRef.current[0], popupRef.current[1]
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -40,7 +40,7 @@ interface fetchArrayConfig {
 }
 
 type CascadingSelectE2EProps = {
-    popupRef?: React.RefObject<any>;
+    popupRef?: React.ForwardedRef<any>; // could use "Array" on popupRef.current, such as popupRef.current[0], popupRef.current[1]
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/lib/esm/Checkbox/index.tsx

@@ -10,7 +10,7 @@ type CheckboxOptionChangeFnType = (arg1: any, arg2: any) => void;
 
 
 type CheckboxProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
     wrapperClassName?: string;
     itemSelectedClassName?: string;
     value: string | boolean;
@@ -162,7 +162,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
                         onFocus={handleFocus}
                         onBlur={handleBlur}
                         defaultValue={value as string || ''}
-                        checked={val}   // component status will not change if defaultChecked is used
+                        checked={val || false}   // component status will not change if defaultChecked is used,  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
                         style={{ cursor: 'pointer', ...style }}
                         {...attributes}
                     />

package/lib/esm/ColorPicker/index.tsx

@@ -163,7 +163,7 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
                         type="hidden"
                         id={idRes}
                         name={name}
-                        value={changedVal}
+                        value={changedVal}  // do not use `defaultValue`
                         required={required || null}
                         {...attributes}
                     />

package/lib/esm/Date/index.tsx

@@ -37,8 +37,8 @@ import i18n__zh_CN from './localization/zh_CN';
 
 
 type DateProps = {
-    contentRef?: React.RefObject<any>;
-    popupRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
+    popupRef?: React.ForwardedRef<any>; // could use "Array" on popupRef.current, such as popupRef.current[0], popupRef.current[1]
     popupClassName?: string;
     triggerClassName?: string;
     wrapperClassName?: string;

package/lib/esm/DropdownMenu/index.tsx

@@ -313,7 +313,7 @@ const DropdownMenu = (props: DropdownMenuProps) => {
                 
 
                 {/* INPUT */}
-                <input name={name || ''} type="hidden" value={selected?.value} />
+                <input name={name || ''} type="hidden" value={selected?.value} /> {/* // do not use `defaultValue` */}
                 {/* /INPUT */}
                 
                 {/* MENU LIST */}

package/lib/esm/Input/index.tsx

@@ -7,7 +7,7 @@ declare module 'react' {
 }
 
 type InputProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/lib/esm/LiveSearch/index.tsx

@@ -23,8 +23,8 @@ interface OptionConfig {
 
 
 type LiveSearchProps = {
-    contentRef?: React.RefObject<any>;
-    popupRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
+    popupRef?: React.ForwardedRef<any>; // could use "Array" on popupRef.current, such as popupRef.current[0], popupRef.current[1]
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/lib/esm/MultiFuncSelect/index.tsx

@@ -67,8 +67,8 @@ interface CleanTriggerConfig {
 
 
 type MultiFuncSelectProps = {
-    contentRef?: React.RefObject<any>;
-    popupRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
+    popupRef?: React.ForwardedRef<any>; // could use "Array" on popupRef.current, such as popupRef.current[0], popupRef.current[1]
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/lib/esm/MultipleCheckboxes/index.tsx

@@ -14,7 +14,7 @@ interface OptionConfig {
 
 
 type MultipleCheckboxesProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
     wrapperClassName?: string;
     tableLayout?: boolean;
     tableLayoutClassName?: string;
@@ -517,7 +517,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                             type="hidden"
                             id={idRes}
                             name={name}
-                            value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(valRes(selectedItems)) : valRes(selectedItems).join(',')}
+                            value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(valRes(selectedItems)) : valRes(selectedItems).join(',')} // do not use `defaultValue`
                             required={required || null}
                             {...attributes}
                         />
@@ -545,7 +545,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
                             type="hidden"
                             id={idRes}
                             name={name}
-                            value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(valRes(selectedItems)) : valRes(selectedItems).join(',')}
+                            value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(valRes(selectedItems)) : valRes(selectedItems).join(',')} // do not use `defaultValue`
                             required={required || null}
                             {...attributes}
                         />

package/lib/esm/MultipleSelect/index.tsx

@@ -415,7 +415,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                     type="hidden"
                     id={idRes}
                     name={name}
-                    value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(valSelected) : valSelected.join(',')}
+                    value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(valSelected) : valSelected.join(',')} // do not use `defaultValue`
                     required={required || null}
                     {...attributes}
                 />

package/lib/esm/Radio/index.tsx

@@ -22,7 +22,7 @@ type RadioOptionChangeFnType = (arg1: any, arg2: any, arg3?: any, arg4?: any) =>
 
 
 type RadioProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
     wrapperClassName?: string;
     groupWrapperClassName?: string;
     groupLabelClassName?: string;

package/lib/esm/Table/TableFieldRow.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useImperativeHandle } from 'react';
+import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
 
 // HAS CHECKBOX
 
@@ -15,7 +15,7 @@ import { removeItemOnce, formatCheckboxControlVal, setCheckboxCheckedData, forma
 -------------------------------------------------*/
 type TableFieldRowProps = {
     tableRootRef: React.RefObject<any>;
-    tableCheckRef?: React.RefObject<any>;
+    tableCheckRef?: React.ForwardedRef<any>; // could use "Array" on tableCheckRef.current, such as tableCheckRef.current[0], tableCheckRef.current[1]
     rowActiveClassName?: string;
     fieldsChecked?: boolean[] | boolean;
     fieldsCheckedAct?: any[];
@@ -82,6 +82,9 @@ const TableFieldRow = (props: TableFieldRowProps) => {
     const contentRef = useRef<any>(null);
     const checkboxRef = useRef<any>(null);
     const [firstInitCheckboxes, setFirstInitCheckboxes] = useState<boolean>(false);
+    const [checkboxDefaultVal, setCheckboxDefaultVal] = useState<null | boolean>(null);
+    
+
     
     //
     const [fieldsCheckedUpdateDataPrint, setFieldsCheckedUpdateDataPrint] = fieldsCheckedAct || [null, null];
@@ -188,8 +191,10 @@ const TableFieldRow = (props: TableFieldRowProps) => {
             if (typeof rowKey !== 'undefined' && typeof getCheckedData !== 'undefined') setCheckboxCheckedData(getCheckedData, rowKey, fieldsChecked[Number(rowIndex)]);
             // Update checked data
             updategetCheckedData(_checkedData);
-            setFirstInitCheckboxes(true);
             updateFirstInitCheckboxesClassName(true);
+            //
+            setFirstInitCheckboxes(true);
+            
 
             return _checkedData;
         } else {
@@ -320,6 +325,11 @@ const TableFieldRow = (props: TableFieldRowProps) => {
     }
 
 
+    // to aviod `Warning: Cannot update a component (ComponentName) while rendering a different component`
+    useEffect(() => {
+        setCheckboxDefaultVal(latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked || false); // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
+    }, []);
+
 
     return (
         <>
@@ -431,21 +441,40 @@ const TableFieldRow = (props: TableFieldRowProps) => {
 
                         <div className="form-check__wrapper">
                             <div className="form-check d-inline-block">
+                                {checkboxDefaultVal === null ? <>
+                                    <input
+                                        type="checkbox"
+                                        className="form-check-input"
+                                        name={`checkbox-${checkboxNamePrefix}-${rowIndex}`}
+                                        ref={checkboxRef}
+                                        tabIndex={-1}
+                                        data-index={`${rowIndex}`}
+                                        data-key={`${rowKey}`}
+                                        data-use={dataUse}
+                                        defaultValue={`${rowKey}`}
+                                        checked={checkboxDefaultVal !== null ? checkboxDefaultVal : false}
+                                        onChange={(e: any) => {
+                                            checkedAct(e.target, !latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked);
+                                        }}
+                                    />
+                                </> : <>
                                 <input
-                                    type="checkbox"
-                                    className="form-check-input"
-                                    name={`checkbox-${checkboxNamePrefix}-${rowIndex}`}
-                                    ref={checkboxRef}
-                                    tabIndex={-1}
-                                    data-index={`${rowIndex}`}
-                                    data-key={`${rowKey}`}
-                                    data-use={dataUse}
-                                    value={`${rowKey}`}
-                                    checked={latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked}
-                                    onChange={(e: any) => {
-                                        checkedAct(e.target, !latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked);
-                                    }}
-                                />
+                                        type="checkbox"
+                                        className="form-check-input"
+                                        name={`checkbox-${checkboxNamePrefix}-${rowIndex}`}
+                                        ref={checkboxRef}
+                                        tabIndex={-1}
+                                        data-index={`${rowIndex}`}
+                                        data-key={`${rowKey}`}
+                                        data-use={dataUse}
+                                        defaultValue={`${rowKey}`}
+                                        checked={latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked}
+                                        onChange={(e: any) => {
+                                            checkedAct(e.target, !latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked);
+                                        }}
+                                    />
+                                </>}
+                              
                             </div>
 
                         </div>

package/lib/esm/Table/TableHeaders.tsx

@@ -152,8 +152,8 @@ const TableHeaders = (props: TableHeadersProps) => {
                                         data-index={-1}
                                         data-key="row-all"
                                         data-use=""
-                                        value={`row-all`}
-                                        checked={getCheckedRootData!.filter((cur: any) => cur.key === 'row-all')[0]?.checked}
+                                        defaultValue={`row-all`}
+                                        checked={getCheckedRootData!.filter((cur: any) => cur.key === 'row-all')[0]?.checked || false}  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
                                         onChange={(e: any) => {
                                             checkedAct(e.target, !getCheckedRootData!.filter((cur: any) => cur.key === 'row-all')[0]?.checked);
                                         }}

package/lib/esm/Table/TableRow.tsx

@@ -14,7 +14,7 @@ type TableRowProps = {
     rootDataInfo: any;
     refNode: React.RefObject<any>;
     tableRootRef: React.RefObject<any>;
-    tableCheckRef?: React.RefObject<any>;
+    tableCheckRef?: React.ForwardedRef<any>;
     rowActiveClassName?: string;
     fieldsChecked?: boolean[] | boolean;
     fieldsCheckedAct?: any[];

package/lib/esm/Table/index.tsx

@@ -17,7 +17,7 @@ import { formatRowControlVal, removeCellFocusClassName } from './table-utils';
 
 
 type TableProps = {
-    tableCheckRef?: React.RefObject<any>;
+    tableCheckRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     tableClassName?: string;
     bodyClassName?: string;
@@ -172,6 +172,8 @@ const Table = (props: TableProps) => {
     };
 
     const allRows = () => {
+        if (tbodyRef.current === null) return [];
+
         return [].slice.call(tbodyRef.current.children);
     };
 
@@ -267,6 +269,7 @@ const Table = (props: TableProps) => {
     // checkboxes data
     // ================================================================
     function initCheckboxesData() {
+        if (rootRef.current === null) return;
 
         const _checkboxes = getChildren(rootRef.current.querySelector('table').querySelector('tbody'), '[type="checkbox"]');
         const _data: any[] = [];
@@ -577,16 +580,17 @@ const Table = (props: TableProps) => {
     }, []);
 
 
+    
     return (
         <>
 
-            <div 
-                ref={rootRef} 
-                id={idRes} 
+            <div
+                ref={rootRef}
+                id={idRes}
                 className={`table__wrapper ${wrapperClassName || wrapperClassName === '' ? wrapperClassName : `mb-3 position-relative`} ${responsiveClasses} ${enhancedResponsiveClasses} ${checkableClasses} ${radioClasses} ${draggableClasses} ${sortableClasses}`}
             >
 
-                <table 
+                <table
                     className={`${tableClassName || tableClassName === '' ? tableClassName : "table"} ${tableClasses} ${typeof cellAutoWidth === 'undefined' || cellAutoWidth === false ? '' : 'cell-autowidth'}`}
                 >
 
@@ -657,7 +661,7 @@ const Table = (props: TableProps) => {
                                 evRowClick={onRowClick}
                                 evCellArrowKeys={onCellArrowKeys}
 
-                                
+
                             />;
                         }) : ""
                         }

package/lib/esm/TagInput/index.tsx

@@ -292,7 +292,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
                         type="hidden"
                         id={idRes}
                         name={name}
-                        value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(items.map((item: any) => item.content)) : items.map((item: any) => item.content).join(',')}
+                        value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(items.map((item: any) => item.content)) : items.map((item: any) => item.content).join(',')} // do not use `defaultValue`
                         required={required || null}
                     />
 

package/lib/esm/Textarea/index.tsx

@@ -13,7 +13,7 @@ declare module 'react' {
     }
 }
 type TextareaProps = {
-    contentRef?: React.RefObject<any>;
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;

package/package.json

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