@fileverse-dev/fortune-react 1.2.98 → 1.2.99-ydoc

package/es/components/ConditionFormat/ConditionRules.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 import "./index.css";
 import "./formating.css";
 declare const ConditionRules: React.FC<{
-    type?: string;
     context?: any;
 }>;
 export default ConditionRules;

package/es/components/ConditionFormat/ConditionRules.js

@@ -11,9 +11,7 @@ import { injectDatepickerStyles } from "../../utils/datepickerStyles";
 import "./formating.css";
 injectDatepickerStyles();
 var ConditionRules = function ConditionRules(_a) {
-  var rulesType = _a.type,
-    context = _a.context;
-  console.log("rulesType", rulesType);
+  var context = _a.context;
   var _b = useState("greaterThan"),
     type = _b[0],
     setType = _b[1];
@@ -360,8 +358,10 @@ var ConditionRules = function ConditionRules(_a) {
         setEditConditionRange(rangeEdit);
         setEditConditionFormatValue(allConditionFormats[key].conditionValue);
       },
-      className: "group flex items-center border-b border-gray-200 condition-list-parent",
-      key: key
+      className: "group flex items-center border-b border-gray-200 condition-list-parent fortune-condition-rules__item fortune-condition-rules__item--".concat(String(key).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-")),
+      "data-condition-key": key,
+      key: key,
+      "data-testid": "condition-rules-item-".concat(key)
     }, /*#__PURE__*/React.createElement("div", {
       className: "condition-list-pill",
       style: {
@@ -383,9 +383,11 @@ var ConditionRules = function ConditionRules(_a) {
         buttonClickCreateRef.current = true;
       }
     }, /*#__PURE__*/React.createElement("h3", {
-      className: "condition-list-type"
+      className: "fortune-condition-rules__heading condition-list-type",
+      "data-testid": "condition-rules-heading-".concat(key)
     }, conditionformat[allConditionFormats[key].conditionName], " ", (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/React.createElement("p", {
-      className: "condition-list-range"
+      className: "fortune-condition-rules__para condition-list-range",
+      "data-testid": "condition-rules-para-".concat(key)
     }, (_b = allConditionFormats[key].cellrange) === null || _b === void 0 ? void 0 : _b.map(function (range) {
       var startCol = numberToColumn(range.column[0] + 1);
       var endCol = numberToColumn(range.column[1] + 1);
@@ -393,12 +395,15 @@ var ConditionRules = function ConditionRules(_a) {
       var endRow = range.row[1] + 1;
       return "".concat(startCol).concat(startRow, ":").concat(endCol).concat(endRow);
     }).join(", "))), /*#__PURE__*/React.createElement("div", {
-      className: "opacity-0 group-hover:opacity-100 transition-opacity"
+      className: "fortune-condition-rules__icon fortune-condition-rules__action opacity-0 group-hover:opacity-100 transition-opacity",
+      "data-condition-key": key,
+      "data-testid": "condition-rules-action-delete-".concat(key)
     }, /*#__PURE__*/React.createElement(IconButton, {
       elevation: 1,
       icon: "Trash2",
       size: "md",
       variant: "secondary",
+      className: "fortune-condition-rules__icon--trash",
       style: {
         border: "0px",
         boxShadow: "none",
@@ -419,6 +424,7 @@ var ConditionRules = function ConditionRules(_a) {
     leftIcon: "Plus",
     size: "md",
     variant: "secondary",
+    className: "fortune-condition-rules__cta fortune-condition-rules__cta--add",
     onClick: function onClick() {
       setType("greaterThan");
       setCreate(true);
@@ -432,11 +438,13 @@ var ConditionRules = function ConditionRules(_a) {
       });
       editKeyRef.current = null;
       buttonClickCreateRef.current = true;
-    }
+    },
+    "data-testid": "condition-rules-cta-add"
   }, "Add another rule"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col"
+    className: "flex flex-col fortune-condition-rules__form"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
+    className: "fortune-condition-rules__info condition-rules-value text-heading-xsm",
+    "data-testid": "condition-rules-info-range"
   }, conditionformat.applyRange, " range"), /*#__PURE__*/React.createElement(TextField, {
     rightIcon: /*#__PURE__*/React.createElement(LucideIcon, {
       name: "Grid2x2",
@@ -454,7 +462,8 @@ var ConditionRules = function ConditionRules(_a) {
       dataSelectRange("conditionRules".concat(type));
     }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
+    className: "fortune-condition-rules__heading-sm condition-rules-value text-heading-xsm",
+    "data-testid": "condition-rules-heading-format"
   }, "Format cells if"), /*#__PURE__*/React.createElement(Select, {
     value: type,
     onValueChange: function onValueChange(value) {

package/es/components/ConditionFormat/index.js

@@ -120,7 +120,7 @@ var ConditionalFormat = function ConditionalFormat(_a) {
           onClick: function onClick() {
             setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
             showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
-              type: v.text
+              context: context
             }), undefined, conditionformat["conditionformat_".concat(v.text)]);
           },
           tabIndex: 0
@@ -167,7 +167,7 @@ var ConditionalFormat = function ConditionalFormat(_a) {
           onClick: function onClick() {
             setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
             showDialog(/*#__PURE__*/React.createElement(ConditionRules, {
-              type: v.text
+              context: context
             }), undefined, conditionformat["conditionformat_".concat(v.text)]);
           },
           tabIndex: 0

package/es/components/DataVerification/RangeDialog.js

@@ -38,7 +38,8 @@ var RangeDialog = function RangeDialog() {
   }, [context, context.luckysheet_select_save]);
   return /*#__PURE__*/React.createElement("div", {
     id: "range-dialog",
-    className: "fortune-dialog",
+    className: "fortune-dialog fortune-range-dialog",
+    "data-testid": "range-dialog",
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
@@ -56,32 +57,41 @@ var RangeDialog = function RangeDialog() {
     },
     tabIndex: 0
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn("flex items-center justify-between border-b color-border-default py-3 px-6")
+    className: cn("fortune-range-dialog__header flex items-center justify-between border-b color-border-default py-3 px-6"),
+    "data-testid": "range-dialog-header"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "text-heading-sm"
+    className: "fortune-range-dialog__heading text-heading-sm",
+    "data-testid": "range-dialog-heading"
   }, dataVerification.selectCellRange), /*#__PURE__*/React.createElement(IconButton, {
     icon: "X",
     variant: "ghost",
     onClick: close,
-    tabIndex: 0
+    tabIndex: 0,
+    className: "fortune-range-dialog__icon fortune-range-dialog__icon--close",
+    "data-testid": "range-dialog-icon-close"
   })), /*#__PURE__*/React.createElement("div", {
-    className: "px-6 pb-6 pt-4 text-body-sm"
+    className: "fortune-range-dialog__para px-6 pb-6 pt-4 text-body-sm",
+    "data-testid": "range-dialog-para"
   }, /*#__PURE__*/React.createElement(TextField, {
     className: "w-full",
     readOnly: true,
     placeholder: dataVerification.selectCellRange2,
     value: rangeTxt2
   })), /*#__PURE__*/React.createElement("div", {
-    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+    className: "fortune-range-dialog__actions px-6 pb-6 flex flex-row gap-2 justify-end",
+    "data-testid": "range-dialog-actions"
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "secondary",
+    className: "fortune-range-dialog__cta fortune-range-dialog__cta--close",
     style: {
       minWidth: "80px"
     },
     onClick: close,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "range-dialog-cta-close"
   }, button.close), /*#__PURE__*/React.createElement(Button, {
     variant: "default",
+    className: "fortune-range-dialog__cta fortune-range-dialog__cta--confirm",
     style: {
       minWidth: "80px"
     },
@@ -91,7 +101,8 @@ var RangeDialog = function RangeDialog() {
       });
       close();
     },
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "range-dialog-cta-confirm"
   }, button.confirm)));
 };
 export default RangeDialog;

package/es/components/Dialog/index.js

@@ -27,46 +27,60 @@ var Dialog = function Dialog(_a) {
   var button = locale(context).button;
   return /*#__PURE__*/React.createElement("div", {
     className: "fortune-dialog",
+    "data-testid": "dialog",
     style: __assign(__assign({}, containerStyle), ["Data validation", "Split text to columns", "Resize column"].includes(title) ? {
       maxWidth: "unset"
     } : {})
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn("flex items-center justify-between border-b color-border-default py-3 px-6")
+    className: cn("fortune-dialog__header flex items-center justify-between border-b color-border-default py-3 px-6"),
+    "data-testid": "dialog-header"
   }, title ? (/*#__PURE__*/React.createElement("div", {
-    className: "text-heading-sm"
+    className: "fortune-dialog__heading text-heading-sm",
+    "data-testid": "dialog-heading"
   }, title)) : (/*#__PURE__*/React.createElement("div", {
-    className: "text-heading-sm"
+    className: "fortune-dialog__heading text-heading-sm",
+    "data-testid": "dialog-heading"
   }, "Oops! Something went wrong")), /*#__PURE__*/React.createElement(IconButton, {
     icon: "X",
     variant: "ghost",
     onClick: onCancel,
-    tabIndex: 0
+    tabIndex: 0,
+    className: "fortune-dialog__icon fortune-dialog__icon--close",
+    "data-testid": "dialog-icon-close"
   })), /*#__PURE__*/React.createElement("div", {
-    className: "px-6 pb-6 pt-4 text-body-sm",
-    style: contentStyle
+    className: "fortune-dialog__para px-6 pb-6 pt-4 text-body-sm",
+    style: contentStyle,
+    "data-testid": "dialog-para"
   }, children), type != null && (/*#__PURE__*/React.createElement("div", {
-    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+    className: "fortune-dialog__actions px-6 pb-6 flex flex-row gap-2 justify-end",
+    "data-testid": "dialog-actions"
   }, type === "ok" ? (/*#__PURE__*/React.createElement(Button, {
     variant: "default",
+    className: "fortune-dialog__cta fortune-dialog__cta--confirm",
     style: {
       minWidth: "80px"
     },
     onClick: onOk,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "dialog-cta-confirm"
   }, okLabel || button.confirm)) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     variant: "secondary",
+    className: "fortune-dialog__cta fortune-dialog__cta--cancel",
     style: {
       minWidth: "80px"
     },
     onClick: onCancel,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "dialog-cta-cancel"
   }, cancelLabel || button.cancel), /*#__PURE__*/React.createElement(Button, {
     variant: "default",
+    className: "fortune-dialog__cta fortune-dialog__cta--confirm",
     style: {
       minWidth: "80px"
     },
     onClick: onOk,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "dialog-cta-confirm"
   }, okLabel || button.confirm))))));
 };
 export default Dialog;

package/es/components/ErrorState/index.js

@@ -22,11 +22,14 @@ var ErrorBoxes = function ErrorBoxes() {
       zIndex: 100,
       borderRadius: "4px"
     },
-    className: "shadow-lg flex flex-col gap-2 break-all"
+    className: "fortune-error-state shadow-lg flex flex-col gap-2 break-all",
+    "data-testid": "error-state"
   }, /*#__PURE__*/React.createElement("h3", {
-    className: "text-heading-xsm color-text-danger"
+    className: "fortune-error-state__heading text-heading-xsm color-text-danger",
+    "data-testid": "error-state-heading"
   }, title), /*#__PURE__*/React.createElement("div", {
-    className: "color-text-default text-body-sm"
+    className: "fortune-error-state__para color-text-default text-body-sm",
+    "data-testid": "error-state-para"
   }, message));
 };
 export default ErrorBoxes;

package/es/components/LinkEidtCard/index.js

@@ -96,10 +96,13 @@ export var LinkEditCard = function LinkEditCard(_a) {
     };
   }, [refs.globalCache, isButtonDisabled]);
   var renderToolbarButton = useCallback(function (iconId, onClick) {
+    var iconIdClass = iconId.replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
     return /*#__PURE__*/React.createElement("div", {
-      className: "fortune-toolbar-button",
+      className: "fortune-link-card__icon fortune-link-card__action fortune-link-card__action--".concat(iconIdClass, " fortune-toolbar-button"),
+      "data-icon-id": iconId,
       onClick: onClick,
-      tabIndex: 0
+      tabIndex: 0,
+      "data-testid": "link-card-action-".concat(iconId)
     }, /*#__PURE__*/React.createElement(SVGIcon, {
       name: iconId,
       style: {
@@ -152,19 +155,21 @@ export var LinkEditCard = function LinkEditCard(_a) {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      className: "fortune-link-modify-modal link-toolbar",
+      className: "fortune-link-card fortune-link-modify-modal link-toolbar",
       style: {
         left: position.cellLeft + 20,
         top: position.cellBottom - 5
-      }
+      },
+      "data-testid": "link-card"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "link-content",
+      className: "fortune-link-card__info link-content",
       onClick: function onClick() {
         setContext(function (draftCtx) {
           return goToLink(draftCtx, r, c, linkType, linkAddress, refs.scrollbarX.current, refs.scrollbarY.current);
         });
       },
-      tabIndex: 0
+      tabIndex: 0,
+      "data-testid": "link-card-info-open"
     }, linkType === "webpage" ? insertLink.openLink : replaceHtml(insertLink.goTo, {
       linkAddress: linkAddress
     })), context.allowEdit === true && /*#__PURE__*/React.createElement("div", {
@@ -188,13 +193,15 @@ export var LinkEditCard = function LinkEditCard(_a) {
     }));
   }
   return /*#__PURE__*/React.createElement("div", __assign({
-    className: "fortune-link-card",
+    className: "fortune-link-card fortune-link-card--editing",
     ref: cardRef,
     style: {
       left: position.cellLeft + 20,
       top: cardTop
     }
-  }, containerEvent), /*#__PURE__*/React.createElement(Select, {
+  }, containerEvent, {
+    "data-testid": "link-card-editing"
+  }), /*#__PURE__*/React.createElement(Select, {
     value: linkType,
     onValueChange: function onValueChange(value) {
       if (value === "sheet") {
@@ -219,9 +226,10 @@ export var LinkEditCard = function LinkEditCard(_a) {
       value: type.value
     }, type.text);
   }))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-input-with-icon"
+    className: "fortune-link-card__para fortune-input-with-icon",
+    "data-testid": "link-card-para-text"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "input-icon"
+    className: "fortune-link-card__icon input-icon"
   }, /*#__PURE__*/React.createElement(LucideIcon, {
     name: "ALargeSmall"
   })), /*#__PURE__*/React.createElement(TextField, {
@@ -274,15 +282,16 @@ export var LinkEditCard = function LinkEditCard(_a) {
       value: sheet.name
     }, sheet.name);
   }))))), /*#__PURE__*/React.createElement(Button, {
-    className: "fortune-insert-button",
+    className: "fortune-link-card__cta fortune-insert-button",
     disabled: isButtonDisabled,
     onClick: function onClick() {
       if (isButtonDisabled) return;
       _.set(refs.globalCache, "linkCard.mouseEnter", false);
       setContext(function (draftCtx) {
-        return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
+        saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
       });
-    }
+    },
+    "data-testid": "link-card-cta-insert"
   }, "Insert link"));
 };
 export default LinkEditCard;

package/es/components/SheetOverlay/FormulaHint/index.js

@@ -15,7 +15,7 @@ import WorkbookContext from "../../../context";
 import "./index.css";
 import { DraggableDiv } from "./dragable-div";
 var FormulaHint = function FormulaHint(props) {
-  var _a;
+  var _a, _b, _c;
   var showFormulaHint = props.showFormulaHint,
     handleShowFormulaHint = props.handleShowFormulaHint,
     commaCount = props.commaCount,
@@ -25,19 +25,19 @@ var FormulaHint = function FormulaHint(props) {
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
   var formulaMore = locale(context).formulaMore;
   var fn = functionName ? context.formulaCache.functionlistMap[functionName] : context.formulaCache.functionlistMap[(context === null || context === void 0 ? void 0 : context.functionHint) || ""];
-  var _b = useState(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
-    API_KEY = _b[0],
-    setAPI_KEY = _b[1];
-  var _c = useState(!API_KEY),
-    showAPInput = _c[0],
-    setShowAPInput = _c[1];
-  var _d = useState(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
-    isKeyAdded = _d[0],
-    setApiKeyAdded = _d[1];
+  var _d = useState(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
+    API_KEY = _d[0],
+    setAPI_KEY = _d[1];
+  var _e = useState(!API_KEY),
+    showAPInput = _e[0],
+    setShowAPInput = _e[1];
+  var _f = useState(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
+    isKeyAdded = _f[0],
+    setApiKeyAdded = _f[1];
   var formulaExpand = localStorage.getItem("formula-expand") === "true";
-  var _e = useState(formulaExpand),
-    showFunctionBody = _e[0],
-    setShouldShowFunctionBody = _e[1];
+  var _g = useState(formulaExpand),
+    showFunctionBody = _g[0],
+    setShouldShowFunctionBody = _g[1];
   useEffect(function () {
     if (fn) {
       setApiKeyAdded(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
@@ -49,12 +49,12 @@ var FormulaHint = function FormulaHint(props) {
     ETHERSCAN_API_KEY: "Etherscan API key"
   };
   var hintRef = useRef(null);
-  var _f = useState(0),
-    top = _f[0],
-    setTop = _f[1];
-  var _g = useState(false),
-    showDelayedHint = _g[0],
-    setShowDelayedHint = _g[1];
+  var _h = useState(0),
+    top = _h[0],
+    setTop = _h[1];
+  var _j = useState(false),
+    showDelayedHint = _j[0],
+    setShowDelayedHint = _j[1];
   var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
     var _a, _b, _c, _d, _e, _f;
     if (!((_a = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) === null || _a === void 0 ? void 0 : _a.toString()) || !((_b = firstSelection.height_move) === null || _b === void 0 ? void 0 : _b.toString()) || !hintRef.current) return;
@@ -94,6 +94,7 @@ var FormulaHint = function FormulaHint(props) {
     }
   }, [top]);
   if (!fn) return null;
+  var fnNameClass = fn.n ? String(fn.n).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-") : "";
   return /*#__PURE__*/React.createElement(DraggableDiv, {
     initialTop: top,
     dragHasMoved: dragHasMoved,
@@ -110,7 +111,7 @@ var FormulaHint = function FormulaHint(props) {
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "flex items-center justify-center w-4 h-4 rounded-full",
+    className: "fortune-formula-hint__icon fortune-formula-hint__action flex items-center justify-center w-4 h-4 rounded-full",
     style: {
       backgroundColor: "black",
       zIndex: 2000,
@@ -121,7 +122,8 @@ var FormulaHint = function FormulaHint(props) {
       color: "white"
     },
     onClick: handleShowFormulaHint,
-    "aria-label": "Close formula hint"
+    "aria-label": "Close formula hint",
+    "data-testid": "formula-hint-icon-close"
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
@@ -140,7 +142,9 @@ var FormulaHint = function FormulaHint(props) {
   })))), /*#__PURE__*/React.createElement("div", __assign({}, props, {
     ref: hintRef,
     id: "luckysheet-formula-help-c",
-    className: "luckysheet-formula-help-c",
+    className: "fortune-formula-hint fortune-formula-hint--".concat(fnNameClass || "unknown", " luckysheet-formula-help-c"),
+    "data-function-name": (_b = fn.n) !== null && _b !== void 0 ? _b : undefined,
+    "data-testid": "formula-hint-".concat((_c = fn.n) !== null && _c !== void 0 ? _c : "unknown"),
     style: {
       top: "0px",
       left: "0px",
@@ -151,14 +155,16 @@ var FormulaHint = function FormulaHint(props) {
       padding: "0px"
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: "luckysheet-formula-help-close",
-    title: "\u5173\u95ED"
+    className: "fortune-formula-hint__icon fortune-formula-help-close",
+    title: "\u5173\u95ED",
+    "data-testid": "formula-hint-icon-close-legacy"
   }, /*#__PURE__*/React.createElement("i", {
     className: "fa fa-times",
     "aria-hidden": "true"
   })), /*#__PURE__*/React.createElement("div", {
-    className: "luckysheet-formula-help-collapse",
-    title: "\u6536\u8D77"
+    className: "fortune-formula-hint__icon fortune-formula-help-collapse",
+    title: "\u6536\u8D77",
+    "data-testid": "formula-hint-icon-collapse"
   }, /*#__PURE__*/React.createElement("i", {
     className: "fa fa-angle-up",
     "aria-hidden": "true"
@@ -173,8 +179,9 @@ var FormulaHint = function FormulaHint(props) {
       }
       dragHasMoved.current = false;
     },
-    className: "flex !cursor-grab active:cursor-grabbing items-start justify-between",
+    className: "fortune-formula-hint__heading flex !cursor-grab active:cursor-grabbing items-start justify-between",
     id: "luckysheet-formula-help-title",
+    "data-testid": "formula-hint-heading",
     style: {
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
       padding: "10px",
@@ -183,7 +190,8 @@ var FormulaHint = function FormulaHint(props) {
       userSelect: "none"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: " flex-grow  color-text-default"
+    className: "fortune-formula-hint__para flex-grow color-text-default",
+    "data-testid": "formula-hint-para"
   }, /*#__PURE__*/React.createElement("code", {
     style: {
       fontWeight: "bold"
@@ -285,12 +293,14 @@ var FormulaHint = function FormulaHint(props) {
     },
     onClick: function onClick() {
       return setShowAPInput(!showAPInput);
-    }
+    },
+    "data-testid": "formula-hint-info-api"
   }, /*#__PURE__*/React.createElement("h3", {
     style: {
       margin: "0 0 8px 0"
     },
-    className: "text-heading-xsm color-text-default"
+    className: "fortune-formula-hint__heading-sm text-heading-xsm color-text-default",
+    "data-testid": "formula-hint-info-heading"
   }, isKeyAdded ? "API key provided" : "API key is required"), /*#__PURE__*/React.createElement(LucideIcon, {
     name: showAPInput ? "ChevronUp" : "ChevronDown",
     width: 24,
@@ -298,11 +308,15 @@ var FormulaHint = function FormulaHint(props) {
     style: {
       cursor: "pointer"
     }
-  })), showAPInput && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+  })), showAPInput && (/*#__PURE__*/React.createElement("div", {
+    className: "fortune-formula-hint__info-content",
+    "data-testid": "formula-hint-info-content"
+  }, /*#__PURE__*/React.createElement("p", {
     style: {
       margin: "0 0 16px 0"
     },
-    className: "text-body-sm color-text-default"
+    className: "fortune-formula-hint__para fortune-formula-hint__para--api text-body-sm color-text-default",
+    "data-testid": "formula-hint-para-api"
   }, "This function requires an API key. Please paste it below and\n                  press 'Ok'."), /*#__PURE__*/React.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React.createElement(TextField, {
@@ -323,7 +337,8 @@ var FormulaHint = function FormulaHint(props) {
       setShowAPInput(false);
     },
     disabled: !API_KEY,
-    className: "min-w-[80px]"
+    className: "fortune-formula-hint__cta min-w-[80px]",
+    "data-testid": "formula-hint-cta-ok"
   }, "Ok"))))))), /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: "white",

package/es/components/SheetTab/SheetItem.js

@@ -4,22 +4,28 @@ import React, { useContext, useState, useEffect, useRef, useCallback } from "rea
 import WorkbookContext from "../../context";
 import { useAlert } from "../../hooks/useAlert";
 import SVGIcon from "../SVGIcon";
+var toCssId = function toCssId(s) {
+  return String(s).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
+};
 var SheetItem = function SheetItem(_a) {
+  var _b, _c, _d, _e;
   var sheet = _a.sheet,
     isDropPlaceholder = _a.isDropPlaceholder;
-  var _b = useContext(WorkbookContext),
-    context = _b.context,
-    setContext = _b.setContext,
-    refs = _b.refs;
-  var _c = useState(false),
-    editing = _c[0],
-    setEditing = _c[1];
+  var _f = useContext(WorkbookContext),
+    context = _f.context,
+    setContext = _f.setContext,
+    refs = _f.refs;
+  var _g = useState(false),
+    editing = _g[0],
+    setEditing = _g[1];
   var containerRef = useRef(null);
   var editable = useRef(null);
-  var _d = useState(false),
-    dragOver = _d[0],
-    setDragOver = _d[1];
+  var _h = useState(false),
+    dragOver = _h[0],
+    setDragOver = _h[1];
   var showAlert = useAlert().showAlert;
+  var sheetIdClass = sheet.id != null ? toCssId(String(sheet.id)) : "placeholder";
+  var sheetNameClass = sheet.name ? toCssId(sheet.name) : "";
   useEffect(function () {
     setContext(function (draftCtx) {
       var _a, _b, _c, _d;
@@ -127,7 +133,10 @@ var SheetItem = function SheetItem(_a) {
     draggable: context.allowEdit && !editing,
     key: sheet.id,
     ref: containerRef,
-    className: isDropPlaceholder ? "fortune-sheettab-placeholder" : "luckysheet-sheets-item".concat(context.currentSheetId === sheet.id ? " luckysheet-sheets-item-active" : ""),
+    className: isDropPlaceholder ? "fortune-sheettab-item fortune-sheettab-placeholder" : "fortune-sheettab-item fortune-sheettab-item--".concat(sheetIdClass).concat(sheetNameClass ? " fortune-sheettab-item--name-".concat(sheetNameClass) : "", " luckysheet-sheets-item").concat(context.currentSheetId === sheet.id ? " luckysheet-sheets-item-active" : ""),
+    "data-sheet-id": sheet.id != null ? String(sheet.id) : undefined,
+    "data-sheet-name": sheet.name || undefined,
+    "data-testid": "sheettab-item-".concat((_b = sheet.id) !== null && _b !== void 0 ? _b : "placeholder"),
     onClick: function onClick() {
       if (isDropPlaceholder) return;
       setContext(function (draftCtx) {
@@ -171,13 +180,14 @@ var SheetItem = function SheetItem(_a) {
       display: sheet.hide === 1 ? "none" : ""
     }
   }, editing === false && (/*#__PURE__*/React.createElement("p", {
-    className: "luckysheet-sheets-item-name",
+    className: "fortune-sheettab-item__para luckysheet-sheets-item-name",
     onDoubleClick: function onDoubleClick() {
       if (context.isFlvReadOnly) return;
       setEditing(true);
-    }
+    },
+    "data-testid": "sheettab-item-para-".concat((_c = sheet.id) !== null && _c !== void 0 ? _c : "placeholder")
   }, sheet.name)), editing && (/*#__PURE__*/React.createElement("span", {
-    className: "luckysheet-sheets-item-name",
+    className: "fortune-sheettab-item__para luckysheet-sheets-item-name",
     spellCheck: "false",
     suppressContentEditableWarning: true,
     contentEditable: isDropPlaceholder ? false : editing,
@@ -190,13 +200,16 @@ var SheetItem = function SheetItem(_a) {
     ref: editable,
     style: dragOver ? {
       pointerEvents: "none"
-    } : {}
+    } : {},
+    "data-testid": "sheettab-item-para-editable-".concat((_d = sheet.id) !== null && _d !== void 0 ? _d : "placeholder")
   }, sheet.name)), /*#__PURE__*/React.createElement("span", {
-    className: "luckysheet-sheets-item-function",
+    className: "fortune-sheettab-item__icon fortune-sheettab-item__action fortune-sheettab-item__icon--menu luckysheet-sheets-item-function",
     style: {
       marginRight: "4px",
       marginLeft: "4px"
     },
+    "data-sheet-id": sheet.id != null ? String(sheet.id) : undefined,
+    "data-testid": "sheettab-item-icon-menu-".concat((_e = sheet.id) !== null && _e !== void 0 ? _e : "placeholder"),
     onClick: function onClick(e) {
       if (isDropPlaceholder || context.allowEdit === false) return;
       var rect = refs.workbookContainer.current.getBoundingClientRect();