@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/ItemList/ItemList.stories.js

@@ -1,71 +1,72 @@
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement } from 'react';
+import { cloneElement } from 'react';
 import ItemList from './ItemList';
 import Item from '../Item';
 import Icon from '../Icon';
-export const Basic = args => /*#__PURE__*/React.createElement(ItemList, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(ItemList, {
+  ...args
+});
 Basic.args = {
   minColumnWidth: 220,
   gap: 'md',
-  children: [/*#__PURE__*/React.createElement(Item, {
-    key: "1",
+  children: [/*#__PURE__*/_jsx(Item, {
     value: "1",
     title: "Title 1",
     description: "Description 1",
     "data-test": "item1",
-    icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/_jsx(Icon, {
       name: "star-circle-filled",
       intent: "info"
     }),
-    onClick: () => {}
-  }, 'Content 1'), /*#__PURE__*/React.createElement(Item, {
-    key: "2",
+    onClick: () => {},
+    children: 'Content 1'
+  }, "1"), /*#__PURE__*/_jsx(Item, {
     value: "2",
     title: "Title 2",
     description: "Description 2",
     "data-test": "item2",
-    icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/_jsx(Icon, {
       name: "star-circle-filled",
       intent: "success"
     }),
-    onClick: () => {}
-  }, 'Content 2'), /*#__PURE__*/React.createElement(Item, {
-    key: "3",
+    onClick: () => {},
+    children: 'Content 2'
+  }, "2"), /*#__PURE__*/_jsx(Item, {
     value: "3",
     title: "Title 3",
     description: "Description 3",
     "data-test": "item3",
-    icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/_jsx(Icon, {
       name: "star-circle-filled",
       intent: "warning"
     }),
     onClick: () => {},
-    hoverable: true
-  }, 'Content 3'), /*#__PURE__*/React.createElement(Item, {
-    key: "4",
+    hoverable: true,
+    children: 'Content 3'
+  }, "3"), /*#__PURE__*/_jsx(Item, {
     value: "4",
     title: "Title 4",
     description: "Description 4",
     "data-test": "item4",
-    icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/_jsx(Icon, {
       name: "star-circle-filled",
       intent: "danger"
     }),
     onClick: () => {},
     disabled: true,
-    hoverable: true
-  }, 'Content 4')]
+    hoverable: true,
+    children: 'Content 4'
+  }, "4")]
 };
 export const Cards = Basic.bind(null);
 Cards.args = {
   ...Basic.args,
-  children: Basic.args.children.map(child => {
-    return child ? /*#__PURE__*/cloneElement(child, {
-      view: 'card',
-      footer: `Footer ${child.props.value}`
-    }) : null;
-  })
+  children: Basic.args.children.map(child => child ? /*#__PURE__*/cloneElement(child, {
+    view: 'card',
+    footer: `Footer ${child.props.value}`
+  }) : null)
 };
 export const Reorderables = Basic.bind(null);
 Reorderables.args = {

package/esm/components/Label/Label.js

@@ -1,9 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 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 DEFAULT_TAG = 'span';
+
 /**
  * `Label` component is used for showing multiple characteristics or attributes of an object.
  * @since 0.0.42
@@ -11,13 +14,44 @@ import { CLS_PREFIX } from '../../constants';
 const Label = _ref => {
   let {
     baseClassName = `${CLS_PREFIX}label`,
-    className,
-    intent,
     children,
+    className,
+    component = DEFAULT_TAG,
+    icon,
+    intent = 'inactive',
+    view,
+    size,
+    caps,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNames(baseClassName, intent && `${baseClassName}--${intent}`, className)
-  }, props), children);
+  icon = Icon.create(icon, {
+    className: `${baseClassName}__icon`,
+    size: size === 'lg' ? '16' : '12'
+  });
+  if (caps === undefined && (!size || size === 'sm')) {
+    caps = true;
+  }
+  let Tag = component;
+  if (Tag === DEFAULT_TAG && props.onClick) {
+    Tag = 'button';
+  }
+  const componentProps = {};
+  if (Tag === 'button') {
+    componentProps.type = 'button';
+  }
+  return /*#__PURE__*/_jsxs(Tag, {
+    className: classNames(baseClassName, {
+      [`${baseClassName}--${view}`]: view,
+      [`${baseClassName}--${size}`]: size,
+      [`${baseClassName}--${intent}`]: intent,
+      [`${baseClassName}--caps`]: caps
+    }, className),
+    ...componentProps,
+    ...props,
+    children: [icon, children && /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__content`,
+      children: children
+    })]
+  });
 };
 export default Label;

package/esm/components/Layer/Layer.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
 
-import React, { isValidElement, cloneElement, createContext, useContext } from 'react';
+import { isValidElement, cloneElement, createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 const LevelContext = /*#__PURE__*/createContext(0);
 export const PortalContext = /*#__PURE__*/createContext(undefined);
 /**
@@ -32,11 +32,14 @@ const Layer = _ref => {
     }
     return children;
   };
-  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(LevelContext.Provider, {
-    value: parentLevel + level
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(baseClassName, className),
-    ref: innerRef
-  }, props), renderChildren())), container);
+  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(LevelContext.Provider, {
+    value: parentLevel + level,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames(baseClassName, className),
+      ref: innerRef,
+      ...props,
+      children: renderChildren()
+    })
+  }), container);
 };
 export default Layer;

package/esm/components/Layout/Layout.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.
 
@@ -8,6 +7,8 @@ import Measure from 'react-measure';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const propTypes = {
   /**
    * Type of the `Layout`
@@ -245,7 +246,7 @@ export default class Layout extends Component {
       return null;
     }
     const isSidebarClosed = this.getSidebarClosed();
-    return /*#__PURE__*/React.createElement(CSSTransition, {
+    return /*#__PURE__*/_jsx(CSSTransition, {
       in: !isSidebarClosed,
       timeout: 300,
       classNames: {
@@ -256,42 +257,51 @@ export default class Layout extends Component {
         exitActive: `${baseClassName}__header--active-exit`,
         exitDone: `${baseClassName}__header--off`
       },
-      nodeRef: this.headerRef
-    }, /*#__PURE__*/React.createElement("header", {
-      className: `${baseClassName}__header`,
-      ref: this.headerRef,
-      style: {
-        height: `${headerHeight}px`
-      }
-    }, /*#__PURE__*/React.createElement(Measure, {
-      onResize: this.handleResize,
-      bounds: true
-    }, _ref5 => {
-      let {
-        measureRef
-      } = _ref5;
-      return /*#__PURE__*/React.createElement("div", {
-        ref: measureRef,
-        className: `${baseClassName}__header-inner`
-      }, headerAddon ? /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__header-addon`
-      }, headerAddon) : null, /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__header-content`
-      }, sidebar && /*#__PURE__*/React.createElement("button", {
-        className: classNames(`${baseClassName}__responsive-sidebar-toggler`, {
-          [`${baseClassName}__responsive-sidebar-toggler--open`]: !isSidebarClosed
-        }),
-        type: "button",
-        onClick: this.handleToggle,
-        ref: this.responsiveSidebarTogglerRef
-      }, /*#__PURE__*/React.createElement("span", {
-        className: `${baseClassName}__responsive-sidebar-toggler-inner`
-      }, /*#__PURE__*/React.createElement("span", {
-        className: `${baseClassName}__responsive-sidebar-toggler-icon`
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: `${baseClassName}__header-content-inner`
-      }, header)));
-    })));
+      nodeRef: this.headerRef,
+      children: /*#__PURE__*/_jsx("header", {
+        className: `${baseClassName}__header`,
+        ref: this.headerRef,
+        style: {
+          height: `${headerHeight}px`
+        },
+        children: /*#__PURE__*/_jsx(Measure, {
+          onResize: this.handleResize,
+          bounds: true,
+          children: _ref5 => {
+            let {
+              measureRef
+            } = _ref5;
+            return /*#__PURE__*/_jsxs("div", {
+              ref: measureRef,
+              className: `${baseClassName}__header-inner`,
+              children: [headerAddon ? /*#__PURE__*/_jsx("div", {
+                className: `${baseClassName}__header-addon`,
+                children: headerAddon
+              }) : null, /*#__PURE__*/_jsxs("div", {
+                className: `${baseClassName}__header-content`,
+                children: [sidebar && /*#__PURE__*/_jsx("button", {
+                  className: classNames(`${baseClassName}__responsive-sidebar-toggler`, {
+                    [`${baseClassName}__responsive-sidebar-toggler--open`]: !isSidebarClosed
+                  }),
+                  type: "button",
+                  onClick: this.handleToggle,
+                  ref: this.responsiveSidebarTogglerRef,
+                  children: /*#__PURE__*/_jsx("span", {
+                    className: `${baseClassName}__responsive-sidebar-toggler-inner`,
+                    children: /*#__PURE__*/_jsx("span", {
+                      className: `${baseClassName}__responsive-sidebar-toggler-icon`
+                    })
+                  })
+                }), /*#__PURE__*/_jsx("div", {
+                  className: `${baseClassName}__header-content-inner`,
+                  children: header
+                })]
+              })]
+            });
+          }
+        })
+      })
+    });
   }
   renderContentAddon(_ref6) {
     let {
@@ -303,11 +313,13 @@ export default class Layout extends Component {
     if (!contentAddon) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content-addon`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content-addon-inner`
-    }, contentAddon));
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__content-addon`,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__content-addon-inner`,
+        children: contentAddon
+      })
+    });
   }
   renderContentHeader(_ref7) {
     let {
@@ -319,11 +331,13 @@ export default class Layout extends Component {
     if (!contentHeader) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content-header`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content-header-inner`
-    }, contentHeader));
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClassName}__content-header`,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__content-header-inner`,
+        children: contentHeader
+      })
+    });
   }
   renderSidebar(_ref8) {
     let {
@@ -338,7 +352,7 @@ export default class Layout extends Component {
       return null;
     }
     const isSidebarClosed = this.getSidebarClosed();
-    return /*#__PURE__*/React.createElement(CSSTransition, {
+    return /*#__PURE__*/_jsx(CSSTransition, {
       in: !isSidebarClosed,
       timeout: 300,
       classNames: {
@@ -348,26 +362,32 @@ export default class Layout extends Component {
         exit: `${baseClassName}__sidebar--exit`,
         exitActive: `${baseClassName}__sidebar--active-exit`,
         exitDone: `${baseClassName}__sidebar--off`
-      }
-    }, /*#__PURE__*/React.createElement("aside", {
-      className: classNames(`${baseClassName}__sidebar`, {
-        [`${baseClassName}__sidebar--on`]: !isSidebarClosed,
-        [`${baseClassName}__sidebar--off`]: isSidebarClosed
-      }),
-      ref: this.sidebarRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__sidebar-inner`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__sidebar-content`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__sidebar-content-inner`
-    }, sidebar)), sidebarCollapsible && /*#__PURE__*/React.createElement("button", {
-      className: `${baseClassName}__sidebar-toggler`,
-      onClick: this.handleToggle,
-      type: "button"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${baseClassName}__sidebar-toggler-inner`
-    })))));
+      },
+      children: /*#__PURE__*/_jsx("aside", {
+        className: classNames(`${baseClassName}__sidebar`, {
+          [`${baseClassName}__sidebar--on`]: !isSidebarClosed,
+          [`${baseClassName}__sidebar--off`]: isSidebarClosed
+        }),
+        ref: this.sidebarRef,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClassName}__sidebar-inner`,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__sidebar-content`,
+            children: /*#__PURE__*/_jsx("div", {
+              className: `${baseClassName}__sidebar-content-inner`,
+              children: sidebar
+            })
+          }), sidebarCollapsible && /*#__PURE__*/_jsx("button", {
+            className: `${baseClassName}__sidebar-toggler`,
+            onClick: this.handleToggle,
+            type: "button",
+            children: /*#__PURE__*/_jsx("span", {
+              className: `${baseClassName}__sidebar-toggler-inner`
+            })
+          })]
+        })
+      })
+    });
   }
   renderMainContent(_ref9) {
     let {
@@ -376,11 +396,13 @@ export default class Layout extends Component {
     const {
       baseClassName
     } = this.props;
-    return /*#__PURE__*/React.createElement("main", {
-      className: `${baseClassName}__main`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__main-inner`
-    }, children));
+    return /*#__PURE__*/_jsx("main", {
+      className: `${baseClassName}__main`,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__main-inner`,
+        children: children
+      })
+    });
   }
   renderFooter(_ref10) {
     let {
@@ -392,11 +414,13 @@ export default class Layout extends Component {
     if (!footer) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("footer", {
-      className: `${baseClassName}__footer`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__footer-inner`
-    }, footer));
+    return /*#__PURE__*/_jsx("footer", {
+      className: `${baseClassName}__footer`,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__footer-inner`,
+        children: footer
+      })
+    });
   }
   render() {
     const {
@@ -427,7 +451,7 @@ export default class Layout extends Component {
       }
     }
     const isSidebarClosed = this.getSidebarClosed();
-    return /*#__PURE__*/React.createElement("div", _extends({
+    return /*#__PURE__*/_jsx("div", {
       className: classNames(baseClassName, {
         [`${baseClassName}--${type}`]: type,
         [`${baseClassName}--${width}`]: width,
@@ -438,27 +462,32 @@ export default class Layout extends Component {
         [`${baseClassName}--sidebar-type-${sidebarType}`]: sidebarType && sidebar,
         [`${baseClassName}--sidebar-collapsed`]: sidebarType === 'collapsed' && isSidebarClosed,
         [`${baseClassName}--sidebar-folded`]: sidebarType === 'folded' && isSidebarClosed
-      }, className)
-    }, props), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__inner`
-    }, this.renderHeader({
-      header
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__container`
-    }, this.renderSidebar({
-      sidebar,
-      headerFixed: headerPositionFixed
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__content`
-    }, this.renderContentAddon({
-      contentAddon
-    }), this.renderContentHeader({
-      contentHeader
-    }), this.renderMainContent({
-      children
-    }), this.renderFooter({
-      footer
-    })))));
+      }, className),
+      ...props,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__inner`,
+        children: [this.renderHeader({
+          header
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClassName}__container`,
+          children: [this.renderSidebar({
+            sidebar,
+            headerFixed: headerPositionFixed
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClassName}__content`,
+            children: [this.renderContentAddon({
+              contentAddon
+            }), this.renderContentHeader({
+              contentHeader
+            }), this.renderMainContent({
+              children
+            }), this.renderFooter({
+              footer
+            })]
+          })]
+        })]
+      })
+    });
   }
 }
 Layout.propTypes = propTypes;

package/esm/components/Link/Link.js

@@ -1,15 +1,14 @@
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { isRtl } from '../../utils';
 import { CLS_PREFIX } from '../../constants';
 import OnDarkContext from '../OnDarkContext';
 import { wrapFunction } from '../utils';
 import Icon from '../Icon';
-
-// eslint-disable-next-line space-infix-ops
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * FIXME: With the following code all @ts-ignore comments can be removed, but react-docgen cannot parse it.
  * const Link = <P extends any>({ ... }: LinkProps<P>) => {
@@ -64,11 +63,14 @@ const Link = _ref => {
   return (
     /*#__PURE__*/
     // @ts-ignore
-    React.createElement(Component, props, children, external && /*#__PURE__*/React.createElement(Icon, {
-      flipHorizontal: isRtl(),
-      name: "arrow-diagonal-out",
-      className: `${baseClassName}__external-icon`
-    }))
+    _jsxs(Component, {
+      ...props,
+      children: [children, external && /*#__PURE__*/_jsx(Icon, {
+        flipHorizontal: isRtl(),
+        name: "arrow-diagonal-out",
+        className: `${baseClassName}__external-icon`
+      })]
+    })
   );
 };
 export default Link;