@plesk/ui-library 3.42.0 → 3.43.0

package/esm/components/CodeEditor/CodeEditor.js

@@ -105,8 +105,7 @@ class CodeEditor extends Component {
         this.codeMirror.scrollTo(scrollPosition.left, scrollPosition.top);
       }
       this.updateMode(this.props);
-      // Save fn typing is missed by some reason.
-      // @ts-ignore
+      // @ts-expect-error save fn typing is missed by some reason
       CodeMirror.commands.save = this.props.onSave;
       CodeMirror.commands.find = CodeMirror.commands.findPersistent;
       CodeMirror.commands.findNext = CodeMirror.commands.findPersistentNext;

package/esm/components/Icon/constants.js

@@ -1,5 +1,4 @@
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
-/* eslint-disable max-len */
 // This file is generated by create-svg-sprite. Do not edit.
 
 export const NAMES_12 = ['advisor', 'archive', 'arrow-back', 'arrow-diagonal-out', 'arrow-down', 'arrow-down-circle-filled', 'arrow-down-in', 'arrow-down-out', 'arrow-down-tray', 'arrow-left', 'arrow-left-circle-filled', 'arrow-right', 'arrow-right-circle-filled', 'arrow-right-in', 'arrow-right-out', 'arrow-up', 'arrow-up-circle', 'arrow-up-circle-filled', 'arrow-up-in', 'arrow-up-in-cloud', 'arrow-up-out', 'arrow-up-tray', 'arrows-four-directions', 'arrows-inward', 'arrows-loop', 'arrows-opposite', 'arrows-outward', 'backup', 'backup2', 'bar-chart-vertical', 'bar-chart-vertical-arrow-up', 'bar-chart-vertical-lock', 'bell', 'book-email', 'boost', 'boundary', 'box-diagonal-bottom-in', 'box-diagonal-top-in', 'brush', 'bug', 'calendar', 'calendar-clock', 'camera', 'card', 'card-ribbon', 'card-row', 'card-tile', 'cd', 'cd-up-in-cloud', 'chain', 'chain-broken', 'chat', 'check-list', 'check-mark', 'check-mark-circle', 'check-mark-circle-filled', 'chevron-double-down', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'circle-diagonal', 'clean', 'clip', 'clock', 'clone', 'cloud', 'cloud-checkmark', 'cloud-crossed', 'cloud-graph', 'code', 'connection', 'console', 'console-filled', 'copy', 'copy-indicator', 'cpu', 'crane', 'credit-cards', 'cross-mark', 'cross-mark-circle', 'cross-mark-circle-filled', 'crown-transfer', 'dashboard', 'database', 'database-box', 'database-filled', 'database-plus', 'deploy', 'docker-filled', 'dollar', 'dollar-filled', 'dot', 'dot-big', 'emoticon-confused', 'emoticon-dead', 'emoticon-excited', 'emoticon-happy', 'emoticon-neutral', 'emoticon-sad', 'emoticon-smile', 'enter', 'exclamation-mark-circle', 'exclamation-mark-circle-filled', 'eye', 'eye-closed', 'facebook', 'facebook-filled', 'feedback', 'file', 'filter', 'filter-check-mark', 'fire', 'flag', 'flag-filled', 'flag-globe', 'floppy-disk', 'folder-closed', 'folder-key', 'folder-network', 'folder-open', 'folders-tree', 'forward-circle-filled', 'four-squares', 'gear', 'git', 'github', 'globe', 'hard-drive', 'hard-drive-key', 'hat', 'hexagons', 'home', 'info-circle', 'info-circle-filled', 'ip-addresses', 'joomla', 'kebab', 'key', 'label', 'label-plus', 'laravel', 'lifebuoy', 'lightbulb', 'limit', 'linux', 'list', 'list-check-mark', 'location', 'lock-closed', 'lock-closed-check', 'lock-closed-filled', 'lock-open', 'lock-open-cross', 'lock-open-filled', 'mail', 'mail-circle-filled', 'mail-settings', 'megaphone', 'menu', 'menu-thin', 'microsoft', 'minimize', 'minus', 'minus-circle', 'minus-circle-filled', 'monitoring', 'monitoring-off', 'my-little-admin', 'net', 'nine-dots', 'node-js', 'package', 'panel', 'panel-check', 'panel-eye', 'panel-key', 'panel-settings', 'panels', 'pause-circle', 'pencil', 'pencil-dialog', 'php', 'phpmyadmin', 'pin', 'pipette', 'plans', 'plugins', 'plus', 'plus-circle', 'plus-circle-filled', 'power', 'projects', 'puzzle', 'python', 'question-mark-circle', 'question-mark-circle-filled', 'ram', 'react-js', 'recycle', 'redirect-circle-filled', 'refresh', 'reload', 'remove', 'reset', 'resource', 'ribbon', 'rocket', 'ruby', 'sand-clock', 'scan', 'screen', 'search', 'security-check', 'send', 'server', 'servers', 'share', 'shield', 'shield-attention-filled', 'shield-chain', 'shield-filled', 'shopping-cart', 'sidebar-right-hide', 'sidebar-right-show', 'signal-light', 'site-page', 'sleep', 'sliders', 'square-with-circles', 'ssl-it', 'star', 'star-circle-filled', 'star-filled', 'star-half-filled', 'start', 'start-circle', 'start-filled', 'stop', 'stop-circle', 'storage', 'themes', 'three-dots-horizontal', 'three-dots-vertical', 'tools', 'transfer', 'triangle-exclamation-mark', 'triangle-exclamation-mark-filled', 'unarchive', 'user', 'volume', 'web', 'web-plus', 'web-settings', 'windows', 'woocommerce', 'wordpress', 'wordpress-minus', 'zero-circle-filled'];

package/esm/components/List/List.js

@@ -363,7 +363,8 @@ class List extends Component {
       vertical,
       rowKey,
       totalRows,
-      filtered
+      filtered,
+      autoExpandSingleItem
     } = _ref5;
     let {
       prevSortColumn,
@@ -387,7 +388,7 @@ class List extends Component {
       const isSingleElementInCurrentExpanded = () => data && state.expandedRows.includes(getRowKey(data[0], {
         rowKey
       }));
-      if (renderRowBody && data?.length === 1 && (!pagination || totalRows === 1) && (!prevData || prevData?.length === 0 || isSingleElementInCurrentExpanded()) && (!filtered || isSingleElementInCurrentExpanded())) {
+      if (renderRowBody && data?.length === 1 && (!pagination || totalRows === 1) && (!prevData || prevData?.length === 0 || isSingleElementInCurrentExpanded()) && (!filtered || isSingleElementInCurrentExpanded()) && autoExpandSingleItem) {
         const key = getRowKey(data[0], {
           rowKey
         });
@@ -1064,6 +1065,7 @@ class List extends Component {
       rowProps,
       reorderable,
       onReorderEnd,
+      autoExpandSingleItem,
       ...props
     } = this.props;
     const {
@@ -1439,6 +1441,7 @@ _defineProperty(List, "defaultProps", {
   loading: false,
   rowProps: undefined,
   reorderable: false,
-  onReorderEnd: undefined
+  onReorderEnd: undefined,
+  autoExpandSingleItem: true
 });
 export default List;

package/esm/components/Tabs/FakeTabs.js

@@ -0,0 +1,51 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import { useRef, Children } from 'react';
+import classNames from 'classnames';
+import { useResizeObserver } from '../../hooks';
+import Icon from '../Icon';
+import Tab from './Tab';
+import TabListItem from './TabListItem';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FakeTabs = _ref => {
+  let {
+    children,
+    onResize,
+    baseClassName
+  } = _ref;
+  const tabsRef = useRef(null);
+  useResizeObserver({
+    ref: tabsRef,
+    onResize
+  });
+  const list = /*#__PURE__*/_jsxs("ul", {
+    ref: tabsRef,
+    className: classNames(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`),
+    children: [Children.map(children, (tab, index) => {
+      if (!tab || tab.type !== Tab) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(TabListItem, {
+        // eslint-disable-line react/no-array-index-key
+        tab: tab,
+        baseClassName: baseClassName,
+        isFake: true
+      }, index);
+    }), /*#__PURE__*/_jsx("li", {
+      className: classNames(`${baseClassName}__tab`, `${baseClassName}__tab--more`),
+      children: /*#__PURE__*/_jsx("a", {
+        className: `${baseClassName}__link`,
+        tabIndex: -1,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "three-dots-horizontal"
+        })
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: `${baseClassName}__fake-list-wrapper`,
+    "aria-hidden": true,
+    children: list
+  });
+};
+export default FakeTabs;

package/esm/components/Tabs/Tab.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
-/* eslint-disable react/no-unused-prop-types */
 
 /**
  * `Tab` is an individual element of the [Tabs](#!/Tabs) component.

package/esm/components/Tabs/TabClose.js

@@ -0,0 +1,28 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabClose = _ref => {
+  let {
+    tabMode,
+    onClose,
+    baseClassName
+  } = _ref;
+  if (typeof onClose !== 'function') {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("button", {
+    className: `${baseClassName}__${tabMode}-close`,
+    type: "button",
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      onClose(e);
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      className: `${baseClassName}__${tabMode}-close-icon`,
+      name: "cross-mark"
+    })
+  });
+};
+export default TabClose;

package/esm/components/Tabs/TabIcon.js

@@ -0,0 +1,14 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import Icon, { ICON_SIZE_16 } from '../Icon';
+const TabIcon = _ref => {
+  let {
+    icon,
+    baseClassName
+  } = _ref;
+  return Icon.create(icon, {
+    size: ICON_SIZE_16,
+    className: `${baseClassName}__tab-icon`
+  });
+};
+export default TabIcon;

package/esm/components/Tabs/TabLabel.js

@@ -0,0 +1,27 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import { cloneElement, isValidElement } from 'react';
+import classNames from 'classnames';
+import Label from '../Label';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabLabel = _ref => {
+  let {
+    label,
+    tabMode,
+    baseClassName
+  } = _ref;
+  if (typeof label === 'string') {
+    return /*#__PURE__*/_jsx(Label, {
+      className: `${baseClassName}__${tabMode}-label`,
+      intent: "danger",
+      children: label
+    });
+  }
+  if (/*#__PURE__*/isValidElement(label)) {
+    return /*#__PURE__*/cloneElement(label, {
+      className: classNames(`${baseClassName}__${tabMode}-label`, label.props.className)
+    });
+  }
+  return null;
+};
+export default TabLabel;

package/esm/components/Tabs/TabList.js

@@ -0,0 +1,111 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import { Children } from 'react';
+import classNames from 'classnames';
+import Dropdown from '../Dropdown';
+import Icon from '../Icon';
+import Menu, { MenuItem } from '../Menu';
+import Tab from './Tab';
+import TabClose from './TabClose';
+import TabIcon from './TabIcon';
+import TabLabel from './TabLabel';
+import TabListItem from './TabListItem';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const TabList = _ref => {
+  let {
+    children,
+    tabListRef,
+    active,
+    onTabClick,
+    visibleLength,
+    monospacedWidth,
+    baseClassName
+  } = _ref;
+  if (!Children.toArray(children).length) {
+    return null;
+  }
+  let tabs = Children.toArray(children);
+  tabs = tabs.filter(child => child?.type === Tab);
+  const listChildren = tabs.slice(0, visibleLength);
+  const menuChildren = tabs.slice(visibleLength);
+  const listItems = Children.map(listChildren, (tab, index) => {
+    const position = index + 1;
+    return /*#__PURE__*/_jsx(TabListItem, {
+      // eslint-disable-line react/no-array-index-key
+      tab: tab,
+      baseClassName: baseClassName,
+      selected: position === active,
+      onClick: () => onTabClick(position),
+      monospacedWidth: monospacedWidth
+    }, index);
+  });
+  const menuItems = Children.map(menuChildren, (tab, index) => {
+    const position = listChildren.length + index + 1;
+    const {
+      title,
+      label,
+      icon,
+      onActivate,
+      onClose,
+      component: Tag = 'a',
+      ...tabProps
+    } = tab.props;
+    return /*#__PURE__*/_jsx(MenuItem, {
+      // eslint-disable-line react/no-array-index-key
+      icon: /*#__PURE__*/_jsx(TabIcon, {
+        icon: icon,
+        baseClassName: baseClassName
+      }),
+      label: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(TabLabel, {
+          label: label,
+          tabMode: "menu-item",
+          baseClassName: baseClassName
+        }), /*#__PURE__*/_jsx(TabClose, {
+          onClose: onClose,
+          tabMode: "menu-item",
+          baseClassName: baseClassName
+        })]
+      }),
+      active: active === position,
+      onClick: () => onTabClick(position),
+      className: `${baseClassName}__menu-item`,
+      component: Tag,
+      ...tabProps,
+      children: title
+    }, index);
+  });
+  const moreSelected = active > listChildren.length;
+  return /*#__PURE__*/_jsxs("ul", {
+    ref: tabListRef,
+    className: `${baseClassName}__tab-list`,
+    role: "tablist",
+    children: [listItems, menuItems.length > 0 && /*#__PURE__*/_jsx("li", {
+      className: classNames(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
+      role: "presentation",
+      "aria-selected": moreSelected || undefined,
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        className: `${baseClassName}__dropdown`,
+        menu: /*#__PURE__*/_jsx(Menu, {
+          children: menuItems
+        }),
+        menuPlacement: "bottom-end",
+        children: /*#__PURE__*/_jsx("a", {
+          className: `${baseClassName}__link`,
+          role: "tab",
+          tabIndex: 0,
+          "aria-selected": moreSelected || undefined,
+          onKeyDown: e => {
+            if (e.key === 'Enter') {
+              e.currentTarget.click();
+            }
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "three-dots-horizontal"
+          })
+        })
+      })
+    })]
+  });
+};
+export default TabList;

package/esm/components/Tabs/TabListItem.js

@@ -0,0 +1,68 @@
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+import classNames from 'classnames';
+import { wrapFunction } from '../utils';
+import TabClose from './TabClose';
+import TabIcon from './TabIcon';
+import TabLabel from './TabLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TabListItem = _ref => {
+  let {
+    tab,
+    selected,
+    onClick,
+    monospacedWidth,
+    baseClassName,
+    isFake = false
+  } = _ref;
+  const {
+    title,
+    label,
+    icon,
+    onActivate,
+    onClose,
+    component: Tag = 'a',
+    style = {},
+    ...tabProps
+  } = tab.props;
+  const closable = typeof onClose === 'function';
+  tabProps.tabIndex = isFake ? -1 : tabProps.tabIndex || 0;
+  if (!isFake) {
+    tabProps.onKeyDown = wrapFunction(tabProps.onKeyDown, e => {
+      if (e.key === 'Enter') {
+        e.currentTarget.click();
+      }
+    });
+  }
+  return /*#__PURE__*/_jsx("li", {
+    className: classNames(`${baseClassName}__tab`, selected && `${baseClassName}__tab--selected`, closable && `${baseClassName}__tab--closable`),
+    role: isFake ? undefined : 'presentation',
+    children: /*#__PURE__*/_jsxs(Tag, {
+      className: `${baseClassName}__link`,
+      role: isFake ? undefined : 'tab',
+      "aria-selected": selected || undefined,
+      onClick: onClick,
+      style: {
+        width: monospacedWidth || undefined,
+        ...style
+      },
+      ...tabProps,
+      children: [/*#__PURE__*/_jsx(TabIcon, {
+        icon: icon,
+        baseClassName: baseClassName
+      }), /*#__PURE__*/_jsx("span", {
+        className: `${baseClassName}__tab-title`,
+        children: title
+      }), /*#__PURE__*/_jsx(TabLabel, {
+        label: label,
+        tabMode: "tab",
+        baseClassName: baseClassName
+      }), /*#__PURE__*/_jsx(TabClose, {
+        onClose: onClose,
+        tabMode: "tab",
+        baseClassName: baseClassName
+      })]
+    })
+  });
+};
+export default TabListItem;