@plesk/ui-library 3.25.6 → 3.27.0

package/esm/components/List/List.js

@@ -137,10 +137,10 @@ const getHumanTotalRows = ({
       return null;
   }
 };
-/**
- * `List` component is used for displaying a collection of tabular data.
- * [More details about designing of lists.](#!/Sets%20of%20Objects)
- * @since 0.0.42
+/**
+ * `List` component is used for displaying a collection of tabular data.
+ * [More details about designing of lists.](#!/Sets%20of%20Objects)
+ * @since 0.0.42
  */
 
 
@@ -875,9 +875,14 @@ class List extends Component {
 
     if (totalRows && /*#__PURE__*/isValidElement(pagination)) {
       const {
-        itemsPerPageOptions = ITEMS_PER_PAGE_OPTIONS
+        itemsPerPageOptions = ITEMS_PER_PAGE_OPTIONS,
+        itemsPerPage
       } = pagination.props;
 
+      if (Number.isInteger(itemsPerPage)) {
+        return totalRows > itemsPerPage;
+      }
+
       if (Array.isArray(itemsPerPageOptions)) {
         const numericOptions = itemsPerPageOptions.filter(v => Number(v) === v);
 
@@ -1330,214 +1335,214 @@ class List extends Component {
 }
 
 List.propTypes = {
-  /**
-   * Columns definition.
-   *
-   * In addition to the properties described below, you can use any native properties
-   * supported by the `TH` element like `className`, `style`, etc.
-   * @since 0.0.42
+  /**
+   * Columns definition.
+   *
+   * In addition to the properties described below, you can use any native properties
+   * supported by the `TH` element like `className`, `style`, etc.
+   * @since 0.0.42
    */
   columns: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * Unique column key.
+    /**
+     * Unique column key.
      */
     key: PropTypes.string.isRequired,
 
-    /**
-     * Column title.
+    /**
+     * Column title.
      */
     title: PropTypes.node,
 
-    /**
-     * Optional cell renderer function: `row => Component`. By default render value of cell.
-     * The renderer function can also returns a configuration object like: `{children: 'cell content', colSpan: 3}`
+    /**
+     * Optional cell renderer function: `row => Component`. By default render value of cell.
+     * The renderer function can also returns a configuration object like: `{children: 'cell content', colSpan: 3}`
      */
     render: PropTypes.func,
 
-    /**
-     * Is column sortable.
-     * Default is `false`
+    /**
+     * Is column sortable.
+     * Default is `false`
      */
     sortable: PropTypes.bool,
 
-    /**
-     * Optional function for row comparison: `(row1, row2) => -1 | 0 | 1`
+    /**
+     * Optional function for row comparison: `(row1, row2) => -1 | 0 | 1`
      */
     sort: PropTypes.func,
 
-    /**
-     * Column alignment.
+    /**
+     * Column alignment.
      */
     align: PropTypes.oneOf(['left', 'center', 'right']),
 
-    /**
-     * Truncate the text in cell with an ellipsis.
+    /**
+     * Truncate the text in cell with an ellipsis.
      */
     truncate: PropTypes.bool,
 
-    /**
-     * Determine type of column content.
-     *
-     * * title - There should a title of the row.
-     * * controls - There should be some control: a button or a dropdown.
-     * * actions - There should be the ListAction component.
+    /**
+     * Determine type of column content.
+     *
+     * * title - There should a title of the row.
+     * * controls - There should be some control: a button or a dropdown.
+     * * actions - There should be the ListAction component.
      */
     type: PropTypes.oneOf(['title', 'controls', 'actions'])
   })).isRequired,
 
-  /**
-   * Array of row objects.
-   *
-   * Each row must contains `key` property, all columns keys, and can contain `disabled` property.
-   * @since 0.0.42
+  /**
+   * Array of row objects.
+   *
+   * Each row must contains `key` property, all columns keys, and can contain `disabled` property.
+   * @since 0.0.42
    */
   data: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * Unique column key. This property can by renamed using `rowKey` property of List.
+    /**
+     * Unique column key. This property can by renamed using `rowKey` property of List.
      */
     key: PropTypes.string,
 
-    /**
-     * Optional property for disabling ability to select this row.
+    /**
+     * Optional property for disabling ability to select this row.
      */
     disabled: PropTypes.bool,
 
-    /**
-     * Optional array of children rows.
+    /**
+     * Optional array of children rows.
      */
     data: PropTypes.array
   })),
 
-  /**
-   * Current sort column key
-   * @since 0.0.42
+  /**
+   * Current sort column key
+   * @since 0.0.42
    */
   sortColumn: PropTypes.string,
 
-  /**
-   * Sort direction of the column being sorted.
-   * @since 0.0.42
+  /**
+   * Sort direction of the column being sorted.
+   * @since 0.0.42
    */
   sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
 
-  /**
-   * Sort change handler
-   * @since 0.0.42
+  /**
+   * Sort change handler
+   * @since 0.0.42
    */
   onSortChange: PropTypes.func,
 
-  /**
-   * Array of keys of selected rows
-   * @since 0.0.42
+  /**
+   * Array of keys of selected rows
+   * @since 0.0.42
    */
   selection: PropTypes.array,
 
-  /**
-   * Selection change handler for list. Checkboxes will only be rendered if this prop is defined.
-   * @since 0.0.42
+  /**
+   * Selection change handler for list. Checkboxes will only be rendered if this prop is defined.
+   * @since 0.0.42
    */
   onSelectionChange: PropTypes.func,
 
-  /**
-   * Renderer for a selection checkbox. Allow to replace checkboxes in the List by a custom implementation.
-   * @since 3.19.0
+  /**
+   * Renderer for a selection checkbox. Allow to replace checkboxes in the List by a custom implementation.
+   * @since 3.19.0
    */
   renderSelectionCheckbox: PropTypes.func,
 
-  /**
-   * Row's key getter. Could be a string or function like: `row => <unique_string>`
-   * @since 0.0.45
+  /**
+   * Row's key getter. Could be a string or function like: `row => <unique_string>`
+   * @since 0.0.45
    */
   rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
-  /**
-   * Renderer for a row body. Should return ReactNode.
-   * @since 1.12.0
+  /**
+   * Renderer for a row body. Should return ReactNode.
+   * @since 1.12.0
    */
   renderRowBody: PropTypes.func,
 
-  /**
-   * Array of keys of expanded rows
-   * @since 1.12.0
+  /**
+   * Array of keys of expanded rows
+   * @since 1.12.0
    */
   expandedRows: PropTypes.array,
 
-  /**
-   * Array of keys of rows which not have expand indicator
-   * @since 1.12.0
+  /**
+   * Array of keys of rows which not have expand indicator
+   * @since 1.12.0
    */
   notExpandableRows: PropTypes.array,
 
-  /**
-   * Rows expanding change handler.
-   * @since 1.12.0
+  /**
+   * Rows expanding change handler.
+   * @since 1.12.0
    */
   onExpandedRowsChange: PropTypes.func,
 
-  /**
-   * Array of keys of loading rows. They are displayed instead of checkboxes.
-   * @since 2.5.0
+  /**
+   * Array of keys of loading rows. They are displayed instead of checkboxes.
+   * @since 2.5.0
    */
   loadingRows: PropTypes.array,
 
-  /**
-   * A `Pagination` element. It displays at the top and the bottom of the list. When pagination is defined, the built-in sort is disabled.
-   * @since 2.4.0
+  /**
+   * A `Pagination` element. It displays at the top and the bottom of the list. When pagination is defined, the built-in sort is disabled.
+   * @since 2.4.0
    */
   pagination: PropTypes.node,
 
-  /**
-   * Total rows count, including nested rows. Usually, it uses together with pagination.
-   * @since 2.4.0
+  /**
+   * Total rows count, including nested rows. Usually, it uses together with pagination.
+   * @since 2.4.0
    */
   totalRows: PropTypes.number,
 
-  /**
-   * A `Toolbar` element.
-   * @since 2.4.0
+  /**
+   * A `Toolbar` element.
+   * @since 2.4.0
    */
   toolbar: PropTypes.node,
 
-  /**
-   * A flag that all rows are selected.
-   * @since 2.4.0
+  /**
+   * A flag that all rows are selected.
+   * @since 2.4.0
    */
   allRowsSelected: PropTypes.bool,
 
-  /**
-   * A callback executed when the allRowsSelected prop is changed.
-   * @since 2.4.0
+  /**
+   * A callback executed when the allRowsSelected prop is changed.
+   * @since 2.4.0
    */
   onAllRowsSelectedChange: PropTypes.func,
 
-  /**
-   * Filtered list. Manages toolbar visibility when data is absent and defines the defaults for empty view.
-   * @since 3.0.1
+  /**
+   * Filtered list. Manages toolbar visibility when data is absent and defines the defaults for empty view.
+   * @since 3.0.1
    */
   filtered: PropTypes.bool,
 
-  /**
-   * A custom view for the case when data is absent.
-   * @since 2.5.0
+  /**
+   * A custom view for the case when data is absent.
+   * @since 2.5.0
    */
   emptyView: PropTypes.node,
 
-  /**
-   * Which part of the List component should be replaced by the empty view.
-   * @since 2.6.0
-   * @deprecated Use `filtered` instead.
+  /**
+   * Which part of the List component should be replaced by the empty view.
+   * @since 2.6.0
+   * @deprecated Use `filtered` instead.
    */
   emptyViewMode: PropTypes.oneOf(['all', 'items']),
 
-  /**
-   * A slot on the right of the items.
-   * @since 2.6.0
+  /**
+   * A slot on the right of the items.
+   * @since 2.6.0
    */
   sidebar: PropTypes.node,
 
-  /**
-   * Custom localization messages.
-   * @since 2.6.0
+  /**
+   * Custom localization messages.
+   * @since 2.6.0
    */
   locale: PropTypes.shape({
     selectAll: PropTypes.node,
@@ -1547,49 +1552,49 @@ List.propTypes = {
     selectedRows: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
   }),
 
-  /**
-   * Render List row's content vertically.
-   * When some number is specified, it turns into vertical mode automatically if the List's width is less than the provided number.
-   * @since 3.3.0
+  /**
+   * Render List row's content vertically.
+   * When some number is specified, it turns into vertical mode automatically if the List's width is less than the provided number.
+   * @since 3.3.0
    */
   vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 
-  /**
-   * Indicate the loading state of the list.
-   * @since 3.3.1
+  /**
+   * Indicate the loading state of the list.
+   * @since 3.3.1
    */
   loading: PropTypes.bool,
 
-  /**
-   * Apply some props to each row.
-   *
-   * `virtual` - Virtual row does not have any controls.
-   *
-   * @since 3.11.0
+  /**
+   * Apply some props to each row.
+   *
+   * `virtual` - Virtual row does not have any controls.
+   *
+   * @since 3.11.0
    */
   rowProps: PropTypes.oneOfType([PropTypes.shape({
     virtual: PropTypes.bool
   }), PropTypes.func]),
 
-  /**
-   * Enable reorderable view.
-   * @since 3.18.0
+  /**
+   * Enable reorderable view.
+   * @since 3.18.0
    */
   reorderable: PropTypes.bool,
 
-  /**
-   * Reorder end handler.
-   * @since 3.18.0
+  /**
+   * Reorder end handler.
+   * @since 3.18.0
    */
   onReorderEnd: PropTypes.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string
 };

package/esm/components/LocaleProvider/LocaleProvider.js

@@ -83,9 +83,9 @@ export const useTranslate = namespace => {
   };
 };
 
-/**
- * LocaleProvider provides a uniform localization support for built-in text of components.
- * @since 0.0.42
+/**
+ * LocaleProvider provides a uniform localization support for built-in text of components.
+ * @since 0.0.42
  */
 class LocaleProvider extends PureComponent {
   getChildContext() {

package/esm/components/Menu/MenuBaseItem.js

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Icon, { ICON_SIZE_16 } from '../Icon';
-/**
- * `MenuBaseItem` component.
- * @since 0.0.60
+/**
+ * `MenuBaseItem` component.
+ * @since 0.0.60
  */
 
 const MenuBaseItem = ({
@@ -31,37 +31,37 @@ const MenuBaseItem = ({
 }, label));
 
 MenuBaseItem.propTypes = {
-  /**
-   * Icon
-   * @since 0.0.60
+  /**
+   * Icon
+   * @since 0.0.60
    */
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
 
-  /**
-   * Right label of item.
-   * @since 0.0.60
+  /**
+   * Right label of item.
+   * @since 0.0.60
    */
   label: PropTypes.node,
 
-  /**
-   * Content of the `MenuBaseItem`.
-   * @since 0.0.60
+  /**
+   * Content of the `MenuBaseItem`.
+   * @since 0.0.60
    */
   children: PropTypes.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string,
 
-  /**
-   * Component to render as the root element. Useful when rendering a `MenuBaseItem` as other component or tag.
-   * @since 1.9.1
+  /**
+   * Component to render as the root element. Useful when rendering a `MenuBaseItem` as other component or tag.
+   * @since 1.9.1
    */
   component: PropTypes.elementType
 };

package/esm/components/Overlay/Overlay.js

@@ -12,12 +12,12 @@ import Backdrop from './Backdrop';
 import Layer from '../Layer';
 import FocusTrap from '../FocusTrap';
 
-/**
- * `Overlay` component.
+/**
+ * `Overlay` component.
  */
 const overlays = [];
-/**
- * @since 0.0.65
+/**
+ * @since 0.0.65
  */
 
 export default class Overlay extends Component {
@@ -254,75 +254,75 @@ export default class Overlay extends Component {
 }
 
 _defineProperty(Overlay, "propTypes", {
-  /**
-   * Toggles visibility.
+  /**
+   * Toggles visibility.
    */
   isOpen: PropTypes.bool,
 
-  /**
-   * Overlay placement.
+  /**
+   * Overlay placement.
    */
   placement: PropTypes.oneOf(['center', 'left', 'right']),
 
-  /**
-   * Overlay size.
+  /**
+   * Overlay size.
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
 
-  /**
-   * onClose handler.
+  /**
+   * onClose handler.
    */
   onClose: PropTypes.func,
 
-  /**
-   * Indicating if clicking the backdrop should close the overlay.
+  /**
+   * Indicating if clicking the backdrop should close the overlay.
    */
   canCloseOnBackdropClick: PropTypes.bool,
 
-  /**
-   * Indicating if pressing the escape key should close the overlay.
+  /**
+   * 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
+  /**
+   * 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
+  /**
+   * Additional properties for the sideBanner
+   * @since 3.25.0
    */
   sideBannerContainer: PropTypes.shape({
-    /**
-     * Values for css background property
+    /**
+     * Values for css background property
      */
     background: PropTypes.string,
 
-    /**
-     * One of: center, flex-start, flex-end
+    /**
+     * One of: center, flex-start, flex-end
      */
     align: PropTypes.oneOf(['center', 'flex-start', 'flex-end'])
   }),
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   style: PropTypes.object,
 
-  /**
-   * Content of the `Overlay`.
+  /**
+   * Content of the `Overlay`.
    */
   children: PropTypes.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string
 });

package/esm/components/Pagination/Pagination.js

@@ -15,9 +15,9 @@ export const ITEMS_PER_PAGE_OPTIONS = [25, 100, 'all'];
 const VIEW_DEFAULT = 'default';
 const VIEW_POPOVER = 'popover';
 
-/**
- * `Pagination` component is used for navigating objects in [List](#!/List) which content is displayed on multiple pages.
- * @since 0.0.54
+/**
+ * `Pagination` component is used for navigating objects in [List](#!/List) which content is displayed on multiple pages.
+ * @since 0.0.54
  */
 const Pagination = ({
   baseClassName = `${CLS_PREFIX}pagination`,

package/esm/components/Panel/Panel.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { CSSTransition } from 'react-transition-group';
 import { isLikeText } from '../Translate';
 import Heading from '../Heading';
 import Button from '../Button';
@@ -71,13 +72,21 @@ class Panel extends Component {
       collapsed
     } = this.state;
     const handleToggle = collapsible ? this.handleToggle : undefined;
-    return /*#__PURE__*/React.createElement("div", _extends({
+    const rootRef = /*#__PURE__*/createRef();
+    return /*#__PURE__*/React.createElement(CSSTransition, {
+      classNames: `${baseClassName}-`,
+      in: !collapsed,
+      timeout: 300,
+      nodeRef: rootRef
+    }, /*#__PURE__*/React.createElement("div", _extends({
       className: classNames(baseClassName, {
         [`${baseClassName}--collapsible`]: collapsible,
         [`${baseClassName}--collapsed`]: collapsed,
         [`${baseClassName}--expanded`]: !collapsed
       }, className)
-    }, props), title && /*#__PURE__*/React.createElement("div", {
+    }, props, {
+      ref: rootRef
+    }), title && /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__header`,
       onClick: handleToggle
     }, isLikeText(title) ? /*#__PURE__*/React.createElement(Heading, {
@@ -96,7 +105,7 @@ class Panel extends Component {
       onClick: handleToggle
     }))), /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content`
-    }, children));
+    }, children)));
   }
 
 }