@plesk/ui-library 3.35.5 → 3.35.7

package/esm/components/Tabs/SearchBar.js

@@ -1,18 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { isRtl } from '../../utils';
-import React, { Component, cloneElement, Children, useContext } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Children, cloneElement, Component, useContext } from 'react';
 import { CLS_PREFIX } from '../../constants';
+import { isRtl } from '../../utils';
+import Badge from '../Badge';
+import Button from '../Button';
 import ButtonGroup from '../ButtonGroup';
+import DistractionFreeModeContext from '../DistractionFreeModeContext';
 import Input from '../Input';
-import Button from '../Button';
-import Badge from '../Badge';
 import Menu, { MenuItem, MenuSelectableItem } from '../Menu';
 import ResponsiveContext from '../ResponsiveContext';
-import DistractionFreeModeContext from '../DistractionFreeModeContext';
 import { safeInvoke } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -27,10 +26,11 @@ class SearchBar extends Component {
     _defineProperty(this, "state", {
       focused: false,
       overMenu: false,
-      value: this.props.inputProps.value || '',
+      value: `${this.props.inputProps?.value || ''}`,
       highlightedValue: null
     });
     _defineProperty(this, "isFocusScheduled", false);
+    _defineProperty(this, "search", void 0);
     _defineProperty(this, "keyboardNavigation", key => {
       const {
         onItemSelect,
@@ -45,7 +45,7 @@ class SearchBar extends Component {
       let nextIndex;
       if (key === 'ArrowUp') {
         nextIndex = Math.max(currentIndex - 1, 0);
-      } else if (key === 'ArrowDown') {
+      } else {
         nextIndex = Math.min(currentIndex + 1, res.length - 1);
       }
       this.setState({
@@ -80,7 +80,7 @@ class SearchBar extends Component {
       } = this.props;
       const {
         value
-      } = e.target;
+      } = e.currentTarget;
       if (['Enter', 'Escape', 'ArrowUp', 'ArrowDown'].indexOf(e.key) !== -1) {
         this.checkKeys(e.key);
         return;
@@ -159,7 +159,7 @@ class SearchBar extends Component {
     } = state;
     const nextState = {};
     if (inputPropsValue !== prevInputPropsValue) {
-      nextState.value = inputPropsValue;
+      nextState.value = inputPropsValue ?? '';
     }
     nextState.prevInputProps = props.inputProps;
     return nextState;
@@ -173,34 +173,41 @@ class SearchBar extends Component {
   isResponsive() {
     return this.props.responsive;
   }
-  getResults() {
-    let innerResults = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  getResults(innerResults) {
     const {
       results
     } = this.props;
     if (!results) {
       return [];
     }
-    if (results.type === Menu || innerResults) {
+    if ('type' in results && results.type === Menu || innerResults) {
       let res = [];
       const children = innerResults || results.props.children;
+      if (!Array.isArray(children)) {
+        return res;
+      }
       for (let i = 0; i < children.length; i++) {
         const child = children[i];
         if (!child) {
           continue;
         }
-        if (child instanceof Array) {
+        if (Children.count(child) > 1) {
           res = res.concat(this.getResults(child));
-        } else if (child.type === MenuItem || child.type === MenuSelectableItem) {
-          res.push(child.key);
+        } else if ((child.type === MenuItem || child.type === MenuSelectableItem) && child.key) {
+          res.push(child.key.toString());
         }
       }
       return res;
     }
-    return results.map(item => item.value);
+    return results.map(_ref => {
+      let {
+        value
+      } = _ref;
+      return value;
+    });
   }
   getHighlightedValue() {
-    return this.state.highlightedValue || this.getResults()[0];
+    return (this.state.highlightedValue || this.getResults()[0]) ?? null;
   }
   searchAction() {
     const {
@@ -241,12 +248,15 @@ class SearchBar extends Component {
   }
   elementsIndexToKeyMapping(elements) {
     let result = [];
+    if (!Array.isArray(elements)) {
+      return result;
+    }
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
       if (!element) {
         continue;
       }
-      if (element instanceof Array) {
+      if (Array.isArray(element)) {
         result = result.concat(this.elementsIndexToKeyMapping(element));
       } else {
         result.push(element.key);
@@ -254,19 +264,15 @@ class SearchBar extends Component {
     }
     return result;
   }
-  renderResults() {
+  renderResults(results) {
     const {
-      baseClassName,
-      results
+      baseClassName
     } = this.props;
     const {
       focused,
       overMenu
     } = this.state;
     const highlightedValue = this.getHighlightedValue();
-    if (!results || results.length === 0) {
-      return null;
-    }
     return /*#__PURE__*/_jsx(Menu, {
       className: classNames(`${baseClassName}__results`, {
         [`${baseClassName}__results--hidden`]: !focused && !overMenu
@@ -280,10 +286,9 @@ class SearchBar extends Component {
       }, item.value))
     });
   }
-  renderResultsMenu() {
+  renderResultsMenu(results) {
     const {
       baseClassName,
-      results,
       onItemSelect
     } = this.props;
     const {
@@ -291,21 +296,18 @@ 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
-      }, results.className),
+      }, results.props.className),
       onMouseOver: this.handleMenuMouseOver,
       onMouseOut: this.handleMenuMouseOut,
-      onItemClick: (item, index) => {
+      onItemClick: (_item, index) => {
         const indexMap = this.elementsIndexToKeyMapping(results.props.children);
         this.handleSelect(indexMap[index])();
       },
       children: Children.map(results.props.children, child => {
-        if (onItemSelect && child && (child.type === MenuItem || child.type === MenuSelectableItem)) {
+        if (onItemSelect && child && typeof child === 'object' && 'type' in child && (child.type === MenuItem || child.type === MenuSelectableItem)) {
           return /*#__PURE__*/cloneElement(child, {
             active: child.key === highlightedValue
           });
@@ -343,7 +345,7 @@ class SearchBar extends Component {
       className: classNames(baseClassName, {
         [`${baseClassName}--focused`]: focused
       }, className),
-      style: isCollapsed || distractionFreeModeEnabled ? null : {
+      style: isCollapsed || distractionFreeModeEnabled ? undefined : {
         maxWidth,
         minWidth
       },
@@ -383,128 +385,21 @@ class SearchBar extends Component {
             }), /*#__PURE__*/_jsx(Button, {
               icon: "search",
               onClick: this.handleSearch,
-              state: loading ? 'loading' : null,
+              state: loading ? 'loading' : undefined,
               ghost: true
             })]
           })
         })
-      }), results && results.type === Menu ? this.renderResultsMenu() : this.renderResults()]
+      }), Array.isArray(results) && this.renderResults(results), results && !Array.isArray(results) && results.type === Menu && this.renderResultsMenu(results)]
     });
   }
 }
-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.
-   *
-   * arguments:
-   * * value - search value
-   * * clearHandler - function that clears input value
-   * @since 0.1.0
-   */
-  onSearch: PropTypes.func,
-  /**
-   * Callback for pressing any key in input. Used for a live search.
-   *
-   * arguments:
-   * * value - search value
-   * * clearHandler - function that clears input value
-   * @since 0.1.0
-   */
-  onTyping: PropTypes.func,
-  /**
-   * Callback for selecting menu item with mouse click or key pressing.
-   *
-   * arguments:
-   * * value - selected value
-   * * clearHandler - function that clears input value
-   * @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.
-   * If Menu component is used then key property of MenuItem will be treated as value.
-   * @since 0.1.0
-   */
-  results: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired
-  })), PropTypes.element]),
-  /**
-   * Props of underlying input element.
-   * @since 0.4.1
-   */
-  inputProps: PropTypes.object
-};
-const defaultProps = {
-  className: undefined,
+_defineProperty(SearchBar, "defaultProps", {
   baseClassName: `${CLS_PREFIX}search-bar`,
   maxWidth: 500,
   minWidth: 270,
-  loading: false,
-  responsive: undefined,
-  onSearch: undefined,
-  onTyping: undefined,
-  onItemSelect: undefined,
-  collapsable: false,
-  onCollapse: undefined,
-  onExpand: undefined,
-  results: undefined,
   inputProps: {}
-};
-SearchBar.propTypes = {
-  ...propTypes,
-  distractionFreeMode: PropTypes.shape({
-    enabled: PropTypes.bool.isRequired,
-    toggle: PropTypes.func.isRequired
-  })
-};
-SearchBar.defaultProps = {
-  distractionFreeMode: undefined
-};
+});
 const SearchBarWrapper = props => {
   const distractionFreeMode = useContext(DistractionFreeModeContext);
   let responsive = useContext(ResponsiveContext);
@@ -516,6 +411,4 @@ const SearchBarWrapper = props => {
   });
 };
 SearchBarWrapper.displayName = 'SearchBar';
-SearchBarWrapper.propTypes = propTypes;
-SearchBarWrapper.defaultProps = defaultProps;
 export default SearchBarWrapper;

package/esm/components/Tabs/Tab.js

@@ -1,9 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 1999-2023. 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.
  *
@@ -12,7 +10,6 @@ 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
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Tab = _ref => {
   let {
     children
@@ -21,49 +18,4 @@ const Tab = _ref => {
     children: 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
-   */
-  children: PropTypes.node
-};
-Tab.defaultProps = {
-  label: undefined,
-  icon: undefined,
-  onActivate: undefined,
-  onClose: undefined,
-  children: undefined,
-  component: undefined
-};
 export default Tab;