@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/Skeleton/Skeleton.stories.js

@@ -1,10 +1,14 @@
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import Skeleton from './Skeleton';
-export const Basic = args => /*#__PURE__*/React.createElement(Skeleton, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(Skeleton, {
+  ...args
+});
 Basic.args = {};
-export const CustomSize = args => /*#__PURE__*/React.createElement(Basic, args);
+export const CustomSize = args => /*#__PURE__*/_jsx(Basic, {
+  ...args
+});
 CustomSize.args = {
   width: 200,
   height: 100

package/esm/components/Skeleton/SkeletonTabs.js

@@ -1,10 +1,9 @@
-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 SkeletonText from './SkeletonText';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Skeleton for tabs component
  * @since `3.28.0
@@ -16,13 +15,15 @@ const SkeletonTabs = _ref => {
     baseClassName = `${CLS_PREFIX}skeleton-tabs`,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(baseClassName, className)
-  }, props), /*#__PURE__*/React.createElement(SkeletonText, {
-    lineProps: {
-      maxWidth: 100
-    },
-    lines: count
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: /*#__PURE__*/_jsx(SkeletonText, {
+      lineProps: {
+        maxWidth: 100
+      },
+      lines: count
+    })
+  });
 };
 export default SkeletonTabs;

package/esm/components/Skeleton/SkeletonTabs.stories.js

@@ -1,5 +1,7 @@
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import SkeletonTabs from './SkeletonTabs';
-export const Basic = args => /*#__PURE__*/React.createElement(SkeletonTabs, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(SkeletonTabs, {
+  ...args
+});

package/esm/components/Skeleton/SkeletonText.js

@@ -1,10 +1,9 @@
-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 Skeleton from './Skeleton';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Skeleton for text-containing components. Is can be used inside Paragraph, as title, or single text
  * @since 3.28.0
@@ -18,16 +17,17 @@ const SkeletonText = _ref => {
     lineProps = {},
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement(Tag, _extends({
-    className: classNames(baseClassName, className)
-  }, props), Array.from({
-    length: lines
-  }).map((_, key) => /*#__PURE__*/React.createElement(Skeleton
-  // eslint-disable-next-line react/no-array-index-key
-  , _extends({
-    key: key
-  }, lineProps, {
-    className: classNames(`${baseClassName}__line`, lineProps?.className)
-  }))));
+  return /*#__PURE__*/_jsx(Tag, {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: Array.from({
+      length: lines
+    }).map((_, key) => /*#__PURE__*/_jsx(Skeleton
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      ...lineProps,
+      className: classNames(`${baseClassName}__line`, lineProps?.className)
+    }, key))
+  });
 };
 export default SkeletonText;

package/esm/components/Skeleton/SkeletonText.stories.js

@@ -1,14 +1,20 @@
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import SkeletonText from './SkeletonText';
-export const Basic = args => /*#__PURE__*/React.createElement(SkeletonText, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(SkeletonText, {
+  ...args
+});
 Basic.args = {};
-export const LinesCount = args => /*#__PURE__*/React.createElement(Basic, args);
+export const LinesCount = args => /*#__PURE__*/_jsx(Basic, {
+  ...args
+});
 LinesCount.args = {
   lines: 5
 };
-export const Custom = args => /*#__PURE__*/React.createElement(Basic, args);
+export const Custom = args => /*#__PURE__*/_jsx(Basic, {
+  ...args
+});
 Custom.args = {
   lines: 5,
   lineProps: {

package/esm/components/Spinner/Spinner.js

@@ -1,9 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2019. 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";
 /**
  * `Spinner` component.
  */
@@ -13,19 +12,20 @@ const Spinner = _ref => {
     className,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    className: classNames(baseClassName, className)
-  }, props, {
+  return /*#__PURE__*/_jsx("svg", {
+    className: classNames(baseClassName, className),
+    ...props,
     viewBox: "0 0 48 48",
-    xmlns: "http://www.w3.org/2000/svg"
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: `${baseClassName}__path`,
-    fill: "none",
-    strokeWidth: "6",
-    strokeLinecap: "round",
-    cx: "24",
-    cy: "24",
-    r: "21"
-  }));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("circle", {
+      className: `${baseClassName}__path`,
+      fill: "none",
+      strokeWidth: "6",
+      strokeLinecap: "round",
+      cx: "24",
+      cy: "24",
+      r: "21"
+    })
+  });
 };
 export default Spinner;

package/esm/components/SplitButton/SplitButton.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import React, { useRef } from 'react';
@@ -9,6 +8,8 @@ import Button from '../Button';
 import ButtonGroup from '../ButtonGroup';
 import Dropdown from '../Dropdown';
 import { wrapFunction, createFocusManager } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const focusStrategy = {
   getNext(container, element) {
     const elements = container.children;
@@ -67,21 +68,25 @@ const SplitButton = _ref => {
         break;
     }
   });
-  return /*#__PURE__*/React.createElement(ButtonGroup, _extends({
+  return /*#__PURE__*/_jsxs(ButtonGroup, {
     className: classNames(baseClassName, className),
     innerRef: rootRef,
-    onKeyDown: handleKeyDown
-  }, props), /*#__PURE__*/React.createElement(Button, {
-    tabIndex: 0,
-    onClick: onClick
-  }, children), /*#__PURE__*/React.createElement(Dropdown, {
-    className: `${baseClassName}__dropdown-trigger`,
-    menu: menu,
-    menuPlacement: "bottom-end"
-  }, /*#__PURE__*/React.createElement(Button, {
-    caret: true,
-    tabIndex: -1
-  })));
+    onKeyDown: handleKeyDown,
+    ...props,
+    children: [/*#__PURE__*/_jsx(Button, {
+      tabIndex: 0,
+      onClick: onClick,
+      children: children
+    }), /*#__PURE__*/_jsx(Dropdown, {
+      className: `${baseClassName}__dropdown-trigger`,
+      menu: menu,
+      menuPlacement: "bottom-end",
+      children: /*#__PURE__*/_jsx(Button, {
+        caret: true,
+        tabIndex: -1
+      })
+    })]
+  });
 };
 SplitButton.propTypes = {
   /**

package/esm/components/Spot/Spot.js

@@ -1,12 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { scrollIntoView } from '../utils';
 import OnDarkContext from '../OnDarkContext';
 import Layer from '../Layer';
 import SpotPulsar from './SpotPulsar';
 import SpotPopup from './SpotPopup';
+import { jsx as _jsx } from "react/jsx-runtime";
 const isEqual = (a, b) => a.top === b.top && a.left === b.left && a.right === b.right && a.bottom === b.bottom && a.width === b.width && a.height === b.height;
 
 /**
@@ -67,18 +67,24 @@ const Spot = _ref => {
   if (!rect) {
     return null;
   }
-  const pulsar = /*#__PURE__*/React.createElement(SpotPulsar, _extends({
+  const pulsar = /*#__PURE__*/_jsx(SpotPulsar, {
     rect: rect,
-    placement: placement
-  }, props, {
+    placement: placement,
+    ...props,
     ref: pulsarRef
-  }));
-  return /*#__PURE__*/React.createElement(OnDarkContext.Provider, {
-    value: true
-  }, /*#__PURE__*/React.createElement(Layer, null, popup ? /*#__PURE__*/React.createElement(SpotPopup, _extends({
-    pulsar: pulsar,
-    pulsarRef: pulsarRef,
-    meta: meta
-  }, popup)) : /*#__PURE__*/React.createElement("div", null, pulsar)));
+  });
+  return /*#__PURE__*/_jsx(OnDarkContext.Provider, {
+    value: true,
+    children: /*#__PURE__*/_jsx(Layer, {
+      children: popup ? /*#__PURE__*/_jsx(SpotPopup, {
+        pulsar: pulsar,
+        pulsarRef: pulsarRef,
+        meta: meta,
+        ...popup
+      }) : /*#__PURE__*/_jsx("div", {
+        children: pulsar
+      })
+    })
+  });
 };
 export default Spot;

package/esm/components/Spot/SpotPopup.js

@@ -1,8 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { CLS_PREFIX } from '../../constants';
 import Popover from '../Popover';
 import Text from '../Text';
@@ -11,7 +10,8 @@ import Focuser from '../Overlay/Focuser';
 import { safeInvoke } from '../utils';
 
 // TODO: Use SpotSpotProps['popup'] instead of copypaste
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const SpotPopup = _ref => {
   let {
     baseClassName = `${CLS_PREFIX}spot-popup`,
@@ -42,12 +42,12 @@ const SpotPopup = _ref => {
     }
   }, []);
   if (typeof image === 'string') {
-    image = /*#__PURE__*/React.createElement("img", {
+    image = /*#__PURE__*/_jsx("img", {
       src: image,
       alt: ""
     });
   }
-  return /*#__PURE__*/React.createElement(Popover, _extends({
+  return /*#__PURE__*/_jsxs(Popover, {
     className: classNames(baseClassName, className, {
       [`${baseClassName}--${size}`]: size
     }),
@@ -58,28 +58,34 @@ const SpotPopup = _ref => {
     visible: true,
     onClose: () => safeInvoke(onClose),
     canCloseOnOutsideClick: false,
-    autoFocus: false
-  }, props), image && /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${baseClassName}__media`, {
-      [`${baseClassName}__media--compact`]: !title
-    })
-  }, image), children, buttons && /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__footer`,
-    ref: footerRef
-  }, meta && meta.total > 1 ? /*#__PURE__*/React.createElement(Text, {
-    intent: "muted",
-    fontSize: "sm"
-  }, /*#__PURE__*/React.createElement(Translate, {
-    namespace: "SpotPopup",
-    content: "total",
-    params: {
-      current: meta.current + 1,
-      total: meta.total
-    },
-    translators: locale,
-    fallback: "%%current%% of %%total%%"
-  })) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__actions`
-  }, buttons)));
+    autoFocus: false,
+    ...props,
+    children: [image && /*#__PURE__*/_jsx("div", {
+      className: classNames(`${baseClassName}__media`, {
+        [`${baseClassName}__media--compact`]: !title
+      }),
+      children: image
+    }), children, buttons && /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__footer`,
+      ref: footerRef,
+      children: [meta && meta.total > 1 ? /*#__PURE__*/_jsx(Text, {
+        intent: "muted",
+        fontSize: "sm",
+        children: /*#__PURE__*/_jsx(Translate, {
+          namespace: "SpotPopup",
+          content: "total",
+          params: {
+            current: meta.current + 1,
+            total: meta.total
+          },
+          translators: locale,
+          fallback: "%%current%% of %%total%%"
+        })
+      }) : /*#__PURE__*/_jsx("span", {}), /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__actions`,
+        children: buttons
+      })]
+    })]
+  });
 };
 export default SpotPopup;

package/esm/components/Spot/SpotPulsar.js

@@ -1,9 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const OFFSET = 23;
 const calculate = (rect, placement) => {
   const placementTop = rect.height / 2;
@@ -35,18 +36,19 @@ const SpotPulsar = /*#__PURE__*/forwardRef(function SpotPulsar(_ref, ref) {
     ...props
   } = _ref;
   const position = calculate(rect, placement);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(baseClassName, className),
     style: {
       transform: `translate(${position.left}px, ${position.top}px)`
-    }
-  }, props, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__ring`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName}__ring`
-  }));
+    },
+    ...props,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__ring`
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__ring`
+    })]
+  });
 });
 SpotPulsar.displayName = 'SpotPulsar';
 export default SpotPulsar;

package/esm/components/Squeezer/Squeezer.js

@@ -1,9 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { Component, createRef } from 'react';
+import { Component, createRef } from 'react';
 import Measure from 'react-measure';
 import { safeInvoke } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 class Squeezer extends Component {
   constructor() {
     super(...arguments);
@@ -23,7 +24,6 @@ class Squeezer extends Component {
   }
   measure() {
     let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    // eslint-disable-next-line react/prop-types
     const {
       compact,
       uncompact
@@ -61,13 +61,12 @@ class Squeezer extends Component {
     }
   }
   render() {
-    // eslint-disable-next-line react/prop-types
     const {
       children,
       innerRef,
       innerMeasure
     } = this.props;
-    return /*#__PURE__*/React.createElement(Measure, {
+    return /*#__PURE__*/_jsx(Measure, {
       onResize: this.handleResize,
       innerRef: el => {
         if (el) {
@@ -77,14 +76,15 @@ class Squeezer extends Component {
             this.measure(true);
           });
         }
+      },
+      children: _ref => {
+        let {
+          measureRef
+        } = _ref;
+        return children({
+          ref: measureRef
+        });
       }
-    }, _ref => {
-      let {
-        measureRef
-      } = _ref;
-      return children({
-        ref: measureRef
-      });
     });
   }
 }

package/esm/components/Status/Status.js

@@ -1,13 +1,13 @@
-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 { intentIconMap } from '../intentIconMap';
 import Action from '../Action';
 import Icon from '../Icon';
 import OnDarkContext from '../OnDarkContext';
+import { jsx as _jsx } from "react/jsx-runtime";
 const toIcon = (icon, intent) => {
   if (icon === false) {
     return undefined;
@@ -40,7 +40,7 @@ const Status = _ref => {
   if (intent === 'muted') {
     intent = 'inactive';
   }
-  return /*#__PURE__*/React.createElement(Action, _extends({
+  return /*#__PURE__*/_jsx(Action, {
     component: "span",
     icon: compact ? undefined : toIcon(icon, intent),
     className: classNames(baseClassName, {
@@ -54,7 +54,9 @@ const Status = _ref => {
         [`${baseClassName}--flip`]: flip
       }, outerProps.className)
     },
-    progress: progress
-  }, props), children);
+    progress: progress,
+    ...props,
+    children: children
+  });
 };
 export default Status;

package/esm/components/Status/Status.stories.js

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

package/esm/components/StatusMessage/StatusMessage.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 from 'react';
 import Alert from '../Alert';
 import Icon from '../Icon';
 import { CLS_PREFIX } from '../../constants';
 import { intentIconMap } from '../intentIconMap';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `StatusMessage` is used for notifying users about events happened (or going to happen) in the system.
  * For showing results of performed operations [Toaster](#!/Toaster) should be used.
@@ -20,12 +20,14 @@ const StatusMessage = _ref => {
     children,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement(Alert, _extends({
+  return /*#__PURE__*/_jsxs(Alert, {
     className: classNames(baseClassName, [`${baseClassName}--${intent}`], className),
-    intent: intent
-  }, props), /*#__PURE__*/React.createElement(Icon, {
-    name: intentIconMap[intent],
-    className: `${baseClassName}__icon`
-  }), children);
+    intent: intent,
+    ...props,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      name: intentIconMap[intent],
+      className: `${baseClassName}__icon`
+    }), children]
+  });
 };
 export default StatusMessage;

package/esm/components/Subnav/Subnav.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import React, { cloneElement, Children, isValidElement, useRef, useMemo } from 'react';
@@ -6,6 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { safeInvoke, createFocusManager } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `Subnav` component is used when you need a second level navigation under [Tabs](#!/Tabs) on the screen.
  * @since 0.0.42
@@ -73,12 +73,13 @@ const Subnav = _ref => {
     }
     return child;
   });
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(baseClassName, className)
-  }, props, {
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(baseClassName, className),
+    ...props,
     onKeyDown: handleKeyDown,
-    ref: rootRef
-  }), items);
+    ref: rootRef,
+    children: items
+  });
 };
 Subnav.propTypes = {
   /**

package/esm/components/Switch/Switch.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,8 @@ import PropTypes from 'prop-types';
 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";
 /**
  * `Switch` component is used for changing the state of an object or system preferences.
  * It provides immediate results that is why it should not be used in Form.
@@ -39,26 +40,30 @@ class Switch extends Component {
       loading,
       ...props
     } = this.props;
-    let result = /*#__PURE__*/React.createElement("label", _extends({
+    let result = /*#__PURE__*/_jsxs("label", {
       className: classNames(baseClassName, {
         [`${baseClassName}--${intent}`]: intent,
         [`${baseClassName}--loading`]: loading
-      }, className)
-    }, props), children ? /*#__PURE__*/React.createElement("span", {
-      className: `${baseClassName}__label`
-    }, children) : null, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      onChange: this.handleChange,
-      checked: checked,
-      defaultChecked: checked === null || checked === undefined ? defaultChecked : undefined,
-      disabled: disabled || loading
-    }), /*#__PURE__*/React.createElement("span", {
-      className: `${baseClassName}__indicator`
-    }));
+      }, className),
+      ...props,
+      children: [children ? /*#__PURE__*/_jsx("span", {
+        className: `${baseClassName}__label`,
+        children: children
+      }) : null, /*#__PURE__*/_jsx("input", {
+        type: "checkbox",
+        onChange: this.handleChange,
+        checked: checked,
+        defaultChecked: checked === null || checked === undefined ? defaultChecked : undefined,
+        disabled: disabled || loading
+      }), /*#__PURE__*/_jsx("span", {
+        className: `${baseClassName}__indicator`
+      })]
+    });
     if (tooltip) {
-      result = /*#__PURE__*/React.createElement(Tooltip, {
-        title: tooltip
-      }, result);
+      result = /*#__PURE__*/_jsx(Tooltip, {
+        title: tooltip,
+        children: result
+      });
     }
     return result;
   }