@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/InPlaceEdit/InPlaceEdit.js

@@ -1,9 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -13,6 +10,8 @@ import Input from '../Input';
 import Tooltip from '../Tooltip';
 import Translate from '../Translate';
 import locale from './locale/en-US';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * This component allows users to edit a short text "in place" — in other words, straight in the interface, without
  * opening additional dialog windows. If a text is large enough that it doesn't fit on a single line, you should
@@ -66,52 +65,59 @@ class InPlaceEdit extends Component {
       value,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", _extends({
-      className: classNames(baseClassName, className)
-    }, props), editing ? /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__edit`
-    }, /*#__PURE__*/React.createElement(Input, {
-      className: `${baseClassName}__edit-input`,
-      value: draft,
-      onChange: this.handleChange,
-      onKeyDown: this.handleEditKey,
-      autoFocus: true
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__edit-actions`
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      title: /*#__PURE__*/React.createElement(Translate, {
-        content: "InPlaceEdit.okButtonHint",
-        fallback: locale.okButtonHint
-      })
-    }, /*#__PURE__*/React.createElement(Button, {
-      ghost: true,
-      className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
-      icon: "check-mark",
-      onClick: this.handleEditOk
-    })), /*#__PURE__*/React.createElement(Tooltip, {
-      title: /*#__PURE__*/React.createElement(Translate, {
-        content: "InPlaceEdit.cancelButtonHint",
-        fallback: locale.cancelButtonHint
-      })
-    }, /*#__PURE__*/React.createElement(Button, {
-      ghost: true,
-      className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
-      icon: "cross-mark",
-      onClick: this.handleEdit
-    })))) : value, onChange && !editing && /*#__PURE__*/React.createElement(Tooltip, {
-      title: /*#__PURE__*/React.createElement(Translate, {
-        content: "InPlaceEdit.editButtonHint",
-        fallback: locale.editButtonHint
-      })
-    }, /*#__PURE__*/React.createElement(Button, {
-      ghost: true,
-      className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
-      onClick: this.handleEdit,
-      icon: {
-        name: 'pencil',
-        className: `${baseClassName}__control-button-icon`
-      }
-    })));
+    return /*#__PURE__*/_jsxs("div", {
+      className: classNames(baseClassName, className),
+      ...props,
+      children: [editing ? /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__edit`,
+        children: [/*#__PURE__*/_jsx(Input, {
+          className: `${baseClassName}__edit-input`,
+          value: draft,
+          onChange: this.handleChange,
+          onKeyDown: this.handleEditKey,
+          autoFocus: true
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClassName}__edit-actions`,
+          children: [/*#__PURE__*/_jsx(Tooltip, {
+            title: /*#__PURE__*/_jsx(Translate, {
+              content: "InPlaceEdit.okButtonHint",
+              fallback: locale.okButtonHint
+            }),
+            children: /*#__PURE__*/_jsx(Button, {
+              ghost: true,
+              className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
+              icon: "check-mark",
+              onClick: this.handleEditOk
+            })
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: /*#__PURE__*/_jsx(Translate, {
+              content: "InPlaceEdit.cancelButtonHint",
+              fallback: locale.cancelButtonHint
+            }),
+            children: /*#__PURE__*/_jsx(Button, {
+              ghost: true,
+              className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
+              icon: "cross-mark",
+              onClick: this.handleEdit
+            })
+          })]
+        })]
+      }) : value, onChange && !editing && /*#__PURE__*/_jsx(Tooltip, {
+        title: /*#__PURE__*/_jsx(Translate, {
+          content: "InPlaceEdit.editButtonHint",
+          fallback: locale.editButtonHint
+        }),
+        children: /*#__PURE__*/_jsx(Button, {
+          ghost: true,
+          className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
+          onClick: this.handleEdit,
+          icon: {
+            name: 'pencil',
+            className: `${baseClassName}__control-button-icon`
+          }
+        })
+      })]
+    });
   }
 }
 InPlaceEdit.propTypes = {

package/esm/components/Input/Input.js

@@ -1,9 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Input` component is used for entering short text (like user name or email address).
  * @since 0.0.57
@@ -22,21 +22,26 @@ const Input = _ref => {
     ...props
   } = _ref;
   const useSizeModifier = typeof size === 'string' && ['sm', 'md', 'lg', 'xl', 'fill'].indexOf(size) !== -1;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return /*#__PURE__*/_jsxs("span", {
     className: classNames(baseClassName, {
       [`${baseClassName}--size-${size}`]: useSizeModifier,
       [`${baseClassName}--text-${textAlign}`]: textAlign,
       [`${baseClassName}--affix`]: prefix || suffix
-    }, className)
-  }, rootProps), prefix && /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__prefix`
-  }, prefix), /*#__PURE__*/React.createElement("input", _extends({
-    ref: innerRef,
-    type: type,
-    size: typeof size === 'number' ? size : undefined,
-    className: `${baseClassName}__input`
-  }, props)), suffix && /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__suffix`
-  }, suffix));
+    }, className),
+    ...rootProps,
+    children: [prefix && /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__prefix`,
+      children: prefix
+    }), /*#__PURE__*/_jsx("input", {
+      ref: innerRef,
+      type: type,
+      size: typeof size === 'number' ? size : undefined,
+      className: `${baseClassName}__input`,
+      ...props
+    }), suffix && /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__suffix`,
+      children: suffix
+    })]
+  });
 };
 export default Input;

package/esm/components/InputFile/InputFile.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { safeInvoke } from '../utils';
@@ -9,6 +8,9 @@ import Text from '../Text';
 import Button from '../Button';
 import Translate from '../Translate';
 import localeFallback from './locale/en-US';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const generateId = () => Math.random().toString(36).slice(2);
 
 /**
@@ -58,43 +60,48 @@ const InputFile = _ref => {
       setFocusScheduled(false);
     }
   }, [isFocusScheduled]);
-  return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNames(baseClassName, className)
-  }, props), /*#__PURE__*/React.createElement(Button, {
-    className: `${baseClassName}__button`,
-    "data-test": testId && `${testId}--browse-button`,
-    disabled: disabled,
-    component: "label",
-    state: hasFocus ? 'focused' : undefined
-  }, !disabled && /*#__PURE__*/React.createElement("input", {
-    "data-id": id,
-    key: id,
-    type: "file",
-    name: name,
-    onChange: handleChange,
-    className: `${baseClassName}__input`,
-    ref: inputRef,
-    "data-test": testId && `${testId}--file-input`,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    accept: accept
-  }), /*#__PURE__*/React.createElement(Translate, {
-    namespace: "InputFile",
-    content: "browseButton",
-    translators: locale,
-    fallback: localeFallback.browseButton
-  })), file && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-    truncate: true,
-    nowrap: true,
-    className: `${baseClassName}__name`,
-    "data-test": testId && `${testId}--file-name`,
-    intent: disabled ? 'muted' : undefined
-  }, file.name), /*#__PURE__*/React.createElement(Button, {
-    icon: "cross-mark",
-    ghost: true,
-    onClick: handleReset,
-    "data-test": testId && `${testId}--reset-button`,
-    disabled: disabled
-  })));
+  return /*#__PURE__*/_jsxs("span", {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: [/*#__PURE__*/_jsxs(Button, {
+      className: `${baseClassName}__button`,
+      "data-test": testId && `${testId}--browse-button`,
+      disabled: disabled,
+      component: "label",
+      state: hasFocus ? 'focused' : undefined,
+      children: [!disabled && /*#__PURE__*/_jsx("input", {
+        "data-id": id,
+        type: "file",
+        name: name,
+        onChange: handleChange,
+        className: `${baseClassName}__input`,
+        ref: inputRef,
+        "data-test": testId && `${testId}--file-input`,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        accept: accept
+      }, id), /*#__PURE__*/_jsx(Translate, {
+        namespace: "InputFile",
+        content: "browseButton",
+        translators: locale,
+        fallback: localeFallback.browseButton
+      })]
+    }), file && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        truncate: true,
+        nowrap: true,
+        className: `${baseClassName}__name`,
+        "data-test": testId && `${testId}--file-name`,
+        intent: disabled ? 'muted' : undefined,
+        children: file.name
+      }), /*#__PURE__*/_jsx(Button, {
+        icon: "cross-mark",
+        ghost: true,
+        onClick: handleReset,
+        "data-test": testId && `${testId}--reset-button`,
+        disabled: disabled
+      })]
+    })]
+  });
 };
 export default InputFile;

package/esm/components/InputNumber/InputNumber.js

@@ -1,12 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import { useState, useRef, useLayoutEffect } from 'react';
 import { safeInvoke } from '../utils';
 import Input from '../Input';
 import Button from '../Button';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 const fitToMinMax = function (value) {
   let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
   let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1;
@@ -129,10 +129,10 @@ const InputNumber = _ref => {
   };
   const minDisabled = disabled || isMinDisabled(value, min);
   const maxDisabled = disabled || isMaxDisabled(value, max);
-  return /*#__PURE__*/React.createElement(Input, _extends({
+  return /*#__PURE__*/_jsx(Input, {
     textAlign: "center",
-    size: "sm"
-  }, props, {
+    size: "sm",
+    ...props,
     value: value,
     disabled: disabled,
     onChange: handleChange,
@@ -140,7 +140,7 @@ const InputNumber = _ref => {
     onBlur: handleBlur,
     className: classNames(baseClassName, className),
     innerRef: inputRef,
-    prefix: /*#__PURE__*/React.createElement(Button, {
+    prefix: /*#__PURE__*/_jsx(Button, {
       icon: decrementIcon,
       ghost: true,
       disabled: minDisabled,
@@ -148,7 +148,7 @@ const InputNumber = _ref => {
       onMouseDown: handleMouseDown,
       className: `${baseClassName}__dec`
     }),
-    suffix: /*#__PURE__*/React.createElement(Button, {
+    suffix: /*#__PURE__*/_jsx(Button, {
       icon: incrementIcon,
       ghost: true,
       disabled: maxDisabled,
@@ -156,6 +156,6 @@ const InputNumber = _ref => {
       onMouseDown: handleMouseDown,
       className: `${baseClassName}__inc`
     })
-  }));
+  });
 };
 export default InputNumber;

package/esm/components/Item/Item.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 import React, { Component, cloneElement, isValidElement, Children } from 'react';
@@ -10,6 +9,8 @@ import Media from '../Media';
 import Heading from '../Heading';
 import Tooltip from '../Tooltip';
 import { createProxyProps, wrapFunction } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const VIEW_SIMPLE = 'simple';
 const VIEW_CARD = 'card';
 
@@ -29,16 +30,21 @@ class Item extends Component {
     } = this.props;
     let wrappable = false;
     if (typeof title === 'string') {
-      title = /*#__PURE__*/React.createElement("span", null, title);
+      title = /*#__PURE__*/_jsx("span", {
+        children: title
+      });
       wrappable = true;
     } else if (typeof title === 'object' && ! /*#__PURE__*/isValidElement(title)) {
-      title = /*#__PURE__*/React.createElement("a", title);
+      title = /*#__PURE__*/_jsx("a", {
+        ...title
+      });
       wrappable = true;
     }
     if (wrappable && view === 'card') {
-      title = /*#__PURE__*/React.createElement(Heading, {
-        level: 3
-      }, title);
+      title = /*#__PURE__*/_jsx(Heading, {
+        level: 3,
+        children: title
+      });
     }
     if ( /*#__PURE__*/isValidElement(title)) {
       title = /*#__PURE__*/cloneElement(title, {
@@ -91,27 +97,34 @@ class Item extends Component {
         });
       }
     }
-    const item = /*#__PURE__*/React.createElement(Tag, _extends({
+    const item = /*#__PURE__*/_jsxs(Tag, {
       className: classNames(baseClassName, {
         [`${baseClassName}--card`]: view === 'card',
         [`${baseClassName}--disabled`]: disabled,
         [`${baseClassName}--hoverable`]: hoverable
-      }, className)
-    }, props), /*#__PURE__*/React.createElement(Media, {
-      image: this.renderIcon(icon),
-      title: this.renderTitle(title),
-      className: `${baseClassName}__media`
-    }, description && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__description`
-    }, description), Children.toArray(children).length ? /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content`
-    }, children) : null), footer && /*#__PURE__*/React.createElement("footer", {
-      className: `${baseClassName}__footer`
-    }, footer));
+      }, className),
+      ...props,
+      children: [/*#__PURE__*/_jsxs(Media, {
+        image: this.renderIcon(icon),
+        title: this.renderTitle(title),
+        className: `${baseClassName}__media`,
+        children: [description && /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__description`,
+          children: description
+        }), Children.toArray(children).length ? /*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__content`,
+          children: children
+        }) : null]
+      }), footer && /*#__PURE__*/_jsx("footer", {
+        className: `${baseClassName}__footer`,
+        children: footer
+      })]
+    });
     if (tooltip) {
-      return createProxyProps(props => /*#__PURE__*/React.createElement(Tooltip, {
-        title: tooltip
-      }, /*#__PURE__*/cloneElement(item, props)));
+      return createProxyProps(props => /*#__PURE__*/_jsx(Tooltip, {
+        title: tooltip,
+        children: /*#__PURE__*/cloneElement(item, props)
+      }));
     }
     return item;
   }

package/esm/components/ItemLink/ItemLink.js

@@ -1,10 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import React from 'react';
 import { wrapFunction } from '../utils';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `ItemLink` component is a part of [ItemList](#!/ItemList) and
  * is used for specifying a special action on the list (for example, adding new item).
@@ -28,10 +27,13 @@ const ItemLink = _ref => {
       }
     });
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(baseClassName, className)
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__content`
-  }, children));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__content`,
+      children: children
+    })
+  });
 };
 export default ItemLink;

package/esm/components/ItemLink/ItemLink.stories.js

@@ -1,8 +1,10 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import ItemLink from './ItemLink';
-export const Basic = args => /*#__PURE__*/React.createElement(ItemLink, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(ItemLink, {
+  ...args
+});
 Basic.args = {
   children: 'Add new item',
   onClick: () => {},

package/esm/components/ItemList/ItemList.js

@@ -1,13 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
-import React, { Component, Children, cloneElement, isValidElement } from 'react';
+import { Component, Children, cloneElement, isValidElement } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Grid from '../Grid';
 import GridCol from '../GridCol';
 import { safeInvoke } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const getNextSelectedValue = (value, prevValue, toggleable) => {
   if (Array.isArray(prevValue)) {
     if (prevValue.indexOf(value) !== -1) {
@@ -137,14 +137,18 @@ class ItemList extends Component {
       children,
       ...props
     } = _ref3;
-    return /*#__PURE__*/React.createElement(Grid, props, Children.map(children, child => {
-      if ( /*#__PURE__*/isValidElement(child)) {
-        return /*#__PURE__*/React.createElement(GridCol, {
-          className: classNames(`${baseClassName}__col`)
-        }, /*#__PURE__*/cloneElement(child, this.createItemProps(child)));
-      }
-      return null;
-    }));
+    return /*#__PURE__*/_jsx(Grid, {
+      ...props,
+      children: Children.map(children, child => {
+        if ( /*#__PURE__*/isValidElement(child)) {
+          return /*#__PURE__*/_jsx(GridCol, {
+            className: classNames(`${baseClassName}__col`),
+            children: /*#__PURE__*/cloneElement(child, this.createItemProps(child))
+          });
+        }
+        return null;
+      })
+    });
   }
   someChild(predicate) {
     let result = false;
@@ -199,23 +203,26 @@ class ItemList extends Component {
       [`${baseClassName}__col--gap-lg`]: props.gap === 'lg',
       [`${baseClassName}__col--gap-xl`]: props.gap === 'xl'
     });
-    return /*#__PURE__*/React.createElement(ReorderableGrid, _extends({
+    return /*#__PURE__*/_jsx(ReorderableGrid, {
       axis: "xy",
       helperClass: helperClass,
-      onSortEnd: onReorderEnd
-    }, props), Children.map(children, (child, index) => {
-      if ( /*#__PURE__*/isValidElement(child)) {
-        const {
-          disabled
-        } = child.props;
-        return /*#__PURE__*/React.createElement(ReorderableGridCol, {
-          index: index,
-          className: classNames(`${baseClassName}__col`),
-          disabled: disabled
-        }, /*#__PURE__*/cloneElement(child, this.createItemProps(child)));
-      }
-      return null;
-    }));
+      onSortEnd: onReorderEnd,
+      ...props,
+      children: Children.map(children, (child, index) => {
+        if ( /*#__PURE__*/isValidElement(child)) {
+          const {
+            disabled
+          } = child.props;
+          return /*#__PURE__*/_jsx(ReorderableGridCol, {
+            index: index,
+            className: classNames(`${baseClassName}__col`),
+            disabled: disabled,
+            children: /*#__PURE__*/cloneElement(child, this.createItemProps(child))
+          });
+        }
+        return null;
+      })
+    });
   }
   render() {
     const {
@@ -230,17 +237,18 @@ class ItemList extends Component {
       onReorderEnd,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: classNames(this.props.baseClassName, {
         [`${this.props.baseClassName}--hoverable`]: this.isHoverable(),
         [`${this.props.baseClassName}--stretchable`]: stretchable,
         [`${this.props.baseClassName}--selectable`]: selectable,
         [`${this.props.baseClassName}--cards`]: this.hasViewCard()
-      }, className)
-    }, reorderable ? this.renderReorderable({
-      onReorderEnd,
-      ...props
-    }) : this.renderNormal(props));
+      }, className),
+      children: reorderable ? this.renderReorderable({
+        onReorderEnd,
+        ...props
+      }) : this.renderNormal(props)
+    });
   }
 }
 _defineProperty(ItemList, "defaultProps", {