@plesk/ui-library 3.31.0 → 3.31.2

package/cjs/components/Tabs/Tabs.js

@@ -1,48 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _reactMeasure = _interopRequireDefault(require("react-measure"));
-
 var _constants = require("../../constants");
-
 var _Icon = _interopRequireWildcard(require("../Icon"));
-
 var _Label = _interopRequireDefault(require("../Label"));
-
 var _Dropdown = _interopRequireDefault(require("../Dropdown"));
-
 var _Menu = _interopRequireWildcard(require("../Menu"));
-
 var _Tab = _interopRequireDefault(require("./Tab"));
-
 var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
-
+var _utils = require("../utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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-2021. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 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
@@ -50,10 +36,9 @@ const COLLAPSED_SEARCH_WIDTH = 60;
  * group name and a navigation button.
  * @since 0.0.35
  */
-
 class Tabs extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     (0, _defineProperty2.default)(this, "state", {
       active: this.props.active || 1,
       collapsedLength: 0,
@@ -78,13 +63,10 @@ class Tabs extends _react.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 {
@@ -95,53 +77,40 @@ class Tabs extends _react.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;
           }
@@ -150,30 +119,24 @@ class Tabs extends _react.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) {
@@ -181,7 +144,6 @@ class Tabs extends _react.Component {
           searching = false;
         }
       }
-
       const newState = {
         compact,
         searching,
@@ -189,15 +151,12 @@ class Tabs extends _react.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) {
@@ -220,7 +179,6 @@ class Tabs extends _react.Component {
       const {
         baseClassName
       } = this.props;
-
       if (this.tabsnavRef) {
         const tabElements = this.tabsnavRef.querySelectorAll(`.${baseClassName}__tab-list--fake .${baseClassName}__tab`);
         const more = tabElements[tabElements.length - 1];
@@ -232,7 +190,6 @@ class Tabs extends _react.Component {
           margin: more.offsetWidth - more.querySelector(`.${baseClassName}__link`).offsetWidth
         };
       }
-
       this.checkAdaptive();
     });
     (0, _defineProperty2.default)(this, "handleAddonResize", contentRect => {
@@ -247,11 +204,9 @@ class Tabs extends _react.Component {
         monospacedWidth,
         active
       } = this.state;
-
       if (!tab || tab.type !== _Tab.default) {
         return null;
       }
-
       const {
         title,
         label,
@@ -263,17 +218,19 @@ class Tabs extends _react.Component {
       } = tab.props;
       const selected = index + 1 === active;
       const key = index.toString();
-
       const tabIcon = _Icon.default.create(icon, {
         size: _Icon.ICON_SIZE_16,
         className: `${baseClassName}__tab-icon`
       });
-
       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 = (0, _utils.wrapFunction)(tabProps.onKeyDown, e => {
+        if (e.key === 'Enter') {
+          e.currentTarget.click();
+        }
+      });
       if (tabMode === 'menu-item') {
         return /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, (0, _extends2.default)({
           key: key,
@@ -285,7 +242,6 @@ class Tabs extends _react.Component {
           component: Tag
         }, tabProps), title);
       }
-
       return /*#__PURE__*/_react.default.createElement("li", {
         key: key,
         className: (0, _classnames.default)(`${baseClassName}__tab`, selected && `${baseClassName}__tab--selected`, tabClose && `${baseClassName}__tab--closable`),
@@ -293,7 +249,6 @@ class Tabs extends _react.Component {
       }, /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
         className: `${baseClassName}__link`,
         role: "tab",
-        tabIndex: 0,
         "aria-selected": selected || null,
         style: {
           width: monospacedWidth
@@ -304,7 +259,6 @@ class Tabs extends _react.Component {
       }, title), tabLabel, tabClose));
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       active
@@ -313,21 +267,17 @@ class Tabs extends _react.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
@@ -336,38 +286,31 @@ class Tabs extends _react.Component {
     const {
       onActivate
     } = tab.props;
-
     if (onActivate) {
       onActivate();
     }
   }
-
   renderTabLabel(tabMode, label) {
     const {
       baseClassName
     } = this.props;
-
     if (typeof label === 'string') {
       return /*#__PURE__*/_react.default.createElement(_Label.default, {
         className: `${baseClassName}__${tabMode}-label`,
         intent: "danger"
       }, label);
     }
-
     if ( /*#__PURE__*/(0, _react.isValidElement)(label)) {
       return /*#__PURE__*/(0, _react.cloneElement)(label, {
         className: (0, _classnames.default)(`${baseClassName}__${tabMode}-label`, label.props.className)
       });
     }
-
     return null;
   }
-
   renderTabClose(tabMode, onClose) {
     const {
       baseClassName
     } = this.props;
-
     if (typeof onClose === 'function') {
       return /*#__PURE__*/_react.default.createElement("button", {
         className: `${baseClassName}__${tabMode}-close`,
@@ -382,29 +325,23 @@ class Tabs extends _react.Component {
         name: "cross-mark"
       }));
     }
-
     return null;
   }
-
   renderFakeTabs() {
     const {
       baseClassName,
       children
     } = this.props;
-
     const childrenCount = _react.Children.count(children);
-
     if (!childrenCount) {
       return null;
     }
-
     return /*#__PURE__*/_react.default.createElement("ul", {
       className: (0, _classnames.default)(`${baseClassName}__tab-list`, `${baseClassName}__tab-list--fake`)
     }, _react.Children.map(children, tab => {
       if (!tab || tab.type !== _Tab.default) {
         return null;
       }
-
       const {
         title,
         label,
@@ -413,12 +350,10 @@ class Tabs extends _react.Component {
         onClose,
         ...tabProps
       } = tab.props;
-
       const iconBlock = _Icon.default.create(icon, {
         size: _Icon.ICON_SIZE_16,
         className: `${baseClassName}__tab-icon`
       });
-
       const closeBlock = this.renderTabClose('tab', onClose);
       return /*#__PURE__*/_react.default.createElement("li", {
         key: title,
@@ -439,7 +374,6 @@ class Tabs extends _react.Component {
       name: "three-dots-horizontal"
     }))));
   }
-
   createTabItems() {
     const {
       children
@@ -450,19 +384,16 @@ class Tabs extends _react.Component {
     const visibleItems = [];
     const hiddenItems = [];
     const lastTabIndex = _react.Children.count(children) - 1 - collapsedLength;
-
     _react.Children.forEach(children, (child, index) => {
       const hidden = index > lastTabIndex;
       const tabMode = hidden ? 'menu-item' : 'tab';
       (hidden ? hiddenItems : visibleItems).push(this.renderTabItem(child, index, tabMode));
     });
-
     return {
       visibleItems,
       hiddenItems
     };
   }
-
   renderTabList() {
     const {
       baseClassName,
@@ -471,11 +402,9 @@ class Tabs extends _react.Component {
     const {
       active
     } = this.state;
-
     if (!_react.Children.toArray(children).length) {
       return null;
     }
-
     const {
       visibleItems,
       hiddenItems
@@ -502,7 +431,6 @@ class Tabs extends _react.Component {
       name: "three-dots-horizontal"
     })))));
   }
-
   renderSearchBar(searchProps) {
     const {
       baseClassName,
@@ -512,16 +440,13 @@ class Tabs extends _react.Component {
       compact
     } = this.state;
     const clone = /*#__PURE__*/(0, _react.cloneElement)(search, searchProps);
-
     if (compact) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: `${baseClassName}__search`
       }, clone);
     }
-
     return clone;
   }
-
   render() {
     const {
       baseClassName,
@@ -539,24 +464,19 @@ class Tabs extends _react.Component {
       compact,
       searching
     } = this.state;
-
     const childrenCount = _react.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;
@@ -566,7 +486,6 @@ class Tabs extends _react.Component {
         } else {
           searchProps.onSearch = this.handleStartSearching;
         }
-
         searchBlock = this.renderSearchBar(searchProps);
       } else if (addonBlock) {
         searchProps.key = 1;
@@ -580,7 +499,6 @@ class Tabs extends _react.Component {
         addonBlock = this.renderSearchBar(searchProps);
       }
     }
-
     return /*#__PURE__*/_react.default.createElement(_ResponsiveContext.default.Provider, {
       value: compact
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
@@ -588,46 +506,51 @@ class Tabs extends _react.Component {
     }, props), /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
       onResize: this.handleResize,
       innerRef: ref => this.tabsnavRef = ref
-    }, ({
-      measureRef
-    }) => /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
-      ref: measureRef
-    }, this.renderTabList(), /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
-      onResize: this.handleResize
-    }, ({
-      measureRef: ref
-    }) => /*#__PURE__*/(0, _react.cloneElement)(this.renderFakeTabs(), {
-      ref
-    })), searchBlock, addonBlock && /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
-      onResize: this.handleAddonResize,
-      bounds: true
-    }, ({
-      measureRef: ref
-    }) => /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-      className: `${baseClassName}__addon`,
-      ref: ref
-    }, addonProps), addonBlock)))), /*#__PURE__*/_react.default.createElement("div", {
+    }, _ref => {
+      let {
+        measureRef
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(`${baseClassName}__nav`, compact && `${baseClassName}__nav--compact`, searching && `${baseClassName}__nav--searching`, search && `${baseClassName}__nav--search`),
+        ref: measureRef
+      }, this.renderTabList(), /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
+        onResize: this.handleResize
+      }, _ref2 => {
+        let {
+          measureRef: ref
+        } = _ref2;
+        return /*#__PURE__*/(0, _react.cloneElement)(this.renderFakeTabs(), {
+          ref
+        });
+      }), searchBlock, addonBlock && /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
+        onResize: this.handleAddonResize,
+        bounds: true
+      }, _ref3 => {
+        let {
+          measureRef: ref
+        } = _ref3;
+        return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+          className: `${baseClassName}__addon`,
+          ref: ref
+        }, addonProps), addonBlock);
+      }));
+    }), /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__tab-panel`,
       role: "tabpanel"
     }, _react.Children.map(children, (tab, index) => index + 1 === this.state.active ? tab : null))));
   }
-
 }
-
 Tabs.propTypes = {
   /**
    * Number of active tab
    * @since 0.0.35
    */
   active: _propTypes.default.number,
-
   /**
    * Addon for search bar, dropdown etc.
    * @since 0.0.58
    */
   addon: _propTypes.default.element,
-
   /**
    * Placeholder for search bar, dropdown etc.
    *
@@ -635,36 +558,30 @@ Tabs.propTypes = {
    * @since 0.0.42
    */
   placeholder: _propTypes.default.element,
-
   /**
    * Minimum add-on width in pixels
    * @since 0.0.58
    */
   addonMinWidth: _propTypes.default.number,
-
   /**
    * Monospaced version of tabs (all visible tabs as wide as widest of them)
    * @since 0.0.58
    */
   monospaced: _propTypes.default.bool,
-
   /**
    * [SearchBar](#!/SearchBar) element
    * @since 0.0.58
    */
   search: _propTypes.default.element,
-
   /**
    * [Tabs](#!/Tab)
    * @since 0.0.47
    */
   children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element]),
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
    * @ignore
    */

package/cjs/components/Tabs/Tabs.stories.js

@@ -1,21 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Basic = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Tabs = _interopRequireDefault(require("./Tabs"));
-
 var _Tab = _interopRequireDefault(require("./Tab"));
-
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-const Basic = args => /*#__PURE__*/_react.default.createElement(_Tabs.default, args);
 
+const Basic = args => /*#__PURE__*/_react.default.createElement(_Tabs.default, args);
 exports.Basic = Basic;
 Basic.args = {
   children: Array.from({

package/cjs/components/Tabs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,9 +22,6 @@ Object.defineProperty(exports, "default", {
     return _Tabs.default;
   }
 });
-
 var _Tabs = _interopRequireDefault(require("./Tabs"));
-
 var _Tab = _interopRequireDefault(require("./Tab"));
-
 var _SearchBar = _interopRequireDefault(require("./SearchBar"));

package/cjs/components/Text/Text.js

@@ -1,50 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _constants = require("../../constants");
-
 var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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.
 
 /**
  * `Text` component is used for displaying inline text. For text blocks use [Paragraph](#!/Paragraph).
  * @since 1.1.0
  */
-const Text = ({
-  baseClassName = `${_constants.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 = `${_constants.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 = (0, _react.useContext)(_OnDarkContext.default);
   return /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
     className: (0, _classnames.default)(baseClassName, {
@@ -59,6 +50,5 @@ const Text = ({
     }, className)
   }, props), children);
 };
-
 var _default = Text;
 exports.default = _default;