@unbxd-ui/unbxd-react-components 0.2.145-beta.6 → 0.2.145-beta.8

package/components/Tooltip/Tooltip.js

@@ -11,127 +11,266 @@ var _excluded = ["TooltipActivator", "activatorAction", "direction", "children",
 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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 /* eslint-disable react/prop-types */
 var DefaultTooltipActivator = function DefaultTooltipActivator() {
   return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, "i");
 };
-var Tooltip = function Tooltip(props, ref) {
+
+// Dynamic positioning hook
+var useTooltipPosition = function useTooltipPosition(activatorRef, tooltipRef) {
+  var preferredDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top';
+  var isOpen = arguments.length > 3 ? arguments[3] : undefined;
+  var _useState = (0, _react.useState)({
+      direction: preferredDirection,
+      tooltipStyle: {},
+      arrowStyle: {}
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var calculatePosition = (0, _react.useCallback)(function () {
+    if (!activatorRef.current || !tooltipRef.current || !isOpen) return;
+    var activator = activatorRef.current.getBoundingClientRect();
+    var tooltip = tooltipRef.current.getBoundingClientRect();
+    var viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    var spacing = 12; // Increased from 8 to 12 to prevent overlap
+    var arrowSize = 8; // Size of the pointer triangle
+
+    // Calculate available space in each direction
+    var spaces = {
+      top: activator.top,
+      bottom: viewport.height - activator.bottom,
+      left: activator.left,
+      right: viewport.width - activator.right
+    };
+
+    // Determine best direction based on available space
+    var direction = preferredDirection;
+    var requiredSpace = {
+      top: tooltip.height + spacing + arrowSize,
+      bottom: tooltip.height + spacing + arrowSize,
+      left: tooltip.width + spacing + arrowSize,
+      right: tooltip.width + spacing + arrowSize
+    };
+
+    // Check if preferred direction has enough space, otherwise find best alternative
+    if (spaces[direction] < requiredSpace[direction]) {
+      var alternatives = Object.keys(spaces).filter(function (dir) {
+        return spaces[dir] >= requiredSpace[dir];
+      }).sort(function (a, b) {
+        return spaces[b] - spaces[a];
+      });
+      direction = alternatives[0] || preferredDirection; // Fallback to preferred if no space
+    }
+
+    // Calculate tooltip position relative to the activator
+    var tooltipStyle = {
+      position: 'absolute'
+    };
+    var arrowStyle = {
+      position: 'absolute'
+    };
+    switch (direction) {
+      case 'top':
+        tooltipStyle.bottom = "".concat(activator.height + spacing, "px"); // Changed to use activator height + spacing
+        tooltipStyle.left = "50%";
+        tooltipStyle.transform = 'translateX(-50%)';
+        arrowStyle.top = '100%';
+        arrowStyle.left = '50%';
+        arrowStyle.transform = 'translateX(-50%)';
+        break;
+      case 'bottom':
+        tooltipStyle.top = "".concat(activator.height + spacing, "px"); // Changed to use activator height + spacing
+        tooltipStyle.left = "50%";
+        tooltipStyle.transform = 'translateX(-50%)';
+        arrowStyle.bottom = '100%';
+        arrowStyle.left = '50%';
+        arrowStyle.transform = 'translateX(-50%)';
+        break;
+      case 'left':
+        tooltipStyle.right = "".concat(activator.width + spacing, "px"); // Changed to use activator width + spacing
+        tooltipStyle.top = "50%";
+        tooltipStyle.transform = 'translateY(-50%)';
+        arrowStyle.left = '100%';
+        arrowStyle.top = '50%';
+        arrowStyle.transform = 'translateY(-50%)';
+        break;
+      case 'right':
+        tooltipStyle.left = "".concat(activator.width + spacing, "px"); // Changed to use activator width + spacing
+        tooltipStyle.top = "50%";
+        tooltipStyle.transform = 'translateY(-50%)';
+        arrowStyle.right = '100%';
+        arrowStyle.top = '50%';
+        arrowStyle.transform = 'translateY(-50%)';
+        break;
+    }
+
+    // Handle viewport boundary collisions for horizontal directions
+    if (direction === 'top' || direction === 'bottom') {
+      var tooltipCenter = activator.left + activator.width / 2;
+      var tooltipHalfWidth = tooltip.width / 2;
+      if (tooltipCenter - tooltipHalfWidth < 0) {
+        // Too far left
+        tooltipStyle.left = "".concat(-activator.left, "px");
+        tooltipStyle.transform = 'none';
+        arrowStyle.left = "".concat(activator.width / 2, "px");
+      } else if (tooltipCenter + tooltipHalfWidth > viewport.width) {
+        // Too far right
+        tooltipStyle.right = "".concat(activator.left + activator.width - viewport.width, "px");
+        tooltipStyle.left = 'auto';
+        tooltipStyle.transform = 'none';
+        arrowStyle.right = "".concat(activator.width / 2, "px");
+        arrowStyle.left = 'auto';
+      }
+    }
+    setPosition({
+      direction: direction,
+      tooltipStyle: tooltipStyle,
+      arrowStyle: arrowStyle
+    });
+  }, [preferredDirection, isOpen]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && activatorRef.current && tooltipRef.current) {
+      // Small delay to ensure tooltip is rendered
+      var timer = setTimeout(calculatePosition, 10);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [calculatePosition, isOpen]);
+  (0, _react.useEffect)(function () {
+    if (isOpen) {
+      var handleResize = function handleResize() {
+        return calculatePosition();
+      };
+      window.addEventListener('resize', handleResize);
+      return function () {
+        return window.removeEventListener('resize', handleResize);
+      };
+    }
+  }, [calculatePosition, isOpen]);
+  return position;
+};
+var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var TooltipActivator = props.TooltipActivator,
     activatorAction = props.activatorAction,
-    direction = props.direction,
+    _props$direction = props.direction,
+    preferredDirection = _props$direction === void 0 ? 'top' : _props$direction,
     children = props.children,
-    className = props.className,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
     restProps = _objectWithoutProperties(props, _excluded);
-  var _useState = (0, _react.useState)(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    actionClassName = _useState2[0],
-    setActionClassName = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
-  var tooltipBodyRef = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    actionClassName = _useState6[0],
+    setActionClassName = _useState6[1];
+  var activatorRef = (0, _react.useRef)(null);
   var tooltipRef = (0, _react.useRef)(null);
-  var dirClassName = "RCB-tooltip-right";
-  switch (direction) {
-    case "bottom":
-      dirClassName = "RCB-tooltip-bottom";
-      break;
-    case "left":
-      dirClassName = "RCB-tooltip-left";
-      break;
-    case "top":
-      dirClassName = "RCB-tooltip-top";
-      break;
-    default:
-      dirClassName = "RCB-tooltip-right";
-      break;
-  }
+  var containerRef = (0, _react.useRef)(null);
+
+  // Use the dynamic positioning hook
+  var _useTooltipPosition = useTooltipPosition(activatorRef, tooltipRef, preferredDirection, isOpen),
+    direction = _useTooltipPosition.direction,
+    tooltipStyle = _useTooltipPosition.tooltipStyle,
+    arrowStyle = _useTooltipPosition.arrowStyle;
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       hideToolTip: function hideToolTip() {
-        setIsOpen(false);
+        return setIsOpen(false);
       }
     };
   });
-  var showToolTipClick = function showToolTipClick(e) {
-    e.stopPropagation();
-    setIsOpen(!isOpen);
-    setActionClassName("RCB-tooltip-click");
-  };
-  var showToolTipHover = function showToolTipHover() {
-    setActionClassName("RCB-tooltip-hover");
-    setIsOpen(true);
+  var showToolTip = function showToolTip(e) {
+    if (activatorAction === 'click') {
+      e.stopPropagation();
+      setIsOpen(!isOpen);
+      setActionClassName("RCB-tooltip-click");
+    } else {
+      setIsOpen(true);
+      setActionClassName("RCB-tooltip-hover");
+    }
   };
   var hideToolTip = function hideToolTip() {
     setIsOpen(false);
   };
-  var changeModalState = function changeModalState(newState) {
-    setIsOpen(newState);
-  };
-  var onBodyClick = function onBodyClick(e) {
-    var eventTarget = e.target;
-    var inlineModalNode = tooltipRef.current;
-    var eventPathNodes = e.composedPath();
-    var isWithinModal = false;
-    if (inlineModalNode.contains(eventTarget)) {
-      isWithinModal = true;
-    } else {
-      for (var i = 0; i < eventPathNodes.length; i++) {
-        var node = eventPathNodes[i];
-        if (node !== window && inlineModalNode.contains(node)) {
-          isWithinModal = true;
-          break;
+
+  // Handle outside click for click-activated tooltips
+  (0, _react.useEffect)(function () {
+    if (activatorAction === 'click' && isOpen) {
+      var handleOutsideClick = function handleOutsideClick(e) {
+        // Check if click is outside the container (includes both activator and tooltip)
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
         }
-      }
-    }
-    if (!isWithinModal) {
-      /* outside click -> close modal */
-      changeModalState(false);
+      };
+
+      // Add event listener with a small delay to avoid immediate closure
+      var timer = setTimeout(function () {
+        document.addEventListener('click', handleOutsideClick);
+      }, 10);
+      return function () {
+        clearTimeout(timer);
+        document.removeEventListener('click', handleOutsideClick);
+      };
     }
-  };
-  (0, _react.useEffect)(function () {
-    /* add when mounted */
-    document.addEventListener("click", onBodyClick);
+  }, [activatorAction, isOpen]);
 
-    /* return function to be called when unmounted */
-    return function () {
-      document.removeEventListener("click", onBodyClick);
-    };
-  }, []);
-  var eventProps = activatorAction === "click" ? {
-    onClick: showToolTipClick
-  } : {
-    onMouseEnter: showToolTipHover,
+  // For hover tooltips, handle mouse events on the container
+  var containerEventProps = activatorAction === 'hover' ? {
+    onMouseEnter: showToolTip,
     onMouseLeave: hideToolTip
-  };
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  } : {};
+
+  // For click tooltips, handle events on the activator
+  var activatorEventProps = activatorAction === 'click' ? {
+    onClick: showToolTip
+  } : {};
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "RCB-tooltip ".concat(className),
-    ref: tooltipRef
-  }, /*#__PURE__*/_react["default"].createElement("div", _extends({
+    ref: containerRef
+  }, containerEventProps), /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "RCB-tooltip-btn"
-  }, eventProps), /*#__PURE__*/_react["default"].createElement(TooltipActivator, restProps)), isOpen && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "RCB-tooltip-body ".concat(dirClassName, " ").concat(actionClassName),
-    ref: tooltipBodyRef
-  }, children));
-};
-Tooltip = /*#__PURE__*/(0, _react.forwardRef)(Tooltip);
+  }, activatorEventProps, {
+    ref: activatorRef
+  }), /*#__PURE__*/_react["default"].createElement(TooltipActivator, restProps)), isOpen && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-tooltip-body RCB-tooltip-".concat(direction, " ").concat(actionClassName),
+    ref: tooltipRef,
+    style: tooltipStyle
+  }, children, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-tooltip-arrow RCB-tooltip-arrow-".concat(direction),
+    style: arrowStyle
+  })));
+});
 Tooltip.propTypes = {
+  /** Custom component to act as the tooltip activator */
   TooltipActivator: _propTypes["default"].func,
+  /** Action that triggers the tooltip - either click or hover */
   activatorAction: _propTypes["default"].oneOf(["click", "hover"]),
-  direction: _propTypes["default"].oneOf(["right", "bottom", "left", "top"])
+  /** Preferred direction for tooltip placement. Will auto-adjust based on available space */
+  direction: _propTypes["default"].oneOf(["right", "bottom", "left", "top"]),
+  /** Tooltip content */
+  children: _propTypes["default"].node,
+  /** Additional CSS classes */
+  className: _propTypes["default"].string
 };
 Tooltip.defaultProps = {
   TooltipActivator: DefaultTooltipActivator,
   activatorAction: "hover",
-  direction: "right"
+  direction: "top"
 };
 var _default = exports["default"] = Tooltip;