fui-material 2.1.5 → 2.1.7

package/dist/f-ui-kit.es.js

@@ -4030,9 +4030,9 @@ const FTooltip = ({
   disableFocusListener = false,
   disableTouchListener = false,
   enterDelay = 0,
-  disableOnDisabled = false,
   className = "",
-  style
+  style,
+  allowTooltipOnDisabled = false
 }) => {
   const [open, setOpen] = useState(false);
   const [mountTooltip, setMountTooltip] = useState(false);
@@ -4046,12 +4046,8 @@ const FTooltip = ({
   const animationFrame = useRef(null);
   const isOpen = openProp !== void 0 ? openProp : open;
   const handleOpen = () => {
-    if (enterTimer.current) {
-      clearTimeout(enterTimer.current);
-    }
-    if (leaveTimer.current) {
-      clearTimeout(leaveTimer.current);
-    }
+    if (enterTimer.current) clearTimeout(enterTimer.current);
+    if (leaveTimer.current) clearTimeout(leaveTimer.current);
     enterTimer.current = setTimeout(() => {
       if (openProp === void 0) {
         setOpen(true);
@@ -4095,7 +4091,7 @@ const FTooltip = ({
       }
     }
   };
-  const updatePosition = () => {
+  const updatePosition = useCallback(() => {
     if (!childRef.current || !tooltipRef.current) return;
     const childRect = childRef.current.getBoundingClientRect();
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
@@ -4121,64 +4117,44 @@ const FTooltip = ({
         left2 = childRect.right + scrollX + (arrow2 ? 8 : 0);
         break;
     }
-    setTooltipStyles({
-      top: `${top}px`,
-      left: `${left2}px`
-    });
-  };
+    setTooltipStyles({ top: `${top}px`, left: `${left2}px` });
+  }, [placement, arrow2]);
   useEffect(() => {
     if (isVisible) {
       updatePosition();
     }
-  }, [isVisible, placement]);
+  }, [isVisible, updatePosition]);
   useEffect(() => {
     const handleResize = () => {
-      if (isVisible) {
-        updatePosition();
-      }
+      if (isVisible) updatePosition();
     };
     window.addEventListener("resize", handleResize);
+    const currentEnterTimer = enterTimer.current;
+    const currentLeaveTimer = leaveTimer.current;
+    const currentAnimationFrame = animationFrame.current;
     return () => {
       window.removeEventListener("resize", handleResize);
-      if (enterTimer.current) {
-        clearTimeout(enterTimer.current);
-      }
-      if (leaveTimer.current) {
-        clearTimeout(leaveTimer.current);
-      }
-      if (animationFrame.current) {
-        cancelAnimationFrame(animationFrame.current);
-      }
+      if (currentEnterTimer) clearTimeout(currentEnterTimer);
+      if (currentLeaveTimer) clearTimeout(currentLeaveTimer);
+      if (currentAnimationFrame) cancelAnimationFrame(currentAnimationFrame);
     };
   }, [isVisible, updatePosition]);
-  const isChildDisabled = children.props.disabled;
-  if (isChildDisabled && disableOnDisabled) {
-    return cloneElement(children, { ref: childRef });
-  }
   const childProps = {
     ref: childRef
   };
-  const wrapperProps = {};
   if (!disableHoverListener) {
-    const mouseEnterHandler = (e) => {
+    childProps.onMouseEnter = (e) => {
       var _a, _b;
       handleOpen();
       (_b = (_a = children.props).onMouseEnter) == null ? void 0 : _b.call(_a, e);
     };
-    const mouseLeaveHandler = (e) => {
+    childProps.onMouseLeave = (e) => {
       var _a, _b;
       handleClose();
       (_b = (_a = children.props).onMouseLeave) == null ? void 0 : _b.call(_a, e);
     };
-    if (isChildDisabled) {
-      wrapperProps.onMouseEnter = mouseEnterHandler;
-      wrapperProps.onMouseLeave = mouseLeaveHandler;
-    } else {
-      childProps.onMouseEnter = mouseEnterHandler;
-      childProps.onMouseLeave = mouseLeaveHandler;
-    }
   }
-  if (!disableFocusListener && !isChildDisabled) {
+  if (!disableFocusListener) {
     childProps.onFocus = (e) => {
       var _a, _b;
       handleOpen();
@@ -4191,33 +4167,32 @@ const FTooltip = ({
     };
   }
   if (!disableTouchListener) {
-    const touchStartHandler = (e) => {
+    childProps.onTouchStart = (e) => {
       var _a, _b;
       handleOpen();
       (_b = (_a = children.props).onTouchStart) == null ? void 0 : _b.call(_a, e);
     };
-    const touchEndHandler = (e) => {
+    childProps.onTouchEnd = (e) => {
       var _a, _b;
       handleClose();
       (_b = (_a = children.props).onTouchEnd) == null ? void 0 : _b.call(_a, e);
     };
-    if (isChildDisabled) {
-      wrapperProps.onTouchStart = touchStartHandler;
-      wrapperProps.onTouchEnd = touchEndHandler;
-    } else {
-      childProps.onTouchStart = touchStartHandler;
-      childProps.onTouchEnd = touchEndHandler;
-    }
   }
-  const clonedChild = cloneElement(children, childProps);
-  const childElement = isChildDisabled ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      style: { display: "inline-block", cursor: "not-allowed" },
-      ...wrapperProps,
-      children: clonedChild
-    }
-  ) : clonedChild;
+  let wrappedChild;
+  const childPropsTyped = children.props;
+  if (allowTooltipOnDisabled && React.isValidElement(children) && (childPropsTyped.disabled || childPropsTyped["aria-disabled"])) {
+    wrappedChild = /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        ref: childRef,
+        ...childProps,
+        style: { display: "inline-block", cursor: "not-allowed" },
+        children
+      }
+    );
+  } else {
+    wrappedChild = cloneElement(children, childProps);
+  }
   const tooltipClasses = [
     styles$5["f-tooltip"],
     styles$5[`f-tooltip--${placement}`],
@@ -4240,7 +4215,7 @@ const FTooltip = ({
     }
   ) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    childElement,
+    wrappedChild,
     tooltipElement && createPortal(tooltipElement, document.body)
   ] });
 };