@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/FormFieldRadioButtons/FormFieldRadioButtons.js

@@ -1,6 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-/* eslint-disable react/prefer-stateless-function */
 
 import React, { cloneElement, Component } from 'react';
 import PropTypes from 'prop-types';
@@ -9,6 +7,8 @@ import { CLS_PREFIX } from '../../constants';
 import FormField from '../FormField';
 import Hint from '../Hint';
 import Radio from '../Radio';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `FormFieldRadioButtons` is used for making a choice among a set of mutually exclusive, related options. Only one option can be chosen.
  * @since 0.2.0
@@ -23,56 +23,61 @@ class FormFieldRadioButtons extends Component {
       multi,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement(FormField, _extends({
-      className: classNames(baseClassName, className)
-    }, props), _ref => {
-      let {
-        getId,
-        getName,
-        getValue,
-        setValue,
-        isDisabled
-      } = _ref;
-      return options.map((_ref2, index) => {
+    return /*#__PURE__*/_jsx(FormField, {
+      className: classNames(baseClassName, className),
+      ...props,
+      children: _ref => {
         let {
-          value,
-          label,
-          description,
-          disabled,
-          indentFields = []
-        } = _ref2;
-        return /*#__PURE__*/React.createElement("div", {
-          className: `${baseClassName}__radio`,
-          key: value
-        }, /*#__PURE__*/React.createElement(Radio, {
-          name: getName(),
-          checked: getValue() === value,
-          onChange: isChecked => {
-            if (isChecked) {
-              setValue(value);
-            }
-          },
-          disabled: isDisabled() || disabled,
-          inputProps: {
-            id: getId() ? `${getId()}-${value}` : null,
-            name: getName(),
+          getId,
+          getName,
+          getValue,
+          setValue,
+          isDisabled
+        } = _ref;
+        return options.map((_ref2, index) => {
+          let {
             value,
-            autoFocus: index === 0 && autoFocus ? true : undefined
-          }
-        }, label || value), description || indentFields ? /*#__PURE__*/React.createElement("div", {
-          className: `${baseClassName}__content`
-        }, description && /*#__PURE__*/React.createElement(Hint, {
-          component: "div",
-          className: `${FormField.defaultProps.baseClassName}__description`
-        }, description), indentFields.map(field => {
-          if (isDisabled() || disabled || getValue() !== value) {
-            return /*#__PURE__*/cloneElement(field, {
-              disabled: true
-            });
-          }
-          return field;
-        })) : null);
-      });
+            label,
+            description,
+            disabled,
+            indentFields = []
+          } = _ref2;
+          return /*#__PURE__*/_jsxs("div", {
+            className: `${baseClassName}__radio`,
+            children: [/*#__PURE__*/_jsx(Radio, {
+              name: getName(),
+              checked: getValue() === value,
+              onChange: isChecked => {
+                if (isChecked) {
+                  setValue(value);
+                }
+              },
+              disabled: isDisabled() || disabled,
+              inputProps: {
+                id: getId() ? `${getId()}-${value}` : null,
+                name: getName(),
+                value,
+                autoFocus: index === 0 && autoFocus ? true : undefined
+              },
+              children: label || value
+            }), description || indentFields ? /*#__PURE__*/_jsxs("div", {
+              className: `${baseClassName}__content`,
+              children: [description && /*#__PURE__*/_jsx(Hint, {
+                component: "div",
+                className: `${FormField.defaultProps.baseClassName}__description`,
+                children: description
+              }), indentFields.map(field => {
+                if (isDisabled() || disabled || getValue() !== value) {
+                  return /*#__PURE__*/cloneElement(field, {
+                    disabled: true
+                  });
+                }
+                return field;
+              })]
+            }) : null]
+          }, value);
+        });
+      }
     });
   }
 }

package/esm/components/FormFieldSelect/FormFieldSelect.js

@@ -1,11 +1,10 @@
-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 FormField from '../FormField';
 import Select from '../Select';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `FormFieldSelect` componentis is used for making a choice among a set of related options.
  * See description of `Select` for [the full list of properties](#!/Select) of this component.
@@ -23,28 +22,31 @@ const FormFieldSelect = _ref => {
     placeholder,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement(FormField, _extends({
-    className: classNames(baseClassName, className)
-  }, props), _ref2 => {
-    let {
-      getId,
-      getName,
-      setValue,
-      getValue,
-      isDisabled
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(Select, {
-      size: size,
-      id: getId(),
-      name: getName(),
-      value: getValue(multiple ? [] : undefined),
-      onChange: setValue,
-      disabled: isDisabled(),
-      searchable: searchable,
-      clearable: clearable,
-      multiple: multiple,
-      placeholder: placeholder
-    }, children);
+  return /*#__PURE__*/_jsx(FormField, {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: _ref2 => {
+      let {
+        getId,
+        getName,
+        setValue,
+        getValue,
+        isDisabled
+      } = _ref2;
+      return /*#__PURE__*/_jsx(Select, {
+        size: size,
+        id: getId(),
+        name: getName(),
+        value: getValue(multiple ? [] : undefined),
+        onChange: setValue,
+        disabled: isDisabled(),
+        searchable: searchable,
+        clearable: clearable,
+        multiple: multiple,
+        placeholder: placeholder,
+        children: children
+      });
+    }
   });
 };
 export default FormFieldSelect;

package/esm/components/FormFieldText/FormFieldText.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 /* eslint-disable react/prefer-stateless-function */
 
@@ -9,6 +8,7 @@ import { CLS_PREFIX } from '../../constants';
 import FormField from '../FormField';
 import Input from '../Input';
 import TextArea from '../TextArea';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `FormFieldText` component is used for entering of user data in text format.
  *
@@ -30,42 +30,46 @@ class FormFieldText extends Component {
       inputProps,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement(FormField, _extends({
+    return /*#__PURE__*/_jsx(FormField, {
       className: classNames(baseClassName, {
         [`${baseClassName}--multiline`]: multiline
-      }, className)
-    }, props), _ref => {
-      let {
-        getId,
-        getName,
-        getValue,
-        setValue,
-        isDisabled
-      } = _ref;
-      return multiline ? /*#__PURE__*/React.createElement(TextArea, _extends({
-        id: getId(),
-        name: getName(),
-        value: getValue(''),
-        onChange: e => setValue(e.target.value),
-        disabled: isDisabled(),
-        size: size,
-        rows: rows,
-        placeholder: placeholder,
-        autoFocus: autoFocus,
-        autoComplete: autoComplete,
-        autoheight: autoheight
-      }, inputProps)) : /*#__PURE__*/React.createElement(Input, _extends({
-        id: getId(),
-        name: getName(),
-        className: `${baseClassName}__input`,
-        value: getValue(''),
-        onChange: e => setValue(e.target.value),
-        disabled: isDisabled(),
-        size: size,
-        placeholder: placeholder,
-        autoFocus: autoFocus,
-        autoComplete: autoComplete
-      }, inputProps));
+      }, className),
+      ...props,
+      children: _ref => {
+        let {
+          getId,
+          getName,
+          getValue,
+          setValue,
+          isDisabled
+        } = _ref;
+        return multiline ? /*#__PURE__*/_jsx(TextArea, {
+          id: getId(),
+          name: getName(),
+          value: getValue(''),
+          onChange: e => setValue(e.target.value),
+          disabled: isDisabled(),
+          size: size,
+          rows: rows,
+          placeholder: placeholder,
+          autoFocus: autoFocus,
+          autoComplete: autoComplete,
+          autoheight: autoheight,
+          ...inputProps
+        }) : /*#__PURE__*/_jsx(Input, {
+          id: getId(),
+          name: getName(),
+          className: `${baseClassName}__input`,
+          value: getValue(''),
+          onChange: e => setValue(e.target.value),
+          disabled: isDisabled(),
+          size: size,
+          placeholder: placeholder,
+          autoFocus: autoFocus,
+          autoComplete: autoComplete,
+          ...inputProps
+        });
+      }
     });
   }
 }

package/esm/components/Grid/Grid.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
@@ -7,6 +6,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Grid` component is used to layout and align content based on 12-column system.
  * @since 0.0.48
@@ -84,20 +84,23 @@ class Grid extends Component {
       [`${baseClassName}--gap-lg`]: gap === 'lg',
       [`${baseClassName}--gap-xl`]: gap === 'xl'
     }, className);
-    const result = /*#__PURE__*/React.createElement("div", _extends({
-      className: computedClassName
-    }, props), minColumnWidth > 0 && !this.state.xs ? null : children);
+    const result = /*#__PURE__*/_jsx("div", {
+      className: computedClassName,
+      ...props,
+      children: minColumnWidth > 0 && !this.state.xs ? null : children
+    });
     if (minColumnWidth > 0) {
-      return /*#__PURE__*/React.createElement(Measure, {
+      return /*#__PURE__*/_jsx(Measure, {
         bounds: true,
-        onResize: this.handleResize
-      }, _ref2 => {
-        let {
-          measureRef
-        } = _ref2;
-        return /*#__PURE__*/cloneElement(result, {
-          ref: measureRef
-        });
+        onResize: this.handleResize,
+        children: _ref2 => {
+          let {
+            measureRef
+          } = _ref2;
+          return /*#__PURE__*/cloneElement(result, {
+            ref: measureRef
+          });
+        }
       });
     }
     return result;

package/esm/components/GridCol/GridCol.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
@@ -10,7 +9,7 @@ import { CLS_PREFIX } from '../../constants';
  * `GridCol` component is a part of [Grid](#!/Grid) component.
  * @since 0.0.48
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 const GridCol = _ref => {
   let {
     baseClassName,
@@ -30,9 +29,11 @@ const GridCol = _ref => {
     [`${baseClassName}--lg-${lg}`]: lg,
     [`${baseClassName}--xl-${xl}`]: xl
   }, className);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: computedClassName
-  }, props), children);
+  return /*#__PURE__*/_jsx("div", {
+    className: computedClassName,
+    ...props,
+    children: children
+  });
 };
 GridCol.propTypes = {
   /**

package/esm/components/Heading/Heading.js

@@ -1,10 +1,10 @@
-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 Icon, { ICON_SIZE_12, ICON_SIZE_16, ICON_SIZE_24, ICON_SIZE_32 } from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Heading` is used as a text title (or a subtitle) to define the hierarchy and the structure of the content.
  * @since 2.3.0
@@ -32,16 +32,19 @@ const Heading = _ref => {
   if (level === 6) {
     iconSize = ICON_SIZE_12;
   }
-  return /*#__PURE__*/React.createElement(Tag, _extends({
+  return /*#__PURE__*/_jsxs(Tag, {
     className: classNames(baseClassName, {
       [`${baseClassName}--h${level}`]: level,
       [`${baseClassName}--icon`]: icon
-    }, className)
-  }, props), Icon.create(icon, {
-    className: `${baseClassName}__icon`,
-    size: iconSize
-  }), icon ? /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__text`
-  }, children) : children);
+    }, className),
+    ...props,
+    children: [Icon.create(icon, {
+      className: `${baseClassName}__icon`,
+      size: iconSize
+    }), icon ? /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__text`,
+      children: children
+    }) : children]
+  });
 };
 export default Heading;

package/esm/components/Hint/Hint.js

@@ -1,9 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2022. 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";
 /**
  * `Hint` component is used for auxiliary text like advice, suggestion or other useful practical information.
  * @since 0.0.35
@@ -16,8 +15,10 @@ const Hint = _ref => {
     component: Tag = 'span',
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement(Tag, _extends({
-    className: classNames(baseClassName, className)
-  }, props), children);
+  return /*#__PURE__*/_jsx(Tag, {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: children
+  });
 };
 export default Hint;

package/esm/components/Icon/Icon.js

@@ -1,7 +1,6 @@
-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 oldIconNames from './oldIconNames';
@@ -9,6 +8,7 @@ import symbols from './images/symbols.svg';
 import { NAMES_12 } from './constants';
 import { create } from './utils';
 import OnDarkContext from '../OnDarkContext';
+import { jsx as _jsx } from "react/jsx-runtime";
 export * from './constants';
 export const ICON_SIZE_12 = '12';
 export const ICON_SIZE_16 = '16';
@@ -59,7 +59,7 @@ const Icon = _ref => {
   } = _ref;
   const newSize = size && oldIconSizes[size] || size;
   const newName = name ? oldIconNames[name] || name : null;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return /*#__PURE__*/_jsx("span", {
     className: classNames(baseClassName, {
       [`${baseClassName}--size-${newSize}`]: newSize,
       [`${baseClassName}--intent ${baseClassName}--${intent}`]: intent,
@@ -68,15 +68,18 @@ const Icon = _ref => {
       [`${baseClassName}--flip-horizontal`]: flipHorizontal,
       [`${baseClassName}--flip-vertical`]: flipVertical,
       [`${baseClassName}--on-dark`]: useContext(OnDarkContext)
-    }, className)
-  }, props), newName ? /*#__PURE__*/React.createElement("svg", {
-    focusable: "false"
-  }, /*#__PURE__*/React.createElement("use", {
-    href: getHref(newName, newSize)
-  })) : src && /*#__PURE__*/React.createElement("img", {
-    src: src,
-    alt: alt
-  }) || children);
+    }, className),
+    ...props,
+    children: newName ? /*#__PURE__*/_jsx("svg", {
+      focusable: "false",
+      children: /*#__PURE__*/_jsx("use", {
+        href: getHref(newName, newSize)
+      })
+    }) : src && /*#__PURE__*/_jsx("img", {
+      src: src,
+      alt: alt
+    }) || children
+  });
 };
 Icon.create = create;
 export default Icon;

package/esm/components/Icon/Icon.stories.js

@@ -1,20 +1,23 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import Icon from './Icon';
 import { NAMES_12 } from './constants';
-export const Basic = args => /*#__PURE__*/React.createElement(Icon, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(Icon, {
+  ...args
+});
 Basic.args = {};
-export const All = () => /*#__PURE__*/React.createElement("div", {
+export const All = () => /*#__PURE__*/_jsx("div", {
   style: {
     display: 'inline-block'
   },
-  id: "icons"
-}, NAMES_12.map(name => /*#__PURE__*/React.createElement("div", {
-  key: name,
-  style: {
-    margin: 16
-  }
-}, /*#__PURE__*/React.createElement(Icon, {
-  name: name
-}))));
+  id: "icons",
+  children: NAMES_12.map(name => /*#__PURE__*/_jsx("div", {
+    style: {
+      margin: 16
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      name: name
+    })
+  }, name))
+});

package/esm/components/Icon/utils.js

@@ -1,9 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
 import React, { isValidElement, cloneElement } from 'react';
 import Icon from './Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const create = function (icon) {
   let defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   if (!icon) {
@@ -32,11 +32,14 @@ export const create = function (icon) {
       className,
       ...props
     } = icon;
-    return /*#__PURE__*/React.createElement(Icon, _extends({}, defaults, {
-      className: defaults.className || className ? classNames(defaults.className, className) : null
-    }, props));
+    return /*#__PURE__*/_jsx(Icon, {
+      ...defaults,
+      className: defaults.className || className ? classNames(defaults.className, className) : null,
+      ...props
+    });
   }
-  return /*#__PURE__*/React.createElement(Icon, _extends({}, defaults, {
+  return /*#__PURE__*/_jsx(Icon, {
+    ...defaults,
     name: icon
-  }));
+  });
 };