@plesk/ui-library 3.33.0 → 3.34.1

package/esm/components/Button/Button.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement, forwardRef, isValidElement, useContext, useState } from 'react';
-import PropTypes from 'prop-types';
+import { cloneElement, forwardRef, isValidElement, useContext, useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
@@ -65,32 +64,27 @@ const renderCaret = _ref2 => {
   }
   return caretElement;
 };
-
-/**
- * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
- * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).
- * @since 0.0.37
- */
 const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
-    baseClassName,
+    baseClassName = `${CLS_PREFIX}button`,
     className,
-    component: Tag,
+    component,
     size: propsSize,
     intent,
-    ghost,
+    ghost = false,
     selected: selectedProp,
     onToggle,
     state,
     icon,
     caret,
-    fill,
+    fill = false,
     tooltip,
     children,
     arrow,
-    disabled,
+    disabled = false,
     ...props
   } = _ref3;
+  const Tag = component || 'button';
   const [selectedState, setSelectedState] = useState(false);
   const handleToggle = () => {
     setSelectedState(!selectedState);
@@ -130,7 +124,7 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
   }
   const selected = selectedProp === undefined ? selectedState : selectedProp;
   if (selectedProp !== undefined || onToggle) {
-    componentProps['aria-pressed'] = String(selected);
+    componentProps['aria-pressed'] = `${selected}`;
   }
   const isArrowButton = arrow === 'forward' || arrow === 'backward';
   const hasAriaDisabled = Tag === 'button' && disabled && tooltip;
@@ -182,90 +176,8 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
   return button;
 });
 Button.displayName = 'Button';
-Button.propTypes = {
-  /**
-   * Button size.
-   * @since 2.5.0
-   */
-  size: PropTypes.oneOf(['md', 'lg']),
-  /**
-   * Visual intent color to apply to component.
-   * @since 0.0.42
-   */
-  intent: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'info']),
-  /**
-   * Display button with transparent background.
-   * @since 2.1.0
-   */
-  ghost: PropTypes.bool,
-  /**
-   * Arrow button.
-   * @since 2.6.0
-   */
-  arrow: PropTypes.oneOf(['forward', 'backward']),
-  /**
-   * Selected state of toggle button. Used in controlled component mode.
-   * @since 0.0.68
-   */
-  selected: PropTypes.bool,
-  /**
-   * Toggle button callback. Used in uncontrolled component mode.
-   * @since 0.0.68
-   */
-  onToggle: PropTypes.func,
-  /**
-   * State of the button
-   * @since 0.0.42
-   */
-  state: PropTypes.oneOf(['active', 'loading', 'hovered', 'focused']),
-  /**
-   * Is button disabled?
-   * @since 0.0.42
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Tooltip for component
-   * @since 0.0.42
-   */
-  tooltip: PropTypes.node,
-  /**
-   * Name of icon or [Icon](#!/Icon) component
-   * @since 0.0.42
-   */
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Show caret
-   * @since 0.0.42
-   */
-  caret: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
-  /**
-   * Dynamically expand the button to fill out the whole available width of its parent container.
-   * @since 1.8.0
-   */
-  fill: PropTypes.bool,
-  /**
-   * Content of the button
-   * @since 0.0.37
-   */
-  children: PropTypes.node,
-  /**
-   * Component to render as the root element. Useful when rendering a `Button` as `<a>` or `<Link>`.
-   * @since 0.0.42
-   */
-  component: PropTypes.elementType,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func
-};
+
+// For ToolbarMenu backward compatibility purposes
 Button.defaultProps = {
   size: undefined,
   intent: undefined,
@@ -285,4 +197,11 @@ Button.defaultProps = {
   arrow: undefined,
   onClick: undefined
 };
+
+/**
+ * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
+ * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).
+ *
+ * Since: 0.0.37
+ */
 export default Button;

package/esm/components/ContentLoader/IconsLoader.js

@@ -30,6 +30,7 @@ const useIconCursor = (icons, initialCursor, isSync) => {
   return [icons[cursor], targetRef];
 };
 const IconsLoader = _ref => {
+  var _icons;
   let {
     baseClassName = `${CLS_PREFIX}icons-loader`,
     className,
@@ -39,7 +40,7 @@ const IconsLoader = _ref => {
     ...props
   } = _ref;
   const syncRef = useRef('icon1');
-  if (!icons?.length) {
+  if (!((_icons = icons) !== null && _icons !== void 0 && _icons.length)) {
     icons = DEFAULT_ICONS;
   } else if (icons.length === 1) {
     icons = [icons[0], icons[0]];

package/esm/components/Dialog/Dialog.js

@@ -1,7 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { isValidElement, cloneElement, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { isValidElement, cloneElement, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Overlay from '../Overlay';
@@ -68,6 +67,7 @@ const Dialog = _ref => {
       return /*#__PURE__*/_jsx("div", {
         className: classPrefix,
         children: /*#__PURE__*/_jsx("img", {
+          alt: "",
           className: `${classPrefix}-inner`,
           src: image
         })
@@ -76,6 +76,7 @@ const Dialog = _ref => {
     return /*#__PURE__*/_jsx("div", {
       className: classPrefix,
       children: /*#__PURE__*/_jsx("img", {
+        alt: "",
         className: `${classPrefix}-inner`,
         ...image
       })
@@ -165,7 +166,7 @@ const Dialog = _ref => {
           children: [/*#__PURE__*/_jsxs("div", {
             className: `${baseClassName}__header-content`,
             children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
-              level: "2",
+              level: 2,
               className: `${baseClassName}__title`,
               children: title
             }) : /*#__PURE__*/_jsx("div", {
@@ -197,116 +198,6 @@ const Dialog = _ref => {
     }), closingConfirmationDialog]
   });
 };
-Dialog.propTypes = {
-  /**
-   * Toggles visibility.
-   * @since 0.0.68
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * Banner. Renders in front of content as wide as dialog.
-   * @since 0.0.68
-   */
-  banner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Block with an image, placed at the side of the component
-   * @since 3.25.0
-   */
-  sideBanner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Additional properties for the sideBanner
-   * @since 3.25.0
-   */
-  sideBannerContainer: PropTypes.shape({
-    /**
-     * Values for css background property
-     */
-    background: PropTypes.string,
-    /**
-     * One of: center, flex-start, flex-end
-     */
-    align: PropTypes.oneOf(['center', 'flex-start', 'flex-end'])
-  }),
-  /**
-   * Image. Renders into content.
-   * @since 0.0.68
-   */
-  image: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-  /**
-   * Title
-   * @since 0.0.68
-   */
-  title: PropTypes.node,
-  /**
-   * The subtitle of the `Dialog`.
-   * @since 4.0.0
-   */
-  subtitle: PropTypes.node,
-  /**
-   * Title of "cancel" button
-   * @since 0.0.68
-   * @deprecated Use `cancelButton` instead.
-   */
-  cancelTitle: PropTypes.node,
-  /**
-   * Cancel button visibility or custom configuration. It accepts all props of the `Button` component.
-   * @since 3.13.0
-   */
-  cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-  /**
-   * Buttons except "cancel" button
-   * @since 0.0.68
-   */
-  buttons: PropTypes.node,
-  /**
-   * Actions which will be shown in Dialog header
-   * @since 1.2.0
-   */
-  actions: PropTypes.node,
-  /**
-   * Wraps children into [Form](#!/Form) if not empty.
-   * @since 0.0.68
-   */
-  form: PropTypes.oneOfType([PropTypes.object, PropTypes.element]),
-  /**
-   * Dialog width
-   * @since 0.0.68
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  /**
-   * If the value is false, the dialog cannot be closed and the Close button is hidden.
-   * @since 1.2.0
-   */
-  closable: PropTypes.bool,
-  /**
-   * Disable close dialog button
-   * @since 4.0.0
-   */
-  canClose: PropTypes.bool,
-  /**
-   * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
-   * @since 0.0.68
-   */
-  onClose: PropTypes.func,
-  /**
-   * Whether show or not a confirmation dialog on close.
-   * @since 3.21.0
-   */
-  closingConfirmation: PropTypes.bool,
-  /**
-   * Content of the `DialogWindow`.
-   * @since 0.0.68
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
 Dialog.defaultProps = {
   isOpen: false,
   banner: undefined,

package/esm/components/Dropdown/Dropdown.js

@@ -1,9 +1,8 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { isRtl } from '../../utils';
-import React, { cloneElement, isValidElement, useState, useEffect, useRef } from 'react';
+import { cloneElement, isValidElement, useState, useEffect, useRef } from 'react';
 import { wrapFunction } from '../utils';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX, Z_INDEX_DROPDOWN, Z_INDEX_OVERLAY } from '../../constants';
 import Button from '../Button';
@@ -13,6 +12,8 @@ import Layer from '../Layer';
 import { MenuItem, MenuDivider } from '../Menu';
 import Translate from '../Translate';
 import localeFallback from './locale/en-US';
+
+// TODO: move to Popover
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,7 +22,7 @@ const createTarget = (node, _ref) => {
     onToggle,
     targetRef
   } = _ref;
-  if (false === ( /*#__PURE__*/isValidElement(node) && node.type !== Translate)) {
+  if (!( /*#__PURE__*/isValidElement(node) && node.type !== Translate)) {
     node = /*#__PURE__*/_jsx(Button, {
       caret: true,
       children: node
@@ -202,43 +203,6 @@ const Dropdown = _ref3 => {
     })
   });
 };
-Dropdown.propTypes = {
-  /**
-   * Dropdown [menu](#!/Menu).
-   * @since 0.0.57
-   */
-  menu: PropTypes.element.isRequired,
-  /**
-   * Menu placement.
-   * @since 0.0.60
-   */
-  menuPlacement: PropTypes.string,
-  /**
-   * Content of the `Dropdown`.
-   * @since 0.0.57
-   */
-  children: PropTypes.node,
-  /**
-   * Custom localization messages.
-   * @since 3.6.0
-   */
-  locale: PropTypes.shape({
-    close: PropTypes.node
-  }),
-  /**
-   * Display menu as overlay.
-   * @ignore
-   */
-  overlay: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
 Dropdown.defaultProps = {
   menuPlacement: 'bottom-start',
   children: undefined,

package/esm/components/Form/Form.js

@@ -399,7 +399,8 @@ const RefForwardingForm = /*#__PURE__*/forwardRef((props, ref) => {
   const innerRef = useRef(null);
   useImperativeHandle(ref, () => ({
     submit() {
-      innerRef.current?.dispatchEvent(new Event('submit', {
+      var _innerRef$current;
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.dispatchEvent(new Event('submit', {
         cancelable: true,
         bubbles: true
       }));

package/esm/components/FormFieldPassword/PasswordMeter.js

@@ -40,19 +40,19 @@ const PasswordMeter = _ref => {
     canCloseOnOutsideClick: false,
     canCloseOnEscapePress: false,
     ...props,
-    children: [result?.strength ? /*#__PURE__*/_jsx(Translate, {
+    children: [result !== null && result !== void 0 && result.strength ? /*#__PURE__*/_jsx(Translate, {
       component: "div",
       content: "FormFieldPassword.passwordStrength",
       fallback: locale.passwordStrength,
       params: {
         strength: /*#__PURE__*/_jsx("b", {
           children: /*#__PURE__*/_jsx(Translate, {
-            content: `FormFieldPassword.strength${result?.strength}`,
-            fallback: locale[`strength${result?.strength}`]
+            content: `FormFieldPassword.strength${result === null || result === void 0 ? void 0 : result.strength}`,
+            fallback: locale[`strength${result === null || result === void 0 ? void 0 : result.strength}`]
           })
         })
       }
-    }) : null, result?.suggestions.length ? /*#__PURE__*/_jsxs(_Fragment, {
+    }) : null, result !== null && result !== void 0 && result.suggestions.length ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Translate, {
         content: "FormFieldPassword.improvePassword",
         fallback: locale.improvePassword

package/esm/components/Overlay/Overlay.js

@@ -102,8 +102,8 @@ const OverlayCore = _ref => {
     children: /*#__PURE__*/_jsxs("div", {
       className: classNames(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, isOpen && `${baseClassName}--open`, className),
       style: {
-        '--overlay-side-banner-background': sideBannerContainer?.background,
-        '--overlay-side-banner-align': sideBannerContainer?.align,
+        '--overlay-side-banner-background': sideBannerContainer === null || sideBannerContainer === void 0 ? void 0 : sideBannerContainer.background,
+        '--overlay-side-banner-align': sideBannerContainer === null || sideBannerContainer === void 0 ? void 0 : sideBannerContainer.align,
         ...style
       },
       ...props,
@@ -133,10 +133,11 @@ const Overlay = _ref2 => {
   const [isExist, setIsExist] = useState(false);
   const prevFocusElementRef = useRef(null);
   const handleClose = useCallback(() => {
+    var _prevFocusElementRef$;
     if (!isOpenRef.current) return;
     isOpenRef.current = false;
     if (--overlaysCount === 0) enableDocumentScroll();
-    prevFocusElementRef.current?.focus();
+    (_prevFocusElementRef$ = prevFocusElementRef.current) === null || _prevFocusElementRef$ === void 0 ? void 0 : _prevFocusElementRef$.focus();
   }, []);
   useEffect(() => {
     if (isOpen) {

package/esm/components/Popover/Popover.js

@@ -259,7 +259,9 @@ class Popover extends Component {
         className: `${baseClassName}__content`,
         children: /*#__PURE__*/_jsx("div", {
           className: `${baseClassName}__content-inner`,
-          children: children
+          children: typeof children === 'function' ? children({
+            onClose: this.handleClose
+          }) : children
         })
       })]
     });

package/esm/components/Section/Section.js

@@ -139,7 +139,8 @@ class Section extends Component {
       value: title,
       onChange: onTitleChange,
       onClick: e => {
-        e.target.closest(`.${baseClassName}__header`).querySelector(`.${baseClassName}__control-button`)?.click();
+        var _e$target$closest$que;
+        (_e$target$closest$que = e.target.closest(`.${baseClassName}__header`).querySelector(`.${baseClassName}__control-button`)) === null || _e$target$closest$que === void 0 ? void 0 : _e$target$closest$que.click();
       }
     });
   }

package/esm/components/Skeleton/SkeletonText.js

@@ -26,7 +26,7 @@ const SkeletonText = _ref => {
     // eslint-disable-next-line react/no-array-index-key
     , {
       ...lineProps,
-      className: classNames(`${baseClassName}__line`, lineProps?.className)
+      className: classNames(`${baseClassName}__line`, lineProps === null || lineProps === void 0 ? void 0 : lineProps.className)
     }, key))
   });
 };

package/esm/components/index.js

@@ -6,7 +6,7 @@ export { default as AutoClosable } from './AutoClosable';
 export { default as AuxiliaryActions } from './AuxiliaryActions';
 export { default as Badge } from './Badge';
 export { default as Breadcrumbs } from './Breadcrumbs';
-export { default as Button } from './Button';
+export { default as Button, ButtonProps } from './Button';
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as Card } from './Card';
 export * from './Card';
@@ -42,7 +42,7 @@ export { default as Grid } from './Grid';
 export { default as GridCol } from './GridCol';
 export { default as Heading } from './Heading';
 export { default as Hint } from './Hint';
-export { default as Icon } from './Icon';
+export { default as Icon, IconProps, IconName, IconSize } from './Icon';
 export { default as Input } from './Input';
 export { default as InputFile } from './InputFile';
 export { default as InputNumber } from './InputNumber';

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.33.0";
+const version = "3.34.1";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/esm/utils/types/PolymorphicComponent.js

@@ -0,0 +1 @@
+export {};

package/esm/utils/types/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.33.0",
+  "version": "3.34.1",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -42,7 +42,7 @@
     "/index.js"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.21.5",
+    "@babel/runtime": "^7.22.5",
     "@plesk/react-movable": "^2.7.1",
     "classnames": "^2.3.2",
     "codemirror": "5.58.2",
@@ -58,14 +58,14 @@
     "use-focus-visible": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.8",
+    "@babel/core": "^7.22.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.5",
-    "@babel/types": "^7.21.5",
+    "@babel/plugin-transform-runtime": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@babel/types": "^7.22.5",
     "@csstools/postcss-logical-float-and-clear": "^1.0.1",
     "@plesk/eslint-config": "^3.0.0",
     "@plesk/stylelint-config": "^2.0.0",
@@ -77,14 +77,14 @@
     "@types/jest": "^24.9.1",
     "@types/jest-image-snapshot": "^6.1.0",
     "@types/marked": "^4.3.1",
-    "@types/node": "^16.18.36",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.1",
+    "@types/node": "^16.18.38",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
     "@types/react-measure": "2.0.8",
     "@types/react-transition-group": "^4.4.6",
     "@types/svg4everybody": "2.1.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^8.3.0",
@@ -92,37 +92,38 @@
     "babel-plugin-transform-require-ignore": "^0.1.1",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^5.2.1",
-    "css-loader": "^6.7.4",
-    "css-minimizer-webpack-plugin": "^5.0.0",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.41.0",
+    "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-prettier": "^4.2.1",
     "fs-extra": "^7.0.1",
-    "html-webpack-plugin": "^5.5.1",
+    "html-webpack-plugin": "^5.5.3",
     "inquirer": "^3.3.0",
     "jest": "^24.9.0",
     "jest-dev-server": "^9.0.0",
     "jest-image-snapshot": "^6.1.0",
     "less": "^4.1.3",
-    "less-loader": "^11.1.0",
+    "less-loader": "^11.1.3",
     "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "postcss-less": "^6.0.0",
-    "postcss-loader": "^7.3.0",
+    "postcss-loader": "^7.3.3",
     "postcss-logical": "^6.2.0",
     "prettier": "^2.8.8",
     "puppeteer-core": "20.4.0",
     "react": "^17.0.2",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-styleguidist": "^12.0.1",
     "react-test-renderer": "^16.14.0",
     "rimraf": "^5.0.1",
     "rtlcss": "^4.1.0",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.6.2",
+    "stylelint": "^15.9.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
     "stylelint-no-unsupported-browser-features": "^6.1.0",
     "stylelint-prettier": "^3.0.0",
@@ -130,8 +131,8 @@
     "svg-mixer": "^2.3.14",
     "terser-webpack-plugin": "^5.3.9",
     "typescript": "4.5.5",
-    "webpack": "^5.83.1",
-    "webpack-cli": "^5.1.1"
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {
     "react": "^17.0.2",