@plesk/ui-library 3.42.0 → 3.43.0

package/esm/components/Tabs/useWidths.js

@@ -0,0 +1,95 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import { useState, useRef, useLayoutEffect, useCallback } from 'react';
+import { useResizeObserver } from '../../hooks';
+export const useWidths = _ref => {
+  let {
+    tabNavRef,
+    tabListRef,
+    fakeAddonRef,
+    baseClassName,
+    monospaced = false,
+    childrenCount
+  } = _ref;
+  const [compact, setCompact] = useState(false);
+  const [monospacedWidth, setMonospacedWidth] = useState(undefined);
+  const [visibleLength, setVisibleLength] = useState(childrenCount);
+  const lastCollapsedKey = useRef('');
+  const recalculateWidths = 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]);
+  useLayoutEffect(() => {
+    recalculateWidths();
+  }, [recalculateWidths]);
+  useResizeObserver({
+    ref: tabNavRef,
+    onResize: recalculateWidths
+  });
+  useResizeObserver({
+    ref: tabListRef,
+    onResize: recalculateWidths
+  });
+  useResizeObserver({
+    ref: fakeAddonRef,
+    onResize: recalculateWidths
+  });
+  return {
+    recalculateWidths,
+    monospacedWidth,
+    compact,
+    visibleLength
+  };
+};

package/esm/components/Toaster/PanelView.js

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

package/esm/components/Toolbar/ToolbarMenu.js

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

package/esm/components/Toolbar/index.js

@@ -2,5 +2,4 @@
 
 export { default } from './Toolbar';
 export { default as ToolbarGroup } from './ToolbarGroup';
-export { default as ToolbarExpander } from './ToolbarExpander';
-export { default as ToolbarBetaProvider } from './ToolbarBetaProvider';
+export { default as ToolbarExpander } from './ToolbarExpander';

package/esm/components/index.js

@@ -85,7 +85,7 @@ export { default as SwitchesPanelItem } from './SwitchesPanelItem';
 export { default as Tabs, Tab, SearchBar } from './Tabs';
 export { default as Text } from './Text';
 export { default as Toaster } from './Toaster';
-export { default as Toolbar, ToolbarGroup, ToolbarExpander, ToolbarBetaProvider } from './Toolbar';
+export { default as Toolbar, ToolbarGroup, ToolbarExpander } from './Toolbar';
 export { default as Tooltip } from './Tooltip';
 export { default as Tour } from './Tour';
 export { default as Translate } from './Translate';

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.42.0",
+  "version": "3.43.0",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -24,7 +24,7 @@
     "lint": "yarn lint:es && yarn lint:types && yarn lint:style && yarn format:check",
     "lint:es": "eslint --ext js,md,tsx src configs scripts styleguidist",
     "lint:types": "tsc",
-    "lint:style": "stylelint \"{src,styleguidist}/**/*.less\"",
+    "lint:style": "stylelint \"{src,styleguidist}/**/*.(less|css)\"",
     "format:check": "prettier --check src styleguidist",
     "format": "prettier --write src styleguidist",
     "styleguide": "styleguidist server --config ./configs/styleguide.config.js",
@@ -68,8 +68,8 @@
     "@babel/preset-typescript": "^7.24.7",
     "@babel/types": "^7.25.6",
     "@csstools/postcss-logical-float-and-clear": "^3.0.0",
-    "@plesk/eslint-config": "^3.0.0",
-    "@plesk/stylelint-config": "^3.0.0",
+    "@plesk/eslint-config": "^4.0.0",
+    "@plesk/stylelint-config": "^3.0.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.1.0",
@@ -88,16 +88,14 @@
     "@types/react-transition-group": "^4.4.11",
     "@types/svg4everybody": "2.1.5",
     "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
     "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.2.1",
+    "babel-loader": "^10.0.0",
     "babel-plugin-transform-require-ignore": "^0.1.1",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^10.0.1",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-markdown": "^5.1.0",
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
@@ -127,7 +125,8 @@
     "stylelint-use-logical-spec": "^5.0.1",
     "svg-mixer": "^2.3.14",
     "terser-webpack-plugin": "^5.3.10",
-    "typescript": "5.7.3",
+    "typescript": "5.8.2",
+    "typescript-eslint": "^8.26.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^6.0.1"
   },