@cloudtower/eagle 0.22.40 → 0.23.1

package/dist/umd/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('antd'), require('react'), require('classnames'), require('lodash'), require('@cloudtower/parrot'), require('@linaria/core'), require('@linaria/react'), require('moment'), require('react-dom'), require('react-is'), require('@ant-design/icons'), require('redux'), require('react-redux'), require('@cloudtower/icons-react'), require('react-beautiful-dnd'), require('timezones.json'), require('react-i18next'), require('dayjs'), require('recharts')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'antd', 'react', 'classnames', 'lodash', '@cloudtower/parrot', '@linaria/core', '@linaria/react', 'moment', 'react-dom', 'react-is', '@ant-design/icons', 'redux', 'react-redux', '@cloudtower/icons-react', 'react-beautiful-dnd', 'timezones.json', 'react-i18next', 'dayjs', 'recharts'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.index = {}, global.antd, global.React, global.cs, global._, global.parrot, global.core, global.react, global.moment, global.reactDom, global.reactIs, global.icons, global.redux, global.reactRedux, global.iconsReact, global.reactBeautifulDnd, global.TimeZones, global.reactI18next, global.dayjs));
-})(this, (function (exports, antd, React, cs, _, parrot, core, react, moment, reactDom, reactIs, icons, redux, reactRedux, iconsReact, reactBeautifulDnd, TimeZones, reactI18next, dayjs) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('antd'), require('react'), require('classnames'), require('lodash'), require('react-i18next'), require('@linaria/core'), require('@linaria/react'), require('moment'), require('react-dom'), require('react-is'), require('@ant-design/icons'), require('redux'), require('react-redux'), require('@cloudtower/icons-react'), require('react-beautiful-dnd'), require('timezones.json'), require('@cloudtower/parrot'), require('dayjs'), require('recharts')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'antd', 'react', 'classnames', 'lodash', 'react-i18next', '@linaria/core', '@linaria/react', 'moment', 'react-dom', 'react-is', '@ant-design/icons', 'redux', 'react-redux', '@cloudtower/icons-react', 'react-beautiful-dnd', 'timezones.json', '@cloudtower/parrot', 'dayjs', 'recharts'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.index = {}, global.antd, global.React, global.cs, global._, global.reactI18next, global.core, global.react, global.moment, global.reactDom, global.reactIs, global.icons, global.redux, global.reactRedux, global.iconsReact, global.reactBeautifulDnd, global.TimeZones, global.parrot, global.dayjs));
+})(this, (function (exports, antd, React, cs, _, reactI18next, core, react, moment, reactDom, reactIs, icons, redux, reactRedux, iconsReact, reactBeautifulDnd, TimeZones, parrot, dayjs) { 'use strict';
 
   const MAGIC_METRIC_NULL = -2;
   function formatBits(bits, decimals = 2) {
@@ -461,10 +461,11 @@
   };
 
   const Arch = (props) => {
+    const { t } = reactI18next.useTranslation();
     const { architecture } = props;
     let text = "";
     if (architecture) {
-      text = parrot.parrotI18n.t(`components.Architecture_${architecture}`);
+      text = t(`components.Architecture_${architecture}`);
     }
     return /* @__PURE__ */ React.createElement("span", null, text);
   };
@@ -959,11 +960,12 @@
     valueClassName,
     unitClassName
   }) => {
+    const { t } = reactI18next.useTranslation();
     if (isEmpty(rawValue)) {
       return Empty;
     }
     if (rawValue === -1) {
-      return /* @__PURE__ */ React.createElement("span", null, parrot.parrotI18n.t("common.calculation"));
+      return /* @__PURE__ */ React.createElement("span", null, t("common.calculation"));
     }
     const { value, unit } = formatBytes(rawValue, decimals);
     if (noUnitOnZero && value === 0) {
@@ -2581,10 +2583,11 @@
   };
   const Modal = (props) => {
     var _b;
+    const { t } = reactI18next.useTranslation();
     const _a = props, {
       error,
-      okText = parrot.parrotI18n.t("common.confirm"),
-      cancelText = parrot.parrotI18n.t("common.cancel"),
+      okText = t("common.confirm"),
+      cancelText = t("common.cancel"),
       confirmLoading,
       okButtonProps,
       onOk,
@@ -2633,12 +2636,12 @@
       let text = (okButtonProps == null ? void 0 : okButtonProps.children) || okText;
       if (wizard && typeof wizard === "object" && wizard.steps[wizard.step]) {
         const { step, steps } = wizard;
-        text = step < steps.length - 1 ? steps[step].okText || parrot.parrotI18n.t("common.next_step") : steps[step].okText || text;
+        text = step < steps.length - 1 ? steps[step].okText || t("common.next_step") : steps[step].okText || text;
       }
       return text;
-    }, [okButtonProps, okText, wizard]);
+    }, [okButtonProps == null ? void 0 : okButtonProps.children, okText, t, wizard]);
     const prevText = React.useMemo(() => {
-      let text = /* @__PURE__ */ React.createElement("span", null, "< ", parrot.parrotI18n.t("common.prev_step"));
+      let text = /* @__PURE__ */ React.createElement("span", null, "< ", t("common.prev_step"));
       if (wizard && typeof wizard === "object" && wizard.steps[wizard.step]) {
         const { step, steps } = wizard;
         if (typeof steps[step].prevText === "string") {
@@ -2648,7 +2651,7 @@
         }
       }
       return text;
-    }, [wizard]);
+    }, [t, wizard]);
     const stepsRef = React.useRef([]);
     if (wizard && typeof wizard === "object" && !wizard.destroyOtherStep && wizard.steps[wizard.step]) {
       stepsRef.current[wizard.step] = wizard.steps[wizard.step].render;
@@ -2765,6 +2768,9 @@
       selectorVisible = true
     } = props;
     const sizeRef = React.useRef(size);
+    const {
+      t
+    } = reactI18next.useTranslation();
     React.useEffect(() => {
       if (sizeRef.current === size) return;
       sizeRef.current = size;
@@ -2779,18 +2785,18 @@
         const lastRange2 = value + size;
         return {
           value: i + 1,
-          text: parrot.parrotI18n.t("components.pagination_range", {
+          text: t("components.pagination_range", {
             range1: value + 1,
             range2: lastRange2 > count ? count : lastRange2
           })
         };
       });
-    }, [selectorVisible, count, size]);
+    }, [selectorVisible, count, size, t]);
     let lastRange = current * size;
     lastRange = lastRange > count ? count : lastRange;
     const renderLeft = () => {
       if (!showTotal) return null;
-      const content = parrot.parrotI18n.t("components.pagination_total", {
+      const content = t("components.pagination_total", {
         range1: (current - 1) * size + 1,
         range2: lastRange,
         total: count
@@ -2800,7 +2806,7 @@
           placement: "topLeft",
           overlayClassName: DropdownOverlayStyle,
           overlay: /* @__PURE__ */React.createElement(antd.Menu, null, /* @__PURE__ */React.createElement(antd.Menu.ItemGroup, {
-            title: parrot.parrotI18n.t("components.push_to")
+            title: t("components.push_to")
           }, selectOptions.map(option => /* @__PURE__ */React.createElement(antd.Menu.Item, {
             key: option.value,
             onClick: () => onChange(option.value)
@@ -2835,7 +2841,7 @@
       onClick: () => {
         onChange == null ? void 0 : onChange(current - 1);
       }
-    }, parrot.parrotI18n.t("components.previous_items", {
+    }, t("components.previous_items", {
       size
     })), current * size < count && /* @__PURE__ */React.createElement(Button, {
       className: "next-btn",
@@ -2848,7 +2854,7 @@
       onClick: () => {
         onChange == null ? void 0 : onChange(current + 1);
       }
-    }, parrot.parrotI18n.t("components.next_items", {
+    }, t("components.next_items", {
       size
     }))));
   };
@@ -3059,11 +3065,12 @@
     unitClassName,
     abbreviate
   }) => {
+    const { t } = reactI18next.useTranslation();
     if (isEmpty(rawValue)) {
       return Empty;
     }
     const { value, unit } = formatSeconds(rawValue, decimals);
-    return /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: core.cx("value", valueClassName) }, value, " "), /* @__PURE__ */ React.createElement("span", { className: core.cx("unit", unitClassName) }, parrot.parrotI18n.t(`common.${abbreviate ? `${unit}_abbreviation` : unit}`)));
+    return /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: core.cx("value", valueClassName) }, value, " "), /* @__PURE__ */ React.createElement("span", { className: core.cx("unit", unitClassName) }, t(`common.${abbreviate ? `${unit}_abbreviation` : unit}`)));
   };
 
   const inputStyle = "igz4le8";
@@ -3075,6 +3082,9 @@
       size,
       onPageChange
     } = props;
+    const {
+      t
+    } = reactI18next.useTranslation();
     const pageLength = Math.ceil(count / size);
     const showPrev = current > 1;
     const showNext = current * size < count;
@@ -3090,7 +3100,7 @@
       className: cs(PaginationStyle, "pagination-wrapper", className)
     }, /* @__PURE__ */React.createElement("span", {
       className: Typo.Label.l3_regular_title
-    }, parrot.parrotI18n.t("components.pagination_lots_total", {
+    }, t("components.pagination_lots_total", {
       total: count
     })), /* @__PURE__ */React.createElement("span", {
       className: "pagination-right"
@@ -3524,6 +3534,7 @@
       updateData,
       data
     } = props;
+    const { t } = reactI18next.useTranslation();
     const _a = buttonProps || {}, {
       disabled: disabledFromProp,
       onClick
@@ -3564,7 +3575,7 @@
         },
         disabled
       }),
-      CustomizedButtonText || parrot.parrotI18n.t("components.add")
+      CustomizedButtonText || t("components.add")
     ), typeof maximum === "number" ? /* @__PURE__ */ React.createElement(
       "span",
       {
@@ -3574,7 +3585,7 @@
           disabled && "disabled"
         )
       },
-      parrot.parrotI18n.t("components.maximum_row_count_desc", {
+      t("components.maximum_row_count_desc", {
         count: maximum
       })
     ) : null);
@@ -3583,6 +3594,7 @@
   const AffixColumnHeaderCell = ({ data, column, onChange, onBlur }) => {
     const [suffix, setSuffix] = React.useState("");
     const [prefix, setPrefix] = React.useState("");
+    const { t } = reactI18next.useTranslation();
     const onPrefixChange = React.useCallback(
       (e) => {
         const newPrefix = e.target.value;
@@ -3603,7 +3615,7 @@
       antd.Input,
       {
         value: prefix,
-        placeholder: parrot.parrotI18n.t("components.prefix"),
+        placeholder: t("components.prefix"),
         size: "small",
         onChange: onPrefixChange,
         onBlur
@@ -3612,7 +3624,7 @@
       antd.Input,
       {
         value: suffix,
-        placeholder: parrot.parrotI18n.t("components.suffix"),
+        placeholder: t("components.suffix"),
         size: "small",
         onChange: onSuffixChange,
         onBlur
@@ -3620,6 +3632,15 @@
     ) : void 0);
   };
 
+  const CheckboxColumnHeaderCell = ({ onChange }) => {
+    const _onChange = React.useCallback(
+      (e) => {
+        onChange(e.target.checked, true);
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ React.createElement(antd.Checkbox, { onChange: _onChange });
+  };
   const CheckboxColumnBodyCell = ({ data, column, index, onChange }) => {
     const value = data[index][column.key] === void 0 ? column.defaultValue : data[index][column.key];
     const _onChange = React.useCallback(
@@ -3757,11 +3778,7 @@
       column.subTitle
     );
   };
-  const TextColumnBodyCell = ({
-    data,
-    column,
-    index
-  }) => {
+  const TextColumnBodyCell = ({ data, column, index }) => {
     const text = column.displayText || data[index][column.key];
     const CellDescription = React.useMemo(() => {
       var _a, _b;
@@ -3790,7 +3807,7 @@
     input: InputColumnHeaderCell,
     password: InputColumnHeaderCell,
     affix: AffixColumnHeaderCell,
-    checkbox: TextColumnHeaderCell
+    checkbox: CheckboxColumnHeaderCell
   };
   const ColumnBodyImpls = {
     text: TextColumnBodyCell,
@@ -3810,10 +3827,17 @@
     return /* @__PURE__ */React.createElement(antd.Form.Item, {
       className: FormItemStyle,
       validateStatus,
-      help: validateStatus ? message : ""
+      help: validateStatus && message ? message : void 0
     }, children);
   };
 
+  var ValidateTriggerType = /* @__PURE__ */ ((ValidateTriggerType2) => {
+    ValidateTriggerType2[ValidateTriggerType2["Normal"] = 0] = "Normal";
+    ValidateTriggerType2[ValidateTriggerType2["Aggressive"] = 1] = "Aggressive";
+    ValidateTriggerType2[ValidateTriggerType2["Lazy"] = 2] = "Lazy";
+    return ValidateTriggerType2;
+  })(ValidateTriggerType || {});
+
   var __defProp$5 = Object.defineProperty;
   var __defProps$5 = Object.defineProperties;
   var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
@@ -3836,40 +3860,77 @@
   const TableFormBodyCell = (props) => {
     const {
       column,
-      disabled,
       index: rowIndex,
       data,
-      onChange,
       latestData,
+      validateTriggerType,
       isRowError,
-      onBlur
+      getRowValidateResult,
+      disabled,
+      onChange,
+      onBlur,
+      validateAll
     } = props;
+    const [validateResult, setValidateResult] = React.useState();
+    const isTouched = React.useRef(false);
     const width = typeof column.width === "number" ? column.width + "px" : column.width;
-    const _onChange = React.useCallback(
-      (value, data2) => {
-        const newData = data2.map(
-          (row, i) => i === rowIndex ? __spreadProps$5(__spreadValues$5({}, row), { [column.key]: value }) : row
-        );
-        onChange == null ? void 0 : onChange(newData, rowIndex, column.key);
+    const triggerValidate = React.useCallback(
+      (currentValue) => {
+        var _a;
+        const value = currentValue || data[rowIndex][column.key];
+        const rowData = __spreadProps$5(__spreadValues$5({}, data[rowIndex]), { [column.key]: value });
+        const rowValidateRes = getRowValidateResult(rowData);
+        if (rowValidateRes) {
+          return;
+        }
+        const result = (_a = column.validator) == null ? void 0 : _a.call(column, {
+          value,
+          rowIndex,
+          rowData: data[rowIndex]
+        });
+        const isError = result ? typeof result === "string" : false;
+        setValidateResult({ msg: result || "", isError });
       },
-      [rowIndex, onChange, column]
+      [data, column, rowIndex, getRowValidateResult]
     );
+    React.useEffect(() => {
+      if (validateAll) {
+        isTouched.current = true;
+        triggerValidate();
+      }
+    }, [validateAll, triggerValidate]);
+    const _onChange = (value, data2) => {
+      const newData = data2.map(
+        (row, i) => i === rowIndex ? __spreadProps$5(__spreadValues$5({}, row), { [column.key]: value }) : row
+      );
+      onChange == null ? void 0 : onChange(newData, rowIndex, column.key);
+      if (validateTriggerType === ValidateTriggerType.Normal && isTouched.current || validateTriggerType === ValidateTriggerType.Aggressive) {
+        triggerValidate(value);
+      }
+    };
     const _onBlur = React.useCallback(() => {
+      isTouched.current = true;
+      triggerValidate();
       onBlur == null ? void 0 : onBlur(data, rowIndex, column.key);
-    }, [rowIndex, column, onBlur, data]);
+    }, [rowIndex, column, onBlur, data, triggerValidate]);
     const renderDefaultComponent = () => {
       if (!column.type)
         return null;
       const CellComponent = ColumnBodyImpls[column.type];
       return /* @__PURE__ */ React.createElement(
         CellComponent,
-        __spreadProps$5(__spreadValues$5({}, props), {
-          customData: column.customData,
+        {
+          disabled,
+          data,
+          index: rowIndex,
+          latestData,
+          column,
+          visible: props.visible,
           onChange: (val) => {
             _onChange(val, data);
           },
           onBlur: _onBlur
-        })
+        }
       );
     };
     const Cell = column.render ? column.render({
@@ -3894,24 +3955,6 @@
       })) || null;
       return typeof Result === "string" ? /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l4_regular, "cell-description") }, Result) : Result;
     }, [rowIndex, data, latestData, column]);
-    const validateResult = React.useMemo(() => {
-      var _a;
-      if (isRowError) {
-        return {
-          msg: "",
-          isError: true
-        };
-      }
-      const value = data[rowIndex][column.key];
-      const result = (_a = column.validator) == null ? void 0 : _a.call(column, {
-        value,
-        rowIndex,
-        rowData: data[rowIndex]
-      });
-      if (typeof result === "string" && result) {
-        return { msg: result, isError: true };
-      }
-    }, [data, column, rowIndex, isRowError]);
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -3925,8 +3968,8 @@
       /* @__PURE__ */ React.createElement(
         FormItem,
         {
-          validateStatus: (validateResult == null ? void 0 : validateResult.isError) ? "error" : "",
-          message: (validateResult == null ? void 0 : validateResult.isError) && validateResult.msg ? validateResult.msg : void 0
+          validateStatus: isRowError || (validateResult == null ? void 0 : validateResult.isError) ? "error" : "",
+          message: isRowError ? "" : validateResult == null ? void 0 : validateResult.msg
         },
         Cell
       ),
@@ -3960,24 +4003,36 @@
       latestData,
       disabled,
       passwordVisible,
-      deletable,
+      deleteConfig,
       draggable,
       rowIndex,
       provided,
       snapshot,
+      validateTriggerType = ValidateTriggerType.Normal,
       updateData,
       onBodyBlur,
       renderRowDescription,
-      rowValidator
+      rowValidator,
+      validateAll
     } = props;
+    const { t } = reactI18next.useTranslation();
     const rowData = data[rowIndex];
-    const deleteRow = (index, data2) => {
-      const newData = [...data2];
-      newData.splice(index, 1);
-      updateData(newData);
-    };
-    const getRowActions = (index, rowDeletable) => {
-      const isRowDeleteDisabled = rowDeletable === false;
+    const [rowError, setRowError] = React.useState();
+    const deleteRow = React.useCallback(
+      (index, data2) => {
+        const newData = [...data2];
+        newData.splice(index, 1);
+        updateData(newData);
+      },
+      [updateData]
+    );
+    const RowActions = React.useMemo(() => {
+      var _a;
+      const isRowDeleteDisabled = (_a = deleteConfig == null ? void 0 : deleteConfig.specifyRowDeleteDisabled) == null ? void 0 : _a.call(
+        deleteConfig,
+        rowIndex,
+        data
+      );
       const DeleteIcon = /* @__PURE__ */ React.createElement(
         Icon,
         {
@@ -3987,20 +4042,21 @@
           onClick: () => {
             if (isRowDeleteDisabled)
               return;
-            deleteRow(index, data);
+            deleteRow(rowIndex, data);
           }
         }
       );
-      const FinalRenderIcon = isRowDeleteDisabled ? DeleteIcon : /* @__PURE__ */ React.createElement(Tooltip, { title: parrot.parrotI18n.t("components.remove") }, DeleteIcon);
-      return deletable ? [FinalRenderIcon] : void 0;
-    };
-    const RowValidateResult = React.useMemo(() => {
-      const result = rowValidator == null ? void 0 : rowValidator(rowIndex, data[rowIndex]);
-      if (typeof result === "string" && result) {
-        return /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l4_regular, "row-error-message") }, result);
-      }
-      return null;
-    }, [rowValidator, rowIndex, data]);
+      const FinalRenderIcon = isRowDeleteDisabled ? DeleteIcon : /* @__PURE__ */ React.createElement(Tooltip, { title: t("components.remove") }, DeleteIcon);
+      return (deleteConfig == null ? void 0 : deleteConfig.deletable) ? [FinalRenderIcon] : void 0;
+    }, [rowIndex, deleteConfig, data, deleteRow]);
+    const getRowValidateResult = React.useCallback(
+      (rowData2) => {
+        const result = rowValidator == null ? void 0 : rowValidator(rowIndex, rowData2);
+        setRowError(result);
+        return result;
+      },
+      [rowValidator, rowIndex]
+    );
     const Cells = columns.map((col) => {
       return /* @__PURE__ */ React.createElement(
         TableFormBodyCell,
@@ -4014,7 +4070,10 @@
           onChange: updateData,
           onBlur: onBodyBlur,
           visible: passwordVisible,
-          isRowError: !!RowValidateResult
+          validateTriggerType,
+          isRowError: !!rowError,
+          getRowValidateResult,
+          validateAll
         }
       );
     });
@@ -4044,11 +4103,11 @@
           "eagle-table-form-row",
           (snapshot == null ? void 0 : snapshot.isDragging) && "isDragging"
         ),
-        actions: getRowActions(rowIndex, rowData.deletable)
+        actions: RowActions
       },
       DraggableHandle,
       Cells,
-      RowValidateResult,
+      rowError ? /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l4_regular, "row-error-message") }, rowError) : null,
       RowDescription
     );
   };
@@ -4116,7 +4175,7 @@
     const [errMsg, setErrMsg] = React.useState();
     const width = Number.isNaN(Number(column.width)) ? column.width : column.width + "px";
     const headerOnChange = React.useCallback(
-      (value) => {
+      (value, shouldUpdateData = false) => {
         var _a;
         const err = (_a = column.validator) == null ? void 0 : _a.call(column, { value, isHeader: true });
         setErrMsg(err || void 0);
@@ -4126,7 +4185,7 @@
             [column.key]: shouldAutoIncrease && typeof value === "string" ? increaseLastNumber(value, rowIndex) : value
           });
         });
-        onChange == null ? void 0 : onChange(newData, column.key);
+        onChange == null ? void 0 : onChange(newData, column.key, shouldUpdateData);
       },
       [onChange, data, column]
     );
@@ -4162,14 +4221,14 @@
           visibility: column.hidden ? "hidden" : "visible"
         }
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l3_bold_title, TitleStyle) }, column.title),
+      disableBatchFilling ? null : /* @__PURE__ */ React.createElement(
         FormItem,
         {
           validateStatus: typeof errMsg === "string" && errMsg ? "error" : "",
           message: errMsg || void 0
         },
-        /* @__PURE__ */ React.createElement("p", { className: core.cx(Typo.Label.l3_bold_title, TitleStyle) }, column.title),
-        disableBatchFilling ? null : renderCell()
+        renderCell()
       )
     );
   };
@@ -4196,16 +4255,18 @@
   const DEFAULT_ROW_COUNT = 3;
   const TableForm = React.forwardRef(
     ({
-      defaultData,
+      defaultData = [],
       columns,
       disabled,
       rowAddConfig,
-      deletable,
+      deleteConfig,
       size = "default",
       className,
       draggable,
       disableBatchFilling = false,
       rowSplitType = "border",
+      validateTriggerType,
+      maxHeight,
       renderRowDescription,
       rowValidator,
       onHeaderChange,
@@ -4213,12 +4274,10 @@
       onBodyChange,
       onBodyBlur
     }, ref) => {
-      const treatedDefaultData = React.useMemo(() => {
-        return defaultData || [...Array(DEFAULT_ROW_COUNT)].map(() => genEmptyRow(columns));
-      }, [defaultData, columns]);
-      const [data, setData] = React.useState(treatedDefaultData);
+      const [data, setData] = React.useState(defaultData);
       const [passwordVisible, setPasswordVisible] = React.useState(false);
-      const [latestData, setLatestData] = React.useState(treatedDefaultData);
+      const [latestData, setLatestData] = React.useState(defaultData);
+      const [validateAll, setValidateAll] = React.useState(false);
       const updateData = React.useCallback(
         (value, rowIndex, columnKey) => {
           setLatestData(value);
@@ -4227,12 +4286,23 @@
         },
         [onBodyChange]
       );
+      React.useLayoutEffect(() => {
+        if (defaultData.length === 0) {
+          updateData(
+            [...Array(DEFAULT_ROW_COUNT)].map(() => genEmptyRow(columns))
+          );
+        }
+      }, []);
       const handleBatchChange = React.useCallback(
-        (newData, columnKey) => {
+        (newData, columnKey, shouldUpdateData) => {
           setLatestData(newData);
           onHeaderChange == null ? void 0 : onHeaderChange(newData, columnKey);
+          if (shouldUpdateData) {
+            setData(newData);
+            onBodyChange == null ? void 0 : onBodyChange(newData, void 0, columnKey);
+          }
         },
-        [onHeaderChange]
+        [onHeaderChange, onBodyChange]
       );
       const handleBatchBlur = React.useCallback(
         (key, error) => {
@@ -4257,6 +4327,9 @@
         () => ({
           setData: (data2) => {
             updateData(data2);
+          },
+          validateWholeFields() {
+            setValidateAll(true);
           }
         }),
         [updateData]
@@ -4277,31 +4350,46 @@
           }
         );
       });
-      return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(TableFormWrapper, { className: `table-form row-split-by-${rowSplitType}` }, /* @__PURE__ */ React.createElement(antd.List, { size, className: `size-${size}` }, /* @__PURE__ */ React.createElement(
-        antd.List.Item,
+      const tableFormWrapperStyle = React.useMemo(
+        () => maxHeight ? {
+          maxHeight: typeof maxHeight === "number" ? maxHeight + "px" : maxHeight
+        } : void 0,
+        []
+      );
+      return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
+        TableFormWrapper,
         {
-          className: "eagle-table-form-header",
-          actions: deletable ? [/* @__PURE__ */ React.createElement(React.Fragment, null)] : void 0
+          className: `table-form row-split-by-${rowSplitType}`,
+          style: tableFormWrapperStyle
         },
-        draggable ? /* @__PURE__ */ React.createElement(DraggableHandleWrapper, null) : null,
-        headerCells
-      ), /* @__PURE__ */ React.createElement(
-        TableFormBodyRows,
-        {
-          data,
-          latestData,
-          columns,
-          passwordVisible,
-          deletable,
-          disabled,
-          draggable,
-          rowSplitType,
-          onBodyBlur,
-          updateData,
-          renderRowDescription,
-          rowValidator
-        }
-      ))), (rowAddConfig == null ? void 0 : rowAddConfig.addible) ? /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(antd.List, { size, className: `size-${size}` }, /* @__PURE__ */ React.createElement(
+          antd.List.Item,
+          {
+            className: "eagle-table-form-header",
+            actions: (deleteConfig == null ? void 0 : deleteConfig.deletable) ? [/* @__PURE__ */ React.createElement(React.Fragment, null)] : void 0
+          },
+          draggable ? /* @__PURE__ */ React.createElement(DraggableHandleWrapper, null) : null,
+          headerCells
+        ), /* @__PURE__ */ React.createElement(
+          TableFormBodyRows,
+          {
+            data,
+            latestData,
+            columns,
+            passwordVisible,
+            deleteConfig,
+            disabled,
+            draggable,
+            rowSplitType,
+            validateTriggerType,
+            onBodyBlur,
+            updateData,
+            renderRowDescription,
+            rowValidator,
+            validateAll
+          }
+        ))
+      ), (rowAddConfig == null ? void 0 : rowAddConfig.addible) ? /* @__PURE__ */ React.createElement(
         AddRowButton,
         {
           config: rowAddConfig,
@@ -4355,6 +4443,9 @@
       defaultOptionValue
     } = props;
     const [innerValue, setInnerValue] = React.useState(value);
+    const {
+      t
+    } = reactI18next.useTranslation();
     const defaultTz = React.useMemo(() => {
       return allTimeZones.find(tz => tz.value === defaultOptionValue);
     }, [defaultOptionValue]);
@@ -4397,7 +4488,7 @@
     return /* @__PURE__ */React.createElement(Select, {
       className: core.cx(SelectStyle, className),
       dropdownClassName: DropdownStyle,
-      placeholder: /* @__PURE__ */React.createElement("span", null, placeholder || parrot.parrotI18n.t("components.time_zone_select_placeholder")),
+      placeholder: /* @__PURE__ */React.createElement("span", null, placeholder || t("components.time_zone_select_placeholder")),
       value: innerValue,
       onChange: _onChange,
       showSearch: true,
@@ -4409,26 +4500,26 @@
       input: {}
     }, defaultTz ? /* @__PURE__ */React.createElement(antd.Select.Option, {
       value: DefaultTimeValue,
-      label: parrot.parrotI18n.t("components.default_time_zone"),
+      label: `${t("components.default_time_zone")} (${getUTCOffsetText(defaultTz.offset)})`,
       className: OptionWrapperStyle
     }, /* @__PURE__ */React.createElement(TimeZoneOption, {
       key: DefaultTimeValue,
-      customLabel: parrot.parrotI18n.t("components.default_time_zone"),
+      customLabel: t("components.default_time_zone"),
       timeZone: defaultTz
     })) : void 0, /* @__PURE__ */React.createElement(antd.Select.Option, {
       value: BrowserTimeValue,
-      label: parrot.parrotI18n.t("components.browser_time_zone"),
+      label: `${t("components.browser_time_zone")} (${getUTCOffsetText(browserTz.offset)})`,
       className: OptionWrapperStyle
     }, /* @__PURE__ */React.createElement(TimeZoneOption, {
       key: BrowserTimeValue,
-      customLabel: parrot.parrotI18n.t("components.browser_time_zone"),
+      customLabel: t("components.browser_time_zone"),
       timeZone: browserTz
     })), /* @__PURE__ */React.createElement(antd.Select.Option, {
       value: "UTC",
       className: OptionWrapperStyle
     }, /* @__PURE__ */React.createElement(TimeZoneOption, {
       key: "utc",
-      customLabel: parrot.parrotI18n.t("components.coorddinated_universal_time"),
+      customLabel: t("components.coorddinated_universal_time"),
       timeZone: {
         value: "UTC",
         text: "UTC",
@@ -4437,18 +4528,20 @@
       }
     })), timeZoneOptionGroups);
   };
+  function getUTCOffsetText(offset) {
+    if (offset === 0) {
+      return "UTC";
+    } else if (offset < 0) {
+      return `UTC${offset}:00`;
+    } else {
+      return `UTC+${offset}:00`;
+    }
+  }
   const TimeZoneOption = ({
     timeZone,
     customLabel
   }) => {
-    let tagText = "";
-    if (timeZone.offset === 0) {
-      tagText = "UTC";
-    } else if (timeZone.offset < 0) {
-      tagText = `UTC${timeZone.offset}:00`;
-    } else {
-      tagText = `UTC+${timeZone.offset}:00`;
-    }
+    let tagText = getUTCOffsetText(timeZone.offset);
     return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
       className: OptionFirstLineStyle
     }, /* @__PURE__ */React.createElement("span", {
@@ -4472,6 +4565,7 @@
       pagination: Pagination,
       select: Select,
       option: antd.Select.Option,
+      selectOptGroup: antd.Select.OptGroup,
       table: Table,
       row: antd.Row,
       col: antd.Col,
@@ -4543,7 +4637,8 @@
       antdMessage: antd.message,
       antdButton: antd.Button,
       antdSelect: antd.Select,
-      antdTooltip: antd.Tooltip
+      antdTooltip: antd.Tooltip,
+      antdModal: antd.Modal
     };
     kit.option.isSelectOption = true;
     kit.button.__ANT_BUTTON = true;
@@ -4577,6 +4672,9 @@
       title,
       refetchText
     } = props;
+    const {
+      t
+    } = reactI18next.useTranslation();
     return /* @__PURE__ */React.createElement("div", {
       className: cs(FailedLoadStyle, className),
       title
@@ -4585,7 +4683,7 @@
     }, String(error)), /* @__PURE__ */React.createElement(Button, {
       type: "ordinary",
       onClick: () => refetch()
-    }, refetchText || parrot.parrotI18n.t("common.retry")));
+    }, refetchText || t("common.retry")));
   };
 
   function getRangeTimestamp(dateRange) {
@@ -4688,7 +4786,7 @@
   var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const kitContext = React.createContext(antdKit);
   const UIKitProvider = (props) => {
-    const { children, kit = antdKit, message } = props;
+    const { children, kit = antdKit, message, antdConfig } = props;
     const _kit = React.useMemo(() => {
       if ((message == null ? void 0 : message.batch) != null) {
         return __spreadProps(__spreadValues({}, kit), {
@@ -4697,7 +4795,7 @@
       }
       return kit;
     }, [kit, message == null ? void 0 : message.batch]);
-    return /* @__PURE__ */ React.createElement(kitContext.Provider, { value: _kit }, children);
+    return /* @__PURE__ */ React.createElement(reactI18next.I18nextProvider, { i18n: parrot.parrotI18n }, /* @__PURE__ */ React.createElement(kitContext.Provider, { value: _kit }, /* @__PURE__ */ React.createElement(antd.ConfigProvider, __spreadValues({ autoInsertSpaceInButton: false }, antdConfig), children)));
   };
   const useUIKit = () => {
     return React.useContext(kitContext);
@@ -4716,6 +4814,7 @@
   exports.ButtonStyle = ButtonStyle;
   exports.EntityAsyncStatus = EntityAsyncStatus;
   exports.FailedLoad = FailedLoad;
+  exports.FullView = FullView;
   exports.Icon = Icon;
   exports.InputTagItem = InputTagItem;
   exports.KitStoreProvider = KitStoreProvider;
@@ -4726,6 +4825,8 @@
   exports.UIKitProvider = UIKitProvider;
   exports.UIKitStore = UIKitStore;
   exports.UserSource = UserSource;
+  exports.ValidateTriggerType = ValidateTriggerType;
+  exports.WizardBody = WizardBody;
   exports.antdKit = antdKit;
   exports.closeModal = closeModal;
   exports.createBatchMessageMethods = createBatchMessageMethods;