@plesk/ui-library 3.31.0 → 3.31.2

package/cjs/components/Select/Select.js

@@ -1,41 +1,29 @@
 "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 _utils = require("../utils");
-
 var _constants = require("../../constants");
-
 var _ComboBoxDropdown = _interopRequireWildcard(require("../ComboBoxDropdown"));
-
 var _Translate = _interopRequireDefault(require("../Translate"));
-
 var _SelectControl = _interopRequireDefault(require("./SelectControl"));
-
 var _SelectOptionGroup = _interopRequireDefault(require("./SelectOptionGroup"));
-
 var _SelectOption = _interopRequireDefault(require("./SelectOption"));
-
 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.
+
 // eslint-disable-next-line default-param-last
-const collect = (children, options = [], group) => {
+const collect = function (children) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let group = arguments.length > 2 ? arguments[2] : undefined;
   const groups = [];
-
   _react.Children.forEach(children, child => {
     if ( /*#__PURE__*/(0, _react.isValidElement)(child) && (child.type === _SelectOptionGroup.default || child.type === 'optgroup')) {
       const {
@@ -59,7 +47,6 @@ const collect = (children, options = [], group) => {
         children,
         ...props
       } = child.props;
-
       if (typeof value !== 'string' && typeof value !== 'number') {
         if (typeof children === 'string' && children) {
           value = children;
@@ -67,9 +54,7 @@ const collect = (children, options = [], group) => {
           throw new Error('The value can only be a number or a string.');
         }
       }
-
       let label;
-
       if (propLabel && typeof propLabel === 'string') {
         ({
           label
@@ -77,11 +62,9 @@ const collect = (children, options = [], group) => {
       } else if (typeof child.props.children === 'string') {
         label = child.props.children;
       }
-
       if (!label) {
         throw new Error('The label can only be a string.');
       }
-
       const option = {
         value,
         label,
@@ -91,54 +74,49 @@ const collect = (children, options = [], group) => {
         props
       };
       options.push(option);
-
       if (group) {
         group.options.push(option);
       }
     }
   });
-
   if (groups.length === 0) {
     groups.push({
       options
     });
   }
-
   return {
     groups,
     options
   };
 };
-
 const getNextValue = (value, prevValue) => {
   if (Array.isArray(prevValue)) {
     return [...prevValue, value];
   }
-
   return value;
 };
-
 /**
  * `Select` component is used for making a choice among a set of related options.
  * @since 2.3.0
  */
-const Select = ({
-  id,
-  name,
-  size,
-  baseClassName = `${_constants.CLS_PREFIX}select`,
-  className,
-  children,
-  defaultValue,
-  value: propValue,
-  onChange,
-  disabled = false,
-  searchable = false,
-  clearable = false,
-  multiple = false,
-  placeholder,
-  ...props
-}) => {
+const Select = _ref => {
+  let {
+    id,
+    name,
+    size,
+    baseClassName = `${_constants.CLS_PREFIX}select`,
+    className,
+    children,
+    defaultValue,
+    value: propValue,
+    onChange,
+    disabled = false,
+    searchable = false,
+    clearable = false,
+    multiple = false,
+    placeholder,
+    ...props
+  } = _ref;
   const [opened, setOpened] = (0, _react.useState)(false);
   const controlRef = (0, _react.useRef)(null);
   const emitterRef = (0, _react.useRef)(new _utils.EventEmitter());
@@ -146,16 +124,12 @@ const Select = ({
     if (typeof defaultValue === 'undefined') {
       return multiple ? [] : undefined;
     }
-
     return defaultValue;
   });
-
   if (typeof propValue !== 'undefined') {
     value = propValue;
-
     setValue = () => {};
   }
-
   const [filterValue, setFilterValue] = (0, _react.useState)('');
   const [highlightedIndex, setHighlightedIndex] = (0, _react.useState)(0);
   let {
@@ -163,12 +137,10 @@ const Select = ({
     options
   } = collect(children);
   let current;
-
   if (Array.isArray(value)) {
     const _current = [];
     value.forEach(v => {
       const option = options.find(o => o.value === v);
-
       if (option) {
         _current.push(option);
       }
@@ -176,29 +148,24 @@ const Select = ({
     current = _current;
   } else {
     const _current = options.find(o => o.value === value);
-
     current = _current;
   }
-
   const groupFns = [];
-  const optionFns = []; // eslint-disable-next-line func-style
-
+  const optionFns = [];
+  // eslint-disable-next-line func-style
   function createInclude(fns) {
     return item => fns.every(fn => fn(item));
   }
-
   if (Array.isArray(value) && value.length > 0) {
     const v = value;
     groupFns.push(() => false);
     optionFns.push(option => v.indexOf(option.value) === -1);
   }
-
   if (filterValue) {
     const lowerFilterValue = filterValue.toLowerCase();
     groupFns.push(group => !!group.label && group.label.toLowerCase().includes(lowerFilterValue));
     optionFns.push(option => option.label.toLowerCase().includes(lowerFilterValue));
   }
-
   if (groupFns.length || optionFns.length) {
     const includeGroup = createInclude(groupFns);
     const includeOption = createInclude(optionFns);
@@ -208,122 +175,95 @@ const Select = ({
         options = [...options, ...group.options];
         return true;
       }
-
       group.options = group.options.filter(option => {
         if (includeOption(option)) {
           options.push(option);
           return true;
         }
-
         return false;
       });
       return group.options.length > 0;
     });
   }
-
   if (highlightedIndex && highlightedIndex > options.length - 1) {
     setHighlightedIndex(0);
   }
-
   const handleFilterChange = nextFilterValue => {
     handleOpen();
     setFilterValue(nextFilterValue);
   };
-
   const focusHighlightedIndex = index => {
     emitterRef.current.emit('focus', index);
   };
-
   const handleHighlightChange = diff => {
     if (!opened) {
       handleOpen();
       return;
     }
-
     const nextIndex = (0, _ComboBoxDropdown.findNextSafeIndex)(highlightedIndex, diff, options);
-
     if (nextIndex !== -1) {
       setHighlightedIndex(nextIndex);
       focusHighlightedIndex(nextIndex);
     }
   };
-
   const handleHighlightConfirm = index => {
     if (!opened && index === undefined) {
       return;
     }
-
     const option = options[index === undefined ? highlightedIndex : index];
-
     if (!option) {
       return;
     }
-
     if (option.disabled) {
       return;
     }
-
     const nextValue = getNextValue(option.value, value);
     setValue(nextValue);
     setFilterValue('');
-
     if (!multiple) {
       handleClose();
     }
-
     (0, _utils.safeInvoke)(onChange, nextValue);
   };
-
   const handleHighlightSearch = query => {
     const lowerQuery = query.toLowerCase();
     const index = options.findIndex(o => !o.disabled && o.label.toLowerCase().includes(lowerQuery));
-
     if (index !== -1) {
       setHighlightedIndex(index);
       focusHighlightedIndex(index);
-
       if (!opened) {
         handleHighlightConfirm(index);
       }
     }
   };
-
   const handleOpen = () => {
     setOpened(true);
   };
-
   const handleClose = () => {
     setOpened(false);
     setHighlightedIndex(0);
   };
-
   const handleSelect = optionValue => {
     const nextValue = getNextValue(optionValue, value);
     setValue(nextValue);
     setFilterValue('');
-
     if (!multiple) {
       handleClose();
     }
-
     (0, _utils.safeInvoke)(onChange, nextValue);
   };
-
   const handleHighlightedIndexChange = index => {
     setHighlightedIndex(index);
   };
-
   const handleValueRemove = valueToRemove => {
     if (Array.isArray(value)) {
       let nextValue;
-
       if (valueToRemove === undefined) {
         nextValue = [...value];
         nextValue.pop();
       } else {
         nextValue = value.filter(v => v !== valueToRemove);
       }
-
       setValue(nextValue);
       (0, _utils.safeInvoke)(onChange, nextValue);
     } else {
@@ -331,14 +271,12 @@ const Select = ({
       (0, _utils.safeInvoke)(onChange, undefined);
     }
   };
-
   const handleClear = () => {
     const nextValue = Array.isArray(value) ? [] : undefined;
     setFilterValue('');
     setValue(nextValue);
     (0, _utils.safeInvoke)(onChange, nextValue);
   };
-
   const control = /*#__PURE__*/_react.default.createElement(_SelectControl.default, {
     id: id,
     name: name,
@@ -359,7 +297,6 @@ const Select = ({
     placeholder: placeholder,
     ref: controlRef
   });
-
   return /*#__PURE__*/_react.default.createElement(_ComboBoxDropdown.default, (0, _extends2.default)({
     className: (0, _classnames.default)(baseClassName, className, {
       [`${baseClassName}--size-${size}`]: size
@@ -382,6 +319,5 @@ const Select = ({
     value: value
   }, props));
 };
-
 var _default = Select;
 exports.default = _default;

package/cjs/components/Select/Select.stories.js

@@ -1,23 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SearchableAtBottom = exports.Basic = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Select = _interopRequireDefault(require("./Select"));
-
 var _SelectOption = _interopRequireDefault(require("./SelectOption"));
-
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-const Basic = args => /*#__PURE__*/_react.default.createElement(_Select.default, args);
 
+const Basic = args => /*#__PURE__*/_react.default.createElement(_Select.default, args);
 exports.Basic = Basic;
 Basic.args = {
   children: [/*#__PURE__*/_react.default.createElement(_SelectOption.default, {
@@ -47,7 +41,6 @@ Basic.args = {
   }, 'Twelve')],
   'data-test': 'select'
 };
-
 const SearchableAtBottom = () => {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -60,5 +53,4 @@ const SearchableAtBottom = () => {
     searchable: true
   }, Basic.args)));
 };
-
 exports.SearchableAtBottom = SearchableAtBottom;

package/cjs/components/Select/SelectControl.js

@@ -1,40 +1,28 @@
 "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 _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _LocaleProvider = require("../LocaleProvider");
-
 var _constants = require("../../constants");
-
 var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _MultiValue = _interopRequireDefault(require("./MultiValue"));
-
 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.
+
 const DEFAULT_INPUT_WIDTH = 2;
 let inputMeter;
-
 const getInputWidth = target => {
   if (!inputMeter) {
     inputMeter = document.createElement('pre');
     document.body.appendChild(inputMeter);
   }
-
   const targetStyle = window.getComputedStyle(target);
   inputMeter.style.fontFamily = targetStyle.fontFamily;
   inputMeter.style.fontSize = targetStyle.fontSize;
@@ -51,115 +39,101 @@ const getInputWidth = target => {
   } = inputMeter.getBoundingClientRect();
   return width || DEFAULT_INPUT_WIDTH;
 };
-
-const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl({
-  baseClassName = `${_constants.CLS_PREFIX}select-control`,
-  id,
-  name,
-  current,
-  disabled,
-  searchable,
-  clearable,
-  multiple,
-  filterValue,
-  onFilterChange,
-  onHighlightChange,
-  onHighlightConfirm,
-  onHighlightSearch,
-  onOpen,
-  onClose,
-  onClear,
-  onValueRemove,
-  placeholder,
-  ...props
-}, ref) {
+const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl(_ref, ref) {
+  let {
+    baseClassName = `${_constants.CLS_PREFIX}select-control`,
+    id,
+    name,
+    current,
+    disabled,
+    searchable,
+    clearable,
+    multiple,
+    filterValue,
+    onFilterChange,
+    onHighlightChange,
+    onHighlightConfirm,
+    onHighlightSearch,
+    onOpen,
+    onClose,
+    onClear,
+    onValueRemove,
+    placeholder,
+    ...props
+  } = _ref;
   const inputRef = (0, _react.useRef)(null);
   const searchBufferValue = (0, _react.useRef)('');
   const searchBufferTimer = (0, _react.useRef)(0);
   const [inputWidth, setInputWidth] = (0, _react.useState)(DEFAULT_INPUT_WIDTH);
   const [focused, setFocused] = (0, _react.useState)(false);
   const translate = (0, _LocaleProvider.useTranslate)();
-
   if (placeholder === undefined) {
     placeholder = translate('Select.placeholder', undefined, 'Select...');
   }
-
   let values = [];
-
   if (Array.isArray(current)) {
-    values = current.map(({
-      value
-    }) => value);
+    values = current.map(_ref2 => {
+      let {
+        value
+      } = _ref2;
+      return value;
+    });
   } else if (current) {
     values = [current.value];
   }
-
   const hasValue = values.length > 0;
   (0, _react.useLayoutEffect)(() => {
     if (filterValue === '') {
       setInputWidth(DEFAULT_INPUT_WIDTH);
     }
   }, [filterValue]);
-
   const handleClick = () => {
     if (disabled) {
       return;
     }
-
     onOpen();
-
     if (inputRef.current) {
       inputRef.current.focus();
     }
   };
-
   const handleInputChange = e => {
     const width = getInputWidth(e.target);
     setInputWidth(width);
     onFilterChange(e.target.value);
   };
-
   const handleValueRemove = value => {
     onValueRemove(value);
   };
-
   const handleClear = () => {
     onClear();
   };
-
   const handleKeyDown = e => {
     switch (e.key) {
       case 'ArrowUp':
         e.preventDefault();
         onHighlightChange(-1);
         break;
-
       case 'ArrowDown':
         e.preventDefault();
         onHighlightChange(1);
         break;
-
       case 'PageUp':
         e.preventDefault();
         onHighlightChange(-10);
         break;
-
       case 'PageDown':
         e.preventDefault();
         onHighlightChange(10);
         break;
-
       case 'Enter':
         e.preventDefault();
         onHighlightConfirm();
         break;
-
       case 'Escape':
         e.preventDefault();
         onFilterChange('');
         onClose();
         break;
-
       case 'Backspace':
         if (filterValue === '') {
           if (multiple) {
@@ -168,9 +142,7 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
             handleValueRemove();
           }
         }
-
         break;
-
       default:
         if (!searchable && e.key.length === 1) {
           searchBufferValue.current += e.key;
@@ -180,19 +152,15 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
             searchBufferValue.current = '';
           }, 1000);
         }
-
         break;
     }
   };
-
   const handleFocus = () => {
     setFocused(true);
   };
-
   const handleBlur = () => {
     setFocused(false);
   };
-
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--disabled`]: disabled,
@@ -204,13 +172,16 @@ const SelectControl = /*#__PURE__*/(0, _react.forwardRef)(function SelectControl
     ref: ref
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: `${baseClassName}__value-container`
-  }, Array.isArray(current) && current.map(({
-    value,
-    label
-  }) => /*#__PURE__*/_react.default.createElement(_MultiValue.default, {
-    key: value,
-    onRemove: () => handleValueRemove(value)
-  }, label)), /*#__PURE__*/_react.default.createElement("input", {
+  }, Array.isArray(current) && current.map(_ref3 => {
+    let {
+      value,
+      label
+    } = _ref3;
+    return /*#__PURE__*/_react.default.createElement(_MultiValue.default, {
+      key: value,
+      onRemove: () => handleValueRemove(value)
+    }, label);
+  }), /*#__PURE__*/_react.default.createElement("input", {
     id: id,
     className: `${baseClassName}__input`,
     value: filterValue,

package/cjs/components/Select/SelectOption.js

@@ -1,30 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /**
  * `SelectOption` is a part of [SelectOptionGroup](#!/SelectOptionGroup) component.
  * @since 2.3.0
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ */ // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const SelectOption = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition
   if (false) {
     return /*#__PURE__*/_react.default.createElement("option", null);
   }
-
   return null;
 };
-
 var _default = SelectOption;
 exports.default = _default;

package/cjs/components/Select/SelectOptionGroup.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /**
@@ -21,9 +18,7 @@ const SelectOptionGroup = _props => {
   if (false) {
     return /*#__PURE__*/_react.default.createElement("optgroup", null);
   }
-
   return null;
 };
-
 var _default = SelectOptionGroup;
 exports.default = _default;