@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/CardList/CardListToolbar.js

@@ -1,6 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
-/* eslint-disable react/prop-types */
 
 import React, { isValidElement } from 'react';
 import PropTypes from 'prop-types';
@@ -14,6 +12,7 @@ import Menu from '../Menu';
 import Checkbox from '../Checkbox';
 import Badge from '../Badge';
 import { VIEW_RESPONSIVE, VIEW_ROW, VIEW_TILE, VIEW_EXTENDED } from './CardList';
+import { jsx as _jsx } from "react/jsx-runtime";
 const renderSelection = (_ref, baseClassName) => {
   let {
     onSelectAll,
@@ -32,73 +31,82 @@ const renderSelection = (_ref, baseClassName) => {
   } else {
     buttonProps.component = 'label';
   }
-  let button = /*#__PURE__*/React.createElement(Button, _extends({}, buttonProps, {
-    className: `${baseClassName}--select-all-btn`
-  }), /*#__PURE__*/React.createElement(Checkbox, _extends({
-    checked: checked,
-    onChange: isChecked => {
-      if (isChecked) {
-        onSelectAll();
-      } else {
-        onSelectNone();
-      }
-    }
-  }, checkboxProps)));
+  let button = /*#__PURE__*/_jsx(Button, {
+    ...buttonProps,
+    className: `${baseClassName}--select-all-btn`,
+    children: /*#__PURE__*/_jsx(Checkbox, {
+      checked: checked,
+      onChange: isChecked => {
+        if (isChecked) {
+          onSelectAll();
+        } else {
+          onSelectNone();
+        }
+      },
+      ...checkboxProps
+    })
+  });
   if (badge) {
     if (typeof badge === 'string') {
       badge = {
         label: badge
       };
     }
-    button = /*#__PURE__*/React.createElement(Badge, badge, button);
+    button = /*#__PURE__*/_jsx(Badge, {
+      ...badge,
+      children: button
+    });
   }
   if (hasDropdown) {
-    button = /*#__PURE__*/React.createElement(Dropdown, {
-      menu: /*#__PURE__*/React.createElement(Menu, null, menuItems)
-    }, button);
+    button = /*#__PURE__*/_jsx(Dropdown, {
+      menu: /*#__PURE__*/_jsx(Menu, {
+        children: menuItems
+      }),
+      children: button
+    });
   }
-  return /*#__PURE__*/React.createElement(ToolbarGroup, {
-    key: "selection",
-    title: /*#__PURE__*/React.createElement(Translate, {
+  return /*#__PURE__*/_jsx(ToolbarGroup, {
+    title: /*#__PURE__*/_jsx(Translate, {
       content: "CardList.toolbarSelect",
       fallback: "Select"
-    })
-  }, button);
+    }),
+    children: button
+  }, "selection");
 };
 const renderView = (onViewChange, currentView) => {
   const viewButtons = [{
     value: VIEW_EXTENDED,
-    title: /*#__PURE__*/React.createElement(Translate, {
+    title: /*#__PURE__*/_jsx(Translate, {
       content: "CardList.viewCards",
       fallback: "Cards"
     }),
     icon: 'site-page'
   }, {
     value: VIEW_TILE,
-    title: /*#__PURE__*/React.createElement(Translate, {
+    title: /*#__PURE__*/_jsx(Translate, {
       content: "CardList.viewTiles",
       fallback: "Tiles"
     }),
     icon: 'four-squares'
   }, {
     value: VIEW_ROW,
-    title: /*#__PURE__*/React.createElement(Translate, {
+    title: /*#__PURE__*/_jsx(Translate, {
       content: "CardList.viewList",
       fallback: "List"
     }),
     icon: 'list'
   }];
-  return /*#__PURE__*/React.createElement(ToolbarGroup, {
-    key: "view",
-    title: /*#__PURE__*/React.createElement(Translate, {
+  return /*#__PURE__*/_jsx(ToolbarGroup, {
+    title: /*#__PURE__*/_jsx(Translate, {
       content: "CardList.toolbarView",
       fallback: "View"
+    }),
+    children: /*#__PURE__*/_jsx(SegmentedControl, {
+      buttons: viewButtons,
+      selected: currentView,
+      onChange: view => onViewChange(view)
     })
-  }, /*#__PURE__*/React.createElement(SegmentedControl, {
-    buttons: viewButtons,
-    selected: currentView,
-    onChange: view => onViewChange(view)
-  }));
+  }, "view");
 };
 const isToolbarExpander = element => /*#__PURE__*/isValidElement(element) && element.type === ToolbarExpander;
 const CardListToolbar = _ref2 => {
@@ -117,18 +125,17 @@ const CardListToolbar = _ref2 => {
   if (onViewChange && currentView !== VIEW_RESPONSIVE) {
     const hasExpander = groups.filter(isToolbarExpander).length > 0;
     if (!hasExpander) {
-      toolbar.push( /*#__PURE__*/React.createElement(ToolbarExpander, {
-        key: "expander"
-      }));
+      toolbar.push( /*#__PURE__*/_jsx(ToolbarExpander, {}, "expander"));
     }
     toolbar.push(renderView(onViewChange, currentView));
   }
   if (toolbar.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Toolbar, {
-    className: baseClassName
-  }, toolbar);
+  return /*#__PURE__*/_jsx(Toolbar, {
+    className: baseClassName,
+    children: toolbar
+  });
 };
 CardListToolbar.propTypes = {
   selection: PropTypes.object,

package/esm/components/Carousel/Carousel.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.
 
@@ -9,6 +8,8 @@ import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const calcWidths = node => {
   const slideWidths = [].map.call(node.childNodes, el => el.clientWidth);
   const totalWidth = slideWidths.reduce((prev, curr) => prev + curr, 0);
@@ -59,7 +60,6 @@ class Carousel extends Component {
       totalWidth
     } = calcWidths(this.genuineRef.current);
     if (this.state.totalWidth !== totalWidth) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         slideWidths,
         totalWidth,
@@ -174,44 +174,52 @@ class Carousel extends Component {
       children,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement(Measure, {
+    return /*#__PURE__*/_jsx(Measure, {
       onResize: this.handleResize,
       bounds: true,
       innerRef: node => {
         this.rootRef.current = node;
+      },
+      children: _ref2 => {
+        let {
+          measureRef
+        } = _ref2;
+        return /*#__PURE__*/_jsxs("section", {
+          ref: measureRef,
+          className: classNames(baseClassName, className),
+          ...props,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClassName}__slides`,
+            style: showControls ? this.listStyle() : null,
+            children: [showControls && children, /*#__PURE__*/_jsx("div", {
+              className: `${baseClassName}__genuine-slides`,
+              ref: this.genuineRef,
+              children: children
+            }), showControls && children]
+          }), showControls && /*#__PURE__*/_jsxs("div", {
+            className: `${baseClassName}__controls`,
+            children: [/*#__PURE__*/_jsx("button", {
+              type: "button",
+              className: classNames(`${baseClassName}__control`, `${baseClassName}__control--previous`),
+              onClick: this.handlePrevClick,
+              children: /*#__PURE__*/_jsx(Icon, {
+                name: "chevron-left",
+                flipHorizontal: this.isRtl,
+                className: `${baseClassName}__control-icon`
+              })
+            }), /*#__PURE__*/_jsx("button", {
+              type: "button",
+              className: classNames(`${baseClassName}__control`, `${baseClassName}__control--next`),
+              onClick: this.handleNextClick,
+              children: /*#__PURE__*/_jsx(Icon, {
+                name: "chevron-right",
+                flipHorizontal: this.isRtl,
+                className: `${baseClassName}__control-icon`
+              })
+            })]
+          })]
+        });
       }
-    }, _ref2 => {
-      let {
-        measureRef
-      } = _ref2;
-      return /*#__PURE__*/React.createElement("section", _extends({
-        ref: measureRef,
-        className: classNames(baseClassName, className)
-      }, props), /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__slides`,
-        style: showControls ? this.listStyle() : null
-      }, showControls && children, /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__genuine-slides`,
-        ref: this.genuineRef
-      }, children), showControls && children), showControls && /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__controls`
-      }, /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: classNames(`${baseClassName}__control`, `${baseClassName}__control--previous`),
-        onClick: this.handlePrevClick
-      }, /*#__PURE__*/React.createElement(Icon, {
-        name: "chevron-left",
-        flipHorizontal: this.isRtl,
-        className: `${baseClassName}__control-icon`
-      })), /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: classNames(`${baseClassName}__control`, `${baseClassName}__control--next`),
-        onClick: this.handleNextClick
-      }, /*#__PURE__*/React.createElement(Icon, {
-        name: "chevron-right",
-        flipHorizontal: this.isRtl,
-        className: `${baseClassName}__control-icon`
-      }))));
     });
   }
 }

package/esm/components/Checkbox/Checkbox.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 Tooltip from '../Tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Checkbox` component is used for turning an option on or off and selecting or deselecting an item.
  * @since 0.0.55
@@ -30,30 +30,36 @@ const Checkbox = _ref => {
       onChange(event.target.checked);
     }
   };
-  let result = /*#__PURE__*/React.createElement("div", _extends({
+  let result = /*#__PURE__*/_jsxs("div", {
     className: classNames(baseClassName, {
       [`${baseClassName}--disabled`]: disabled,
       [`${baseClassName}--indeterminate`]: indeterminate
-    }, className)
-  }, props), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
-    className: `${baseClassName}__label`
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    className: `${baseClassName}__input`,
-    type: "checkbox",
-    onChange: handleChange,
-    checked: !indeterminate && checked,
-    defaultChecked: defaultChecked,
-    disabled: disabled,
-    name: name
-  }, inputProps)), /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__indicator`
-  }), children ? /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__text`
-  }, children) : null), rightAddon ? rightAddon : null));
+    }, className),
+    ...props,
+    children: [/*#__PURE__*/_jsxs("label", {
+      className: `${baseClassName}__label`,
+      children: [/*#__PURE__*/_jsx("input", {
+        className: `${baseClassName}__input`,
+        type: "checkbox",
+        onChange: handleChange,
+        checked: !indeterminate && checked,
+        defaultChecked: defaultChecked,
+        disabled: disabled,
+        name: name,
+        ...inputProps
+      }), /*#__PURE__*/_jsx("span", {
+        className: `${baseClassName}__indicator`
+      }), children ? /*#__PURE__*/_jsx("span", {
+        className: `${baseClassName}__text`,
+        children: children
+      }) : null]
+    }), rightAddon ? rightAddon : null]
+  });
   if (tooltip) {
-    result = /*#__PURE__*/React.createElement(Tooltip, {
-      title: tooltip
-    }, result);
+    result = /*#__PURE__*/_jsx(Tooltip, {
+      title: tooltip,
+      children: result
+    });
   }
   return result;
 };

package/esm/components/ClosingConfirmation/useClosingConfirmation.js

@@ -1,12 +1,13 @@
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Button from '../Button';
 import Dialog from '../Dialog';
 import Paragraph from '../Paragraph';
 import Translate from '../Translate';
 import { safeInvoke } from '../utils';
 import locale from './locale/en-US';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useClosingConfirmation = _ref => {
   let {
     onClose,
@@ -34,29 +35,32 @@ const useClosingConfirmation = _ref => {
   }
   let closingConfirmationDialog = null;
   if (isReady) {
-    closingConfirmationDialog = /*#__PURE__*/React.createElement(Dialog, {
+    closingConfirmationDialog = /*#__PURE__*/_jsx(Dialog, {
       isOpen: isDialogVisible,
       size: "sm",
       onClose: handleCancel,
-      buttons: [/*#__PURE__*/React.createElement(Button, {
-        key: "cancel",
+      buttons: [/*#__PURE__*/_jsx(Button, {
         intent: "primary",
-        onClick: handleCancel
-      }, /*#__PURE__*/React.createElement(Translate, {
-        content: "ClosingConfirmation.cancel",
-        fallback: locale.cancel
-      })), /*#__PURE__*/React.createElement(Button, {
-        key: "confirm",
-        onClick: handleConfirm
-      }, /*#__PURE__*/React.createElement(Translate, {
-        content: "ClosingConfirmation.confirm",
-        fallback: locale.confirm
-      }))],
-      cancelButton: false
-    }, /*#__PURE__*/React.createElement(Paragraph, null, /*#__PURE__*/React.createElement(Translate, {
-      content: "ClosingConfirmation.content",
-      fallback: locale.content
-    })));
+        onClick: handleCancel,
+        children: /*#__PURE__*/_jsx(Translate, {
+          content: "ClosingConfirmation.cancel",
+          fallback: locale.cancel
+        })
+      }, "cancel"), /*#__PURE__*/_jsx(Button, {
+        onClick: handleConfirm,
+        children: /*#__PURE__*/_jsx(Translate, {
+          content: "ClosingConfirmation.confirm",
+          fallback: locale.confirm
+        })
+      }, "confirm")],
+      cancelButton: false,
+      children: /*#__PURE__*/_jsx(Paragraph, {
+        children: /*#__PURE__*/_jsx(Translate, {
+          content: "ClosingConfirmation.content",
+          fallback: locale.content
+        })
+      })
+    });
   }
   return {
     onCloseWithConfirmation,

package/esm/components/CodeEditor/CodeEditor.js

@@ -1,15 +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.
 
-/* eslint-disable react/no-deprecated */
-
 import React, { Component } from 'react';
 import { safeInvoke } from '../utils';
 import { isRtl } from '../../utils';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `CodeEditor` component is used for editing text as code with proper color highlighting according to selected programming language.
  * @since 0.0.61
@@ -188,14 +186,15 @@ class CodeEditor extends Component {
     const {
       content
     } = this.state;
-    return /*#__PURE__*/React.createElement("textarea", _extends({
+    return /*#__PURE__*/_jsx("textarea", {
       style: {
         display: 'none'
       },
       ref: ref => this.textareaNode = ref,
       className: classNames(baseClassName, className),
-      defaultValue: content
-    }, props));
+      defaultValue: content,
+      ...props
+    });
   }
 }
 CodeEditor.propTypes = {

package/esm/components/Columns/Column.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 VerticalContext from '../VerticalContext';
+import { jsx as _jsx } from "react/jsx-runtime";
 const normalize = value => String(Number(value)) === String(value) ? `${value}px` : value;
 
 /**
@@ -25,7 +25,7 @@ const Column = _ref => {
     ...props
   } = _ref;
   const vertical = useContext(VerticalContext);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsx("div", {
     className: classNames(baseClassName, {
       [`${baseClassName}--fill`]: fill && !vertical,
       [`${baseClassName}--ratio-${ratio}`]: ratio && !vertical,
@@ -36,7 +36,9 @@ const Column = _ref => {
       flexBasis: normalize(minWidth),
       maxWidth: normalize(maxWidth),
       ...style
-    }
-  }, props), children);
+    },
+    ...props,
+    children: children
+  });
 };
 export default Column;

package/esm/components/Columns/Columns.js

@@ -1,11 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { useState, useContext } from 'react';
+import { useState, useContext } from 'react';
 import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Columns` component is used for creating of multi-column layouts.
  * @since 2.6.0
@@ -34,24 +34,28 @@ const Columns = _ref => {
     } = _ref2;
     setVertical(bounds.width < verticalProp);
   };
-  const createRoot = measureRef => /*#__PURE__*/React.createElement("div", _extends({
+  const createRoot = measureRef => /*#__PURE__*/_jsx("div", {
     ref: measureRef,
     className: classNames(baseClassName, {
       [`${baseClassName}--vertical`]: vertical,
       [`${baseClassName}--gap-${gap}`]: gap
-    }, className)
-  }, props), /*#__PURE__*/React.createElement(VerticalContext.Provider, {
-    value: vertical
-  }, children));
+    }, className),
+    ...props,
+    children: /*#__PURE__*/_jsx(VerticalContext.Provider, {
+      value: vertical,
+      children: children
+    })
+  });
   if (typeof verticalProp === 'number') {
-    return /*#__PURE__*/React.createElement(Measure, {
+    return /*#__PURE__*/_jsx(Measure, {
       bounds: true,
-      onResize: handleResize
-    }, _ref3 => {
-      let {
-        measureRef
-      } = _ref3;
-      return createRoot(measureRef);
+      onResize: handleResize,
+      children: _ref3 => {
+        let {
+          measureRef
+        } = _ref3;
+        return createRoot(measureRef);
+      }
     });
   }
   return createRoot();

package/esm/components/ComboBox/ComboBox.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { useState, useRef, Children, isValidElement } from 'react';
+import { useState, useRef, Children, isValidElement } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { safeInvoke, EventEmitter } from '../utils';
@@ -9,6 +8,7 @@ import Input from '../Input';
 import Icon from '../Icon';
 import ComboBoxDropdown, { findNextSafeIndex } from '../ComboBoxDropdown';
 import ComboBoxOption from './ComboBoxOption';
+import { jsx as _jsx } from "react/jsx-runtime";
 const collect = function (children) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   Children.forEach(children, child => {
@@ -134,17 +134,18 @@ const ComboBox = _ref => {
         break;
     }
   };
-  const button = /*#__PURE__*/React.createElement("button", {
+  const button = /*#__PURE__*/_jsx("button", {
     className: `${baseClassName}__dropdown-button`,
     onClick: handleToggle,
     onMouseDown: e => e.preventDefault(),
     disabled: disabled,
     type: "button",
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "chevron-down"
-  }));
-  const control = /*#__PURE__*/React.createElement(Input, {
+    tabIndex: -1,
+    children: /*#__PURE__*/_jsx(Icon, {
+      name: "chevron-down"
+    })
+  });
+  const control = /*#__PURE__*/_jsx(Input, {
     className: classNames(`${baseClassName}__input`, {
       [`${baseClassName}__input--disabled`]: disabled
     }),
@@ -163,7 +164,7 @@ const ComboBox = _ref => {
       ref: controlRef
     }
   });
-  return /*#__PURE__*/React.createElement(ComboBoxDropdown, _extends({
+  return /*#__PURE__*/_jsx(ComboBoxDropdown, {
     className: classNames(baseClassName, className, {
       [`${baseClassName}--size-${size}`]: size
     }),
@@ -180,12 +181,12 @@ const ComboBox = _ref => {
     onHighlightedIndexChange: handleHighlightedIndexChange,
     onClose: handleClose,
     value: value,
-    emitter: emitterRef.current
-  }, props));
+    emitter: emitterRef.current,
+    ...props
+  });
 };
 const withDefaultValue = Component => {
   const Wrapper = props => {
-    // eslint-disable-next-line react/prop-types
     const {
       defaultValue,
       onChange
@@ -201,7 +202,10 @@ const withDefaultValue = Component => {
         }
       };
     }
-    return /*#__PURE__*/React.createElement(Component, _extends({}, props, propOverrides));
+    return /*#__PURE__*/_jsx(Component, {
+      ...props,
+      ...propOverrides
+    });
   };
   Wrapper.displayName = `withDefaultValue(${Component.name})`;
   return Wrapper;

package/esm/components/ComboBox/ComboBoxOption.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 /**
  * `ComboBoxOption` is a part of [ComboBox](#!/ComboBox) component.
  * @since 2.6.0
@@ -9,7 +9,7 @@ const ComboBoxOption = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition
   if (false) {
-    return /*#__PURE__*/React.createElement("option", null);
+    return /*#__PURE__*/_jsx("option", {});
   }
   return null;
 };