@fileverse-dev/fortune-react 1.2.98 → 1.2.99

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

@@ -24,7 +24,7 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var FormulaHint = function FormulaHint(props) {
-  var _a;
+  var _a, _b, _c;
   var showFormulaHint = props.showFormulaHint,
     handleShowFormulaHint = props.handleShowFormulaHint,
     commaCount = props.commaCount,
@@ -34,19 +34,19 @@ var FormulaHint = function FormulaHint(props) {
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
   var formulaMore = (0, _fortuneCore.locale)(context).formulaMore;
   var fn = functionName ? context.formulaCache.functionlistMap[functionName] : context.formulaCache.functionlistMap[(context === null || context === void 0 ? void 0 : context.functionHint) || ""];
-  var _b = (0, _react.useState)(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
-    API_KEY = _b[0],
-    setAPI_KEY = _b[1];
-  var _c = (0, _react.useState)(!API_KEY),
-    showAPInput = _c[0],
-    setShowAPInput = _c[1];
-  var _d = (0, _react.useState)(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
-    isKeyAdded = _d[0],
-    setApiKeyAdded = _d[1];
+  var _d = (0, _react.useState)(localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY)),
+    API_KEY = _d[0],
+    setAPI_KEY = _d[1];
+  var _e = (0, _react.useState)(!API_KEY),
+    showAPInput = _e[0],
+    setShowAPInput = _e[1];
+  var _f = (0, _react.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 = (0, _react.useState)(formulaExpand),
-    showFunctionBody = _e[0],
-    setShouldShowFunctionBody = _e[1];
+  var _g = (0, _react.useState)(formulaExpand),
+    showFunctionBody = _g[0],
+    setShouldShowFunctionBody = _g[1];
   (0, _react.useEffect)(function () {
     if (fn) {
       setApiKeyAdded(!!localStorage.getItem(fn === null || fn === void 0 ? void 0 : fn.API_KEY));
@@ -58,12 +58,12 @@ var FormulaHint = function FormulaHint(props) {
     ETHERSCAN_API_KEY: "Etherscan API key"
   };
   var hintRef = (0, _react.useRef)(null);
-  var _f = (0, _react.useState)(0),
-    top = _f[0],
-    setTop = _f[1];
-  var _g = (0, _react.useState)(false),
-    showDelayedHint = _g[0],
-    setShowDelayedHint = _g[1];
+  var _h = (0, _react.useState)(0),
+    top = _h[0],
+    setTop = _h[1];
+  var _j = (0, _react.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;
@@ -103,6 +103,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.default.createElement(_dragableDiv.DraggableDiv, {
     initialTop: top,
     dragHasMoved: dragHasMoved,
@@ -119,7 +120,7 @@ var FormulaHint = function FormulaHint(props) {
     }
   }, /*#__PURE__*/_react.default.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,
@@ -130,7 +131,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.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
@@ -149,7 +151,9 @@ var FormulaHint = function FormulaHint(props) {
   })))), /*#__PURE__*/_react.default.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",
@@ -160,14 +164,16 @@ var FormulaHint = function FormulaHint(props) {
       padding: "0px"
     }
   }), /*#__PURE__*/_react.default.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.default.createElement("i", {
     className: "fa fa-times",
     "aria-hidden": "true"
   })), /*#__PURE__*/_react.default.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.default.createElement("i", {
     className: "fa fa-angle-up",
     "aria-hidden": "true"
@@ -182,8 +188,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",
@@ -192,7 +199,8 @@ var FormulaHint = function FormulaHint(props) {
       userSelect: "none"
     }
   }, /*#__PURE__*/_react.default.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.default.createElement("code", {
     style: {
       fontWeight: "bold"
@@ -294,12 +302,14 @@ var FormulaHint = function FormulaHint(props) {
     },
     onClick: function onClick() {
       return setShowAPInput(!showAPInput);
-    }
+    },
+    "data-testid": "formula-hint-info-api"
   }, /*#__PURE__*/_react.default.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.default.createElement(_ui.LucideIcon, {
     name: showAPInput ? "ChevronUp" : "ChevronDown",
     width: 24,
@@ -307,11 +317,15 @@ var FormulaHint = function FormulaHint(props) {
     style: {
       cursor: "pointer"
     }
-  })), showAPInput && (/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+  })), showAPInput && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-formula-hint__info-content",
+    "data-testid": "formula-hint-info-content"
+  }, /*#__PURE__*/_react.default.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.default.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
@@ -332,7 +346,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.default.createElement("div", {
     style: {
       backgroundColor: "white",

package/lib/components/SheetTab/SheetItem.js

@@ -13,22 +13,28 @@ var _useAlert = require("../../hooks/useAlert");
 var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 = (0, _react.useContext)(_context.default),
-    context = _b.context,
-    setContext = _b.setContext,
-    refs = _b.refs;
-  var _c = (0, _react.useState)(false),
-    editing = _c[0],
-    setEditing = _c[1];
+  var _f = (0, _react.useContext)(_context.default),
+    context = _f.context,
+    setContext = _f.setContext,
+    refs = _f.refs;
+  var _g = (0, _react.useState)(false),
+    editing = _g[0],
+    setEditing = _g[1];
   var containerRef = (0, _react.useRef)(null);
   var editable = (0, _react.useRef)(null);
-  var _d = (0, _react.useState)(false),
-    dragOver = _d[0],
-    setDragOver = _d[1];
+  var _h = (0, _react.useState)(false),
+    dragOver = _h[0],
+    setDragOver = _h[1];
   var showAlert = (0, _useAlert.useAlert)().showAlert;
+  var sheetIdClass = sheet.id != null ? toCssId(String(sheet.id)) : "placeholder";
+  var sheetNameClass = sheet.name ? toCssId(sheet.name) : "";
   (0, _react.useEffect)(function () {
     setContext(function (draftCtx) {
       var _a, _b, _c, _d;
@@ -136,7 +142,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) {
@@ -180,13 +189,14 @@ var SheetItem = function SheetItem(_a) {
       display: sheet.hide === 1 ? "none" : ""
     }
   }, editing === false && (/*#__PURE__*/_react.default.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.default.createElement("span", {
-    className: "luckysheet-sheets-item-name",
+    className: "fortune-sheettab-item__para luckysheet-sheets-item-name",
     spellCheck: "false",
     suppressContentEditableWarning: true,
     contentEditable: isDropPlaceholder ? false : editing,
@@ -199,13 +209,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.default.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();

package/lib/components/SheetTab/index.js

@@ -139,8 +139,9 @@ var SheetTab = function SheetTab() {
   });
   var finalStats = statsFilter.length !== 6 ? [] : statsFilter;
   return /*#__PURE__*/_react.default.createElement("div", null, showDisclaimer && (/*#__PURE__*/_react.default.createElement("div", {
-    className: "w-full",
+    className: "fortune-sheettab__info fortune-sheettab__disclaimer w-full",
     id: "denomination-warning",
+    "data-testid": "sheettab-info-disclaimer",
     style: {
       zIndex: 1003,
       position: "absolute",
@@ -157,36 +158,43 @@ var SheetTab = function SheetTab() {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "max-w-7xl mx-auto px-4 py-1 ".concat(isMobile && "w-full flex justify-between")
   }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "".concat(isMobile ? "text-left" : "text-center", " text-xsm")
+    className: "fortune-sheettab__para ".concat(isMobile ? "text-left" : "text-center", " text-xsm"),
+    "data-testid": "sheettab-para-disclaimer"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "font-medium"
   }, "Disclaimer:"), " Prices are not updated in real time and may differ slightly. Updates may be delayed by up to 20 minutes."), isMobile && (/*#__PURE__*/_react.default.createElement("p", {
-    className: "ml-4 content-center cursor-pointer",
+    className: "fortune-sheettab__action fortune-sheettab__action--close-disclaimer ml-4 content-center cursor-pointer",
     style: {
       alignContent: "center"
     },
-    onClick: handleCloseDisclaimer
+    onClick: handleCloseDisclaimer,
+    "data-testid": "sheettab-action-close-disclaimer"
   }, "Close"))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "luckysheet-sheet-area luckysheet-noselected-text border-t color-border-default color-bg-secondary",
+    className: "fortune-sheettab luckysheet-sheet-area luckysheet-noselected-text border-t color-border-default color-bg-secondary",
     onContextMenu: function onContextMenu(e) {
       return e.preventDefault();
     },
-    id: "luckysheet-sheet-area"
+    id: "luckysheet-sheet-area",
+    "data-testid": "sheettab"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    id: "luckysheet-sheet-content"
+    id: "luckysheet-sheet-content",
+    className: "fortune-sheettab__content",
+    "data-testid": "sheettab-content"
   }, context.allowEdit && (/*#__PURE__*/_react.default.createElement(_ui.IconButton, {
-    className: "fortune-sheettab-button border-none shadow-none",
+    className: "fortune-sheettab__cta fortune-sheettab-button border-none shadow-none",
     onClick: onAddSheetClick,
     elevation: 1,
     icon: "Plus",
     size: "sm",
-    variant: "secondary"
+    variant: "secondary",
+    "data-testid": "sheettab-cta-add-sheet"
   })), context.allowEdit && (/*#__PURE__*/_react.default.createElement("div", {
     className: "sheet-list-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "all-sheets",
-    className: "fortune-sheettab-button",
+    className: "fortune-sheettab__icon fortune-sheettab-button",
     ref: tabContainerRef,
+    "data-testid": "sheettab-icon-all-sheets",
     onMouseDown: function onMouseDown(e) {
       e.stopPropagation();
       setContext(function (ctx) {
@@ -195,14 +203,16 @@ var SheetTab = function SheetTab() {
       });
     }
   }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
-    className: "fortune-sheettab-button border-none shadow-none",
+    className: "fortune-sheettab__icon fortune-sheettab-button border-none shadow-none",
     elevation: 1,
     icon: "Menu",
     size: "sm",
-    variant: "secondary"
+    variant: "secondary",
+    "data-testid": "sheettab-icon-menu"
   })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-sheettab-container",
-    id: "fortune-sheettab-container"
+    className: "fortune-sheettab__tabs fortune-sheettab-container",
+    id: "fortune-sheettab-container",
+    "data-testid": "sheettab-tabs"
   }, !isShowBoundary && /*#__PURE__*/_react.default.createElement("div", {
     className: "boundary boundary-left"
   }), /*#__PURE__*/_react.default.createElement("div", {
@@ -255,21 +265,24 @@ var SheetTab = function SheetTab() {
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "fortune-sheet-area-right"
   }, statsFilter.length === 6 && calInfo.count > 1 && (/*#__PURE__*/_react.default.createElement(_ui.Popover, null, /*#__PURE__*/_react.default.createElement(_ui.PopoverTrigger, {
-    className: "p-0 m-0 mr-2"
+    className: "fortune-sheettab__info-trigger p-0 m-0 mr-2",
+    "data-testid": "sheettab-info-stats-trigger"
   }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "ghost",
-    className: "w-full !h-6 p-2 m-1 text-left flex items-center justify-center transition mr-2 !rounded-[0px]",
+    className: "fortune-sheettab__info fortune-sheettab__info--stats w-full !h-6 p-2 m-1 text-left flex items-center justify-center transition mr-2 !rounded-[0px]",
     style: {
       height: "24px !important"
-    }
+    },
+    "data-testid": "sheettab-info-stats"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "flex items-center"
   }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "text-body-sm",
+    className: "fortune-sheettab__para fortune-sheettab__para--stats text-body-sm",
     style: {
       fontWeight: "500",
       marginRight: "8px"
-    }
+    },
+    "data-testid": "sheettab-para-stats"
   }, STATS_LABELS[selectedStat], ":", " ", calInfo[selectedStat]), /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "18",
@@ -302,7 +315,9 @@ var SheetTab = function SheetTab() {
     return /*#__PURE__*/_react.default.createElement(_ui.Button, {
       variant: "ghost",
       key: option.value,
-      className: "w-full h-8 rounded p-2 m-1 text-left flex items-center justify-between transition mr-2 min-w-[50px] ".concat(selectedStat === option.value && "bg-[#F8F9FA]"),
+      className: "fortune-sheettab__stats-option fortune-sheettab__stats-option--".concat(option.value, " w-full h-8 rounded p-2 m-1 text-left flex items-center justify-between transition mr-2 min-w-[50px] ").concat(selectedStat === option.value && "bg-[#F8F9FA]"),
+      "data-stat-value": option.value,
+      "data-testid": "sheettab-stats-option-".concat(option.value),
       onClick: function onClick() {
         return setSelectedStat(option.value);
       }

package/lib/components/Toolbar/Button.js

@@ -17,18 +17,25 @@ var Button = function Button(_a) {
     children = _a.children,
     style = _a.style,
     id = _a.id;
+  var iconIdClass = iconId.replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
   return /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
     text: tooltip,
     placement: "bottom"
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: id,
-    className: "fortune-toolbar-button fortune-toolbar-item",
+    className: "fortune-toolbar-button fortune-toolbar-item fortune-toolbar-button__cta fortune-toolbar-button--".concat(iconIdClass),
+    "data-icon-id": iconId,
     onClick: onClick,
     tabIndex: 0,
     role: "button",
     style: selected ? {
       backgroundColor: "#FFDF0A"
-    } : style
+    } : style,
+    "data-testid": "toolbar-cta-".concat(id !== null && id !== void 0 ? id : iconId)
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "fortune-toolbar-button__icon fortune-toolbar-button__icon--".concat(iconIdClass),
+    "data-icon-id": iconId,
+    "data-testid": "toolbar-icon-".concat(iconId)
   }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
     name: (0, _.getLucideIcon)(iconId),
     width: 16,
@@ -36,6 +43,6 @@ var Button = function Button(_a) {
     style: disabled ? {
       opacity: 0.3
     } : {}
-  }), children));
+  })), children));
 };
 var _default = exports.default = Button;

package/lib/components/Toolbar/Combo.js

@@ -11,6 +11,9 @@ var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
 var _ = require(".");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var toCssId = function toCssId(s) {
+  return String(s).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
+};
 var Combo = function Combo(_a) {
   var tooltip = _a.tooltip,
     _onClick = _a.onClick,
@@ -29,6 +32,7 @@ var Combo = function Combo(_a) {
     setOpen = _c[1];
   var buttonRef = (0, _react.useRef)(null);
   var ref = (0, _react.useRef)(null);
+  var iconIdClass = iconId ? toCssId(iconId) : "combo";
   if (!triggerRef) {
     triggerRef = ref;
   }
@@ -42,7 +46,9 @@ var Combo = function Combo(_a) {
     text: tooltip,
     placement: "bottom"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-toolbar-combo-button",
+    className: "fortune-toolbar-combo-button fortune-toolbar-combo-button--".concat(iconIdClass),
+    "data-icon-id": iconId !== null && iconId !== void 0 ? iconId : undefined,
+    "data-testid": "toolbar-combo-".concat(iconId !== null && iconId !== void 0 ? iconId : "combo"),
     onClick: function onClick(e) {
       if (_onClick) {
         _onClick(e);
@@ -102,7 +108,9 @@ var Combo = function Combo(_a) {
   })))));
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: buttonRef,
-    className: "fortune-toolbar-item",
+    className: "fortune-toolbar-item fortune-toolbar-combo fortune-toolbar-combo--".concat(iconIdClass),
+    "data-icon-id": iconId !== null && iconId !== void 0 ? iconId : undefined,
+    "data-testid": "toolbar-combo-".concat(iconId !== null && iconId !== void 0 ? iconId : "combo"),
     onKeyDown: function onKeyDown(e) {
       e.stopPropagation();
     }

package/lib/components/Toolbar/CustomButton.js

@@ -8,6 +8,9 @@ var _react = _interopRequireDefault(require("react"));
 var _ui = require("@fileverse/ui");
 var _CustomIcon = _interopRequireDefault(require("./CustomIcon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var toCssId = function toCssId(s) {
+  return String(s).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
+};
 var CustomButton = function CustomButton(_a) {
   var tooltip = _a.tooltip,
     onClick = _a.onClick,
@@ -15,22 +18,28 @@ var CustomButton = function CustomButton(_a) {
     children = _a.children,
     iconName = _a.iconName,
     icon = _a.icon;
+  var iconNameClass = iconName ? toCssId(iconName) : "custom";
   return /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
     text: tooltip,
     placement: "bottom"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-toolbar-button fortune-toolbar-item",
+    className: "fortune-toolbar-button fortune-toolbar-item fortune-toolbar-button--".concat(iconNameClass),
+    "data-icon-name": iconName !== null && iconName !== void 0 ? iconName : undefined,
     onClick: onClick,
     tabIndex: 0,
     role: "button",
     style: selected ? {
       backgroundColor: "#FFDF0A"
-    } : {}
+    } : {},
+    "data-testid": "toolbar-cta-".concat(iconName !== null && iconName !== void 0 ? iconName : "custom")
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "fortune-toolbar-button__icon fortune-toolbar-button__icon--".concat(iconNameClass),
+    "data-icon-name": iconName !== null && iconName !== void 0 ? iconName : undefined
   }, /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
     width: 16,
     height: 16,
     iconName: iconName,
     content: icon
-  }), children));
+  })), children));
 };
 var _default = exports.default = CustomButton;

package/lib/components/Toolbar/Select.js

@@ -15,16 +15,22 @@ var Select = function Select(_a) {
     style: style
   }, children);
 };
+var toCssId = function toCssId(s) {
+  return String(s).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
+};
 var Option = exports.Option = function Option(_a) {
   var iconId = _a.iconId,
     onClick = _a.onClick,
     children = _a.children,
     _onMouseLeave = _a.onMouseLeave,
     _onMouseEnter = _a.onMouseEnter;
+  var iconIdClass = iconId ? toCssId(iconId) : "option";
   return /*#__PURE__*/_react.default.createElement("div", {
     onClick: onClick,
     tabIndex: 0,
-    className: "fortune-toolbar-select-option",
+    className: "fortune-toolbar-select-option fortune-toolbar-select-option--".concat(iconIdClass),
+    "data-icon-id": iconId !== null && iconId !== void 0 ? iconId : undefined,
+    "data-testid": "toolbar-select-option-".concat(iconId !== null && iconId !== void 0 ? iconId : "option"),
     onMouseLeave: function onMouseLeave(e) {
       return _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(e);
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.2.98",
+  "version": "1.2.99",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@fileverse-dev/fortune-core": "1.2.98",
+    "@fileverse-dev/fortune-core": "1.2.99",
     "@fileverse/ui": "5.0.0",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",