@plesk/ui-library 3.35.6 → 3.35.7

package/cjs/components/Tabs/SearchBar.js

@@ -6,18 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _utils = require("../../utils");
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _Badge = _interopRequireDefault(require("../Badge"));
+var _Button = _interopRequireDefault(require("../Button"));
 var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup"));
+var _DistractionFreeModeContext = _interopRequireDefault(require("../DistractionFreeModeContext"));
 var _Input = _interopRequireDefault(require("../Input"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _Badge = _interopRequireDefault(require("../Badge"));
 var _Menu = _interopRequireWildcard(require("../Menu"));
 var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
-var _DistractionFreeModeContext = _interopRequireDefault(require("../DistractionFreeModeContext"));
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
@@ -34,10 +33,11 @@ class SearchBar extends _react.Component {
     (0, _defineProperty2.default)(this, "state", {
       focused: false,
       overMenu: false,
-      value: this.props.inputProps.value || '',
+      value: `${this.props.inputProps?.value || ''}`,
       highlightedValue: null
     });
     (0, _defineProperty2.default)(this, "isFocusScheduled", false);
+    (0, _defineProperty2.default)(this, "search", void 0);
     (0, _defineProperty2.default)(this, "keyboardNavigation", key => {
       const {
         onItemSelect,
@@ -52,7 +52,7 @@ class SearchBar extends _react.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({
@@ -87,7 +87,7 @@ class SearchBar extends _react.Component {
       } = this.props;
       const {
         value
-      } = e.target;
+      } = e.currentTarget;
       if (['Enter', 'Escape', 'ArrowUp', 'ArrowDown'].indexOf(e.key) !== -1) {
         this.checkKeys(e.key);
         return;
@@ -166,7 +166,7 @@ class SearchBar extends _react.Component {
     } = state;
     const nextState = {};
     if (inputPropsValue !== prevInputPropsValue) {
-      nextState.value = inputPropsValue;
+      nextState.value = inputPropsValue ?? '';
     }
     nextState.prevInputProps = props.inputProps;
     return nextState;
@@ -180,34 +180,41 @@ class SearchBar extends _react.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.default || innerResults) {
+    if ('type' in results && results.type === _Menu.default || 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 (_react.Children.count(child) > 1) {
           res = res.concat(this.getResults(child));
-        } else if (child.type === _Menu.MenuItem || child.type === _Menu.MenuSelectableItem) {
-          res.push(child.key);
+        } else if ((child.type === _Menu.MenuItem || child.type === _Menu.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 {
@@ -248,12 +255,15 @@ class SearchBar extends _react.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);
@@ -261,19 +271,15 @@ class SearchBar extends _react.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__*/(0, _jsxRuntime.jsx)(_Menu.default, {
       className: (0, _classnames.default)(`${baseClassName}__results`, {
         [`${baseClassName}__results--hidden`]: !focused && !overMenu
@@ -287,10 +293,9 @@ class SearchBar extends _react.Component {
       }, item.value))
     });
   }
-  renderResultsMenu() {
+  renderResultsMenu(results) {
     const {
       baseClassName,
-      results,
       onItemSelect
     } = this.props;
     const {
@@ -298,21 +303,18 @@ class SearchBar extends _react.Component {
       overMenu
     } = this.state;
     const highlightedValue = this.getHighlightedValue();
-    if (!results) {
-      return null;
-    }
     return /*#__PURE__*/(0, _react.cloneElement)(results, {
       className: (0, _classnames.default)(`${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: _react.Children.map(results.props.children, child => {
-        if (onItemSelect && child && (child.type === _Menu.MenuItem || child.type === _Menu.MenuSelectableItem)) {
+        if (onItemSelect && child && typeof child === 'object' && 'type' in child && (child.type === _Menu.MenuItem || child.type === _Menu.MenuSelectableItem)) {
           return /*#__PURE__*/(0, _react.cloneElement)(child, {
             active: child.key === highlightedValue
           });
@@ -350,7 +352,7 @@ class SearchBar extends _react.Component {
       className: (0, _classnames.default)(baseClassName, {
         [`${baseClassName}--focused`]: focused
       }, className),
-      style: isCollapsed || distractionFreeModeEnabled ? null : {
+      style: isCollapsed || distractionFreeModeEnabled ? undefined : {
         maxWidth,
         minWidth
       },
@@ -390,128 +392,21 @@ class SearchBar extends _react.Component {
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
               icon: "search",
               onClick: this.handleSearch,
-              state: loading ? 'loading' : null,
+              state: loading ? 'loading' : undefined,
               ghost: true
             })]
           })
         })
-      }), results && results.type === _Menu.default ? this.renderResultsMenu() : this.renderResults()]
+      }), Array.isArray(results) && this.renderResults(results), results && !Array.isArray(results) && results.type === _Menu.default && this.renderResultsMenu(results)]
     });
   }
 }
-const propTypes = {
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-  /**
-   * @ignore
-   */
-  baseClassName: _propTypes.default.string,
-  /**
-   * Maximum width of SearchBar
-   * @since 0.1.0
-   */
-  maxWidth: _propTypes.default.number,
-  /**
-   * Minimum width of SearchBar
-   * @since 0.1.0
-   */
-  minWidth: _propTypes.default.number,
-  /**
-   * Should disable input and show spinner or not.
-   * @since 0.1.0
-   */
-  loading: _propTypes.default.bool,
-  /**
-   * Should collapse input or not. Used for control in independence of context.
-   * @since 0.1.0
-   */
-  responsive: _propTypes.default.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.default.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.default.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.default.func,
-  /**
-   * Should render toggle button or not.
-   * @since 2.2.0
-   */
-  collapsable: _propTypes.default.bool,
-  /**
-   * Callback for pressing toggle button (in normal mode).
-   * @since 2.2.0
-   */
-  onCollapse: _propTypes.default.func,
-  /**
-   * Callback for pressing toggle button (in collapsed mode).
-   * @since 2.2.0
-   */
-  onExpand: _propTypes.default.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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.string.isRequired,
-    title: _propTypes.default.string.isRequired
-  })), _propTypes.default.element]),
-  /**
-   * Props of underlying input element.
-   * @since 0.4.1
-   */
-  inputProps: _propTypes.default.object
-};
-const defaultProps = {
-  className: undefined,
+(0, _defineProperty2.default)(SearchBar, "defaultProps", {
   baseClassName: `${_constants.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.default.shape({
-    enabled: _propTypes.default.bool.isRequired,
-    toggle: _propTypes.default.func.isRequired
-  })
-};
-SearchBar.defaultProps = {
-  distractionFreeMode: undefined
-};
+});
 const SearchBarWrapper = props => {
   const distractionFreeMode = (0, _react.useContext)(_DistractionFreeModeContext.default);
   let responsive = (0, _react.useContext)(_ResponsiveContext.default);
@@ -523,6 +418,4 @@ const SearchBarWrapper = props => {
   });
 };
 SearchBarWrapper.displayName = 'SearchBar';
-SearchBarWrapper.propTypes = propTypes;
-SearchBarWrapper.defaultProps = defaultProps;
 var _default = exports.default = SearchBarWrapper;

package/cjs/components/Tabs/Tab.js

@@ -1,12 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 /* eslint-disable react/no-unused-prop-types */
@@ -18,7 +15,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * It can also display a [Label](#!/Label) next to the tab name for showing additional information about its content.
  * You can make `Tabs` closeable, for example, if you are using them for opening and displaying files.
  * @since 0.0.35
- */const Tab = _ref => {
+ */
+const Tab = _ref => {
   let {
     children
   } = _ref;
@@ -26,49 +24,4 @@ var _jsxRuntime = require("react/jsx-runtime");
     children: children
   });
 };
-Tab.propTypes = {
-  /**
-   * Tab title
-   * @since 0.0.35
-   */
-  title: _propTypes.default.node.isRequired,
-  /**
-   * Label in tab title
-   * @since 0.0.42
-   */
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
-  /**
-   * Name of icon or Icon component for tab
-   * @since 0.0.42
-   */
-  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
-  /**
-   * Activate callback.
-   * @since 0.0.43
-   */
-  onActivate: _propTypes.default.func,
-  /**
-   * Close callback
-   * @since 0.0.58
-   */
-  onClose: _propTypes.default.func,
-  /**
-   * Component to render as the root element.
-   * @since 2.5.1
-   */
-  component: _propTypes.default.elementType,
-  /**
-   * Tab content
-   * @since 0.0.47
-   */
-  children: _propTypes.default.node
-};
-Tab.defaultProps = {
-  label: undefined,
-  icon: undefined,
-  onActivate: undefined,
-  onClose: undefined,
-  children: undefined,
-  component: undefined
-};
 var _default = exports.default = Tab;