@cloudtower/eagle 0.0.0-config-rc-7 → 0.0.0-data-testid

package/dist/cjs/core/SmallDialog/SmallDialog.style.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const DialogStyle = "E_dxyv8bv";
+const FooterStyle = "E_fbgo4wr";
+const ErrorTextStyle = "E_ekxnz54";
+const CloseIconStyle = "E_ct1041x";
+const ModelTitleSkeletonStyle = "E_m1k84ymw";
+const ModelContentSkeletonStyle = "E_m15ds5xe";
+const ModelInitializingErrorStyle = "E_ma56n19";
+
+exports.CloseIconStyle = CloseIconStyle;
+exports.DialogStyle = DialogStyle;
+exports.ErrorTextStyle = ErrorTextStyle;
+exports.FooterStyle = FooterStyle;
+exports.ModelContentSkeletonStyle = ModelContentSkeletonStyle;
+exports.ModelInitializingErrorStyle = ModelInitializingErrorStyle;
+exports.ModelTitleSkeletonStyle = ModelTitleSkeletonStyle;

package/dist/cjs/core/SmallDialog/SmallDialog.widget.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var core = require('@linaria/core');
+var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
+var React = require('react');
+var SmallDialog_style = require('./SmallDialog.style.js');
+var index = require('../Skeleton/index.js');
+var antd = require('antd');
+var index$1 = require('../Typo/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const ModelTitleSkeleton = () => {
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: core.cx(SmallDialog_style.ModelTitleSkeletonStyle, "initializing-title") }, /* @__PURE__ */ React__default.default.createElement(index.default.Content, null));
+};
+const ModelContentSkeleton = ({ num = 2 }) => {
+  return /* @__PURE__ */ React__default.default.createElement(antd.Space, { direction: "vertical", size: 16, className: SmallDialog_style.ModelContentSkeletonStyle }, Array.from({ length: num }).map((_, index$1) => /* @__PURE__ */ React__default.default.createElement("div", { key: index$1, className: "skeleton-wrapper" }, /* @__PURE__ */ React__default.default.createElement(index.default.Content, null))));
+};
+const ModelInitializingError = ({ error }) => {
+  const { t } = useParrotTranslation();
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: SmallDialog_style.ModelInitializingErrorStyle }, /* @__PURE__ */ React__default.default.createElement("p", { className: index$1.Typo.Display.d3_bold_title }, t("components.initializing_failed")), /* @__PURE__ */ React__default.default.createElement("div", { className: index$1.Typo.Label.l3_regular }, error));
+};
+
+exports.ModelContentSkeleton = ModelContentSkeleton;
+exports.ModelInitializingError = ModelInitializingError;
+exports.ModelTitleSkeleton = ModelTitleSkeleton;

package/dist/cjs/core/Speed/index.js

@@ -5,6 +5,7 @@ var index = require('../Empty/index.js');
 var isEmpty = require('../../utils/isEmpty.js');
 var tower = require('../../utils/tower.js');
 var React = require('react');
+var index$1 = require('../Styled/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -31,13 +32,14 @@ const Speed = ({
   decimals,
   valueClassName,
   unitClassName,
-  emptyProps
+  emptyProps,
+  "data-testid": dataTestId
 }) => {
   if (isEmpty(rawValue)) {
-    return /* @__PURE__ */ React__default.default.createElement(index, __spreadValues({}, emptyProps));
+    return /* @__PURE__ */ React__default.default.createElement(index, __spreadValues({ "data-testid": dataTestId }, emptyProps));
   }
   const { value, unit } = tower.formatSpeed(rawValue, decimals);
-  return /* @__PURE__ */ React__default.default.createElement("span", null, /* @__PURE__ */ React__default.default.createElement("span", { className: core.cx("value", valueClassName) }, value), /* @__PURE__ */ React__default.default.createElement("span", { className: core.cx("unit", unitClassName) }, ` ${unit}`));
+  return /* @__PURE__ */ React__default.default.createElement("span", { "data-testid": dataTestId }, /* @__PURE__ */ React__default.default.createElement("span", { className: core.cx("value", valueClassName) }, value), /* @__PURE__ */ React__default.default.createElement("span", { className: core.cx("unit", index$1.UnitStyle, unitClassName) }, ` ${unit}`));
 };
 var Speed$1 = Speed;
 

package/dist/cjs/core/StepProgress/index.js

@@ -13,7 +13,8 @@ const CircleProgress = props => {
   const {
     percent,
     color = "#0080ff",
-    className
+    className,
+    "data-testid": dataTestId
   } = props;
   const wrapperRef = React.useRef(null);
   const childRef = React.useRef(null);
@@ -34,6 +35,7 @@ const CircleProgress = props => {
     childStyle.transform = `rotate(${deg}deg)`;
   }, [percent, color]);
   return /* @__PURE__ */React__default.default.createElement("div", {
+    "data-testid": dataTestId,
     className: cs__default.default(CircleProgressStyle, className),
     ref: wrapperRef
   }, /* @__PURE__ */React__default.default.createElement("div", {

package/dist/cjs/core/Styled/index.js

@@ -154,6 +154,7 @@ const RadioDesc = /*#__PURE__*/react.styled(_exp3())({
 });
 const radioStyle = "E_r1skkc3l";
 const CannotOperationInfo = "E_c3cobmo";
+const UnitStyle = "E_uqv57uv";
 
 exports.CannotOperationInfo = CannotOperationInfo;
 exports.CommonContent = CommonContent;
@@ -191,6 +192,7 @@ exports.RightEndSelectStyle = RightEndSelectStyle;
 exports.SelectOptionDisabledText = SelectOptionDisabledText;
 exports.TagSpan = TagSpan;
 exports.TertiaryText = TertiaryText;
+exports.UnitStyle = UnitStyle;
 exports.WarningAlert = WarningAlert;
 exports.WizardBody = WizardBody;
 exports.radioStyle = radioStyle;

package/dist/cjs/core/Switch/index.js

@@ -43,9 +43,10 @@ const Switch = _a => {
     {
       children,
       className,
-      checked
+      checked,
+      "data-testid": dataTestId
     } = _b,
-    props = __objRest(_b, ["children", "className", "checked"]);
+    props = __objRest(_b, ["children", "className", "checked", "data-testid"]);
   const Content = /*#__PURE__*/react.styled('span')({
     name: "Content",
     class: "E_c1up6e3y",
@@ -55,7 +56,8 @@ const Switch = _a => {
   if (props.size === "large") classNames.push("ant-switch-large");
   return /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */React__default.default.createElement(antd.Switch, __spreadProps(__spreadValues({
     className: core.cx(...classNames),
-    checked: checked || false
+    checked: checked || false,
+    "data-testid": dataTestId
   }, props), {
     size: props.size
   })), children ? /* @__PURE__ */React__default.default.createElement(Content, null, children) : null);

package/dist/cjs/core/Tab/Tab.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var iconsReact = require('@cloudtower/icons-react');
+var core = require('@linaria/core');
+var antd = require('antd');
+var React = require('react');
+var index$1 = require('../Icon/index.js');
+var index = require('../Typo/index.js');
+var Tab_style = require('./Tab.style.js');
+var Tab_type = require('./Tab.type.js');
+var useTabAdaptiveLayout = require('./useTabAdaptiveLayout.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const getSelectedStyle = (key, type, selectedKey, activeTabType) => {
+  return key === selectedKey && activeTabType === type ? ["__selected", index.Typo.Label.l1_bold_title] : [index.Typo.Label.l1_regular];
+};
+const Tab = props => {
+  const {
+    className,
+    contentClassName,
+    tabs,
+    onChange,
+    selectedKey,
+    extraSlot,
+    size = "medium",
+    "data-testid": dataTestId
+  } = props;
+  const tabsRef = React.useRef(null);
+  const extraSlotRef = React.useRef(null);
+  const [isClickedMoreTabItem, setIsClickedMoreTabItem] = React.useState(false);
+  const allTabs = React.useMemo(() => {
+    return tabs.reduce((map, tab) => {
+      map.set(tab.key, tab);
+      return map;
+    }, /* @__PURE__ */new Map([]));
+  }, [tabs]);
+  const selectedTab = React.useMemo(() => allTabs.get(selectedKey), [allTabs, selectedKey]);
+  const moreTabs = useTabAdaptiveLayout.useTabAdaptiveLayout(tabs, tabsRef, extraSlotRef, selectedKey);
+  const activeTabType = React.useMemo(() => {
+    if (moreTabs == null ? void 0 : moreTabs.find(tab => tab.key === (selectedTab == null ? void 0 : selectedTab.key))) {
+      return Tab_type.ActiveTabType.More;
+    }
+    if ((selectedTab == null ? void 0 : selectedTab.key) && allTabs.get(selectedTab.key)) {
+      return Tab_type.ActiveTabType.Common;
+    }
+  }, [moreTabs, allTabs, selectedTab == null ? void 0 : selectedTab.key]);
+  React.useLayoutEffect(() => {
+    var _a;
+    if (!allTabs.get(selectedKey) && ((_a = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a.key)) {
+      onChange == null ? void 0 : onChange(tabs[0].key);
+    }
+  }, [allTabs, onChange, selectedKey, tabs]);
+  return /* @__PURE__ */React__default.default.createElement(Tab_style.TabMenuWrapper, {
+    "data-testid": dataTestId,
+    className: core.cx(className, size)
+  }, /* @__PURE__ */React__default.default.createElement("div", {
+    className: "tab-bar"
+  }, /* @__PURE__ */React__default.default.createElement("div", {
+    ref: tabsRef,
+    className: "common-tab-bar"
+  }, /* tab items */
+  tabs.map(tab => /* @__PURE__ */React__default.default.createElement("span", {
+    className: core.cx("tab-item-title", "common", ...getSelectedStyle(tab.key, Tab_type.ActiveTabType.Common, selectedKey, activeTabType)),
+    key: tab.key,
+    "data-testid": tab["data-testid"],
+    onClick: () => onChange == null ? void 0 : onChange(tab.key)
+  }, typeof tab.title === "function" ? tab.title({
+    isActive: tab.key === selectedKey
+  }) : tab.title)), /* more tab items */
+  moreTabs.length > 0 && /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */React__default.default.createElement(antd.Dropdown, {
+    trigger: ["click"],
+    overlayClassName: Tab_style.MoreThanTooltipStyle,
+    onVisibleChange: visible => setIsClickedMoreTabItem(visible),
+    getPopupContainer: triggerNode => document.querySelector(".tab-bar") || triggerNode,
+    overlay: /* @__PURE__ */React__default.default.createElement(antd.Menu, {
+      className: "menu-wrapper",
+      onClick: params => {
+        setIsClickedMoreTabItem(false);
+        onChange == null ? void 0 : onChange(params.key);
+      }
+    }, moreTabs.map(tab => {
+      return /* @__PURE__ */React__default.default.createElement(antd.Menu.Item, {
+        className: core.cx("tab-menu-item", ...getSelectedStyle(tab.key, Tab_type.ActiveTabType.More, selectedKey, activeTabType)),
+        key: tab.key,
+        "data-testid": tab["data-testid"]
+      }, typeof tab.title === "function" ? tab.title({
+        isActive: tab.key === selectedKey
+      }) : tab.title);
+    }))
+  }, /* @__PURE__ */React__default.default.createElement("span", {
+    className: core.cx("tab-item-title", "more", Tab_style.TabTitleElStyle, activeTabType === Tab_type.ActiveTabType.More && "__selected", activeTabType === Tab_type.ActiveTabType.More ? index.Typo.Label.l1_bold_title : index.Typo.Label.l1_regular),
+    "data-testid": dataTestId ? `${dataTestId}-more` : void 0
+  }, /* @__PURE__ */React__default.default.createElement(index$1, {
+    className: Tab_style.IconStyle,
+    hoverSrc: iconsReact.MoreMenu16BlueIcon,
+    src: iconsReact.MoreMenu16GrayIcon,
+    active: isClickedMoreTabItem
+  }), activeTabType === Tab_type.ActiveTabType.More && /* @__PURE__ */React__default.default.createElement("span", {
+    className: "tab-title-text"
+  }, typeof (selectedTab == null ? void 0 : selectedTab.title) === "function" ? selectedTab == null ? void 0 : selectedTab.title({
+    isActive: true
+  }) : selectedTab == null ? void 0 : selectedTab.title))), extraSlot && /* @__PURE__ */React__default.default.createElement("span", {
+    className: "E_ckaaqep"
+  }))), extraSlot && /* @__PURE__ */React__default.default.createElement("div", {
+    ref: extraSlotRef
+  }, extraSlot)), tabs.map(tab => /* @__PURE__ */React__default.default.createElement("div", {
+    style: {
+      display: tab.key === selectedKey ? "block" : "none"
+    },
+    key: tab.key,
+    className: contentClassName
+  }, tab == null ? void 0 : tab.children)));
+};
+
+exports.Tab = Tab;

package/dist/cjs/core/Tab/Tab.style.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var react = require('@linaria/react');
+
+const TabMenuWrapper = /*#__PURE__*/react.styled('div')({
+  name: "TabMenuWrapper",
+  class: "E_t1tbywr9",
+  propsAsIs: false
+});
+const TabTitleElStyle = "E_ti12z2";
+const MoreThanTooltipStyle = "E_m19lu3v";
+const IconStyle = "E_i1bmwe2m";
+
+exports.IconStyle = IconStyle;
+exports.MoreThanTooltipStyle = MoreThanTooltipStyle;
+exports.TabMenuWrapper = TabMenuWrapper;
+exports.TabTitleElStyle = TabTitleElStyle;

package/dist/cjs/core/Tab/Tab.type.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var ActiveTabType = /* @__PURE__ */ ((ActiveTabType2) => {
+  ActiveTabType2[ActiveTabType2["Common"] = 0] = "Common";
+  ActiveTabType2[ActiveTabType2["More"] = 1] = "More";
+  return ActiveTabType2;
+})(ActiveTabType || {});
+
+exports.ActiveTabType = ActiveTabType;

package/dist/cjs/core/Tab/useTabAdaptiveLayout.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var _ = require('lodash');
+var React = require('react');
+
+const getPlacementWidth = (el) => {
+  if (!el) {
+    return 0;
+  }
+  const computedStyle = window.getComputedStyle(el);
+  const width = el.offsetWidth;
+  const marginLeft = parseInt(computedStyle.marginLeft || "0");
+  const marginRight = parseInt(computedStyle.marginRight || "0");
+  return width + marginLeft + marginRight;
+};
+const useTabAdaptiveLayout = (tabs, tabsRef, extraSlotRef, selectedKey) => {
+  const [moreTabs, setMoreTabs] = React.useState([]);
+  const doAdapt = React.useCallback(() => {
+    if (!tabsRef.current)
+      return;
+    const tabBarEl = tabsRef.current;
+    const tabNodeList = tabBarEl.querySelectorAll(".tab-item-title.common");
+    const moreTabNode = tabBarEl.querySelector(
+      ".tab-item-title.more"
+    );
+    const moreTabPlacementWidth = getPlacementWidth(moreTabNode);
+    tabNodeList.forEach((tab) => tab.classList.remove("__hidden"));
+    const maxContentWidth = getPlacementWidth(tabBarEl.parentElement) - getPlacementWidth(extraSlotRef.current) - moreTabPlacementWidth;
+    let tabsTotalWidth = 24;
+    const hiddenItems = [];
+    let endIndex = Infinity;
+    for (let i = 0; i < tabNodeList.length; i++) {
+      const tab = tabNodeList[i];
+      const tabWidth = getPlacementWidth(tab);
+      if (maxContentWidth >= tabsTotalWidth + tabWidth) {
+        tabsTotalWidth += tabWidth;
+      } else {
+        endIndex = i;
+        break;
+      }
+    }
+    while (endIndex <= tabNodeList.length - 1) {
+      tabNodeList[endIndex].classList.add("__hidden");
+      hiddenItems.push(tabs[endIndex]);
+      endIndex++;
+    }
+    setMoreTabs((prevMoreTabs) => {
+      if (!_.isEqual(hiddenItems, prevMoreTabs)) {
+        return hiddenItems;
+      }
+      return prevMoreTabs;
+    });
+  }, [tabs, tabsRef, extraSlotRef]);
+  React.useEffect(() => {
+    doAdapt();
+  }, [doAdapt, selectedKey]);
+  React.useEffect(() => {
+    var _a;
+    const parentElement = (_a = tabsRef.current) == null ? void 0 : _a.parentElement;
+    if (!parentElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      doAdapt();
+    });
+    resizeObserver.observe(parentElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [doAdapt, tabsRef]);
+  return moreTabs;
+};
+
+exports.useTabAdaptiveLayout = useTabAdaptiveLayout;

package/dist/cjs/core/Table/index.js

@@ -59,7 +59,9 @@ const Table = props => {
     wrapper,
     pagination,
     onRow,
-    skeletonProps
+    skeletonProps,
+    expandable,
+    "data-testid": dataTestId
   } = props;
   const orderRef = React.useRef(null);
   const hasScrollBard = common.useTableBodyHasScrollBar(wrapper, _dataSource);
@@ -95,7 +97,8 @@ const Table = props => {
     return empty;
   }, [empty, error, loading]);
   return /* @__PURE__ */React__default.default.createElement("div", {
-    className: core.cx(TableContainerStyle, "table-container", !hasScrollBard && "no-scroll-bar")
+    className: core.cx(TableContainerStyle, "table-container", !hasScrollBard && "no-scroll-bar"),
+    "data-testid": dataTestId
   }, /* @__PURE__ */React__default.default.createElement(antd.Table, {
     className: cs__default.default(tableStyleCover, !(dataSource == null ? void 0 : dataSource.length) && emptyTableStyle, rowSelection && "has-selection"),
     bordered,
@@ -127,7 +130,8 @@ const Table = props => {
     rowSelection: rowSelection && __spreadProps(__spreadValues({}, rowSelection), {
       columnWidth: 32
     }),
-    showSorterTooltip: false
+    showSorterTooltip: false,
+    expandable
   }));
 };
 var Table$1 = Table;

package/dist/cjs/core/TableForm/AddRowButton.js

@@ -46,9 +46,17 @@ var __objRest = (source, exclude) => {
 };
 const AddRowButton = (props) => {
   const {
-    config: { maximum, className, CustomizedButton, buttonProps, text },
+    config: {
+      maximum,
+      className,
+      CustomizedButton,
+      buttonProps,
+      text,
+      extraAction
+    },
+    style: style$1,
     columns,
-    updateData,
+    addData,
     data
   } = props;
   const { t } = useParrotTranslation();
@@ -63,7 +71,7 @@ const AddRowButton = (props) => {
     const newData = [...data2];
     const newRow = utils.genEmptyRow(columns);
     newData.push(newRow);
-    updateData(newData);
+    addData(newData);
     onClick == null ? void 0 : onClick(e);
   };
   const disabled = React.useMemo(
@@ -80,7 +88,7 @@ const AddRowButton = (props) => {
   if (!columns.length) {
     return null;
   }
-  return CustomizedButton ? /* @__PURE__ */ React__default.default.createElement(CustomizedButton, __spreadValues({}, props)) : /* @__PURE__ */ React__default.default.createElement(style.AddRowButtonWrapper, { className }, /* @__PURE__ */ React__default.default.createElement(
+  return CustomizedButton ? /* @__PURE__ */ React__default.default.createElement(CustomizedButton, __spreadValues({}, props)) : /* @__PURE__ */ React__default.default.createElement(style.AddRowButtonWrapper, { className, style: style$1 }, /* @__PURE__ */ React__default.default.createElement(
     index,
     __spreadProps(__spreadValues({}, restButtonProps), {
       type: restButtonProps.type || "ordinary",
@@ -93,7 +101,7 @@ const AddRowButton = (props) => {
       disabled
     }),
     CustomizedButtonText || t("components.add")
-  ), typeof maximum === "number" ? /* @__PURE__ */ React__default.default.createElement(
+  ), extraAction, typeof maximum === "number" ? /* @__PURE__ */ React__default.default.createElement(
     "span",
     {
       className: core.cx(

package/dist/cjs/core/TableForm/Columns/AffixColumn.js

@@ -28,7 +28,7 @@ const AffixColumnHeaderCell = ({ data, column, onChange, onBlur }) => {
     },
     [prefix, onChange]
   );
-  return /* @__PURE__ */ React__default.default.createElement(antd.Space, null, !column.disablePrefix ? /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(antd.Space, { style: { marginTop: "4px" } }, !column.disablePrefix ? /* @__PURE__ */ React__default.default.createElement(
     antd.Input,
     {
       value: prefix,

package/dist/cjs/core/TableForm/Columns/CheckboxColumn.js

@@ -14,7 +14,7 @@ const CheckboxColumnHeaderCell = ({ onChange }) => {
     },
     [onChange]
   );
-  return /* @__PURE__ */ React__default.default.createElement(index, { onChange: _onChange });
+  return /* @__PURE__ */ React__default.default.createElement(index, { style: { marginTop: "4px" }, onChange: _onChange });
 };
 const CheckboxColumnBodyCell = ({ data, column, index: index$1, onChange }) => {
   const value = data[index$1][column.key] === void 0 ? column.defaultValue : data[index$1][column.key];

package/dist/cjs/core/TableForm/Columns/InputColumn.js

@@ -74,6 +74,7 @@ const InputColumnHeaderCell = ({ disabled, column, onChange, onBlur, onVisibleCh
   return /* @__PURE__ */ React__default.default.createElement(
     CustomInput,
     {
+      style: { marginTop: "4px" },
       type: column.type,
       placeholder: column.placeholder,
       disabled,

package/dist/cjs/core/TableForm/TableFormBodyCell.js

@@ -42,22 +42,16 @@ const TableFormBodyCell = (props) => {
     disabled,
     onChange,
     onBlur,
-    validateAll,
-    error
+    validateAllCount,
+    error,
+    onValidate
   } = props;
   const [validateResult, setValidateResult] = React.useState();
   const [isTouched, setIsTouched] = React.useState(false);
   const width = typeof column.width === "number" ? column.width + "px" : column.width;
-  const isCellErrorStyle = Boolean((validateResult == null ? void 0 : validateResult.isError) || isRowError);
-  React.useEffect(() => {
-    if (isTouched)
-      setValidateResult(
-        error ? {
-          msg: error,
-          isError: true
-        } : void 0
-      );
-  }, [error, isTouched]);
+  const isCellErrorStyle = Boolean(
+    isTouched && error || (validateResult == null ? void 0 : validateResult.isError) || isRowError
+  );
   const triggerValidate = React.useCallback(
     (currentValue) => {
       var _a;
@@ -75,17 +69,18 @@ const TableFormBodyCell = (props) => {
         });
         const isError = result ? typeof result === "string" : false;
         setValidateResult({ msg: result || "", isError });
+        onValidate == null ? void 0 : onValidate(`${column.key}${rowIndex}`, !isError);
         return;
       }
     },
-    [data, rowIndex, column, getRowValidateResult]
+    [data, rowIndex, column, getRowValidateResult, onValidate]
   );
   React.useEffect(() => {
-    if (validateAll) {
+    if (validateAllCount > 0) {
       setIsTouched(true);
       triggerValidate();
     }
-  }, [validateAll, triggerValidate, setIsTouched]);
+  }, [validateAllCount, triggerValidate, setIsTouched]);
   const _onChange = (value, data2) => {
     const newData = data2.map(
       (row, i) => i === rowIndex ? __spreadProps(__spreadValues({}, row), { [column.key]: value }) : row
@@ -131,7 +126,8 @@ const TableFormBodyCell = (props) => {
     },
     onBlur: _onBlur,
     rowIndex,
-    error: isCellErrorStyle
+    error: isCellErrorStyle,
+    formValue: data
   }) : renderDefaultComponent();
   const CellDescription = React.useMemo(() => {
     var _a;
@@ -158,7 +154,7 @@ const TableFormBodyCell = (props) => {
       FormItem.FormItem,
       {
         validateStatus: isCellErrorStyle ? "error" : "",
-        message: isRowError ? "" : validateResult == null ? void 0 : validateResult.msg
+        message: isRowError ? "" : (isTouched ? error : void 0) || (validateResult == null ? void 0 : validateResult.msg)
       },
       Cell
     ),

package/dist/cjs/core/TableForm/TableFormBodyRows.js

@@ -84,7 +84,8 @@ const TableFormRow = (props) => {
     updateData,
     onBodyBlur,
     renderRowDescription,
-    validateAll
+    validateAllCount,
+    onValidate
   } = props;
   const rowData = data[rowIndex];
   const errorFromProps = errors[rowIndex];
@@ -95,6 +96,9 @@ const TableFormRow = (props) => {
   React.useEffect(() => {
     setRowError(rowLevelError);
   }, [rowLevelError]);
+  React.useEffect(() => {
+    onValidate == null ? void 0 : onValidate(`table_row_${rowIndex}`, !rowError);
+  }, [onValidate, rowError, rowIndex]);
   const rowDeletable = typeof (row == null ? void 0 : row.deletable) === "boolean" ? row.deletable : (_a = typeof (row == null ? void 0 : row.deletable) === "function" || (deleteConfig == null ? void 0 : deleteConfig.deletable)) != null ? _a : false;
   const getRowValidateResult = React.useCallback(
     (rowData2) => {
@@ -123,8 +127,9 @@ const TableFormRow = (props) => {
         validateTriggerType,
         isRowError: !!rowError,
         getRowValidateResult,
-        validateAll,
-        error: cellError
+        validateAllCount,
+        error: cellError,
+        onValidate
       }
     );
   });

package/dist/cjs/core/TableForm/TableFormHeaderCell.js

@@ -1,12 +1,13 @@
 'use strict';
 
 var core = require('@linaria/core');
-var index$1 = require('./Columns/index.js');
+var index$2 = require('./Columns/index.js');
 var FormItem = require('./Columns/FormItem.js');
 var style = require('./style.js');
 var utils = require('./utils.js');
-var index = require('../Typo/index.js');
+var index$1 = require('../Typo/index.js');
 var React = require('react');
+var index = require('../../coreX/OverflowTooltip/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -50,28 +51,56 @@ const BatchInputListHeaderCell = (props) => {
     },
     [onChange, data, column]
   );
-  const _onBlur = React.useCallback(() => {
+  const headerOnBlur = React.useCallback(() => {
     onBlur == null ? void 0 : onBlur(column.key, errMsg);
   }, [column.key, onBlur, errMsg]);
   const renderDefaultComponent = () => {
     if (!column.type)
       return null;
-    const CellComponent = index$1.ColumnHeaderImpls[column.type];
+    const CellComponent = index$2.ColumnHeaderImpls[column.type];
     return /* @__PURE__ */ React__default.default.createElement(
       CellComponent,
       __spreadProps(__spreadValues({}, props), {
         column,
         onChange: headerOnChange,
-        onBlur: _onBlur
+        onBlur: headerOnBlur
       })
     );
   };
-  const renderCell = () => column.render ? column.render({
-    isHeader: true,
-    disabled,
-    onChange: headerOnChange,
-    onBlur: _onBlur
-  }) : renderDefaultComponent();
+  const renderTitle = () => {
+    const titleContent = typeof column.title === "string" ? /* @__PURE__ */ React__default.default.createElement(index, { tooltip: column.title, content: column.title }) : column.title;
+    return /* @__PURE__ */ React__default.default.createElement("p", { className: core.cx(index$1.Typo.Label.l3_bold_title, style.TitleStyle) }, titleContent);
+  };
+  const renderSubTitle = () => {
+    if (column.subTitleRender) {
+      return column.subTitleRender({
+        isHeader: true,
+        disabled,
+        onChange: headerOnChange,
+        onBlur: headerOnBlur,
+        formValue: data
+      });
+    }
+    if (disableBatchFilling) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default.default.createElement(
+      FormItem.FormItem,
+      {
+        validateStatus: typeof errMsg === "string" && errMsg ? "error" : "",
+        message: errMsg || void 0
+      },
+      // if the render prop is provided, use it to render the subTitle
+      // otherwise, render the default component
+      column.render ? column.render({
+        isHeader: true,
+        disabled,
+        onChange: headerOnChange,
+        onBlur: headerOnBlur,
+        formValue: data
+      }) : renderDefaultComponent()
+    );
+  };
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
@@ -82,15 +111,8 @@ const BatchInputListHeaderCell = (props) => {
         visibility: column.hidden ? "hidden" : "visible"
       }
     },
-    /* @__PURE__ */ React__default.default.createElement("p", { className: core.cx(index.Typo.Label.l3_bold_title, style.TitleStyle) }, column.title),
-    disableBatchFilling ? null : /* @__PURE__ */ React__default.default.createElement(
-      FormItem.FormItem,
-      {
-        validateStatus: typeof errMsg === "string" && errMsg ? "error" : "",
-        message: errMsg || void 0
-      },
-      renderCell()
-    )
+    renderTitle(),
+    renderSubTitle()
   );
 };