@fileverse-dev/fortune-react 1.2.97 → 1.2.98-play

package/es/components/ConditionFormat/ConditionRules.js

@@ -360,8 +360,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 +385,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 +397,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 +426,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 +440,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 +464,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/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.css

@@ -9,6 +9,43 @@
   overflow: auto;
 }
 
+/* BEM selectors for testing and styling */
+.fortune-dialog__header {
+  /* header container */
+}
+
+.fortune-dialog__heading {
+  /* dialog title */
+}
+
+.fortune-dialog__para {
+  /* dialog body content */
+}
+
+.fortune-dialog__icon {
+  /* icon in header (e.g. close) */
+}
+
+.fortune-dialog__icon--close {
+  /* close button icon */
+}
+
+.fortune-dialog__actions {
+  /* footer action container */
+}
+
+.fortune-dialog__cta {
+  /* primary/secondary action button */
+}
+
+.fortune-dialog__cta--cancel {
+  /* cancel button */
+}
+
+.fortune-dialog__cta--confirm {
+  /* confirm/ok button */
+}
+
 .fortune-dialog-box-button-container {
   display: flex;
   align-items: center;

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,7 +282,7 @@ 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;
@@ -282,7 +290,8 @@ export var LinkEditCard = function LinkEditCard(_a) {
       setContext(function (draftCtx) {
         return saveHyperlink(draftCtx, r, c, linkText, linkType, linkAddress);
       });
-    }
+    },
+    "data-testid": "link-card-cta-insert"
   }, "Insert link"));
 };
 export default LinkEditCard;

package/es/components/Sheet/use-smooth-scroll.js

@@ -62,6 +62,147 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
       }
     };
   }
+  function handleMouseDragScroll(containerEl, scrollHandler, getPixelScale) {
+    var isDragging = false;
+    var startX = 0;
+    var startY = 0;
+    var lastX = 0;
+    var lastY = 0;
+    var velocityX = 0;
+    var velocityY = 0;
+    var autoScrollAnimationId = 0;
+    var lastMoveTime = 0;
+    var scrollDirection = "none";
+    var VELOCITY_SMOOTHING = 0.3;
+    var MIN_DRAG_THRESHOLD = 5;
+    var ACCELERATION_FACTOR = 1.02;
+    var MAX_VELOCITY = 50;
+    var DIRECTION_LOCK_THRESHOLD = 1.5;
+    var EDGE_SCROLL_ZONE = 10;
+    function stopAutoScroll() {
+      if (autoScrollAnimationId) {
+        cancelAnimationFrame(autoScrollAnimationId);
+        autoScrollAnimationId = 0;
+      }
+      velocityX = 0;
+      velocityY = 0;
+    }
+    function autoScroll() {
+      if (!isDragging) {
+        stopAutoScroll();
+        return;
+      }
+      if (Math.abs(velocityX) > 0.1) {
+        velocityX *= ACCELERATION_FACTOR;
+        velocityX = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityX));
+      }
+      if (Math.abs(velocityY) > 0.1) {
+        velocityY *= ACCELERATION_FACTOR;
+        velocityY = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityY));
+      }
+      var scale = getPixelScale();
+      scrollHandler(velocityX * scale, velocityY * scale);
+      autoScrollAnimationId = requestAnimationFrame(autoScroll);
+    }
+    function onMouseDown(e) {
+      if (e.button !== 0) return;
+      var target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "BUTTON" || target.tagName === "SELECT" || target.tagName === "TEXTAREA" || target.closest("button") || target.closest("input")) {
+        return;
+      }
+      isDragging = true;
+      scrollDirection = "none";
+      startX = e.clientX;
+      startY = e.clientY;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      lastMoveTime = performance.now();
+      velocityX = 0;
+      velocityY = 0;
+      containerEl.style.cursor = "grabbing";
+      e.preventDefault();
+    }
+    function onMouseMove(e) {
+      if (!isDragging) return;
+      var currentTime = performance.now();
+      var deltaTime = Math.max(1, currentTime - lastMoveTime);
+      var deltaX = e.clientX - lastX;
+      var deltaY = e.clientY - lastY;
+      var totalMovedX = e.clientX - startX;
+      var totalMovedY = e.clientY - startY;
+      var absMovedX = Math.abs(totalMovedX);
+      var absMovedY = Math.abs(totalMovedY);
+      var containerRect = containerEl.getBoundingClientRect();
+      var mouseX = e.clientX - containerRect.left;
+      var mouseY = e.clientY - containerRect.top;
+      var isNearLeftEdge = mouseX < EDGE_SCROLL_ZONE;
+      var isNearRightEdge = mouseX > containerRect.width - EDGE_SCROLL_ZONE;
+      var isNearTopEdge = mouseY < EDGE_SCROLL_ZONE;
+      var isNearBottomEdge = mouseY > containerRect.height - EDGE_SCROLL_ZONE;
+      if (scrollDirection === "none" && (absMovedX > MIN_DRAG_THRESHOLD || absMovedY > MIN_DRAG_THRESHOLD)) {
+        if (absMovedX > absMovedY * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "horizontal";
+        } else if (absMovedY > absMovedX * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "vertical";
+        } else {
+          scrollDirection = "none";
+        }
+      }
+      if (scrollDirection === "horizontal" || scrollDirection === "none") {
+        if (absMovedX > MIN_DRAG_THRESHOLD) {
+          if (isNearLeftEdge || isNearRightEdge) {
+            if (Math.abs(deltaX) > 0.1) {
+              var instantVelocityX = deltaX / deltaTime * 16;
+              velocityX = velocityX * (1 - VELOCITY_SMOOTHING) + instantVelocityX * VELOCITY_SMOOTHING;
+            }
+            if (!autoScrollAnimationId) {
+              autoScrollAnimationId = requestAnimationFrame(autoScroll);
+            }
+          } else {
+            velocityX = 0;
+          }
+        }
+      } else {
+        velocityX = 0;
+      }
+      if (scrollDirection === "vertical" || scrollDirection === "none") {
+        if (absMovedY > MIN_DRAG_THRESHOLD) {
+          if (isNearTopEdge || isNearBottomEdge) {
+            if (Math.abs(deltaY) > 0.1) {
+              var instantVelocityY = deltaY / deltaTime * 16;
+              velocityY = velocityY * (1 - VELOCITY_SMOOTHING) + instantVelocityY * VELOCITY_SMOOTHING;
+            }
+            if (!autoScrollAnimationId) {
+              autoScrollAnimationId = requestAnimationFrame(autoScroll);
+            }
+          } else {
+            velocityY = 0;
+          }
+        }
+      } else {
+        velocityY = 0;
+      }
+      lastX = e.clientX;
+      lastY = e.clientY;
+      lastMoveTime = currentTime;
+      e.preventDefault();
+    }
+    function onMouseUp() {
+      if (!isDragging) return;
+      isDragging = false;
+      stopAutoScroll();
+      containerEl.style.cursor = "";
+    }
+    containerEl.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return function () {
+      stopAutoScroll();
+      containerEl.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }
   function handleMobileScroll(containerEl, scrollHandler, getPixelScale) {
     var isScrolling = false;
     var gestureStartClientX = 0;
@@ -210,9 +351,13 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
     var unmountMobileScrollHandler = handleMobileScroll(scrollContainerEl, scrollHandler, function () {
       return (window.devicePixelRatio || 1) * context.zoomRatio;
     });
+    var unmountMouseDragHandler = handleMouseDragScroll(scrollContainerEl, scrollHandler, function () {
+      return (window.devicePixelRatio || 1) * context.zoomRatio;
+    });
     return function () {
       unmountScrollHandler();
       unmountMobileScrollHandler();
+      unmountMouseDragHandler();
     };
   }
   useEffect(function () {