@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Select/Select.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React, { Children, useState, useRef, isValidElement } from 'react';
 import classNames from 'classnames';
 import { safeInvoke, EventEmitter } from '../utils';
@@ -9,9 +10,10 @@ import Translate from '../Translate';
 import SelectControl from './SelectControl';
 import SelectOptionGroup from './SelectOptionGroup';
 import SelectOption from './SelectOption';
-
 // 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 = [];
   Children.forEach(children, child => {
     if ( /*#__PURE__*/isValidElement(child) && (child.type === SelectOptionGroup || child.type === 'optgroup')) {
@@ -36,7 +38,6 @@ const collect = (children, options = [], group) => {
         children,
         ...props
       } = child.props;
-
       if (typeof value !== 'string' && typeof value !== 'number') {
         if (typeof children === 'string' && children) {
           value = children;
@@ -44,9 +45,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
@@ -54,11 +53,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,
@@ -68,54 +65,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 = `${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 = `${CLS_PREFIX}select`,
+    className,
+    children,
+    defaultValue,
+    value: propValue,
+    onChange,
+    disabled = false,
+    searchable = false,
+    clearable = false,
+    multiple = false,
+    placeholder,
+    ...props
+  } = _ref;
   const [opened, setOpened] = useState(false);
   const controlRef = useRef(null);
   const emitterRef = useRef(new EventEmitter());
@@ -123,16 +115,12 @@ const Select = ({
     if (typeof defaultValue === 'undefined') {
       return multiple ? [] : undefined;
     }
-
     return defaultValue;
   });
-
   if (typeof propValue !== 'undefined') {
     value = propValue;
-
     setValue = () => {};
   }
-
   const [filterValue, setFilterValue] = useState('');
   const [highlightedIndex, setHighlightedIndex] = useState(0);
   let {
@@ -140,12 +128,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);
       }
@@ -153,29 +139,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);
@@ -185,122 +166,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 = 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();
     }
-
     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();
     }
-
     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);
       safeInvoke(onChange, nextValue);
     } else {
@@ -308,14 +262,12 @@ const Select = ({
       safeInvoke(onChange, undefined);
     }
   };
-
   const handleClear = () => {
     const nextValue = Array.isArray(value) ? [] : undefined;
     setFilterValue('');
     setValue(nextValue);
     safeInvoke(onChange, nextValue);
   };
-
   const control = /*#__PURE__*/React.createElement(SelectControl, {
     id: id,
     name: name,
@@ -358,5 +310,4 @@ const Select = ({
     value: value
   }, props));
 };
-
 export default Select;

package/esm/components/Select/Select.stories.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import Select from './Select';
 import SelectOption from './SelectOption';

package/esm/components/Select/SelectControl.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import classNames from 'classnames';
 import React, { Fragment, useRef, useState, useLayoutEffect, forwardRef } from 'react';
 import { useTranslate } from '../LocaleProvider';
@@ -8,13 +9,11 @@ import Icon from '../Icon';
 import MultiValue from './MultiValue';
 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;
@@ -31,115 +30,101 @@ const getInputWidth = target => {
   } = inputMeter.getBoundingClientRect();
   return width || DEFAULT_INPUT_WIDTH;
 };
-
-const SelectControl = /*#__PURE__*/forwardRef(function SelectControl({
-  baseClassName = `${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__*/forwardRef(function SelectControl(_ref, ref) {
+  let {
+    baseClassName = `${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 = useRef(null);
   const searchBufferValue = useRef('');
   const searchBufferTimer = useRef(0);
   const [inputWidth, setInputWidth] = useState(DEFAULT_INPUT_WIDTH);
   const [focused, setFocused] = useState(false);
   const translate = 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;
   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) {
@@ -148,9 +133,7 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl({
             handleValueRemove();
           }
         }
-
         break;
-
       default:
         if (!searchable && e.key.length === 1) {
           searchBufferValue.current += e.key;
@@ -160,19 +143,15 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl({
             searchBufferValue.current = '';
           }, 1000);
         }
-
         break;
     }
   };
-
   const handleFocus = () => {
     setFocused(true);
   };
-
   const handleBlur = () => {
     setFocused(false);
   };
-
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(baseClassName, {
       [`${baseClassName}--disabled`]: disabled,
@@ -184,13 +163,16 @@ const SelectControl = /*#__PURE__*/forwardRef(function SelectControl({
     ref: ref
   }), /*#__PURE__*/React.createElement("span", {
     className: `${baseClassName}__value-container`
-  }, Array.isArray(current) && current.map(({
-    value,
-    label
-  }) => /*#__PURE__*/React.createElement(MultiValue, {
-    key: value,
-    onRemove: () => handleValueRemove(value)
-  }, label)), /*#__PURE__*/React.createElement("input", {
+  }, Array.isArray(current) && current.map(_ref3 => {
+    let {
+      value,
+      label
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(MultiValue, {
+      key: value,
+      onRemove: () => handleValueRemove(value)
+    }, label);
+  }), /*#__PURE__*/React.createElement("input", {
     id: id,
     className: `${baseClassName}__input`,
     value: filterValue,

package/esm/components/Select/SelectOption.js

@@ -1,19 +1,16 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-import React from 'react';
 
+import React from 'react';
 /**
  * `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.createElement("option", null);
   }
-
   return null;
 };
-
 export default SelectOption;

package/esm/components/Select/SelectOptionGroup.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-import React from 'react';
 
+import React from 'react';
 /**
  * `SelectOptionGroup` is a part of [Select](#!/Select) component. It can be used for splitting the list of all options into groups.
  * @since 2.3.0
@@ -11,8 +11,6 @@ const SelectOptionGroup = _props => {
   if (false) {
     return /*#__PURE__*/React.createElement("optgroup", null);
   }
-
   return null;
 };
-
 export default SelectOptionGroup;

package/esm/components/Select/index.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+
 export { default } from './Select';
 export { default as SelectOption } from './SelectOption';
 export { default as SelectOptionGroup } from './SelectOptionGroup';

package/esm/components/Skeleton/Skeleton.js

@@ -1,26 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import classNames from 'classnames';
 import { normalizeSize } from '../utils';
 import { CLS_PREFIX } from '../../constants';
-
 /**
  * `Skeleton` (or content-placeholder) is placeholder preview of content before the data gets loaded to reduce load-time frustration.
  * Skeleton is used for non-text components, images, media-objects, etc.
  * @since 3.28.0
  */
-const Skeleton = ({
-  width,
-  maxWidth,
-  height,
-  style,
-  component: Tag = 'span',
-  className,
-  baseClassName = `${CLS_PREFIX}skeleton`,
-  ...props
-}) => {
-  const finalStyle = { ...style,
+const Skeleton = _ref => {
+  let {
+    width,
+    maxWidth,
+    height,
+    style,
+    component: Tag = 'span',
+    className,
+    baseClassName = `${CLS_PREFIX}skeleton`,
+    ...props
+  } = _ref;
+  const finalStyle = {
+    ...style,
     width: normalizeSize(width),
     maxWidth: normalizeSize(maxWidth),
     height: normalizeSize(height)
@@ -30,5 +32,4 @@ const Skeleton = ({
     style: finalStyle
   }, props));
 };
-
 export default Skeleton;

package/esm/components/Skeleton/Skeleton.stories.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import Skeleton from './Skeleton';
 export const Basic = args => /*#__PURE__*/React.createElement(Skeleton, args);

package/esm/components/Skeleton/SkeletonTabs.js

@@ -1,26 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import classNames from 'classnames';
 import SkeletonText from './SkeletonText';
 import { CLS_PREFIX } from '../../constants';
-
 /**
  * Skeleton for tabs component
  * @since `3.28.0
  */
-const SkeletonTabs = ({
-  count = 3,
-  className,
-  baseClassName = `${CLS_PREFIX}skeleton-tabs`,
-  ...props
-}) => /*#__PURE__*/React.createElement("div", _extends({
-  className: classNames(baseClassName, className)
-}, props), /*#__PURE__*/React.createElement(SkeletonText, {
-  lineProps: {
-    maxWidth: 100
-  },
-  lines: count
-}));
-
+const SkeletonTabs = _ref => {
+  let {
+    count = 3,
+    className,
+    baseClassName = `${CLS_PREFIX}skeleton-tabs`,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(baseClassName, className)
+  }, props), /*#__PURE__*/React.createElement(SkeletonText, {
+    lineProps: {
+      maxWidth: 100
+    },
+    lines: count
+  }));
+};
 export default SkeletonTabs;