@plesk/ui-library 3.42.0 → 3.43.0

package/cjs/components/CodeEditor/CodeEditor.js

@@ -112,8 +112,7 @@ class CodeEditor extends _react.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/cjs/components/Icon/constants.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NAMES_12 = exports.NAMES = void 0;
 // Copyright 1999-2025. WebPros International GmbH. All rights reserved.
-/* eslint-disable max-len */
 // This file is generated by create-svg-sprite. Do not edit.
 
 const NAMES_12 = exports.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/cjs/components/List/List.js

@@ -370,7 +370,8 @@ class List extends _react.Component {
       vertical,
       rowKey,
       totalRows,
-      filtered
+      filtered,
+      autoExpandSingleItem
     } = _ref5;
     let {
       prevSortColumn,
@@ -394,7 +395,7 @@ class List extends _react.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
         });
@@ -1071,6 +1072,7 @@ class List extends _react.Component {
       rowProps,
       reorderable,
       onReorderEnd,
+      autoExpandSingleItem,
       ...props
     } = this.props;
     const {
@@ -1446,6 +1448,7 @@ class List extends _react.Component {
   loading: false,
   rowProps: undefined,
   reorderable: false,
-  onReorderEnd: undefined
+  onReorderEnd: undefined,
+  autoExpandSingleItem: true
 });
 var _default = exports.default = List;

package/cjs/components/Tabs/FakeTabs.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../../hooks");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Tab = _interopRequireDefault(require("./Tab"));
+var _TabListItem = _interopRequireDefault(require("./TabListItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const FakeTabs = _ref => {
+  let {
+    children,
+    onResize,
+    baseClassName
+  } = _ref;
+  const tabsRef = (0, _react.useRef)(null);
+  (0, _hooks.useResizeObserver)({
+    ref: tabsRef,
+    onResize
+  });
+  const list = /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+    ref: tabsRef,
+    className: (0, _classnames.default)(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`),
+    children: [_react.Children.map(children, (tab, index) => {
+      if (!tab || tab.type !== _Tab.default) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabListItem.default, {
+        // eslint-disable-line react/no-array-index-key
+        tab: tab,
+        baseClassName: baseClassName,
+        isFake: true
+      }, index);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: (0, _classnames.default)(`${baseClassName}__tab`, `${baseClassName}__tab--more`),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        className: `${baseClassName}__link`,
+        tabIndex: -1,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: "three-dots-horizontal"
+        })
+      })
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${baseClassName}__fake-list-wrapper`,
+    "aria-hidden": true,
+    children: list
+  });
+};
+var _default = exports.default = FakeTabs;

package/cjs/components/Tabs/Tab.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _jsxRuntime = require("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/cjs/components/Tabs/TabClose.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const TabClose = _ref => {
+  let {
+    tabMode,
+    onClose,
+    baseClassName
+  } = _ref;
+  if (typeof onClose !== 'function') {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    className: `${baseClassName}__${tabMode}-close`,
+    type: "button",
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      onClose(e);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      className: `${baseClassName}__${tabMode}-close-icon`,
+      name: "cross-mark"
+    })
+  });
+};
+var _default = exports.default = TabClose;

package/cjs/components/Tabs/TabIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Icon = _interopRequireWildcard(require("../Icon"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const TabIcon = _ref => {
+  let {
+    icon,
+    baseClassName
+  } = _ref;
+  return _Icon.default.create(icon, {
+    size: _Icon.ICON_SIZE_16,
+    className: `${baseClassName}__tab-icon`
+  });
+};
+var _default = exports.default = TabIcon;

package/cjs/components/Tabs/TabLabel.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Label = _interopRequireDefault(require("../Label"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const TabLabel = _ref => {
+  let {
+    label,
+    tabMode,
+    baseClassName
+  } = _ref;
+  if (typeof label === 'string') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
+      className: `${baseClassName}__${tabMode}-label`,
+      intent: "danger",
+      children: label
+    });
+  }
+  if (/*#__PURE__*/(0, _react.isValidElement)(label)) {
+    return /*#__PURE__*/(0, _react.cloneElement)(label, {
+      className: (0, _classnames.default)(`${baseClassName}__${tabMode}-label`, label.props.className)
+    });
+  }
+  return null;
+};
+var _default = exports.default = TabLabel;

package/cjs/components/Tabs/TabList.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Menu = _interopRequireWildcard(require("../Menu"));
+var _Tab = _interopRequireDefault(require("./Tab"));
+var _TabClose = _interopRequireDefault(require("./TabClose"));
+var _TabIcon = _interopRequireDefault(require("./TabIcon"));
+var _TabLabel = _interopRequireDefault(require("./TabLabel"));
+var _TabListItem = _interopRequireDefault(require("./TabListItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+const TabList = _ref => {
+  let {
+    children,
+    tabListRef,
+    active,
+    onTabClick,
+    visibleLength,
+    monospacedWidth,
+    baseClassName
+  } = _ref;
+  if (!_react.Children.toArray(children).length) {
+    return null;
+  }
+  let tabs = _react.Children.toArray(children);
+  tabs = tabs.filter(child => child?.type === _Tab.default);
+  const listChildren = tabs.slice(0, visibleLength);
+  const menuChildren = tabs.slice(visibleLength);
+  const listItems = _react.Children.map(listChildren, (tab, index) => {
+    const position = index + 1;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabListItem.default, {
+      // eslint-disable-line react/no-array-index-key
+      tab: tab,
+      baseClassName: baseClassName,
+      selected: position === active,
+      onClick: () => onTabClick(position),
+      monospacedWidth: monospacedWidth
+    }, index);
+  });
+  const menuItems = _react.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__*/(0, _jsxRuntime.jsx)(_Menu.MenuItem, {
+      // eslint-disable-line react/no-array-index-key
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabIcon.default, {
+        icon: icon,
+        baseClassName: baseClassName
+      }),
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLabel.default, {
+          label: label,
+          tabMode: "menu-item",
+          baseClassName: baseClassName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabClose.default, {
+          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__*/(0, _jsxRuntime.jsxs)("ul", {
+    ref: tabListRef,
+    className: `${baseClassName}__tab-list`,
+    role: "tablist",
+    children: [listItems, menuItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: (0, _classnames.default)(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
+      role: "presentation",
+      "aria-selected": moreSelected || undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
+        className: `${baseClassName}__dropdown`,
+        menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+          children: menuItems
+        }),
+        menuPlacement: "bottom-end",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          className: `${baseClassName}__link`,
+          role: "tab",
+          tabIndex: 0,
+          "aria-selected": moreSelected || undefined,
+          onKeyDown: e => {
+            if (e.key === 'Enter') {
+              e.currentTarget.click();
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "three-dots-horizontal"
+          })
+        })
+      })
+    })]
+  });
+};
+var _default = exports.default = TabList;

package/cjs/components/Tabs/TabListItem.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../utils");
+var _TabClose = _interopRequireDefault(require("./TabClose"));
+var _TabIcon = _interopRequireDefault(require("./TabIcon"));
+var _TabLabel = _interopRequireDefault(require("./TabLabel"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
+
+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 = (0, _utils.wrapFunction)(tabProps.onKeyDown, e => {
+      if (e.key === 'Enter') {
+        e.currentTarget.click();
+      }
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    className: (0, _classnames.default)(`${baseClassName}__tab`, selected && `${baseClassName}__tab--selected`, closable && `${baseClassName}__tab--closable`),
+    role: isFake ? undefined : 'presentation',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, {
+      className: `${baseClassName}__link`,
+      role: isFake ? undefined : 'tab',
+      "aria-selected": selected || undefined,
+      onClick: onClick,
+      style: {
+        width: monospacedWidth || undefined,
+        ...style
+      },
+      ...tabProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabIcon.default, {
+        icon: icon,
+        baseClassName: baseClassName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: `${baseClassName}__tab-title`,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLabel.default, {
+        label: label,
+        tabMode: "tab",
+        baseClassName: baseClassName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabClose.default, {
+        onClose: onClose,
+        tabMode: "tab",
+        baseClassName: baseClassName
+      })]
+    })
+  });
+};
+var _default = exports.default = TabListItem;