@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Tabs/SearchBar.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 import { isRtl } from '../../utils';
 import React, { Component, cloneElement, Children, Fragment, useContext } from 'react';
 import PropTypes from 'prop-types';
@@ -16,76 +17,63 @@ import Menu, { MenuItem, MenuSelectableItem } from '../Menu';
 import ResponsiveContext from '../ResponsiveContext';
 import DistractionFreeModeContext from '../DistractionFreeModeContext';
 import { safeInvoke } from '../utils';
-
 /**
  * `SearchBar` component is used for providing type-as-you-go search.
  * @since 0.0.58
  */
 class SearchBar extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       focused: false,
       overMenu: false,
       value: this.props.inputProps.value || '',
       highlightedValue: null
     });
-
     _defineProperty(this, "isFocusScheduled", false);
-
     _defineProperty(this, "keyboardNavigation", key => {
       const {
         onItemSelect,
         results
       } = this.props;
       const highlightedValue = this.getHighlightedValue();
-
       if (!results || !onItemSelect) {
         return;
       }
-
       const res = this.getResults();
       const currentIndex = res.indexOf(highlightedValue);
       let nextIndex;
-
       if (key === 'ArrowUp') {
         nextIndex = Math.max(currentIndex - 1, 0);
       } else if (key === 'ArrowDown') {
         nextIndex = Math.min(currentIndex + 1, res.length - 1);
       }
-
       this.setState({
         highlightedValue: currentIndex === -1 ? null : res[nextIndex]
       });
     });
-
     _defineProperty(this, "handleFocus", () => {
       this.setState({
         focused: true
       });
       this.search && this.search.focus();
     });
-
     _defineProperty(this, "handleBlur", () => {
       this.setState({
         focused: false
       });
       this.search && this.search.blur();
     });
-
     _defineProperty(this, "handleMenuMouseOver", () => {
       this.setState({
         overMenu: true
       });
     });
-
     _defineProperty(this, "handleMenuMouseOut", () => {
       this.setState({
         overMenu: false
       });
     });
-
     _defineProperty(this, "handleKeyDown", e => {
       const {
         onTyping
@@ -93,21 +81,17 @@ class SearchBar extends Component {
       const {
         value
       } = e.target;
-
       if (['Enter', 'Escape', 'ArrowUp', 'ArrowDown'].indexOf(e.key) !== -1) {
         this.checkKeys(e.key);
         return;
       }
-
       this.setState({
         value
       });
-
       if (onTyping) {
         onTyping(value, () => this.clearInput());
       }
     });
-
     _defineProperty(this, "handleSearch", () => {
       const {
         onSearch,
@@ -116,19 +100,16 @@ class SearchBar extends Component {
       const {
         value
       } = this.state;
-
       if (onSearch) {
         onSearch(value, () => this.clearInput());
       } else if (onTyping) {
         onTyping(value, () => this.clearInput());
       }
     });
-
     _defineProperty(this, "handleReset", () => {
       this.clearInput();
       this.handleFocus();
     });
-
     _defineProperty(this, "handleSelect", value => () => {
       const {
         onItemSelect
@@ -137,14 +118,12 @@ class SearchBar extends Component {
         highlightedValue: null
       });
       this.handleBlur();
-
       if (onItemSelect) {
         onItemSelect(value, () => this.clearInput());
       } else {
         this.clearInput();
       }
     });
-
     _defineProperty(this, "handleExpand", () => {
       const {
         onExpand,
@@ -152,25 +131,21 @@ class SearchBar extends Component {
       } = this.props;
       this.isFocusScheduled = true;
       safeInvoke(onExpand);
-
       if (distractionFreeMode) {
         distractionFreeMode.toggle();
       }
     });
-
     _defineProperty(this, "handleCollapse", () => {
       const {
         onCollapse,
         distractionFreeMode
       } = this.props;
       safeInvoke(onCollapse);
-
       if (distractionFreeMode) {
         distractionFreeMode.toggle();
       }
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       inputProps: {
@@ -183,74 +158,59 @@ class SearchBar extends Component {
       } = {}
     } = state;
     const nextState = {};
-
     if (inputPropsValue !== prevInputPropsValue) {
       nextState.value = inputPropsValue;
     }
-
     nextState.prevInputProps = props.inputProps;
     return nextState;
   }
-
   componentDidUpdate() {
     if (this.isFocusScheduled) {
       this.handleFocus();
       this.isFocusScheduled = false;
     }
   }
-
   isResponsive() {
     return this.props.responsive;
   }
-
-  getResults(innerResults = false) {
+  getResults() {
+    let innerResults = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     const {
       results
     } = this.props;
-
     if (!results) {
       return [];
     }
-
     if (results.type === Menu || innerResults) {
       let res = [];
       const children = innerResults || results.props.children;
-
       for (let i = 0; i < children.length; i++) {
         const child = children[i];
-
         if (!child) {
           continue;
         }
-
         if (child instanceof Array) {
           res = res.concat(this.getResults(child));
         } else if (child.type === MenuItem || child.type === MenuSelectableItem) {
           res.push(child.key);
         }
       }
-
       return res;
     }
-
     return results.map(item => item.value);
   }
-
   getHighlightedValue() {
     return this.state.highlightedValue || this.getResults()[0];
   }
-
   searchAction() {
     const {
       onItemSelect,
       results
     } = this.props;
     const highlightedValue = this.getHighlightedValue();
-
     if (onItemSelect && results) {
       const res = this.getResults();
       const currentIndex = res.indexOf(highlightedValue);
-
       if (currentIndex === -1) {
         this.handleSearch();
       } else {
@@ -260,7 +220,6 @@ class SearchBar extends Component {
       this.handleSearch();
     }
   }
-
   checkKeys(key) {
     if (key === 'Enter') {
       this.searchAction();
@@ -275,33 +234,26 @@ class SearchBar extends Component {
       this.keyboardNavigation(key);
     }
   }
-
   clearInput() {
     this.setState({
       value: ''
     }, this.handleSearch);
   }
-
   elementsIndexToKeyMapping(elements) {
     let result = [];
-
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
-
       if (!element) {
         continue;
       }
-
       if (element instanceof Array) {
         result = result.concat(this.elementsIndexToKeyMapping(element));
       } else {
         result.push(element.key);
       }
     }
-
     return result;
   }
-
   renderResults() {
     const {
       baseClassName,
@@ -312,11 +264,9 @@ class SearchBar extends Component {
       overMenu
     } = this.state;
     const highlightedValue = this.getHighlightedValue();
-
     if (!results || results.length === 0) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(Menu, {
       className: classNames(`${baseClassName}__results`, {
         [`${baseClassName}__results--hidden`]: !focused && !overMenu
@@ -329,7 +279,6 @@ class SearchBar extends Component {
       onClick: this.handleSelect(item.value)
     }, item.title)));
   }
-
   renderResultsMenu() {
     const {
       baseClassName,
@@ -341,11 +290,9 @@ class SearchBar extends Component {
       overMenu
     } = this.state;
     const highlightedValue = this.getHighlightedValue();
-
     if (!results) {
       return null;
     }
-
     return /*#__PURE__*/cloneElement(results, {
       className: classNames(`${baseClassName}__results`, {
         [`${baseClassName}__results--hidden`]: !focused && !overMenu
@@ -362,12 +309,10 @@ class SearchBar extends Component {
             active: child.key === highlightedValue
           });
         }
-
         return child;
       })
     });
   }
-
   render() {
     const {
       baseClassName,
@@ -439,44 +384,36 @@ class SearchBar extends Component {
       }))
     })))), results && results.type === Menu ? this.renderResultsMenu() : this.renderResults());
   }
-
 }
-
 const propTypes = {
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
   baseClassName: PropTypes.string,
-
   /**
    * Maximum width of SearchBar
    * @since 0.1.0
    */
   maxWidth: PropTypes.number,
-
   /**
    * Minimum width of SearchBar
    * @since 0.1.0
    */
   minWidth: PropTypes.number,
-
   /**
    * Should disable input and show spinner or not.
    * @since 0.1.0
    */
   loading: PropTypes.bool,
-
   /**
    * Should collapse input or not. Used for control in independence of context.
    * @since 0.1.0
    */
   responsive: PropTypes.bool,
-
   /**
    * Callback for pressing 'Enter' key or 'Search' button.
    *
@@ -486,7 +423,6 @@ const propTypes = {
    * @since 0.1.0
    */
   onSearch: PropTypes.func,
-
   /**
    * Callback for pressing any key in input. Used for a live search.
    *
@@ -496,7 +432,6 @@ const propTypes = {
    * @since 0.1.0
    */
   onTyping: PropTypes.func,
-
   /**
    * Callback for selecting menu item with mouse click or key pressing.
    *
@@ -506,25 +441,21 @@ const propTypes = {
    * @since 0.1.0
    */
   onItemSelect: PropTypes.func,
-
   /**
    * Should render toggle button or not.
    * @since 2.2.0
    */
   collapsable: PropTypes.bool,
-
   /**
    * Callback for pressing toggle button (in normal mode).
    * @since 2.2.0
    */
   onCollapse: PropTypes.func,
-
   /**
    * Callback for pressing toggle button (in collapsed mode).
    * @since 2.2.0
    */
   onExpand: PropTypes.func,
-
   /**
    * Results to display.
    * Could be specified by array of objects with "value" and "title" properties or by Menu component.
@@ -535,7 +466,6 @@ const propTypes = {
     value: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired
   })), PropTypes.element]),
-
   /**
    * Props of underlying input element.
    * @since 0.4.1
@@ -558,7 +488,8 @@ const defaultProps = {
   results: undefined,
   inputProps: {}
 };
-SearchBar.propTypes = { ...propTypes,
+SearchBar.propTypes = {
+  ...propTypes,
   distractionFreeMode: PropTypes.shape({
     enabled: PropTypes.bool.isRequired,
     toggle: PropTypes.func.isRequired
@@ -567,7 +498,6 @@ SearchBar.propTypes = { ...propTypes,
 SearchBar.defaultProps = {
   distractionFreeMode: undefined
 };
-
 const SearchBarWrapper = props => {
   const distractionFreeMode = useContext(DistractionFreeModeContext);
   let responsive = useContext(ResponsiveContext);
@@ -577,7 +507,6 @@ const SearchBarWrapper = props => {
     distractionFreeMode: distractionFreeMode
   }));
 };
-
 SearchBarWrapper.displayName = 'SearchBar';
 SearchBarWrapper.propTypes = propTypes;
 SearchBarWrapper.defaultProps = defaultProps;

package/esm/components/Tabs/Tab.js

@@ -1,8 +1,9 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-
 /* eslint-disable react/no-unused-prop-types */
+
 import React from 'react';
 import PropTypes from 'prop-types';
+
 /**
  * `Tab` is an individual element of the [Tabs](#!/Tabs) component.
  *
@@ -11,48 +12,43 @@ import PropTypes from 'prop-types';
  * You can make `Tabs` closeable, for example, if you are using them for opening and displaying files.
  * @since 0.0.35
  */
-
-const Tab = ({
-  children
-}) => /*#__PURE__*/React.createElement("div", null, children);
-
+const Tab = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", null, children);
+};
 Tab.propTypes = {
   /**
    * Tab title
    * @since 0.0.35
    */
   title: PropTypes.node.isRequired,
-
   /**
    * Label in tab title
    * @since 0.0.42
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-
   /**
    * Name of icon or Icon component for tab
    * @since 0.0.42
    */
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-
   /**
    * Activate callback.
    * @since 0.0.43
    */
   onActivate: PropTypes.func,
-
   /**
    * Close callback
    * @since 0.0.58
    */
   onClose: PropTypes.func,
-
   /**
    * Component to render as the root element.
    * @since 2.5.1
    */
   component: PropTypes.elementType,
-
   /**
    * Tab content
    * @since 0.0.47