@plesk/ui-library 3.42.0 → 3.43.0

package/cjs/components/Tabs/useWidths.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWidths = void 0;
+var _react = require("react");
+var _hooks = require("../../hooks");
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const useWidths = _ref => {
+  let {
+    tabNavRef,
+    tabListRef,
+    fakeAddonRef,
+    baseClassName,
+    monospaced = false,
+    childrenCount
+  } = _ref;
+  const [compact, setCompact] = (0, _react.useState)(false);
+  const [monospacedWidth, setMonospacedWidth] = (0, _react.useState)(undefined);
+  const [visibleLength, setVisibleLength] = (0, _react.useState)(childrenCount);
+  const lastCollapsedKey = (0, _react.useRef)('');
+  const recalculateWidths = (0, _react.useCallback)(() => {
+    if (!tabNavRef.current || !tabListRef.current) {
+      return;
+    }
+    const fakeTabElements = tabNavRef.current.querySelectorAll(`.${baseClassName}__tab-list--fake .${baseClassName}__tab`);
+    const moreElement = fakeTabElements[fakeTabElements.length - 1];
+    const tabLength = fakeTabElements.length - 1;
+    const fakeTabWidths = Array.from(fakeTabElements).slice(0, -1).map(el => el.getBoundingClientRect().width);
+    let tabWidths = fakeTabWidths;
+    let monospacedWidth = undefined;
+    if (monospaced) {
+      const linkElements = tabNavRef.current.querySelectorAll(`.${baseClassName}__tab-list--fake .${baseClassName}__link`);
+      const linkWidths = Array.from(linkElements).slice(0, -1).map(el => el.getBoundingClientRect().width);
+      monospacedWidth = linkWidths.length ? Math.max(...linkWidths) : undefined;
+      tabWidths = fakeTabWidths.map((width, index) => (monospacedWidth ?? 0) + width - linkWidths[index]);
+    }
+    setMonospacedWidth(monospacedWidth);
+    const tabsWidth = tabWidths.reduce((acc, width) => acc + width, 0);
+    const tabNavWidth = tabNavRef.current.getBoundingClientRect().width;
+    const addon = tabNavRef.current.querySelector(`.${baseClassName}__addon`) ?? tabNavRef.current.querySelector(`.${baseClassName}__search`);
+    const addonWidth = addon ? addon.getBoundingClientRect().width : 0;
+    let availableSpace = tabNavWidth - addonWidth;
+    const allTabsFit = availableSpace >= tabsWidth;
+    const getContentKey = () => {
+      const fakeAddonWidth = fakeAddonRef.current?.getBoundingClientRect().width ?? 0;
+      return `${fakeTabWidths.join('-')}-${tabNavWidth}-${fakeAddonWidth}-${monospacedWidth}`;
+    };
+    if (allTabsFit) {
+      setVisibleLength(tabLength);
+      if (!compact) {
+        return;
+      }
+      if (lastCollapsedKey.current !== getContentKey()) {
+        setCompact(false);
+      }
+      return;
+    }
+    if (!allTabsFit && !compact) {
+      setCompact(true);
+      lastCollapsedKey.current = getContentKey();
+      return;
+    }
+    const moreWidth = moreElement ? moreElement.getBoundingClientRect().width : 0;
+    availableSpace -= moreWidth;
+    const calculateVisibleLength = () => {
+      let totalWidth = 0;
+      for (let i = 0; i < tabWidths.length; i++) {
+        totalWidth += tabWidths[i];
+        if (totalWidth > availableSpace) {
+          return i;
+        }
+      }
+      return 0;
+    };
+    setVisibleLength(calculateVisibleLength());
+  }, [tabNavRef, tabListRef, fakeAddonRef, baseClassName, monospaced, compact]);
+  (0, _react.useLayoutEffect)(() => {
+    recalculateWidths();
+  }, [recalculateWidths]);
+  (0, _hooks.useResizeObserver)({
+    ref: tabNavRef,
+    onResize: recalculateWidths
+  });
+  (0, _hooks.useResizeObserver)({
+    ref: tabListRef,
+    onResize: recalculateWidths
+  });
+  (0, _hooks.useResizeObserver)({
+    ref: fakeAddonRef,
+    onResize: recalculateWidths
+  });
+  return {
+    recalculateWidths,
+    monospacedWidth,
+    compact,
+    visibleLength
+  };
+};
+exports.useWidths = useWidths;

package/cjs/components/Toaster/PanelView.js

@@ -59,6 +59,20 @@ const PanelView = _ref => {
   if (isEmpty && isCollapsed) {
     onCollapseStateChange?.(false);
   }
+  const panelHeaderLabels = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${baseClassName}__header-labels`,
+    children: notEmptyGroups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupLabel.default, {
+      group: group,
+      onClose: () => onToastGroupClose?.(group.keys)
+    }, group.groupKey))
+  });
+  const panelHeaderCollapseButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    ghost: true,
+    icon: isCollapsed ? 'chevron-up' : 'chevron-down',
+    onClick: () => onCollapseStateChange?.(!isCollapsed),
+    className: `${baseClassName}__header-collapse`,
+    "aria-label": "Collapse"
+  });
   const panelHeader = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
     nodeRef: headerRef,
     in: isHeaderVisible,
@@ -75,19 +89,7 @@ const PanelView = _ref => {
         '--_pul-toaster--panel-header-enter-delay': isSingleNonClosableToast ? '300ms' : 0,
         '--_pul-toaster--panel-header-exit-delay': isEmpty ? '300ms' : undefined
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}__header-labels`,
-        children: notEmptyGroups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupLabel.default, {
-          group: group,
-          onClose: () => onToastGroupClose?.(group.keys)
-        }, group.groupKey))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        ghost: true,
-        icon: isCollapsed ? 'chevron-up' : 'chevron-down',
-        onClick: () => onCollapseStateChange?.(!isCollapsed),
-        className: `${baseClassName}__header-collapse`,
-        "aria-label": "Collapse"
-      })]
+      children: [panelHeaderLabels, panelHeaderCollapseButton]
     })
   });
   const panelContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/cjs/components/Toolbar/ToolbarMenu.js

@@ -45,7 +45,6 @@ const toMenuItem = (child, isLast, onItemClick) => {
           ...props,
           children: props.children
         });
-        /* eslint-enable react/prop-types */
       }
     case _ToolbarGroup.default:
       {

package/cjs/components/Toolbar/index.js

@@ -4,12 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ToolbarBetaProvider", {
-  enumerable: true,
-  get: function () {
-    return _ToolbarBetaProvider.default;
-  }
-});
 Object.defineProperty(exports, "ToolbarExpander", {
   enumerable: true,
   get: function () {
@@ -30,5 +24,4 @@ Object.defineProperty(exports, "default", {
 });
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _ToolbarGroup = _interopRequireDefault(require("./ToolbarGroup"));
-var _ToolbarExpander = _interopRequireDefault(require("./ToolbarExpander"));
-var _ToolbarBetaProvider = _interopRequireDefault(require("./ToolbarBetaProvider"));
+var _ToolbarExpander = _interopRequireDefault(require("./ToolbarExpander"));

package/cjs/components/index.js

@@ -107,7 +107,6 @@ var _exportNames = {
   Toolbar: true,
   ToolbarGroup: true,
   ToolbarExpander: true,
-  ToolbarBetaProvider: true,
   Tooltip: true,
   Tour: true,
   Translate: true,
@@ -748,12 +747,6 @@ Object.defineProperty(exports, "Toolbar", {
     return _Toolbar.default;
   }
 });
-Object.defineProperty(exports, "ToolbarBetaProvider", {
-  enumerable: true,
-  get: function () {
-    return _Toolbar.ToolbarBetaProvider;
-  }
-});
 Object.defineProperty(exports, "ToolbarExpander", {
   enumerable: true,
   get: function () {

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.42.0";
+const version = exports.version = "3.43.0";
 (0, _svg4everybody.default)();