@plesk/ui-library 3.27.4 → 3.28.0

package/esm/components/Form/Form.js

@@ -248,9 +248,11 @@ class Form extends Component {
       let field;
       let fieldErrors;
       Object.keys(this.fields).every(name => {
-        if (errors && errors[name] && typeof errors[name] === 'object' && Object.keys(errors[name]).length > 0) {
+        const foundError = getIn(errors, name);
+
+        if (foundError && typeof foundError === 'object' && Object.keys(foundError).length > 0) {
           field = this.fields[name];
-          fieldErrors = errors[name];
+          fieldErrors = foundError;
           return false;
         }
 

package/esm/components/FormFieldPassword/estimatePassword.js

@@ -2,6 +2,12 @@
 import React from 'react';
 import Translate from '../Translate';
 import locale from './locale/en-US';
+const EXCLUSIONS = {
+  numbers1: 'numbers3',
+  specialChar1: 'specialChar2',
+  lettersLowerCase: 'comboUpperAndLower',
+  lettersUpperCase: 'comboUpperAndLower'
+};
 export const DEFAULT_RULES = [{
   name: 'passwordTooShort',
   suggestion: /*#__PURE__*/React.createElement(Translate, {
@@ -142,18 +148,21 @@ export const DEFAULT_RULES = [{
 
 }];
 export default ((password, rules = DEFAULT_RULES) => {
-  const suggestions = [];
   let passwordScore = 0;
-  rules.forEach(({
-    suggestion,
-    score
-  }) => {
-    const ruleScore = score(password);
-
-    if (ruleScore < 0 && suggestion) {
-      suggestions.push(suggestion);
-    } else {
+  const suggestions = [];
+  const skippedRules = new Set();
+  rules.forEach(rule => {
+    const ruleScore = rule.score(password);
+
+    if (ruleScore >= 0) {
       passwordScore += ruleScore;
+      return;
+    }
+
+    skippedRules.add(EXCLUSIONS[rule.name]);
+
+    if (!skippedRules.has(rule.name) && rule.suggestion) {
+      suggestions.push(rule.suggestion);
     }
   });
   let strength;

package/esm/components/Skeleton/Skeleton.js

@@ -0,0 +1,34 @@
+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,
+    width: normalizeSize(width),
+    maxWidth: normalizeSize(maxWidth),
+    height: normalizeSize(height)
+  };
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    className: classNames(baseClassName, className),
+    style: finalStyle
+  }, props));
+};
+
+export default Skeleton;

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

@@ -0,0 +1,10 @@
+// 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);
+Basic.args = {};
+export const CustomSize = args => /*#__PURE__*/React.createElement(Basic, args);
+CustomSize.args = {
+  width: 200,
+  height: 100
+};

package/esm/components/Skeleton/SkeletonTabs.js

@@ -0,0 +1,26 @@
+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
+}));
+
+export default SkeletonTabs;

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

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

package/esm/components/Skeleton/SkeletonText.js

@@ -0,0 +1,30 @@
+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 Skeleton from './Skeleton';
+import { CLS_PREFIX } from '../../constants';
+
+/**
+ * Skeleton for text-containing components. Is can be used inside Paragraph, as title, or single text
+ * @since 3.28.0
+ */
+const SkeletonText = ({
+  lines = 3,
+  component: Tag = 'span',
+  className,
+  baseClassName = `${CLS_PREFIX}skeleton-text`,
+  lineProps = {},
+  ...props
+}) => /*#__PURE__*/React.createElement(Tag, _extends({
+  className: classNames(baseClassName, className)
+}, props), Array.from({
+  length: lines
+}).map((_, key) => /*#__PURE__*/React.createElement(Skeleton // eslint-disable-next-line react/no-array-index-key
+, _extends({
+  key: key
+}, lineProps, {
+  className: classNames(`${baseClassName}__line`, lineProps === null || lineProps === void 0 ? void 0 : lineProps.className)
+}))));
+
+export default SkeletonText;

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

@@ -0,0 +1,16 @@
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+import React from 'react';
+import SkeletonText from './SkeletonText';
+export const Basic = args => /*#__PURE__*/React.createElement(SkeletonText, args);
+Basic.args = {};
+export const LinesCount = args => /*#__PURE__*/React.createElement(Basic, args);
+LinesCount.args = {
+  lines: 5
+};
+export const Custom = args => /*#__PURE__*/React.createElement(Basic, args);
+Custom.args = {
+  lines: 5,
+  lineProps: {
+    width: 200
+  }
+};

package/esm/components/Skeleton/index.js

@@ -0,0 +1,4 @@
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+export { default } from './Skeleton';
+export { default as SkeletonText } from './SkeletonText';
+export { default as SkeletonTabs } from './SkeletonTabs';

package/esm/components/index.js

@@ -96,4 +96,6 @@ export * from './Toolbar';
 export { default as Tooltip } from './Tooltip';
 export { default as Tour } from './Tour';
 export { default as Translate } from './Translate';
-export { default as Link } from './Link';
+export { default as Link } from './Link';
+export { default as Skeleton } from './Skeleton';
+export * from './Skeleton';

package/esm/components/utils.js

@@ -223,4 +223,5 @@ export const mergeRefs = (...refs) => value => {
       ref.current = value;
     }
   });
-};
+};
+export const normalizeSize = value => String(Number(value)) === String(value) ? `${value}px` : value;

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2018. Plesk International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.27.4";
+const version = "3.28.0";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.27.4",
+  "version": "3.28.0",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",