@plesk/ui-library 3.25.6 → 3.27.0

package/cjs/components/InputNumber/InputNumber.js

@@ -64,9 +64,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/cjs/components/Item/Item.js

@@ -31,13 +31,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 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 _react.Component {
@@ -106,6 +106,7 @@ class Item extends _react.Component {
       value,
       tooltip,
       disabled,
+      hoverable,
       ...props
     } = this.props;
 
@@ -126,7 +127,8 @@ class Item extends _react.Component {
     const item = /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
       className: (0, _classnames.default)(baseClassName, {
         [`${baseClassName}--card`]: view === 'card',
-        [`${baseClassName}--disabled`]: disabled
+        [`${baseClassName}--disabled`]: disabled,
+        [`${baseClassName}--hoverable`]: hoverable
       }, className)
     }, props), /*#__PURE__*/_react.default.createElement(_Media.default, {
       image: this.renderIcon(icon),
@@ -152,79 +154,86 @@ class Item extends _react.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.default.elementType,
 
-  /**
-   * View mode.
-   * @since 2.1.0
+  /**
+   * View mode.
+   * @since 2.1.0
    */
   view: _propTypes.default.oneOf([VIEW_SIMPLE, VIEW_CARD]),
 
-  /**
-   * Icon.
-   * @since 0.0.48
+  /**
+   * Icon.
+   * @since 0.0.48
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Title.
-   * @since 0.0.48
+  /**
+   * Title.
+   * @since 0.0.48
    */
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
 
-  /**
-   * Content for footer.
-   * @since 2.1.0
+  /**
+   * Content for footer.
+   * @since 2.1.0
    */
   footer: _propTypes.default.node,
 
-  /**
-   * Description. Renders as small grey text.
-   * @since 2.1.0
+  /**
+   * Description. Renders as small grey text.
+   * @since 2.1.0
    */
   description: _propTypes.default.node,
 
-  /**
-   * Content of the `Item`.
-   * @since 0.0.48
+  /**
+   * Content of the `Item`.
+   * @since 0.0.48
    */
   children: _propTypes.default.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.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
-  /**
-   * Tooltip for component.
-   * @since 2.5.1
+  /**
+   * Tooltip for component.
+   * @since 2.5.1
    */
   tooltip: _propTypes.default.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string,
 
-  /**
-   * Whether disabled or not.
-   * @since 3.15.0
+  /**
+   * Whether disabled or not.
+   * @since 3.15.0
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Add hover shadow and pointer cursor.
+   * @since 3.26.0
+   */
+  hoverable: _propTypes.default.bool
 };
 Item.defaultProps = {
   component: 'div',
   view: VIEW_SIMPLE,
+  hoverable: undefined,
   title: undefined,
   description: undefined,
   icon: undefined,

package/cjs/components/ItemLink/ItemLink.js

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

package/cjs/components/ItemList/ItemList.js

@@ -47,10 +47,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 _react.Component {
   constructor(_props) {
@@ -61,7 +61,8 @@ class ItemList extends _react.Component {
         baseClassName,
         selectable,
         onSelect,
-        reorderable
+        reorderable,
+        hoverable
       } = this.props;
       const classNameList = [`${baseClassName}__item`];
       const props = {};
@@ -86,6 +87,11 @@ class ItemList extends _react.Component {
           });
           (0, _utils.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) {
@@ -177,20 +183,45 @@ class ItemList extends _react.Component {
     }));
   }
 
-  hasViewCard() {
-    const {
-      children
-    } = this.props;
+  someChild(predicate) {
     let result = false;
 
-    _react.Children.forEach(children, child => {
-      if (child && child.props && child.props.view === 'card') {
+    _react.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,
@@ -249,7 +280,7 @@ class ItemList extends _react.Component {
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(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/cjs/components/ItemList/ItemList.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Selectables = exports.Reorderables = exports.Cards = exports.Basic = void 0;
+exports.Selectables = exports.Reorderables = exports.HoverableItems = exports.HoverableItemList = exports.Cards = exports.Basic = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -58,7 +58,8 @@ Basic.args = {
       name: "star-circle-filled",
       intent: "warning"
     }),
-    onClick: () => {}
+    onClick: () => {},
+    hoverable: true
   }, 'Content 3'), /*#__PURE__*/_react.default.createElement(_Item.default, {
     key: "4",
     value: "4",
@@ -70,7 +71,8 @@ Basic.args = {
       intent: "danger"
     }),
     onClick: () => {},
-    disabled: true
+    disabled: true,
+    hoverable: true
   }, 'Content 4')]
 };
 const Cards = Basic.bind(null);
@@ -93,4 +95,34 @@ exports.Selectables = Selectables;
 Selectables.args = { ...Basic.args,
   selectable: true,
   defaultValue: '2'
+};
+const HoverableItemList = Basic.bind(null);
+exports.HoverableItemList = HoverableItemList;
+HoverableItemList.args = { ...Basic.args,
+  hoverable: true,
+  defaultValue: '2',
+  children: Basic.args.children.map((child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
+      hoverable: index === 0 ? false : undefined
+    });
+  })
+};
+const HoverableItems = Basic.bind(null);
+exports.HoverableItems = HoverableItems;
+HoverableItems.args = { ...Basic.args,
+  hoverable: false,
+  defaultValue: '2',
+  children: Basic.args.children.map((child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
+      hoverable: index % 2 === 0
+    });
+  })
 };

package/cjs/components/Layout/Layout.js

@@ -29,104 +29,104 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 const propTypes = {
-  /**
-   * Type of the `Layout`
-   * @since 1.4.0
+  /**
+   * Type of the `Layout`
+   * @since 1.4.0
    */
   type: _propTypes.default.oneOf(['fluid', 'simplified']),
 
-  /**
-   * Header content.
-   * @since 1.4.0
+  /**
+   * Header content.
+   * @since 1.4.0
    */
   header: _propTypes.default.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.default.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.default.node,
 
-  /**
-   * Sidebar content.
-   * @since 1.4.0
+  /**
+   * Sidebar content.
+   * @since 1.4.0
    */
   sidebar: _propTypes.default.node,
 
-  /**
-   * Sidebar type.
-   * @since 3.2.0
+  /**
+   * Sidebar type.
+   * @since 3.2.0
    */
   sidebarType: _propTypes.default.oneOf(['collapsed', 'folded']),
 
-  /**
-   * Define if sidebar can collapse.
-   * @since 1.4.0
+  /**
+   * Define if sidebar can collapse.
+   * @since 1.4.0
    */
   sidebarCollapsible: _propTypes.default.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.default.oneOfType([_propTypes.default.bool, _propTypes.default.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.default.node,
 
-  /**
-   * Content header.
-   * @since 3.0.0
+  /**
+   * Content header.
+   * @since 3.0.0
    */
   contentHeader: _propTypes.default.node,
 
-  /**
-   * Footer content.
-   * @since 1.4.0
+  /**
+   * Footer content.
+   * @since 1.4.0
    */
   footer: _propTypes.default.node,
 
-  /**
-   * Main content of the `Layout`.
-   * @since 1.4.0
+  /**
+   * Main content of the `Layout`.
+   * @since 1.4.0
    */
   children: _propTypes.default.node,
 
-  /**
-   * Width of the content
-   * @since 3.0.0
+  /**
+   * Width of the content
+   * @since 3.0.0
    */
   width: _propTypes.default.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.default.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes.default.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: _propTypes.default.string
 };
@@ -176,8 +176,8 @@ const subscribeClickOutside = (refs, handler) => {
     document.removeEventListener('touchstart', listener);
   };
 };
-/**
- * @since 1.4.0
+/**
+ * @since 1.4.0
  */