@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Tabs/Tabs.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 import React, { cloneElement, isValidElement, Component, Fragment, Children } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -14,9 +15,11 @@ import Dropdown from '../Dropdown';
 import Menu, { MenuItem } from '../Menu';
 import Tab from './Tab';
 import ResponsiveContext from '../ResponsiveContext';
+import { wrapFunction } from '../utils';
 const ADDON_LEFT_PADDING = 5;
 const MIN_ADDON_WIDTH_DEFAULT = 150;
 const COLLAPSED_SEARCH_WIDTH = 60;
+
 /**
  * `Tabs` component is a content area with a group of individual [Tab](#!/Tab) elements, each displaying different content
  * in the same screen area. `Tabs` are used when you have too much content to display in one place at the same time, so
@@ -24,11 +27,9 @@ const COLLAPSED_SEARCH_WIDTH = 60;
  * group name and a navigation button.
  * @since 0.0.35
  */
-
 class Tabs extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       active: this.props.active || 1,
       collapsedLength: 0,
@@ -36,9 +37,7 @@ class Tabs extends Component {
       searching: false,
       monospacedWidth: null
     });
-
     _defineProperty(this, "widths", null);
-
     _defineProperty(this, "checkAdaptive", () => {
       let {
         compact,
@@ -55,13 +54,10 @@ class Tabs extends Component {
         addon
       } = this;
       let monospacedWidth = null;
-
       const getMonospacedWidth = () => monospacedWidth;
-
       if (!widths) {
         return;
       }
-
       const addonMinWidth = ADDON_LEFT_PADDING + (addonMinWidthProp || (search ? search.props.minWidth : MIN_ADDON_WIDTH_DEFAULT));
       const searchWidth = compact && search ? COLLAPSED_SEARCH_WIDTH + ADDON_LEFT_PADDING : 0;
       const {
@@ -72,53 +68,40 @@ class Tabs extends Component {
       let tabs = widths.tabs.slice();
       const tabsNumber = tabs.length;
       let lastTabIndex = tabsNumber - 1 - collapsedLength;
-
       if (monospaced) {
         monospacedWidth = tabs.slice(0, lastTabIndex + 1).reduce((max, tab) => tab > max ? tab : max, 0);
         tabs = tabs.map(getMonospacedWidth);
       }
-
       const getListWidth = () => {
         let listWidth = monospaced ? margin * Math.max(0, tabsNumber - 1 - Math.max(0, collapsedLength - 1)) : 0;
-
         for (let i = 0; i <= lastTabIndex; ++i) {
           listWidth += tabs[i];
         }
-
         if (collapsedLength) {
           listWidth += more;
         }
-
         return listWidth;
       };
-
       let spaceForAddon = container - getListWidth();
-
       if (addon && !collapsedLength && !compact && spaceForAddon <= addonMinWidth) {
         compact = true;
       }
-
       let freeSpace = spaceForAddon - searchWidth;
-
       if (freeSpace <= 0) {
         // collapse
         for (let i = lastTabIndex; i >= 0; --i) {
           let width = tabs[i];
-
           if (monospaced && widths.tabs[i] === monospacedWidth) {
             monospacedWidth = widths.tabs.slice(0, lastTabIndex).reduce((max, tab) => tab > max ? tab : max, 0);
             tabs = tabs.map(getMonospacedWidth);
             width += (widths.tabs[i] - monospacedWidth) * lastTabIndex;
           }
-
           if (collapsedLength === 0) {
             width -= more;
           }
-
           freeSpace += width;
           ++collapsedLength;
           --lastTabIndex;
-
           if (freeSpace > 0) {
             break;
           }
@@ -127,30 +110,24 @@ class Tabs extends Component {
         // expand
         for (let i = lastTabIndex + 1; i < tabsNumber; ++i) {
           let width = tabs[i];
-
           if (monospaced && widths.tabs[i] > monospacedWidth) {
             monospacedWidth = widths.tabs[i];
             tabs = tabs.map(getMonospacedWidth);
             width = monospacedWidth + (monospacedWidth - width) * (lastTabIndex + 1);
           }
-
           if (collapsedLength === 1) {
             width -= more;
           }
-
           if (freeSpace <= width) {
             break;
           }
-
           freeSpace -= width;
           --collapsedLength;
           ++lastTabIndex;
         }
       }
-
       if (collapsedLength || compact) {
         spaceForAddon = container - getListWidth();
-
         if (collapsedLength) {
           compact = true;
         } else if (spaceForAddon >= addonMinWidth) {
@@ -158,7 +135,6 @@ class Tabs extends Component {
           searching = false;
         }
       }
-
       const newState = {
         compact,
         searching,
@@ -166,15 +142,12 @@ class Tabs extends Component {
         monospacedWidth
       };
       const keys = Object.keys(newState);
-
       for (let i = 0; i < keys.length; i++) {
         const key = keys[i];
-
         if (JSON.stringify(newState[key]) === JSON.stringify(this.state[key])) {
           delete newState[key];
         }
       }
-
       if (Object.keys(newState).length) {
         this.setState(newState, () => {
           if (typeof newState.collapsedLength !== 'undefined' && this.state.collapsedLength !== newState.collapsedLength) {
@@ -183,24 +156,20 @@ class Tabs extends Component {
         });
       }
     });
-
     _defineProperty(this, "handleStartSearching", () => {
       this.setState({
         searching: true
       });
     });
-
     _defineProperty(this, "handleCancelSearching", () => {
       this.setState({
         searching: false
       }, this.checkAdaptive);
     });
-
     _defineProperty(this, "handleResize", () => {
       const {
         baseClassName
       } = this.props;
-
       if (this.tabsnavRef) {
         const tabElements = this.tabsnavRef.querySelectorAll(`.${baseClassName}__tab-list--fake .${baseClassName}__tab`);
         const more = tabElements[tabElements.length - 1];
@@ -212,15 +181,12 @@ class Tabs extends Component {
           margin: more.offsetWidth - more.querySelector(`.${baseClassName}__link`).offsetWidth
         };
       }
-
       this.checkAdaptive();
     });
-
     _defineProperty(this, "handleAddonResize", contentRect => {
       this.addon = contentRect.bounds;
       this.checkAdaptive();
     });
-
     _defineProperty(this, "renderTabItem", (tab, index, tabMode) => {
       const {
         baseClassName
@@ -229,11 +195,9 @@ class Tabs extends Component {
         monospacedWidth,
         active
       } = this.state;
-
       if (!tab || tab.type !== Tab) {
         return null;
       }
-
       const {
         title,
         label,
@@ -251,9 +215,13 @@ class Tabs extends Component {
       });
       const tabLabel = this.renderTabLabel(tabMode, label);
       const tabClose = this.renderTabClose(tabMode, onClose);
-
       const handleClick = () => this.onClick(index + 1);
-
+      tabProps.tabIndex = tabProps.tabIndex || 0;
+      tabProps.onKeyDown = wrapFunction(tabProps.onKeyDown, e => {
+        if (e.key === 'Enter') {
+          e.currentTarget.click();
+        }
+      });
       if (tabMode === 'menu-item') {
         return /*#__PURE__*/React.createElement(MenuItem, _extends({
           key: key,
@@ -265,7 +233,6 @@ class Tabs extends Component {
           component: Tag
         }, tabProps), title);
       }
-
       return /*#__PURE__*/React.createElement("li", {
         key: key,
         className: classNames(`${baseClassName}__tab`, selected && `${baseClassName}__tab--selected`, tabClose && `${baseClassName}__tab--closable`),
@@ -273,7 +240,6 @@ class Tabs extends Component {
       }, /*#__PURE__*/React.createElement(Tag, _extends({
         className: `${baseClassName}__link`,
         role: "tab",
-        tabIndex: 0,
         "aria-selected": selected || null,
         style: {
           width: monospacedWidth
@@ -284,7 +250,6 @@ class Tabs extends Component {
       }, title), tabLabel, tabClose));
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       active
@@ -293,21 +258,17 @@ class Tabs extends Component {
       prevActive
     } = state;
     const nextState = {};
-
     if (active && active !== prevActive) {
       nextState.active = active;
     }
-
     nextState.prevActive = active;
     return nextState;
   }
-
   componentDidUpdate() {
     if (!this.widths || this.props.children.length !== this.widths.tabs.length) {
       setTimeout(() => this.handleResize(), 0);
     }
   }
-
   onClick(active) {
     this.setState({
       active
@@ -316,38 +277,31 @@ class Tabs extends Component {
     const {
       onActivate
     } = tab.props;
-
     if (onActivate) {
       onActivate();
     }
   }
-
   renderTabLabel(tabMode, label) {
     const {
       baseClassName
     } = this.props;
-
     if (typeof label === 'string') {
       return /*#__PURE__*/React.createElement(Label, {
         className: `${baseClassName}__${tabMode}-label`,
         intent: "danger"
       }, label);
     }
-
     if ( /*#__PURE__*/isValidElement(label)) {
       return /*#__PURE__*/cloneElement(label, {
         className: classNames(`${baseClassName}__${tabMode}-label`, label.props.className)
       });
     }
-
     return null;
   }
-
   renderTabClose(tabMode, onClose) {
     const {
       baseClassName
     } = this.props;
-
     if (typeof onClose === 'function') {
       return /*#__PURE__*/React.createElement("button", {
         className: `${baseClassName}__${tabMode}-close`,
@@ -362,28 +316,23 @@ class Tabs extends Component {
         name: "cross-mark"
       }));
     }
-
     return null;
   }
-
   renderFakeTabs() {
     const {
       baseClassName,
       children
     } = this.props;
     const childrenCount = Children.count(children);
-
     if (!childrenCount) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("ul", {
       className: classNames(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`)
     }, Children.map(children, tab => {
       if (!tab || tab.type !== Tab) {
         return null;
       }
-
       const {
         title,
         label,
@@ -416,7 +365,6 @@ class Tabs extends Component {
       name: "three-dots-horizontal"
     }))));
   }
-
   createTabItems() {
     const {
       children
@@ -437,7 +385,6 @@ class Tabs extends Component {
       hiddenItems
     };
   }
-
   renderTabList() {
     const {
       baseClassName,
@@ -446,11 +393,9 @@ class Tabs extends Component {
     const {
       active
     } = this.state;
-
     if (!Children.toArray(children).length) {
       return null;
     }
-
     const {
       visibleItems,
       hiddenItems
@@ -477,7 +422,6 @@ class Tabs extends Component {
       name: "three-dots-horizontal"
     })))));
   }
-
   renderSearchBar(searchProps) {
     const {
       baseClassName,
@@ -487,16 +431,13 @@ class Tabs extends Component {
       compact
     } = this.state;
     const clone = /*#__PURE__*/cloneElement(search, searchProps);
-
     if (compact) {
       return /*#__PURE__*/React.createElement("div", {
         className: `${baseClassName}__search`
       }, clone);
     }
-
     return clone;
   }
-
   render() {
     const {
       baseClassName,
@@ -515,22 +456,18 @@ class Tabs extends Component {
       searching
     } = this.state;
     const childrenCount = Children.count(children);
-
     if (!childrenCount) {
       return null;
     }
-
     let addonBlock = addon || placeholder;
     const addonProps = {};
     let searchBlock = null;
-
     if (search) {
       const searchProps = {
         collapsable: compact,
         onExpand: this.handleStartSearching,
         onCollapse: this.handleCancelSearching
       };
-
       if (compact) {
         if (searching) {
           searchProps.maxWidth = null;
@@ -540,7 +477,6 @@ class Tabs extends Component {
         } else {
           searchProps.onSearch = this.handleStartSearching;
         }
-
         searchBlock = this.renderSearchBar(searchProps);
       } else if (addonBlock) {
         searchProps.key = 1;
@@ -554,7 +490,6 @@ class Tabs extends Component {
         addonBlock = this.renderSearchBar(searchProps);
       }
     }
-
     return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
       value: compact
     }, /*#__PURE__*/React.createElement("div", _extends({
@@ -562,46 +497,51 @@ class Tabs extends Component {
     }, props), /*#__PURE__*/React.createElement(Measure, {
       onResize: this.handleResize,
       innerRef: ref => this.tabsnavRef = ref
-    }, ({
-      measureRef
-    }) => /*#__PURE__*/React.createElement("div", {
-      className: classNames(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
-      ref: measureRef
-    }, this.renderTabList(), /*#__PURE__*/React.createElement(Measure, {
-      onResize: this.handleResize
-    }, ({
-      measureRef: ref
-    }) => /*#__PURE__*/cloneElement(this.renderFakeTabs(), {
-      ref
-    })), searchBlock, addonBlock && /*#__PURE__*/React.createElement(Measure, {
-      onResize: this.handleAddonResize,
-      bounds: true
-    }, ({
-      measureRef: ref
-    }) => /*#__PURE__*/React.createElement("div", _extends({
-      className: `${baseClassName}__addon`,
-      ref: ref
-    }, addonProps), addonBlock)))), /*#__PURE__*/React.createElement("div", {
+    }, _ref => {
+      let {
+        measureRef
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
+        ref: measureRef
+      }, this.renderTabList(), /*#__PURE__*/React.createElement(Measure, {
+        onResize: this.handleResize
+      }, _ref2 => {
+        let {
+          measureRef: ref
+        } = _ref2;
+        return /*#__PURE__*/cloneElement(this.renderFakeTabs(), {
+          ref
+        });
+      }), searchBlock, addonBlock && /*#__PURE__*/React.createElement(Measure, {
+        onResize: this.handleAddonResize,
+        bounds: true
+      }, _ref3 => {
+        let {
+          measureRef: ref
+        } = _ref3;
+        return /*#__PURE__*/React.createElement("div", _extends({
+          className: `${baseClassName}__addon`,
+          ref: ref
+        }, addonProps), addonBlock);
+      }));
+    }), /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__tab-panel`,
       role: "tabpanel"
     }, Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null))));
   }
-
 }
-
 Tabs.propTypes = {
   /**
    * Number of active tab
    * @since 0.0.35
    */
   active: PropTypes.number,
-
   /**
    * Addon for search bar, dropdown etc.
    * @since 0.0.58
    */
   addon: PropTypes.element,
-
   /**
    * Placeholder for search bar, dropdown etc.
    *
@@ -609,36 +549,30 @@ Tabs.propTypes = {
    * @since 0.0.42
    */
   placeholder: PropTypes.element,
-
   /**
    * Minimum add-on width in pixels
    * @since 0.0.58
    */
   addonMinWidth: PropTypes.number,
-
   /**
    * Monospaced version of tabs (all visible tabs as wide as widest of them)
    * @since 0.0.58
    */
   monospaced: PropTypes.bool,
-
   /**
    * [SearchBar](#!/SearchBar) element
    * @since 0.0.58
    */
   search: PropTypes.element,
-
   /**
    * [Tabs](#!/Tab)
    * @since 0.0.47
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */

package/esm/components/Tabs/Tabs.stories.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import Tabs from './Tabs';
 import Tab from './Tab';

package/esm/components/Tabs/index.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+
 export { default } from './Tabs';
 export { default as Tab } from './Tab';
 export { default as SearchBar } from './SearchBar';

package/esm/components/Text/Text.js

@@ -1,32 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import OnDarkContext from '../OnDarkContext';
-
 /**
  * `Text` component is used for displaying inline text. For text blocks use [Paragraph](#!/Paragraph).
  * @since 1.1.0
  */
-const Text = ({
-  baseClassName = `${CLS_PREFIX}text`,
-  className,
-  children,
-  component: Tag,
-  intent,
-  fontSize,
-  bold = false,
-  italic = false,
-  mark = false,
-  truncate = false,
-  nowrap = false,
-  ...props
-}) => {
+const Text = _ref => {
+  let {
+    baseClassName = `${CLS_PREFIX}text`,
+    className,
+    children,
+    component: Tag,
+    intent,
+    fontSize,
+    bold = false,
+    italic = false,
+    mark = false,
+    truncate = false,
+    nowrap = false,
+    ...props
+  } = _ref;
   if (!Tag) {
     Tag = mark ? 'mark' : 'span';
   }
-
   const onDark = useContext(OnDarkContext);
   return /*#__PURE__*/React.createElement(Tag, _extends({
     className: classNames(baseClassName, {
@@ -41,5 +41,4 @@ const Text = ({
     }, className)
   }, props), children);
 };
-
 export default Text;

package/esm/components/Text/index.js

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