@plesk/ui-library 3.44.0 → 3.45.0

package/esm/components/Tooltip/Tooltip.js

@@ -1,215 +1,105 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
-import Layer from '../Layer';
+import { useState, useId, useRef, useEffect, cloneElement } from 'react';
 import classNames from 'classnames';
-import { CLS_PREFIX, Z_INDEX_TOOLTIP } from '../../constants';
-import { wrapFunction } from '../utils';
-import { cloneElement, Component, createRef } from 'react';
+import { CLS_PREFIX } from '../../constants';
+import { wrapFunction, getFocusReturned, isFocusVisible } from '../utils';
+import { TooltipContent } from './TooltipContent';
+import { useVirtualElement } from './useVirtualElement';
+import { getA11yAttributes } from './getA11yAttributes';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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 Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      left: 0,
-      top: 0,
-      ready: false,
-      visible: false,
-      id: generateTooltipId()
-    });
-    _defineProperty(this, "timer", null);
-    _defineProperty(this, "tooltipRef", /*#__PURE__*/createRef());
-    _defineProperty(this, "clearTimer", () => {
-      if (this.timer) {
-        clearTimeout(this.timer);
-        this.timer = null;
-      }
-    });
-    _defineProperty(this, "handleShow", () => {
-      this.clearTimer();
-      this.setState({
-        visible: true
-      });
-    });
-    _defineProperty(this, "handleHide", () => {
-      this.clearTimer();
-      this.setState({
-        visible: false,
-        ready: false
-      });
-    });
-    _defineProperty(this, "handleMouseEnter", () => {
-      if (this.timer) {
-        return;
-      }
-      this.setState({
-        ready: true
-      });
-      this.timer = setTimeout(() => this.handleShow(), this.props.delay);
-    });
-    _defineProperty(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__*/_jsx(Layer, {
-      level: Z_INDEX_TOOLTIP,
-      children: /*#__PURE__*/_jsx("span", {
-        ref: this.tooltipRef,
-        id: id,
-        className: classNames(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 = `${CLS_PREFIX}tooltip`,
+    ...props
+  } = _ref;
+  const [ready, setReady] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [trigger, setTrigger] = useState(null);
+  const id = useId();
+  const timer = useRef(null);
+  const isPointerDown = useRef(false);
+  const clearTimer = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+  };
+  useEffect(() => () => clearTimer(), []);
+  const [virtualElement, createVirtualElement, resetVirtualElement] = 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 (!isFocusVisible(e.target) && !isFocusVisible(e.currentTarget)) return;
+    setReady(true);
+    setTrigger(e.currentTarget);
+    const delay = getFocusReturned(e.target);
+    if (delay) {
+      timer.current = setTimeout(() => handleShow(), delay);
+    } else {
+      handleShow();
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/cloneElement(children, {
+      onPointerEnter: wrapFunction(children.props.onPointerEnter, handlePointerEnter),
+      onPointerMove: wrapFunction(children.props.onPointerMove, handlePointerMove),
+      onPointerLeave: wrapFunction(children.props.onPointerLeave, handleHide),
+      onPointerUp: wrapFunction(children.props.onPointerUp, handlePointerUp),
+      onPointerDown: wrapFunction(children.props.onPointerDown, handlePointerDown),
+      onFocus: wrapFunction(children.props.onFocus, handleFocus),
+      onBlur: wrapFunction(children.props.onBlur, handleHide),
+      ...getA11yAttributes({
+        asLabel,
+        title,
+        ready,
+        id: props.id ?? id
       })
-    });
-  }
-  render() {
-    const {
-      ready,
-      id
-    } = this.state;
-    const {
-      children
-    } = this.props;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/cloneElement(children, {
-        onMouseEnter: wrapFunction(children.props.onMouseEnter, this.handleMouseEnter),
-        onMouseMove: wrapFunction(children.props.onMouseMove, this.handleMouseMove),
-        onMouseLeave: wrapFunction(children.props.onMouseLeave, this.handleHide),
-        onMouseDown: wrapFunction(children.props.onMouseDown, this.handleHide),
-        'aria-labelledby': id
-      }), ready && this.renderTooltip()]
-    });
-  }
-}
-_defineProperty(Tooltip, "defaultProps", {
-  // in ms.
-  delay: 550,
-  style: undefined,
-  className: undefined,
-  baseClassName: `${CLS_PREFIX}tooltip`
-});
+    }), ready && /*#__PURE__*/_jsx(TooltipContent, {
+      title: title,
+      className: classNames(baseClassName, className),
+      ...props,
+      id: props.id ?? id,
+      visible: visible,
+      virtualElement: virtualElement,
+      trigger: trigger,
+      onEscapeKeyDown: handleHide
+    })]
+  });
+};
 export default Tooltip;

package/esm/components/Tooltip/TooltipContent.js

@@ -0,0 +1,75 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import { useFloating, offset, flip } from '@floating-ui/react-dom';
+import { Z_INDEX_TOOLTIP } from '../../constants';
+import { useEscapeKeydown } from '../../hooks/useEscapeKeydown';
+import Layer from '../Layer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const isVirtualElement = element => element !== null && !(element instanceof HTMLElement);
+export const TooltipContent = _ref => {
+  let {
+    title,
+    visible,
+    virtualElement,
+    trigger,
+    onEscapeKeyDown,
+    className,
+    style,
+    id,
+    ...props
+  } = _ref;
+  useEscapeKeydown(onEscapeKeyDown);
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    middleware: [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
+      };
+    }), 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__*/_jsx(Layer, {
+    level: Z_INDEX_TOOLTIP,
+    children: /*#__PURE__*/_jsx("span", {
+      ref: refs.setFloating,
+      id: id,
+      className: className,
+      style: {
+        ...style,
+        visibility: visible ? 'visible' : 'hidden',
+        ...floatingStyles
+      },
+      role: "tooltip",
+      ...props,
+      children: title
+    })
+  });
+};

package/esm/components/Tooltip/getA11yAttributes.js

@@ -0,0 +1,23 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+export 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
+  };
+};

package/esm/components/Tooltip/useVirtualElement.js

@@ -0,0 +1,28 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import { useState } from 'react';
+export const useVirtualElement = () => {
+  const [virtualElement, setVirtualElement] = 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];
+};

package/esm/components/utils.js

@@ -199,4 +199,40 @@ export const mergeRefs = function () {
     });
   };
 };
-export const normalizeSize = value => String(Number(value)) === String(value) ? `${value}px` : value;
+export const normalizeSize = value => String(Number(value)) === String(value) ? `${value}px` : value;
+export 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 */
+export 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);
+};
+export const getFocusReturned = element => {
+  const duration = element.getAttribute('data-pul-focus-returned');
+  return duration ? parseInt(duration, 10) : 0;
+};
+export const isFocusVisible = element => {
+  try {
+    return element.matches(':focus-visible');
+  } catch {
+    /* empty */
+  }
+  return false;
+};

package/esm/hooks/useEscapeKeydown.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+export const useEscapeKeydown = onEscapeKeyDown => {
+  const onEscapeKeyDownRef = useRef(onEscapeKeyDown);
+  onEscapeKeyDownRef.current = onEscapeKeyDown;
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        onEscapeKeyDownRef.current?.(e);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, {
+      capture: true
+    });
+    return () => document.removeEventListener('keydown', handleKeyDown, {
+      capture: true
+    });
+  }, []);
+};

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.44.0";
+const version = "3.45.0";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/esm/locales/ar.js

@@ -1,6 +1,9 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
 
 export default {
+  Alert: {
+    close: 'Close'
+  },
   Card: {
     select: 'تحديد',
     titleLinkTooltip: 'الانتقال إلى الصفحة',
@@ -16,6 +19,15 @@ export default {
     viewList: 'القائمة',
     toolbarView: 'العرض'
   },
+  Carousel: {
+    nextSlide: 'Next slide',
+    previousSlide: 'Previous slide',
+    viewSlide: 'View slide %%slideNumber%%'
+  },
+  ComboBox: {
+    close: 'Close',
+    open: 'Open'
+  },
   ClosingConfirmation: {
     confirm: 'المغادرة',
     cancel: 'العودة',
@@ -26,8 +38,14 @@ export default {
     showLess: 'إظهار أقل'
   },
   Dialog: {
+    closeButton: 'Close',
     cancelButton: 'الإلغاء'
   },
+  Drawer: {
+    backButton: 'Back',
+    closeButton: 'Close',
+    hideButton: 'Hide'
+  },
   DrawerProgress: {
     cancelButton: 'الإلغاء'
   },
@@ -42,7 +60,8 @@ export default {
   FormField: {
     clear: 'مسح التحديد',
     remove: 'الإزالة',
-    addMore: 'إضافة حقل إدخال آخر'
+    addMore: 'إضافة حقل إدخال آخر',
+    showDescription: 'Show description'
   },
   FormFieldPassword: {
     improvePassword: 'لتحسين كلمة مرورك:',
@@ -71,22 +90,37 @@ export default {
     generateButtonHint: 'إنشاء كلمة مرور قوية'
   },
   InPlaceEdit: {
+    cancelButtonHint: 'تجاهل التغييرات',
     editButtonHint: 'تحرير القيمة',
-    okButtonHint: 'حفظ التغييرات',
-    cancelButtonHint: 'تجاهل التغييرات'
+    okButtonHint: 'حفظ التغييرات'
+  },
+  InputNumber: {
+    decrement: 'Decrement',
+    increment: 'Increment'
   },
   InputFile: {
     browseButton: 'اختيار ملف...'
   },
+  Layout: {
+    openSidebar: 'Expand sidebar',
+    closeSidebar: 'Collapse sidebar'
+  },
   List: {
     totalRows: '%%totalRows%% عناصر إجمالًا',
+    toggleAllRows: 'Toggle all rows',
+    toggleRow: 'Toggle row',
     selectedRows: 'تم تحديد %%selectedRows%% عناصر من أصل %%totalRows%%',
     all: 'الكل',
     allItemsOnPageSelected: 'تم تحديد جميع العناصر الموجودة في الصفحة',
     allItemsSelected: 'تم تحديد جميع العناصر',
     selectAllItems: 'تحديد جميع العناصر',
     selectAllItemsOnPage: 'تحديد جميع العناصر الموجودة في الصفحة',
-    deselectAll: 'إلغاء التحديد'
+    deselectAll: 'إلغاء التحديد',
+    selectRow: 'Select row',
+    selectAllRows: 'Select all rows'
+  },
+  ListActions: {
+    menuButton: 'Open menu'
   },
   ListEmptyView: {
     filteredTitle: 'تعذر العثور على أي عناصر مطابقة لعامل التصفية',
@@ -96,24 +130,52 @@ export default {
   ListOperation: {
     cancelButton: 'الإلغاء'
   },
+  Panel: {
+    collapse: 'Collapse',
+    expand: 'Expand'
+  },
   Pagination: {
     totalShort: 'من %%total%%',
     itemsPerPage: 'عدد العناصر في كل صفحة',
     all: 'الكل',
     total: 'صفحة %%current%% من %%total%%'
   },
+  Popover: {
+    closeButton: 'Close'
+  },
   ProgressDialog: {
     closeButton: 'الإغلاق',
     cancelButton: 'الإلغاء'
   },
+  Section: {
+    collapse: 'Collapse',
+    closeButton: 'Close',
+    expand: 'Expand'
+  },
   Select: {
+    clearButton: 'Clear',
     noOptions: 'لا توجد خيارات',
     placeholder: 'تحديد...'
   },
+  SearchBar: {
+    clearButton: 'Clear',
+    searchButton: 'Search',
+    collapseSearch: 'Hide search input',
+    expandSearch: 'Show search input'
+  },
   SpotPopup: {
     total: '%%current%% من %%total%%'
   },
+  SwitchesPanelItem: {
+    showDescription: 'Show description'
+  },
+  Tabs: {
+    closeButton: 'Close tab'
+  },
   Toaster: {
     closeGroup: 'إغلاق المجموعة'
+  },
+  Toast: {
+    closeButton: 'Close'
   }
 };