@plesk/ui-library 3.25.6 → 3.27.0

package/esm/components/InputNumber/InputNumber.js

@@ -45,9 +45,9 @@ const toNumber = value => {
 const isMinDisabled = (value, min) => min !== undefined && value !== '' && value <= min;
 
 const isMaxDisabled = (value, max) => max !== undefined && value !== '' && value >= max;
-/**
- * `InputNumber` component is used for entering integer numbers.
- * @since 2.2.0
+/**
+ * `InputNumber` component is used for entering integer numbers.
+ * @since 2.2.0
  */
 
 

package/esm/components/Item/Item.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 import React, { Component, cloneElement, isValidElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -11,10 +11,10 @@ import Tooltip from '../Tooltip';
 import { createProxyProps, wrapFunction } from '../utils';
 const VIEW_SIMPLE = 'simple';
 const VIEW_CARD = 'card';
-/**
- * `Item` component is element of [ItemList](#!/ItemList) and it is presented as
- * a combination of icon, text title and content (similar to [Media](#!/Media)).
- * @since 0.0.48
+/**
+ * `Item` component is element of [ItemList](#!/ItemList) and it is presented as
+ * a combination of icon, text title and content (similar to [Media](#!/Media)).
+ * @since 0.0.48
  */
 
 class Item extends Component {
@@ -83,6 +83,7 @@ class Item extends Component {
       value,
       tooltip,
       disabled,
+      hoverable,
       ...props
     } = this.props;
 
@@ -103,7 +104,8 @@ class Item extends Component {
     const item = /*#__PURE__*/React.createElement(Tag, _extends({
       className: classNames(baseClassName, {
         [`${baseClassName}--card`]: view === 'card',
-        [`${baseClassName}--disabled`]: disabled
+        [`${baseClassName}--disabled`]: disabled,
+        [`${baseClassName}--hoverable`]: hoverable
       }, className)
     }, props), /*#__PURE__*/React.createElement(Media, {
       image: this.renderIcon(icon),
@@ -129,79 +131,86 @@ class Item extends Component {
 }
 
 Item.propTypes = {
-  /**
-   * Component to render as the root element. Useful when rendering a `Item` as `<a>` or `<Link>`.
-   * @since 0.0.48
+  /**
+   * Component to render as the root element. Useful when rendering a `Item` as `<a>` or `<Link>`.
+   * @since 0.0.48
    */
   component: PropTypes.elementType,
 
-  /**
-   * View mode.
-   * @since 2.1.0
+  /**
+   * View mode.
+   * @since 2.1.0
    */
   view: PropTypes.oneOf([VIEW_SIMPLE, VIEW_CARD]),
 
-  /**
-   * Icon.
-   * @since 0.0.48
+  /**
+   * Icon.
+   * @since 0.0.48
    */
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
 
-  /**
-   * Title.
-   * @since 0.0.48
+  /**
+   * Title.
+   * @since 0.0.48
    */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
 
-  /**
-   * Content for footer.
-   * @since 2.1.0
+  /**
+   * Content for footer.
+   * @since 2.1.0
    */
   footer: PropTypes.node,
 
-  /**
-   * Description. Renders as small grey text.
-   * @since 2.1.0
+  /**
+   * Description. Renders as small grey text.
+   * @since 2.1.0
    */
   description: PropTypes.node,
 
-  /**
-   * Content of the `Item`.
-   * @since 0.0.48
+  /**
+   * Content of the `Item`.
+   * @since 0.0.48
    */
   children: PropTypes.node,
 
-  /**
-   * An unique value. It needs only in ItemList with selectable view.
-   * @since 2.3.0
+  /**
+   * An unique value. It needs only in ItemList with selectable view.
+   * @since 2.3.0
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Tooltip for component.
-   * @since 2.5.1
+  /**
+   * Tooltip for component.
+   * @since 2.5.1
    */
   tooltip: PropTypes.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string,
 
-  /**
-   * Whether disabled or not.
-   * @since 3.15.0
+  /**
+   * Whether disabled or not.
+   * @since 3.15.0
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+   * Add hover shadow and pointer cursor.
+   * @since 3.26.0
+   */
+  hoverable: PropTypes.bool
 };
 Item.defaultProps = {
   component: 'div',
   view: VIEW_SIMPLE,
+  hoverable: undefined,
   title: undefined,
   description: undefined,
   icon: undefined,

package/esm/components/ItemLink/ItemLink.js

@@ -14,6 +14,7 @@ const ItemLink = ({
   baseClassName = `${CLS_PREFIX}item-link`,
   className,
   children,
+  hoverable,
   ...props
 }) => {
   if (props.onClick) {

package/esm/components/ItemList/ItemList.js

@@ -28,10 +28,10 @@ const getNextSelectedValue = (value, prevValue, toggleable) => {
   return value;
 };
 
-/**
- * `ItemList` component is used for displaying list of [Items](#!/Item)
- * according to [Grid](#!/Grid) principle.
- * @since 0.0.48
+/**
+ * `ItemList` component is used for displaying list of [Items](#!/Item)
+ * according to [Grid](#!/Grid) principle.
+ * @since 0.0.48
  */
 class ItemList extends Component {
   constructor(_props) {
@@ -42,7 +42,8 @@ class ItemList extends Component {
         baseClassName,
         selectable,
         onSelect,
-        reorderable
+        reorderable,
+        hoverable
       } = this.props;
       const classNameList = [`${baseClassName}__item`];
       const props = {};
@@ -67,6 +68,11 @@ class ItemList extends Component {
           });
           safeInvoke(onSelect, nextValue);
         };
+      } // Extends hoverable behavior from the ItemList in case if its child doesn't have its own
+
+
+      if (item.props.hoverable === undefined) {
+        props.hoverable = hoverable && this.canManageHoverableState();
       }
 
       if (reorderable) {
@@ -161,18 +167,43 @@ class ItemList extends Component {
     }));
   }
 
-  hasViewCard() {
-    const {
-      children
-    } = this.props;
+  someChild(predicate) {
     let result = false;
-    Children.forEach(children, child => {
-      if (child && child.props && child.props.view === 'card') {
+    Children.forEach(this.props.children, child => {
+      if (child && predicate(child)) {
         result = true;
       }
     });
     return result;
   }
+  /**
+   * There are some states where we can't manage hoverable state
+   */
+
+
+  canManageHoverableState() {
+    const {
+      reorderable,
+      selectable
+    } = this.props;
+    return !reorderable && !selectable;
+  }
+
+  isHoverable() {
+    if (!this.canManageHoverableState()) {
+      return false;
+    }
+
+    return this.props.hoverable || this.hasHoverableCard();
+  }
+
+  hasViewCard() {
+    return this.someChild(child => child.props && child.props.view === 'card');
+  }
+
+  hasHoverableCard() {
+    return this.someChild(child => child.props && !!child.props.hoverable);
+  }
 
   renderReorderable({
     baseClassName,
@@ -231,7 +262,7 @@ class ItemList extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       className: classNames(this.props.baseClassName, {
-        [`${this.props.baseClassName}--hoverable`]: hoverable && !reorderable && !selectable,
+        [`${this.props.baseClassName}--hoverable`]: this.isHoverable(),
         [`${this.props.baseClassName}--stretchable`]: stretchable,
         [`${this.props.baseClassName}--selectable`]: selectable,
         [`${this.props.baseClassName}--cards`]: this.hasViewCard()

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

@@ -39,7 +39,8 @@ Basic.args = {
       name: "star-circle-filled",
       intent: "warning"
     }),
-    onClick: () => {}
+    onClick: () => {},
+    hoverable: true
   }, 'Content 3'), /*#__PURE__*/React.createElement(Item, {
     key: "4",
     value: "4",
@@ -51,7 +52,8 @@ Basic.args = {
       intent: "danger"
     }),
     onClick: () => {},
-    disabled: true
+    disabled: true,
+    hoverable: true
   }, 'Content 4')]
 };
 export const Cards = Basic.bind(null);
@@ -71,4 +73,32 @@ export const Selectables = Basic.bind(null);
 Selectables.args = { ...Basic.args,
   selectable: true,
   defaultValue: '2'
+};
+export const HoverableItemList = Basic.bind(null);
+HoverableItemList.args = { ...Basic.args,
+  hoverable: true,
+  defaultValue: '2',
+  children: Basic.args.children.map((child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    return /*#__PURE__*/cloneElement(child, {
+      hoverable: index === 0 ? false : undefined
+    });
+  })
+};
+export const HoverableItems = Basic.bind(null);
+HoverableItems.args = { ...Basic.args,
+  hoverable: false,
+  defaultValue: '2',
+  children: Basic.args.children.map((child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    return /*#__PURE__*/cloneElement(child, {
+      hoverable: index % 2 === 0
+    });
+  })
 };

package/esm/components/Layout/Layout.js

@@ -8,104 +8,104 @@ import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { CLS_PREFIX } from '../../constants';
 const propTypes = {
-  /**
-   * Type of the `Layout`
-   * @since 1.4.0
+  /**
+   * Type of the `Layout`
+   * @since 1.4.0
    */
   type: PropTypes.oneOf(['fluid', 'simplified']),
 
-  /**
-   * Header content.
-   * @since 1.4.0
+  /**
+   * Header content.
+   * @since 1.4.0
    */
   header: PropTypes.node,
 
-  /**
-   * Define header position - always on top (fixed) or static.
-   * @since 1.4.0
+  /**
+   * Define header position - always on top (fixed) or static.
+   * @since 1.4.0
    */
   headerFixed: PropTypes.bool,
 
-  /**
-   * Additional content at the top of the header.
-   * @since 3.2.0
+  /**
+   * Additional content at the top of the header.
+   * @since 3.2.0
    */
   headerAddon: PropTypes.node,
 
-  /**
-   * Sidebar content.
-   * @since 1.4.0
+  /**
+   * Sidebar content.
+   * @since 1.4.0
    */
   sidebar: PropTypes.node,
 
-  /**
-   * Sidebar type.
-   * @since 3.2.0
+  /**
+   * Sidebar type.
+   * @since 3.2.0
    */
   sidebarType: PropTypes.oneOf(['collapsed', 'folded']),
 
-  /**
-   * Define if sidebar can collapse.
-   * @since 1.4.0
+  /**
+   * Define if sidebar can collapse.
+   * @since 1.4.0
    */
   sidebarCollapsible: PropTypes.bool,
 
-  /**
-   * Sidebar collapsed state.
-   * A boolean value is used for desktop mode only, but you can set an array with collapsed states for all modes, e.g. `['responsive', 'desktop']`.
-   *
-   * @since 1.4.0
+  /**
+   * Sidebar collapsed state.
+   * A boolean value is used for desktop mode only, but you can set an array with collapsed states for all modes, e.g. `['responsive', 'desktop']`.
+   *
+   * @since 1.4.0
    */
   sidebarCollapsed: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
 
-  /**
-   * Additional content between header and main content.
-   * @since 1.4.0
+  /**
+   * Additional content between header and main content.
+   * @since 1.4.0
    */
   contentAddon: PropTypes.node,
 
-  /**
-   * Content header.
-   * @since 3.0.0
+  /**
+   * Content header.
+   * @since 3.0.0
    */
   contentHeader: PropTypes.node,
 
-  /**
-   * Footer content.
-   * @since 1.4.0
+  /**
+   * Footer content.
+   * @since 1.4.0
    */
   footer: PropTypes.node,
 
-  /**
-   * Main content of the `Layout`.
-   * @since 1.4.0
+  /**
+   * Main content of the `Layout`.
+   * @since 1.4.0
    */
   children: PropTypes.node,
 
-  /**
-   * Width of the content
-   * @since 3.0.0
+  /**
+   * Width of the content
+   * @since 3.0.0
    */
   width: PropTypes.oneOf(['sm', 'md', 'lg']),
 
-  /**
-   * Sidebar onToggle handler.
-   * The handler is called with two args:
-   *
-   * * Whether collapsed or not.
-   * * In which mode: responsive or desktop.
-   *
-   * @since 1.4.0
+  /**
+   * Sidebar onToggle handler.
+   * The handler is called with two args:
+   *
+   * * Whether collapsed or not.
+   * * In which mode: responsive or desktop.
+   *
+   * @since 1.4.0
    */
   onSidebarToggle: PropTypes.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string
 };
@@ -155,8 +155,8 @@ const subscribeClickOutside = (refs, handler) => {
     document.removeEventListener('touchstart', listener);
   };
 };
-/**
- * @since 1.4.0
+/**
+ * @since 1.4.0
  */