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

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

@@ -6,7 +6,6 @@ var AddRowButton = require('./AddRowButton.js');
 var style = require('./style.js');
 var TableFormBodyRows = require('./TableFormBodyRows.js');
 var TableFormHeaderCell = require('./TableFormHeaderCell.js');
-var utils = require('./utils.js');
 var antd = require('antd');
 var React = require('react');
 
@@ -33,7 +32,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const DEFAULT_ROW_COUNT = 3;
 const TableForm = React__default.default.forwardRef(
   (props, ref) => {
     var _a, _b;
@@ -54,16 +52,19 @@ const TableForm = React__default.default.forwardRef(
       onHeaderChange,
       onHeaderBlur,
       onBodyChange,
+      onBodyAdd,
       onBodyBlur,
       row,
-      errors
+      errors,
+      hideEmptyTable
     } = props;
     const [data, setData] = React.useState(defaultData || []);
     const [passwordVisible, setPasswordVisible] = React.useState(false);
     const [latestData, setLatestData] = React.useState(defaultData || []);
-    const [validateAll, setValidateAll] = React.useState(false);
+    const [validateAllCount, setValidateAllCount] = React.useState(0);
     const rowSplitType = (row == null ? void 0 : row.splitType) || props.rowSplitType || "border";
     const draggable = (_b = (_a = row == null ? void 0 : row.draggable) != null ? _a : props.draggable) != null ? _b : false;
+    const formValidMapRef = React.useRef({});
     const updateData = React.useCallback(
       (value, rowIndex, columnKey) => {
         setLatestData(value);
@@ -72,13 +73,16 @@ const TableForm = React__default.default.forwardRef(
       },
       [onBodyChange]
     );
-    React.useLayoutEffect(() => {
-      if (!defaultData) {
-        updateData(
-          [...Array(DEFAULT_ROW_COUNT)].map(() => utils.genEmptyRow(columns))
-        );
-      }
-    }, [columns, defaultData, updateData]);
+    const addData = React.useCallback(
+      (value) => {
+        setLatestData(value);
+        setData(value);
+        onBodyChange == null ? void 0 : onBodyChange(value);
+        const rowIndex = value.length - 1;
+        onBodyAdd == null ? void 0 : onBodyAdd(value, rowIndex);
+      },
+      [onBodyChange, onBodyAdd]
+    );
     const handleBatchChange = React.useCallback(
       (newData, columnKey, shouldUpdateData) => {
         setLatestData(newData);
@@ -91,19 +95,19 @@ const TableForm = React__default.default.forwardRef(
       [onHeaderChange, onBodyChange]
     );
     const handleBatchBlur = React.useCallback(
-      (key, error) => {
+      (columnKey, error) => {
         if (error) {
           const newData = latestData.map((cell) => {
             return __spreadProps(__spreadValues({}, cell), {
-              [key]: ""
+              [columnKey]: ""
             });
           });
           setLatestData(newData);
-          onHeaderBlur == null ? void 0 : onHeaderBlur(newData);
+          onHeaderBlur == null ? void 0 : onHeaderBlur(newData, columnKey);
         } else {
           setData(latestData);
-          onBodyChange == null ? void 0 : onBodyChange(latestData, void 0, key);
-          onHeaderBlur == null ? void 0 : onHeaderBlur(latestData);
+          onBodyChange == null ? void 0 : onBodyChange(latestData, void 0, columnKey);
+          onHeaderBlur == null ? void 0 : onHeaderBlur(latestData, columnKey);
         }
       },
       [latestData, onHeaderBlur, onBodyChange]
@@ -114,12 +118,25 @@ const TableForm = React__default.default.forwardRef(
         setData: (data2) => {
           updateData(data2);
         },
+        setDataWithoutTriggerChange: (data2) => {
+          setLatestData(data2);
+          setData(data2);
+        },
         validateWholeFields() {
-          setValidateAll(true);
+          formValidMapRef.current = {};
+          setValidateAllCount((c) => c + 1);
+        },
+        isValid() {
+          return Object.values(formValidMapRef.current).every(
+            (v) => v === true
+          );
         }
       }),
       [updateData]
     );
+    const onValidate = (id, isValid) => {
+      formValidMapRef.current[id] = isValid;
+    };
     const headerCells = columns.map((col) => {
       return /* @__PURE__ */ React__default.default.createElement(
         TableFormHeaderCell.BatchInputListHeaderCell,
@@ -142,9 +159,10 @@ const TableForm = React__default.default.forwardRef(
       } : void 0,
       [maxHeight]
     );
-    return /* @__PURE__ */ React__default.default.createElement("div", { className }, /* @__PURE__ */ React__default.default.createElement(
+    return /* @__PURE__ */ React__default.default.createElement("div", { className }, hideEmptyTable && data.length < 1 ? null : /* @__PURE__ */ React__default.default.createElement(
       style.TableFormWrapper,
       {
+        "data-testid": "eagle-table-form-wrapper",
         className: `table-form row-split-by-${rowSplitType}`,
         style: tableFormWrapperStyle
       },
@@ -173,15 +191,17 @@ const TableForm = React__default.default.forwardRef(
           updateData,
           renderRowDescription,
           rowValidator,
-          validateAll,
-          errors
+          validateAllCount,
+          errors,
+          onValidate
         }
       ))
     ), (rowAddConfig == null ? void 0 : rowAddConfig.addible) ? /* @__PURE__ */ React__default.default.createElement(
       AddRowButton,
       {
+        style: { marginTop: hideEmptyTable && !data.length ? 0 : 8 },
         config: rowAddConfig,
-        updateData,
+        addData,
         columns,
         data
       }

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

@@ -46,20 +46,38 @@ const TextArea = (_a) => {
   var _b = _a, {
     className,
     error,
-    size = "middle"
+    size = "middle",
+    "data-testid": dataTestId
   } = _b, props = __objRest(_b, [
     "className",
     "error",
-    "size"
+    "size",
+    "data-testid"
   ]);
   const typo = {
     large: index.Typo.Label.l2_regular,
     middle: index.Typo.Label.l3_regular,
     small: index.Typo.Label.l4_regular
   }[size];
+  const ref = React__default.default.useCallback(
+    (instance) => {
+      var _a2;
+      const el = (_a2 = instance == null ? void 0 : instance.resizableTextArea) == null ? void 0 : _a2.textArea;
+      if (!el)
+        return;
+      if (dataTestId) {
+        el.setAttribute("data-testid", dataTestId);
+      } else {
+        el.removeAttribute("data-testid");
+      }
+    },
+    [dataTestId]
+  );
   return /* @__PURE__ */ React__default.default.createElement(
     antd.Input.TextArea,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      ref
+    }, props), {
       className: cs__default.default(
         className,
         index$1.InputStyle,

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

@@ -11,20 +11,21 @@ var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 const timeWrapper = "E_tju3gfj";
-const Time = props => {
-  const {
-    className,
-    date,
-    dateTemplate = "YYYY-MM-DD",
-    timeTemplate = "HH:mm",
-    plainText
-  } = props;
+const Time = ({
+  className,
+  date,
+  dateTemplate = "YYYY-MM-DD",
+  timeTemplate = "HH:mm",
+  plainText,
+  "data-testid": dataTestId
+}) => {
   if (!date) return /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, "-");
   const time = dayjs__default.default(date);
   if (plainText) {
     return /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, dateTemplate !== null && time.format(dateTemplate), " ", timeTemplate !== null && time.format(timeTemplate));
   }
   return /* @__PURE__ */React__default.default.createElement("span", {
+    "data-testid": dataTestId,
     className: cs__default.default("time-wrapper", timeWrapper, className)
   }, dateTemplate !== null && /* @__PURE__ */React__default.default.createElement("span", {
     className: "date"

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

@@ -43,15 +43,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const TimePicker = (_a) => {
-  var _b = _a, {
-    className,
-    error,
-    size = "middle"
-  } = _b, props = __objRest(_b, [
-    "className",
-    "error",
-    "size"
-  ]);
+  var _b = _a, { className, error, size = "middle" } = _b, props = __objRest(_b, ["className", "error", "size"]);
   const typo = {
     large: index.Typo.Label.l2_regular,
     middle: index.Typo.Label.l3_regular,

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

@@ -3,7 +3,7 @@
 var iconsReact = require('@cloudtower/icons-react');
 var core = require('@linaria/core');
 var index$2 = require('../Icon/index.js');
-var index$1 = require('../Select/index.js');
+var index$1 = require('../LegacySelect/index.js');
 var index = require('../Typo/index.js');
 var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
 var antd = require('antd');
@@ -54,7 +54,8 @@ const TimeZoneSelect = props => {
     disabled,
     defaultUseBrowserTime,
     className,
-    placeholder
+    placeholder,
+    "data-testid": dataTestId
   } = props;
   const [innerValue, setInnerValue] = React.useState(value);
   const {
@@ -94,6 +95,7 @@ const TimeZoneSelect = props => {
     }));
   });
   return /* @__PURE__ */React__default.default.createElement(index$1, {
+    "data-testid": dataTestId,
     className: core.cx(SelectStyle, className),
     dropdownClassName: DropdownStyle,
     placeholder: /* @__PURE__ */React__default.default.createElement("span", null, placeholder || t("components.time_zone_select_placeholder")),

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

@@ -0,0 +1,13 @@
+'use strict';
+
+const TimelineWrapper = "E_t59qhqp";
+const TimelineItemWrapper = "E_t2e44lg";
+const EmptyWrapper = "E_e14ua30y";
+const SubInfoTextWrapper = "E_s1ikqzph";
+const InfoTextWrapper = "E_i15astnl";
+
+exports.EmptyWrapper = EmptyWrapper;
+exports.InfoTextWrapper = InfoTextWrapper;
+exports.SubInfoTextWrapper = SubInfoTextWrapper;
+exports.TimelineItemWrapper = TimelineItemWrapper;
+exports.TimelineWrapper = TimelineWrapper;

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

@@ -0,0 +1,114 @@
+'use strict';
+
+var core = require('@linaria/core');
+var index$2 = require('../Link/index.js');
+var index$1 = require('../Tag/index.js');
+var index$3 = require('../Typo/index.js');
+var index$4 = require('../../coreX/OverflowTooltip/index.js');
+var constants = require('../../utils/constants.js');
+var antd5 = require('antd5');
+var cs = require('classnames');
+var React = require('react');
+var Timeline_style = require('./Timeline.style.js');
+var index = require('../../coreX/Show/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cs__default = /*#__PURE__*/_interopDefault(cs);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const TimelineBasicText = ({
+  children,
+  className,
+  multiLines
+}) => {
+  return /* @__PURE__ */ React__default.default.createElement(
+    index$4,
+    {
+      className,
+      multiLines: multiLines != null ? multiLines : 2,
+      content: children
+    }
+  );
+};
+const TimelineArea = ({ items, gap = 1, split, suffix, className, compact }) => {
+  const splitNode = typeof split === "string" ? constants.splitMap[split] || split : split;
+  const rendetItem = (category, props, compact2) => {
+    const _a = props, { className: className2 } = _a, restProps = __objRest(_a, ["className"]);
+    switch (category) {
+      case "subinfo_label":
+        return /* @__PURE__ */ React__default.default.createElement(
+          TimelineBasicText,
+          __spreadValues({
+            className: core.cx(Timeline_style.SubInfoTextWrapper, index$3.Typo.Label.l4_regular, className2)
+          }, restProps)
+        );
+      case "info":
+        return /* @__PURE__ */ React__default.default.createElement(
+          TimelineBasicText,
+          __spreadValues({
+            className: cs__default.default(
+              Timeline_style.InfoTextWrapper,
+              {
+                [index$3.Typo.Label.l4_regular]: compact2,
+                [index$3.Typo.Label.l2_regular]: !compact2
+              },
+              className2
+            )
+          }, restProps)
+        );
+      case "info_bold":
+        return /* @__PURE__ */ React__default.default.createElement(
+          TimelineBasicText,
+          __spreadValues({
+            className: cs__default.default(
+              Timeline_style.InfoTextWrapper,
+              {
+                [index$3.Typo.Label.l4_bold]: compact2,
+                [index$3.Typo.Label.l2_bold]: !compact2
+              },
+              className2
+            )
+          }, restProps)
+        );
+      case "link":
+        return /* @__PURE__ */ React__default.default.createElement(index$2, __spreadValues({}, props));
+      case "tag":
+        return /* @__PURE__ */ React__default.default.createElement(index$1.default, __spreadValues({}, props));
+    }
+  };
+  return /* @__PURE__ */ React__default.default.createElement(antd5.Flex, { justify: "space-between", align: "center", className }, /* @__PURE__ */ React__default.default.createElement(antd5.Flex, { align: "center", gap }, items.map((item, idx) => {
+    const { category } = item;
+    return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, { key: idx }, rendetItem(category, item, compact), /* @__PURE__ */ React__default.default.createElement(index.Show, { condition: Boolean(split) }, /* @__PURE__ */ React__default.default.createElement(index.Show, { condition: idx < items.length - 1 }, splitNode)));
+  })), /* @__PURE__ */ React__default.default.createElement(index.Show, { condition: Boolean(suffix) }, /* @__PURE__ */ React__default.default.createElement(index.Show, { condition: Boolean(split) }, splitNode), suffix));
+};
+
+exports.TimelineArea = TimelineArea;

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

@@ -0,0 +1,143 @@
+'use strict';
+
+var iconsReact = require('@cloudtower/icons-react');
+var core = require('@linaria/core');
+var index$1 = require('../Alert/index.js');
+var index = require('../Icon/index.js');
+var antd5 = require('antd5');
+var cs = require('classnames');
+var React = require('react');
+var Timeline_style = require('./Timeline.style.js');
+var Timeline_widget = require('./Timeline.widget.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cs__default = /*#__PURE__*/_interopDefault(cs);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const Timeline = ({
+  items,
+  emptyText,
+  emptyRender,
+  compact,
+  timelineContainerClassName,
+  emptyTextClassName,
+  "data-testid": dataTestId
+}) => {
+  if (!items.length) {
+    if (emptyRender) {
+      return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, emptyRender(emptyText));
+    }
+    return /* @__PURE__ */ React__default.default.createElement(
+      "div",
+      {
+        "data-testid": dataTestId,
+        className: core.cx(Timeline_style.EmptyWrapper, emptyTextClassName)
+      },
+      emptyText
+    );
+  }
+  const iconMap = {
+    success: iconsReact.CheckmarkDoneSuccessCorrect16GreenIcon,
+    failed: iconsReact.XmarkFailed16RedIcon,
+    progress: iconsReact.Loading16GradientBlueIcon,
+    notice: iconsReact.NoticeTriangleFill16YellowIcon,
+    pending: iconsReact.WaitingBreathingLed16YellowIcon,
+    idle: iconsReact.TimelineNotStart16GrayIcon
+  };
+  const alertTypeMap = {
+    success: "success",
+    failed: "error",
+    progress: "info",
+    notice: "warning",
+    pending: "info",
+    idle: "normal"
+  };
+  return /* @__PURE__ */ React__default.default.createElement(
+    "div",
+    {
+      "data-testid": dataTestId,
+      className: core.cx(Timeline_style.TimelineWrapper, timelineContainerClassName)
+    },
+    /* @__PURE__ */ React__default.default.createElement(antd5.Timeline, null, items.map((item, index$2) => {
+      const {
+        status,
+        infos,
+        infosRender,
+        infoAction,
+        subInfo,
+        subInfoRender,
+        detailMessage,
+        detailMessages,
+        detailMessageRender
+      } = item;
+      const finalDetailMessages = detailMessages != null ? detailMessages : detailMessage ? [detailMessage] : [];
+      return /* @__PURE__ */ React__default.default.createElement(
+        antd5.Timeline.Item,
+        {
+          key: `timeline-item-${index$2}`,
+          className: cs__default.default(Timeline_style.TimelineItemWrapper, { compact }),
+          dot: /* @__PURE__ */ React__default.default.createElement(
+            index,
+            {
+              src: iconMap[status],
+              iconHeight: 16,
+              iconWidth: 16,
+              isRotate: status === "progress"
+            }
+          )
+        },
+        infosRender ? infosRender(infos) : /* @__PURE__ */ React__default.default.createElement(
+          antd5.Flex,
+          {
+            vertical: true,
+            justify: "space-between",
+            gap: 2,
+            className: "info-wrapper"
+          },
+          infos.map((item2, index2) => /* @__PURE__ */ React__default.default.createElement(
+            Timeline_widget.TimelineArea,
+            __spreadProps(__spreadValues({
+              gap: 6,
+              key: `title-area-${index2}`
+            }, item2), {
+              compact,
+              suffix: !index2 && infoAction ? /* @__PURE__ */ React__default.default.createElement("span", { className: "info-action" }, infoAction) : void 0
+            })
+          ))
+        ),
+        /* @__PURE__ */ React__default.default.createElement("div", { className: "item-time" }, subInfoRender ? subInfoRender(subInfo) : subInfo ? /* @__PURE__ */ React__default.default.createElement(Timeline_widget.TimelineArea, __spreadValues({}, subInfo)) : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null), finalDetailMessages.length > 0 ? finalDetailMessages.map(
+          (detailMessage2, index2) => detailMessageRender ? detailMessageRender(detailMessage2, index2) : /* @__PURE__ */ React__default.default.createElement(
+            index$1,
+            __spreadValues({
+              key: `detail-message-${index2}`,
+              showIcon: false,
+              type: alertTypeMap[status]
+            }, detailMessage2)
+          )
+        ) : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null))
+      );
+    }))
+  );
+};
+
+exports.Timeline = Timeline;

package/dist/cjs/core/Tooltip/EllipsisTooltipContent.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var core = require('@linaria/core');
+var react = require('@linaria/react');
+var _ = require('lodash');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const _exp = /*#__PURE__*/() => props => props.maxHeight ? `${props.maxHeight}px` : "unset";
+const Wrapper = /*#__PURE__*/react.styled('div')({
+  name: "Wrapper",
+  class: "E_w1dxz879",
+  propsAsIs: false,
+  vars: {
+    "w1dxz879-0": [_exp()]
+  }
+});
+const EllipsisTooltipContent = ({
+  tooltip,
+  maxHeight,
+  contentWrapperClassName,
+  ellipsisTips
+}) => {
+  const overFlowWrapperRef = React.useRef(null);
+  const [showTips, setShowTips] = React.useState(null);
+  React.useEffect(() => {
+    const wrapperEle = overFlowWrapperRef.current;
+    let wrapperObserver;
+    if (wrapperEle) {
+      const handleVisibleTips = _.debounce(() => {
+        setShowTips(wrapperEle.scrollHeight > (maxHeight || Infinity));
+      }, 200);
+      wrapperObserver = new ResizeObserver(handleVisibleTips);
+      wrapperObserver.observe(wrapperEle);
+    }
+    return () => {
+      wrapperObserver == null ? void 0 : wrapperObserver.disconnect();
+    };
+  }, [maxHeight]);
+  return /* @__PURE__ */React__default.default.createElement(Wrapper, {
+    className: core.cx(contentWrapperClassName, _.isNull(showTips) && "eagle-ellipsis-content"),
+    maxHeight
+  }, /* @__PURE__ */React__default.default.createElement("div", {
+    className: "ellipsis-tooltip",
+    ref: overFlowWrapperRef
+  }, tooltip), !!showTips && /* @__PURE__ */React__default.default.createElement("span", {
+    className: "tips"
+  }, ellipsisTips));
+};
+var EllipsisTooltipContent$1 = EllipsisTooltipContent;
+
+module.exports = EllipsisTooltipContent$1;

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

@@ -3,6 +3,7 @@
 var antd = require('antd');
 var cs = require('classnames');
 var React = require('react');
+var EllipsisTooltipContent = require('./EllipsisTooltipContent.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -39,7 +40,7 @@ var __objRest = (source, exclude) => {
 };
 let componentId = 0;
 const TooltipDefaultClass = "E_t1m2x205";
-const Tooltip = props => {
+const InternalTooltip = props => {
   const _a = props,
     {
       followMouse,
@@ -87,6 +88,8 @@ const Tooltip = props => {
     }, overlayStyle) : overlayStyle
   }));
 };
+const Tooltip = InternalTooltip;
+Tooltip.EllipsisContent = EllipsisTooltipContent;
 var Tooltip$1 = Tooltip;
 
 module.exports = Tooltip$1;

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

@@ -18,7 +18,8 @@ const Truncate = props => {
     backLen = 4,
     hoverShowFullText = true,
     className,
-    inline
+    inline,
+    "data-testid": dataTestId
   } = props;
   if (len <= 0) {
     console.error("[Truncate] prop len can not be 0 or negative number");
@@ -40,6 +41,7 @@ const Truncate = props => {
   }
   const truncated = text.length <= len ? text : text.slice(0, _frontLen) + ellipse + text.slice(text.length - _backLen);
   const Text = /* @__PURE__ */React__default.default.createElement("div", {
+    "data-testid": dataTestId,
     className: cs__default.default([className, inline && Inline])
   }, truncated);
   if (!hoverShowFullText || text.length <= len) {