@plesk/ui-library 3.44.0 → 3.45.0

package/cjs/components/Tooltip/Tooltip.js

@@ -5,218 +5,108 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _Layer = _interopRequireDefault(require("../Layer"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _utils = require("../utils");
-var _react = require("react");
+var _TooltipContent = require("./TooltipContent");
+var _useVirtualElement = require("./useVirtualElement");
+var _getA11yAttributes = require("./getA11yAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-const createRectFactory = (width, height) => (left, top) => ({
-  top,
-  left,
-  right: left + width,
-  bottom: top + height
-});
-const isInside = (r1, r2) => r1.left >= r2.left && r1.right <= r2.right && r1.top >= r2.top && r1.bottom <= r2.bottom;
-let tooltipId = 0;
-const generateTooltipId = () => `tooltip-${tooltipId++}`;
-const determinePosition = _ref => {
-  let {
-    clientX,
-    clientY,
-    tooltipWidth,
-    tooltipHeight,
-    targetRect
-  } = _ref;
-  const X_EXTRA_SPACE = 8;
-  const Y_BOTTOM_EXTRA_SPACE = 16;
-  const Y_TOP_EXTRA_SPACE = 8;
-  const createTooltipRect = createRectFactory(tooltipWidth, tooltipHeight);
-  const viewRect = {
-    top: 0,
-    left: 0,
-    right: document.documentElement.clientWidth,
-    bottom: document.documentElement.clientHeight
-  };
-  const positionFns = [
-  // right bottom
-  () => ({
-    left: clientX + X_EXTRA_SPACE,
-    top: clientY + Y_BOTTOM_EXTRA_SPACE
-  }),
-  // left bottom
-  () => ({
-    left: clientX - tooltipWidth - X_EXTRA_SPACE,
-    top: clientY + Y_BOTTOM_EXTRA_SPACE
-  }),
-  // center bottom
-  () => ({
-    left: targetRect.left + (targetRect.right - targetRect.left) / 2 - tooltipWidth / 2,
-    top: clientY + Y_BOTTOM_EXTRA_SPACE
-  }),
-  // right top
-  () => ({
-    left: clientX + X_EXTRA_SPACE,
-    top: clientY - tooltipHeight - Y_TOP_EXTRA_SPACE
-  }),
-  // left top
-  () => ({
-    left: clientX - tooltipWidth - Y_TOP_EXTRA_SPACE,
-    top: clientY - tooltipHeight - Y_TOP_EXTRA_SPACE
-  }),
-  // center top
-  () => ({
-    left: targetRect.left + (targetRect.right - targetRect.left) / 2 - tooltipWidth / 2,
-    top: clientY - tooltipHeight - Y_BOTTOM_EXTRA_SPACE
-  })];
-  for (let i = 0; i < positionFns.length; i++) {
-    const fn = positionFns[i];
-    const {
-      left,
-      top
-    } = fn();
-    const tooltipRect = createTooltipRect(left, top);
-    if (isInside(tooltipRect, viewRect)) {
-      return {
-        left: left + window.pageXOffset,
-        top: top + window.pageYOffset
-      };
-    }
-  }
-  return {
-    top: targetRect.top + Y_BOTTOM_EXTRA_SPACE,
-    left: targetRect.left + X_EXTRA_SPACE
-  };
-};
 /**
  * `Tooltip` component is used for providing information about an interface element
  * while user hovers the pointer over the element.
  * @since 0.0.35
  */
-class Tooltip extends _react.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "state", {
-      left: 0,
-      top: 0,
-      ready: false,
-      visible: false,
-      id: generateTooltipId()
-    });
-    (0, _defineProperty2.default)(this, "timer", null);
-    (0, _defineProperty2.default)(this, "tooltipRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)(this, "clearTimer", () => {
-      if (this.timer) {
-        clearTimeout(this.timer);
-        this.timer = null;
-      }
-    });
-    (0, _defineProperty2.default)(this, "handleShow", () => {
-      this.clearTimer();
-      this.setState({
-        visible: true
-      });
-    });
-    (0, _defineProperty2.default)(this, "handleHide", () => {
-      this.clearTimer();
-      this.setState({
-        visible: false,
-        ready: false
-      });
-    });
-    (0, _defineProperty2.default)(this, "handleMouseEnter", () => {
-      if (this.timer) {
-        return;
-      }
-      this.setState({
-        ready: true
-      });
-      this.timer = setTimeout(() => this.handleShow(), this.props.delay);
-    });
-    (0, _defineProperty2.default)(this, "handleMouseMove", e => {
-      // TODO: try to add throttle
-      if (this.tooltipRef.current) {
-        const targetRect = e.currentTarget.getBoundingClientRect();
-        const {
-          width: tooltipWidth,
-          height: tooltipHeight
-        } = this.tooltipRef.current.getBoundingClientRect();
-        const position = determinePosition({
-          clientX: e.clientX,
-          clientY: e.clientY,
-          tooltipWidth,
-          tooltipHeight,
-          targetRect
-        });
-        this.setState({
-          ...position
-        });
-      }
-    });
-  }
-  componentWillUnmount() {
-    this.clearTimer();
-  }
-  renderTooltip() {
-    const {
-      left,
-      top,
-      visible,
-      id
-    } = this.state;
-    const {
-      baseClassName,
-      className,
-      children,
-      title,
-      style,
-      delay,
-      ...props
-    } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layer.default, {
-      level: _constants.Z_INDEX_TOOLTIP,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        ref: this.tooltipRef,
-        id: id,
-        className: (0, _classnames.default)(baseClassName, className),
-        style: {
-          ...style,
-          transform: `translate(${left}px, ${top}px)`,
-          visibility: visible ? 'visible' : 'hidden'
-        },
-        role: "tooltip",
-        ...props,
-        children: title
+const Tooltip = _ref => {
+  let {
+    title,
+    children,
+    delay = 550,
+    asLabel = false,
+    className,
+    baseClassName = `${_constants.CLS_PREFIX}tooltip`,
+    ...props
+  } = _ref;
+  const [ready, setReady] = (0, _react.useState)(false);
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const [trigger, setTrigger] = (0, _react.useState)(null);
+  const id = (0, _react.useId)();
+  const timer = (0, _react.useRef)(null);
+  const isPointerDown = (0, _react.useRef)(false);
+  const clearTimer = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+  };
+  (0, _react.useEffect)(() => () => clearTimer(), []);
+  const [virtualElement, createVirtualElement, resetVirtualElement] = (0, _useVirtualElement.useVirtualElement)();
+  const handlePointerMove = e => {
+    createVirtualElement(e);
+  };
+  const handlePointerEnter = e => {
+    if (e.pointerType === 'touch') return;
+    createVirtualElement(e);
+    setReady(true);
+    timer.current = setTimeout(() => handleShow(), delay);
+  };
+  const handleShow = () => {
+    clearTimer();
+    setVisible(true);
+  };
+  const handleHide = () => {
+    clearTimer();
+    setVisible(false);
+    setReady(false);
+    resetVirtualElement();
+  };
+  const handlePointerDown = () => {
+    handleHide();
+    isPointerDown.current = true;
+  };
+  const handlePointerUp = () => {
+    isPointerDown.current = false;
+  };
+  const handleFocus = e => {
+    if (isPointerDown.current) return;
+    if (!(0, _utils.isFocusVisible)(e.target) && !(0, _utils.isFocusVisible)(e.currentTarget)) return;
+    setReady(true);
+    setTrigger(e.currentTarget);
+    const delay = (0, _utils.getFocusReturned)(e.target);
+    if (delay) {
+      timer.current = setTimeout(() => handleShow(), delay);
+    } else {
+      handleShow();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _react.cloneElement)(children, {
+      onPointerEnter: (0, _utils.wrapFunction)(children.props.onPointerEnter, handlePointerEnter),
+      onPointerMove: (0, _utils.wrapFunction)(children.props.onPointerMove, handlePointerMove),
+      onPointerLeave: (0, _utils.wrapFunction)(children.props.onPointerLeave, handleHide),
+      onPointerUp: (0, _utils.wrapFunction)(children.props.onPointerUp, handlePointerUp),
+      onPointerDown: (0, _utils.wrapFunction)(children.props.onPointerDown, handlePointerDown),
+      onFocus: (0, _utils.wrapFunction)(children.props.onFocus, handleFocus),
+      onBlur: (0, _utils.wrapFunction)(children.props.onBlur, handleHide),
+      ...(0, _getA11yAttributes.getA11yAttributes)({
+        asLabel,
+        title,
+        ready,
+        id: props.id ?? id
       })
-    });
-  }
-  render() {
-    const {
-      ready,
-      id
-    } = this.state;
-    const {
-      children
-    } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _react.cloneElement)(children, {
-        onMouseEnter: (0, _utils.wrapFunction)(children.props.onMouseEnter, this.handleMouseEnter),
-        onMouseMove: (0, _utils.wrapFunction)(children.props.onMouseMove, this.handleMouseMove),
-        onMouseLeave: (0, _utils.wrapFunction)(children.props.onMouseLeave, this.handleHide),
-        onMouseDown: (0, _utils.wrapFunction)(children.props.onMouseDown, this.handleHide),
-        'aria-labelledby': id
-      }), ready && this.renderTooltip()]
-    });
-  }
-}
-(0, _defineProperty2.default)(Tooltip, "defaultProps", {
-  // in ms.
-  delay: 550,
-  style: undefined,
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}tooltip`
-});
+    }), ready && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipContent.TooltipContent, {
+      title: title,
+      className: (0, _classnames.default)(baseClassName, className),
+      ...props,
+      id: props.id ?? id,
+      visible: visible,
+      virtualElement: virtualElement,
+      trigger: trigger,
+      onEscapeKeyDown: handleHide
+    })]
+  });
+};
 var _default = exports.default = Tooltip;

package/cjs/components/Tooltip/TooltipContent.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipContent = void 0;
+var _reactDom = require("@floating-ui/react-dom");
+var _constants = require("../../constants");
+var _useEscapeKeydown = require("../../hooks/useEscapeKeydown");
+var _Layer = _interopRequireDefault(require("../Layer"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const isVirtualElement = element => element !== null && !(element instanceof HTMLElement);
+const TooltipContent = _ref => {
+  let {
+    title,
+    visible,
+    virtualElement,
+    trigger,
+    onEscapeKeyDown,
+    className,
+    style,
+    id,
+    ...props
+  } = _ref;
+  (0, _useEscapeKeydown.useEscapeKeydown)(onEscapeKeyDown);
+  const {
+    refs,
+    floatingStyles
+  } = (0, _reactDom.useFloating)({
+    middleware: [(0, _reactDom.offset)(_ref2 => {
+      let {
+        placement,
+        elements
+      } = _ref2;
+      if (!isVirtualElement(elements.reference)) {
+        return {
+          mainAxis: 8
+        };
+      }
+      const [side] = placement.split('-');
+      return {
+        mainAxis: side === 'bottom' ? 16 : 8,
+        alignmentAxis: 8
+      };
+    }), (0, _reactDom.flip)(_ref3 => {
+      let {
+        elements
+      } = _ref3;
+      let fallbackPlacements = ['bottom-end', 'bottom', 'top-start', 'top-end', 'top'];
+      if (!isVirtualElement(elements.reference)) {
+        fallbackPlacements = ['top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'left'];
+      }
+      return {
+        padding: 5,
+        fallbackPlacements
+      };
+    })],
+    placement: virtualElement ? 'bottom-start' : 'top',
+    elements: {
+      reference: virtualElement ? virtualElement : trigger
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layer.default, {
+    level: _constants.Z_INDEX_TOOLTIP,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      ref: refs.setFloating,
+      id: id,
+      className: className,
+      style: {
+        ...style,
+        visibility: visible ? 'visible' : 'hidden',
+        ...floatingStyles
+      },
+      role: "tooltip",
+      ...props,
+      children: title
+    })
+  });
+};
+exports.TooltipContent = TooltipContent;

package/cjs/components/Tooltip/getA11yAttributes.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getA11yAttributes = void 0;
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const getA11yAttributes = _ref => {
+  let {
+    asLabel,
+    title,
+    ready,
+    id
+  } = _ref;
+  if (!asLabel) {
+    return {
+      'aria-describedby': ready ? id : undefined
+    };
+  }
+  if (typeof title === 'string') {
+    return {
+      'aria-label': title
+    };
+  }
+  return {
+    'aria-labelledby': ready ? id : undefined
+  };
+};
+exports.getA11yAttributes = getA11yAttributes;

package/cjs/components/Tooltip/useVirtualElement.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVirtualElement = void 0;
+var _react = require("react");
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const useVirtualElement = () => {
+  const [virtualElement, setVirtualElement] = (0, _react.useState)(null);
+  const createVirtualElement = _ref => {
+    let {
+      clientX,
+      clientY
+    } = _ref;
+    setVirtualElement({
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: clientX,
+          y: clientY,
+          left: clientX,
+          right: clientX,
+          top: clientY,
+          bottom: clientY
+        };
+      }
+    });
+  };
+  const resetVirtualElement = () => setVirtualElement(null);
+  return [virtualElement, createVirtualElement, resetVirtualElement];
+};
+exports.useVirtualElement = useVirtualElement;

package/cjs/components/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapFunction = exports.scrollIntoView = exports.safeInvoke = exports.normalizeSize = exports.mergeRefs = exports.isClickable = exports.createProxyProps = exports.createFocusManager = exports.EventEmitter = void 0;
+exports.wrapFunction = exports.setFocusReturned = exports.scrollIntoView = exports.safeInvoke = exports.normalizeSize = exports.mergeRefs = exports.isFocusVisible = exports.isClickable = exports.getFocusReturned = exports.createProxyProps = exports.createKeyboardClickAdapter = exports.createFocusManager = exports.EventEmitter = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -215,4 +215,44 @@ const mergeRefs = function () {
 };
 exports.mergeRefs = mergeRefs;
 const normalizeSize = value => String(Number(value)) === String(value) ? `${value}px` : value;
-exports.normalizeSize = normalizeSize;
+exports.normalizeSize = normalizeSize;
+const createKeyboardClickAdapter = function () {
+  let {
+    existingHandler,
+    disabled = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const keyboardHandler = ev => {
+    if (disabled) return;
+    if (ev.key === 'Enter' || ev.key === ' ') {
+      ev.preventDefault();
+      ev.currentTarget.click();
+    }
+  };
+  return wrapFunction(existingHandler, keyboardHandler);
+};
+
+/* Mark element as focus returned to avoid animation z-index collisions */
+exports.createKeyboardClickAdapter = createKeyboardClickAdapter;
+const setFocusReturned = function (element) {
+  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
+  if (document.body === element) return;
+  element?.setAttribute('data-pul-focus-returned', duration.toString());
+  setTimeout(() => {
+    element?.removeAttribute('data-pul-focus-returned');
+  }, duration);
+};
+exports.setFocusReturned = setFocusReturned;
+const getFocusReturned = element => {
+  const duration = element.getAttribute('data-pul-focus-returned');
+  return duration ? parseInt(duration, 10) : 0;
+};
+exports.getFocusReturned = getFocusReturned;
+const isFocusVisible = element => {
+  try {
+    return element.matches(':focus-visible');
+  } catch {
+    /* empty */
+  }
+  return false;
+};
+exports.isFocusVisible = isFocusVisible;

package/cjs/hooks/useEscapeKeydown.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEscapeKeydown = void 0;
+var _react = require("react");
+const useEscapeKeydown = onEscapeKeyDown => {
+  const onEscapeKeyDownRef = (0, _react.useRef)(onEscapeKeyDown);
+  onEscapeKeyDownRef.current = onEscapeKeyDown;
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        onEscapeKeyDownRef.current?.(e);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, {
+      capture: true
+    });
+    return () => document.removeEventListener('keydown', handleKeyDown, {
+      capture: true
+    });
+  }, []);
+};
+exports.useEscapeKeydown = useEscapeKeydown;

package/cjs/index.js

@@ -46,5 +46,5 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
-const version = exports.version = "3.44.0";
+const version = exports.version = "3.45.0";
 (0, _svg4everybody.default)();