@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/Tabs/Tabs.js

@@ -1,9 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 import React, { cloneElement, isValidElement, Component, Fragment, Children } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -16,6 +13,8 @@ import Menu, { MenuItem } from '../Menu';
 import Tab from './Tab';
 import ResponsiveContext from '../ResponsiveContext';
 import { wrapFunction } from '../utils';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const ADDON_LEFT_PADDING = 5;
 const MIN_ADDON_WIDTH_DEFAULT = 150;
 const COLLAPSED_SEARCH_WIDTH = 60;
@@ -223,31 +222,37 @@ class Tabs extends Component {
         }
       });
       if (tabMode === 'menu-item') {
-        return /*#__PURE__*/React.createElement(MenuItem, _extends({
-          key: key,
+        return /*#__PURE__*/_jsx(MenuItem, {
           icon: tabIcon,
-          label: /*#__PURE__*/React.createElement(Fragment, null, tabLabel, tabClose),
+          label: /*#__PURE__*/_jsxs(Fragment, {
+            children: [tabLabel, tabClose]
+          }),
           active: selected,
           onClick: handleClick,
           className: `${baseClassName}__menu-item`,
-          component: Tag
-        }, tabProps), title);
+          component: Tag,
+          ...tabProps,
+          children: title
+        }, key);
       }
-      return /*#__PURE__*/React.createElement("li", {
-        key: key,
+      return /*#__PURE__*/_jsx("li", {
         className: classNames(`${baseClassName}__tab`, selected && `${baseClassName}__tab--selected`, tabClose && `${baseClassName}__tab--closable`),
-        role: "presentation"
-      }, /*#__PURE__*/React.createElement(Tag, _extends({
-        className: `${baseClassName}__link`,
-        role: "tab",
-        "aria-selected": selected || null,
-        style: {
-          width: monospacedWidth
-        },
-        onClick: handleClick
-      }, tabProps), tabIcon, /*#__PURE__*/React.createElement("span", {
-        className: `${baseClassName}__tab-title`
-      }, title), tabLabel, tabClose));
+        role: "presentation",
+        children: /*#__PURE__*/_jsxs(Tag, {
+          className: `${baseClassName}__link`,
+          role: "tab",
+          "aria-selected": selected || null,
+          style: {
+            width: monospacedWidth
+          },
+          onClick: handleClick,
+          ...tabProps,
+          children: [tabIcon, /*#__PURE__*/_jsx("span", {
+            className: `${baseClassName}__tab-title`,
+            children: title
+          }), tabLabel, tabClose]
+        })
+      }, key);
     });
   }
   static getDerivedStateFromProps(props, state) {
@@ -286,10 +291,11 @@ class Tabs extends Component {
       baseClassName
     } = this.props;
     if (typeof label === 'string') {
-      return /*#__PURE__*/React.createElement(Label, {
+      return /*#__PURE__*/_jsx(Label, {
         className: `${baseClassName}__${tabMode}-label`,
-        intent: "danger"
-      }, label);
+        intent: "danger",
+        children: label
+      });
     }
     if ( /*#__PURE__*/isValidElement(label)) {
       return /*#__PURE__*/cloneElement(label, {
@@ -303,18 +309,19 @@ class Tabs extends Component {
       baseClassName
     } = this.props;
     if (typeof onClose === 'function') {
-      return /*#__PURE__*/React.createElement("button", {
+      return /*#__PURE__*/_jsx("button", {
         className: `${baseClassName}__${tabMode}-close`,
         type: "button",
         onClick: e => {
           e.preventDefault();
           e.stopPropagation();
           onClose(e);
-        }
-      }, /*#__PURE__*/React.createElement(Icon, {
-        className: `${baseClassName}__${tabMode}-close-icon`,
-        name: "cross-mark"
-      }));
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          className: `${baseClassName}__${tabMode}-close-icon`,
+          name: "cross-mark"
+        })
+      });
     }
     return null;
   }
@@ -327,43 +334,48 @@ class Tabs extends Component {
     if (!childrenCount) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("ul", {
-      className: classNames(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`)
-    }, Children.map(children, tab => {
-      if (!tab || tab.type !== Tab) {
-        return null;
-      }
-      const {
-        title,
-        label,
-        icon,
-        onActivate,
-        onClose,
-        ...tabProps
-      } = tab.props;
-      const iconBlock = Icon.create(icon, {
-        size: ICON_SIZE_16,
-        className: `${baseClassName}__tab-icon`
-      });
-      const closeBlock = this.renderTabClose('tab', onClose);
-      return /*#__PURE__*/React.createElement("li", {
-        key: title,
-        className: classNames(`${baseClassName}__tab`, closeBlock && `${baseClassName}__tab--closable`)
-      }, /*#__PURE__*/React.createElement("a", {
-        className: `${baseClassName}__link`,
-        tabIndex: "-1",
-        style: tabProps.style
-      }, iconBlock, /*#__PURE__*/React.createElement("span", {
-        className: `${baseClassName}__tab-title`
-      }, title), this.renderTabLabel('tab', label)), closeBlock);
-    }), /*#__PURE__*/React.createElement("li", {
-      className: classNames(`${baseClassName}__tab`, `${baseClassName}__tab--more`)
-    }, /*#__PURE__*/React.createElement("a", {
-      className: `${baseClassName}__link`,
-      tabIndex: "-1"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "three-dots-horizontal"
-    }))));
+    return /*#__PURE__*/_jsxs("ul", {
+      className: classNames(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`),
+      children: [Children.map(children, tab => {
+        if (!tab || tab.type !== Tab) {
+          return null;
+        }
+        const {
+          title,
+          label,
+          icon,
+          onActivate,
+          onClose,
+          ...tabProps
+        } = tab.props;
+        const iconBlock = Icon.create(icon, {
+          size: ICON_SIZE_16,
+          className: `${baseClassName}__tab-icon`
+        });
+        const closeBlock = this.renderTabClose('tab', onClose);
+        return /*#__PURE__*/_jsxs("li", {
+          className: classNames(`${baseClassName}__tab`, closeBlock && `${baseClassName}__tab--closable`),
+          children: [/*#__PURE__*/_jsxs("a", {
+            className: `${baseClassName}__link`,
+            tabIndex: "-1",
+            style: tabProps.style,
+            children: [iconBlock, /*#__PURE__*/_jsx("span", {
+              className: `${baseClassName}__tab-title`,
+              children: title
+            }), this.renderTabLabel('tab', label)]
+          }), closeBlock]
+        }, title);
+      }), /*#__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"
+          })
+        })
+      })]
+    });
   }
   createTabItems() {
     const {
@@ -401,26 +413,32 @@ class Tabs extends Component {
       hiddenItems
     } = this.createTabItems();
     const moreSelected = active > visibleItems.length;
-    return /*#__PURE__*/React.createElement("ul", {
+    return /*#__PURE__*/_jsxs("ul", {
       className: `${baseClassName}__tab-list`,
-      role: "tablist"
-    }, visibleItems, hiddenItems.length > 0 && /*#__PURE__*/React.createElement("li", {
-      ref: ref => this.moreTabsRef = ref,
-      className: classNames(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
-      role: "presentation",
-      "aria-selected": moreSelected || null
-    }, /*#__PURE__*/React.createElement(Dropdown, {
-      className: `${baseClassName}__dropdown`,
-      menu: /*#__PURE__*/React.createElement(Menu, null, hiddenItems),
-      menuPlacement: "bottom-end"
-    }, /*#__PURE__*/React.createElement("a", {
-      className: `${baseClassName}__link`,
-      role: "tab",
-      tabIndex: "0",
-      "aria-selected": moreSelected || null
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "three-dots-horizontal"
-    })))));
+      role: "tablist",
+      children: [visibleItems, hiddenItems.length > 0 && /*#__PURE__*/_jsx("li", {
+        ref: ref => this.moreTabsRef = ref,
+        className: classNames(`${baseClassName}__tab`, moreSelected && `${baseClassName}__tab--selected`, `${baseClassName}__tab--more`),
+        role: "presentation",
+        "aria-selected": moreSelected || null,
+        children: /*#__PURE__*/_jsx(Dropdown, {
+          className: `${baseClassName}__dropdown`,
+          menu: /*#__PURE__*/_jsx(Menu, {
+            children: hiddenItems
+          }),
+          menuPlacement: "bottom-end",
+          children: /*#__PURE__*/_jsx("a", {
+            className: `${baseClassName}__link`,
+            role: "tab",
+            tabIndex: "0",
+            "aria-selected": moreSelected || null,
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: "three-dots-horizontal"
+            })
+          })
+        })
+      })]
+    });
   }
   renderSearchBar(searchProps) {
     const {
@@ -432,9 +450,10 @@ class Tabs extends Component {
     } = this.state;
     const clone = /*#__PURE__*/cloneElement(search, searchProps);
     if (compact) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__search`
-      }, clone);
+      return /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__search`,
+        children: clone
+      });
     }
     return clone;
   }
@@ -490,45 +509,55 @@ class Tabs extends Component {
         addonBlock = this.renderSearchBar(searchProps);
       }
     }
-    return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
-      value: compact
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      className: classNames(baseClassName, className)
-    }, props), /*#__PURE__*/React.createElement(Measure, {
-      onResize: this.handleResize,
-      innerRef: ref => this.tabsnavRef = ref
-    }, _ref => {
-      let {
-        measureRef
-      } = _ref;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
-        ref: measureRef
-      }, this.renderTabList(), /*#__PURE__*/React.createElement(Measure, {
-        onResize: this.handleResize
-      }, _ref2 => {
-        let {
-          measureRef: ref
-        } = _ref2;
-        return /*#__PURE__*/cloneElement(this.renderFakeTabs(), {
-          ref
-        });
-      }), searchBlock, addonBlock && /*#__PURE__*/React.createElement(Measure, {
-        onResize: this.handleAddonResize,
-        bounds: true
-      }, _ref3 => {
-        let {
-          measureRef: ref
-        } = _ref3;
-        return /*#__PURE__*/React.createElement("div", _extends({
-          className: `${baseClassName}__addon`,
-          ref: ref
-        }, addonProps), addonBlock);
-      }));
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__tab-panel`,
-      role: "tabpanel"
-    }, Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null))));
+    return /*#__PURE__*/_jsx(ResponsiveContext.Provider, {
+      value: compact,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classNames(baseClassName, className),
+        ...props,
+        children: [/*#__PURE__*/_jsx(Measure, {
+          onResize: this.handleResize,
+          innerRef: ref => this.tabsnavRef = ref,
+          children: _ref => {
+            let {
+              measureRef
+            } = _ref;
+            return /*#__PURE__*/_jsxs("div", {
+              className: classNames(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
+              ref: measureRef,
+              children: [this.renderTabList(), /*#__PURE__*/_jsx(Measure, {
+                onResize: this.handleResize,
+                children: _ref2 => {
+                  let {
+                    measureRef: ref
+                  } = _ref2;
+                  return /*#__PURE__*/cloneElement(this.renderFakeTabs(), {
+                    ref
+                  });
+                }
+              }), searchBlock, addonBlock && /*#__PURE__*/_jsx(Measure, {
+                onResize: this.handleAddonResize,
+                bounds: true,
+                children: _ref3 => {
+                  let {
+                    measureRef: ref
+                  } = _ref3;
+                  return /*#__PURE__*/_jsx("div", {
+                    className: `${baseClassName}__addon`,
+                    ref: ref,
+                    ...addonProps,
+                    children: addonBlock
+                  });
+                }
+              })]
+            });
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__tab-panel`,
+          role: "tabpanel",
+          children: Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null)
+        })]
+      })
+    });
   }
 }
 Tabs.propTypes = {

package/esm/components/Tabs/Tabs.stories.js

@@ -1,14 +1,16 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import Tabs from './Tabs';
 import Tab from './Tab';
-export const Basic = args => /*#__PURE__*/React.createElement(Tabs, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(Tabs, {
+  ...args
+});
 Basic.args = {
   children: Array.from({
     length: 5
-  }, (_v, k) => k + 1).map(v => /*#__PURE__*/React.createElement(Tab, {
-    key: v,
-    title: `Tab ${v}`
-  }, `Tab ${v} content.`))
+  }, (_v, k) => k + 1).map(v => /*#__PURE__*/_jsx(Tab, {
+    title: `Tab ${v}`,
+    children: `Tab ${v} content.`
+  }, v))
 };

package/esm/components/Text/Text.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import OnDarkContext from '../OnDarkContext';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Text` component is used for displaying inline text. For text blocks use [Paragraph](#!/Paragraph).
  * @since 1.1.0
@@ -28,7 +28,7 @@ const Text = _ref => {
     Tag = mark ? 'mark' : 'span';
   }
   const onDark = useContext(OnDarkContext);
-  return /*#__PURE__*/React.createElement(Tag, _extends({
+  return /*#__PURE__*/_jsx(Tag, {
     className: classNames(baseClassName, {
       [`${baseClassName}--${intent}`]: intent,
       [`${baseClassName}--${fontSize}`]: fontSize,
@@ -38,7 +38,9 @@ const Text = _ref => {
       [`${baseClassName}--nowrap`]: nowrap,
       [`${baseClassName}--mark`]: mark,
       [`${baseClassName}--on-dark`]: onDark
-    }, className)
-  }, props), children);
+    }, className),
+    ...props,
+    children: children
+  });
 };
 export default Text;

package/esm/components/TextArea/TextArea.js

@@ -1,11 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import React, { Component, createRef } from 'react';
+import { Component, createRef } from 'react';
 import { CLS_PREFIX } from '../../constants';
 import calculateNodeHeight from './calculateNodeHeight';
+import { jsx as _jsx } from "react/jsx-runtime";
 const getMinMax = rows => {
   if (typeof rows === 'number') {
     return {
@@ -102,15 +102,16 @@ class TextArea extends Component {
       minRows
     } = this.state;
     const useSizeModifier = AVAILABLE_SIZES.indexOf(size) !== -1;
-    return /*#__PURE__*/React.createElement("textarea", _extends({
+    return /*#__PURE__*/_jsx("textarea", {
       className: classNames(baseClassName, {
         [`${baseClassName}--size-${size}`]: useSizeModifier
       }, className),
       ref: this.rootRef,
       style: textareaStyles,
       onChange: this.handleChange,
-      rows: minRows
-    }, other));
+      rows: minRows,
+      ...other
+    });
   }
 }
 _defineProperty(TextArea, "defaultProps", {

package/esm/components/Toast/Toast.js

@@ -1,14 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
 import Button from '../Button';
 import { intentIconMap } from '../intentIconMap';
 import OnDarkContext from '../OnDarkContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const AUTOCLOSE_TIMEOUT = 6000;
 export default class Toast extends Component {
   constructor() {
@@ -47,7 +48,7 @@ export default class Toast extends Component {
       message,
       intent,
       accent,
-      icon = intent && /*#__PURE__*/React.createElement(Icon, {
+      icon = intent && /*#__PURE__*/_jsx(Icon, {
         name: intentIconMap[intent]
       }),
       onClose,
@@ -57,34 +58,39 @@ export default class Toast extends Component {
       innerRef,
       ...props
     } = this.props;
-    const result = /*#__PURE__*/React.createElement("div", _extends({
+    const result = /*#__PURE__*/_jsxs("div", {
       tabIndex: 0,
-      className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, accent && `${baseClassName}--accent`, className)
-    }, props, {
-      ref: innerRef
-    }), icon ? /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__icon`
-    }, Icon.create(icon, {
-      intent
-    })) : null, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content`
-    }, message), closable ? /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__action`
-    }, /*#__PURE__*/React.createElement(Button, {
-      ghost: true,
-      icon: {
-        name: 'cross-mark',
-        size: '12'
-      },
-      className: `${baseClassName}__close`,
-      onClick: onClose
-    })) : null);
+      className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, accent && `${baseClassName}--accent`, className),
+      ...props,
+      ref: innerRef,
+      children: [icon ? /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__icon`,
+        children: Icon.create(icon, {
+          intent
+        })
+      }) : null, /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__content`,
+        children: message
+      }), closable ? /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__action`,
+        children: /*#__PURE__*/_jsx(Button, {
+          ghost: true,
+          icon: {
+            name: 'cross-mark',
+            size: '12'
+          },
+          className: `${baseClassName}__close`,
+          onClick: onClose
+        })
+      }) : null]
+    });
     if (accent) {
       return result;
     }
-    return /*#__PURE__*/React.createElement(OnDarkContext.Provider, {
-      value: true
-    }, result);
+    return /*#__PURE__*/_jsx(OnDarkContext.Provider, {
+      value: true,
+      children: result
+    });
   }
 }
 _defineProperty(Toast, "defaultProps", {