@plesk/ui-library 3.32.0 → 3.34.0

package/esm/components/LocaleProvider/index.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export { default } from './LocaleProvider';
 export * from './LocaleProvider';

package/esm/components/Markdown/Markdown.js

@@ -1,9 +1,7 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-danger */
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { marked } from 'marked';
 import { CLS_PREFIX } from '../../constants';
@@ -14,7 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const Markdown = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${CLS_PREFIX}markdown`,
     className,
     compact = false,
     children,
@@ -30,29 +28,4 @@ const Markdown = _ref => {
     ...props
   });
 };
-Markdown.propTypes = {
-  /**
-   * Content of the Markdown
-   * @since 0.0.42
-   */
-  children: PropTypes.string.isRequired,
-  /**
-   * Compact mode
-   * @since 0.0.42
-   */
-  compact: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-Markdown.defaultProps = {
-  compact: false,
-  className: null,
-  baseClassName: `${CLS_PREFIX}markdown`
-};
 export default Markdown;

package/esm/components/Markdown/Markdown.stories.js

@@ -0,0 +1,43 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import Markdown from './Markdown';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(Markdown, {
+  ...args
+});
+Basic.args = {
+  children: `
+# Heading
+
+## Sub-heading
+
+### Another deeper heading
+
+Paragraphs are separated
+by a blank line.
+
+Two spaces at the end of a line leave a
+line break.
+
+Text attributes _italic_, *italic*, __bold__, **bold**, \`monospace\`.
+
+Horizontal rule:
+
+---
+
+Bullet list:
+
+    * apples
+    * oranges
+    * pears
+
+Numbered list:
+
+    1. apples
+    2. oranges
+    3. pears
+
+A [link](http://example.com).
+
+<b>Sanitize</b>`
+};

package/esm/components/Markdown/index.js

@@ -1,3 +1,3 @@
-// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export { default } from './Markdown';

package/esm/components/Media/Media.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React, { isValidElement, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';

package/esm/components/Media/MediaSection.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/esm/components/Media/index.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export { default } from './Media';
 export { default as MediaSection } from './MediaSection';

package/esm/components/Menu/Menu.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React, { Children, cloneElement, isValidElement, forwardRef, useRef, useMemo } from 'react';
 import { wrapFunction, safeInvoke, createFocusManager } from '../utils';

package/esm/components/Menu/Menu.stories.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { cloneElement } from 'react';
 import Menu, { MenuItem, MenuDivider, MenuHeader } from '.';

package/esm/components/Menu/MenuBaseItem.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/esm/components/Menu/MenuDivider.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/esm/components/Menu/MenuHeader.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/esm/components/Menu/MenuItem.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';

package/esm/components/Menu/MenuSelectableItem.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/esm/components/Menu/index.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export { default } from './Menu';
 export { default as MenuItem } from './MenuItem';

package/esm/components/OnDarkContext/OnDarkContext.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { createContext } from 'react';
 const OnDarkContext = /*#__PURE__*/createContext(false);

package/esm/components/OnDarkContext/index.js

@@ -1,3 +1,3 @@
-// Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export { default } from './OnDarkContext';

package/esm/components/Overlay/Focuser.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export const isFocusable = element => {
   if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {

package/esm/components/Overlay/Overlay.js

@@ -1,14 +1,10 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import { disableDocumentScroll, enableDocumentScroll } from '../../utils';
-import React, { Component, createRef, isValidElement } from 'react';
+import { isValidElement, useRef, useState, useLayoutEffect, useCallback, useEffect } from 'react';
 import { safeInvoke } from '../utils';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX, Z_INDEX_OVERLAY } from '../../constants';
-import { CSSTransition } from 'react-transition-group';
-import Backdrop from './Backdrop';
 import Layer from '../Layer';
 import FocusTrap from '../FocusTrap';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,297 +13,153 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  * `Overlay` component.
  */
 
-const overlays = [];
-
-/**
- * @since 0.0.65
- */
-export default class Overlay extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      isOpened: false,
-      isExist: false
-    });
-    _defineProperty(this, "prevFocusElement", null);
-    _defineProperty(this, "contentRef", /*#__PURE__*/createRef());
-    _defineProperty(this, "backdropRef", /*#__PURE__*/createRef());
-    _defineProperty(this, "handleBackdropClick", () => {
-      const {
-        onClose,
-        canCloseOnBackdropClick
-      } = this.props;
-      if (canCloseOnBackdropClick) {
-        safeInvoke(onClose);
-      } else {
-        this.focus();
-      }
-    });
-    _defineProperty(this, "handleContentKeyUp", e => {
-      const {
-        onClose
-      } = this.props;
-      if (!e.isDefaultPrevented() && e.key === 'Escape') {
-        safeInvoke(onClose);
-        e.preventDefault();
-      }
-    });
-  }
-  componentDidMount() {
-    if (this.props.isOpen) {
-      this.overlayWillOpen();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (!this.props.isOpen && prevProps.isOpen) {
-      this.overlayWillClose();
-    } else if (this.props.isOpen && !prevProps.isOpen) {
-      this.overlayWillOpen();
-    }
-  }
-  componentWillUnmount() {
-    if (this.props.isOpen) {
-      this.overlayWillClose();
+let overlaysCount = 0;
+const OverlayCore = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}overlay`,
+    className,
+    children = null,
+    isOpen: externalIsOpen,
+    placement = 'center',
+    size = 'md',
+    sideBanner,
+    sideBannerContainer,
+    onClose,
+    canCloseOnBackdropClick = true,
+    canCloseOnEscapePress = true,
+    style = {},
+    onAnimationExited,
+    ...props
+  } = _ref;
+  const animationTimeoutRef = useRef();
+  const contentRef = useRef(null);
+  const prevIsOpen = useRef(externalIsOpen);
+  if (prevIsOpen.current !== externalIsOpen) {
+    prevIsOpen.current = externalIsOpen;
+    if (externalIsOpen) {
+      clearTimeout(animationTimeoutRef.current);
+    } else {
+      animationTimeoutRef.current = window.setTimeout(onAnimationExited, 300);
     }
   }
-  overlayWillOpen() {
-    disableDocumentScroll();
-    overlays.push(this);
-    this.setState({
-      isExist: true
-    }, () => {
-      this.prevFocusElement = document.activeElement;
-      this.setState({
-        isOpened: true
-      }, () => {
-        this.focus();
-      });
-    });
-  }
-  overlayWillClose() {
-    overlays.pop();
-    if (overlays.length === 0) {
-      enableDocumentScroll();
-    }
-    this.setState({
-      isOpened: false
-    }, () => {
-      if (this.prevFocusElement) {
-        this.prevFocusElement.focus();
-        this.prevFocusElement = null;
-      }
-    });
-  }
-  focus() {
-    if (this.contentRef.current === null || document.activeElement === null || !this.props.isOpen) {
+  useEffect(() => () => clearTimeout(animationTimeoutRef.current), []);
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => setIsOpen(externalIsOpen), [externalIsOpen]);
+  const focus = () => {
+    if (contentRef.current === null || document.activeElement === null) {
       return;
     }
-    const isFocusOutside = !this.contentRef.current.contains(document.activeElement);
+    const isFocusOutside = !contentRef.current.contains(document.activeElement);
     if (isFocusOutside) {
-      const autofocusElement = this.contentRef.current.querySelector('[autofocus]');
-      if (autofocusElement) {
+      const autofocusElement = contentRef.current.querySelector('[autofocus]');
+      if (autofocusElement instanceof HTMLElement) {
         autofocusElement.focus();
       } else {
-        this.contentRef.current.focus();
+        contentRef.current.focus();
       }
     }
-  }
-  renderContent(_ref) {
-    let {
-      baseClassName,
-      children,
-      canCloseOnEscapePress,
-      sideBanner
-    } = _ref;
-    return /*#__PURE__*/_jsx(CSSTransition, {
-      in: this.state.isOpened,
-      classNames: `${baseClassName}-`,
-      timeout: 300,
-      onExited: () => {
-        this.setState({
-          isExist: false
-        });
-      },
-      nodeRef: this.contentRef,
-      children: /*#__PURE__*/_jsxs(FocusTrap, {
-        className: `${baseClassName}__content`,
-        onKeyUp: canCloseOnEscapePress ? this.handleContentKeyUp : null,
-        ref: this.contentRef,
-        role: "dialog",
-        "aria-modal": "true",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: `${baseClassName}__body`,
-          children: children
-        }), this.renderImage({
-          baseClassName,
-          image: sideBanner
-        })]
-      })
-    });
-  }
-  renderBackdrop(_ref2) {
-    let {
-      baseClassName
-    } = _ref2;
-    return /*#__PURE__*/_jsx(CSSTransition, {
-      in: this.state.isOpened,
-      classNames: `${baseClassName}-`,
-      timeout: 300,
-      nodeRef: this.backdropRef,
-      children: /*#__PURE__*/_jsx(Backdrop, {
-        onClick: () => this.handleBackdropClick(),
-        innerRef: this.backdropRef
-      })
-    });
-  }
-  renderImage(_ref3) {
-    let {
-      baseClassName,
-      image
-    } = _ref3;
-    const classPrefix = `${baseClassName}__side`;
-    if (!image) {
-      return null;
+  };
+  useLayoutEffect(() => {
+    if (isOpen) focus();
+  }, [isOpen]);
+  const handleBackdropClick = () => {
+    if (canCloseOnBackdropClick) {
+      safeInvoke(onClose);
+    } else if (isOpen) {
+      focus();
     }
-    if ( /*#__PURE__*/isValidElement(image)) {
-      return /*#__PURE__*/_jsx("div", {
-        className: `${classPrefix}`,
-        children: image
-      });
+  };
+  const handleContentKeyUp = e => {
+    if (!e.isDefaultPrevented() && e.key === 'Escape') {
+      safeInvoke(onClose);
+      e.preventDefault();
     }
-    if (typeof image === 'string') {
-      return /*#__PURE__*/_jsx("div", {
-        className: classPrefix,
-        children: /*#__PURE__*/_jsx("img", {
-          className: `${classPrefix}-image`,
-          src: image
-        })
+  };
+  const renderImage = sideBanner => {
+    const classPrefix = `${baseClassName}__side`;
+    let element = null;
+    if ( /*#__PURE__*/isValidElement(sideBanner)) {
+      element = sideBanner;
+    } else if (typeof sideBanner === 'string') {
+      element = /*#__PURE__*/_jsx("img", {
+        className: `${classPrefix}-image`,
+        src: sideBanner,
+        alt: ""
+      });
+    } else {
+      element = /*#__PURE__*/_jsx("img", {
+        className: `${classPrefix}-image`,
+        ...sideBanner
       });
     }
     return /*#__PURE__*/_jsx("div", {
       className: classPrefix,
-      children: /*#__PURE__*/_jsx("img", {
-        className: `${classPrefix}-image`,
-        ...image
-      })
+      children: element
     });
-  }
-  render() {
-    const {
-      baseClassName,
-      className,
-      children,
-      isOpen,
-      placement,
-      size,
-      sideBanner,
-      sideBannerContainer,
-      onClose,
-      canCloseOnBackdropClick,
-      canCloseOnEscapePress,
-      style,
-      ...props
-    } = this.props;
-    const {
-      isExist
-    } = this.state;
-    if (!isExist) {
-      return null;
+  };
+  return /*#__PURE__*/_jsx(Layer, {
+    level: Z_INDEX_OVERLAY,
+    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,
+        ...style
+      },
+      ...props,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__backdrop`,
+        onClick: handleBackdropClick
+      }), /*#__PURE__*/_jsxs(FocusTrap, {
+        className: `${baseClassName}__content`,
+        onKeyUp: canCloseOnEscapePress ? handleContentKeyUp : undefined,
+        ref: contentRef,
+        role: "dialog",
+        "aria-modal": "true",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: `${baseClassName}__body`,
+          children: children
+        }), sideBanner && renderImage(sideBanner)]
+      })]
+    })
+  });
+};
+const Overlay = _ref2 => {
+  let {
+    isOpen = false,
+    ...props
+  } = _ref2;
+  const isOpenRef = useRef(false);
+  const [isExist, setIsExist] = useState(false);
+  const prevFocusElementRef = useRef(null);
+  const handleClose = useCallback(() => {
+    if (!isOpenRef.current) return;
+    isOpenRef.current = false;
+    if (--overlaysCount === 0) enableDocumentScroll();
+    prevFocusElementRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    if (isOpen) {
+      isOpenRef.current = true;
+      disableDocumentScroll();
+      overlaysCount++;
+      if (document.activeElement instanceof HTMLElement) {
+        prevFocusElementRef.current = document.activeElement;
+      }
+      setIsExist(true);
+    } else {
+      handleClose();
     }
-    return /*#__PURE__*/_jsx(Layer, {
-      level: Z_INDEX_OVERLAY,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: classNames(baseClassName, `${baseClassName}--${placement}`, `${baseClassName}--${size}`, sideBanner && `${baseClassName}--side`, className),
-        style: {
-          '--sideBannerBackground': sideBannerContainer?.background,
-          '--sideBannerAlign': sideBannerContainer?.align,
-          ...style
-        },
-        ...props,
-        children: [this.renderBackdrop({
-          baseClassName
-        }), this.renderContent({
-          baseClassName,
-          children,
-          canCloseOnEscapePress,
-          sideBanner
-        })]
-      })
-    });
-  }
-}
-_defineProperty(Overlay, "propTypes", {
-  /**
-   * Toggles visibility.
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * Overlay placement.
-   */
-  placement: PropTypes.oneOf(['center', 'left', 'right']),
-  /**
-   * Overlay size.
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  /**
-   * onClose handler.
-   */
-  onClose: PropTypes.func,
-  /**
-   * Indicating if clicking the backdrop should close the overlay.
-   */
-  canCloseOnBackdropClick: PropTypes.bool,
-  /**
-   * Indicating if pressing the escape key should close the overlay.
-   */
-  canCloseOnEscapePress: PropTypes.bool,
-  /**
-   * 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'])
-  }),
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * Content of the `Overlay`.
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-});
-_defineProperty(Overlay, "defaultProps", {
-  isOpen: false,
-  placement: 'center',
-  size: 'md',
-  onClose: null,
-  canCloseOnBackdropClick: true,
-  canCloseOnEscapePress: true,
-  sideBanner: undefined,
-  sideBannerContainer: undefined,
-  style: undefined,
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}overlay`
-});
+  }, [isOpen, handleClose]);
+  useEffect(() => () => handleClose(), [handleClose]);
+  if (!isExist) return null;
+  const handleExited = () => {
+    setIsExist(false);
+  };
+  return /*#__PURE__*/_jsx(OverlayCore, {
+    isOpen: isOpen,
+    onAnimationExited: handleExited,
+    ...props
+  });
+};
+export default Overlay;

package/esm/components/Overlay/index.js

@@ -1,3 +1,3 @@
-// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export { default } from './Overlay';

package/esm/components/PageHeader/PageHeader.js

@@ -1,4 +1,4 @@
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 import classNames from 'classnames';
 import { Children } from 'react';

package/esm/components/PageHeader/index.js

@@ -1,3 +1,3 @@
-// Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
 export { default } from './PageHeader';