@plesk/ui-library 3.27.4 → 3.28.0

package/cjs/components/Form/Form.js

@@ -267,9 +267,11 @@ class Form extends _react.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 = (0, _utils.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/cjs/components/FormFieldPassword/estimatePassword.js

@@ -14,6 +14,12 @@ var _Translate = _interopRequireDefault(require("../Translate"));
 var _enUS = _interopRequireDefault(require("./locale/en-US"));
 
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const EXCLUSIONS = {
+  numbers1: 'numbers3',
+  specialChar1: 'specialChar2',
+  lettersLowerCase: 'comboUpperAndLower',
+  lettersUpperCase: 'comboUpperAndLower'
+};
 const DEFAULT_RULES = [{
   name: 'passwordTooShort',
   suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
@@ -156,18 +162,21 @@ const DEFAULT_RULES = [{
 exports.DEFAULT_RULES = DEFAULT_RULES;
 
 var _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/cjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,49 @@
+"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 = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../utils");
+
+var _constants = require("../../constants");
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
+/**
+ * `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 = `${_constants.CLS_PREFIX}skeleton`,
+  ...props
+}) => {
+  const finalStyle = { ...style,
+    width: (0, _utils.normalizeSize)(width),
+    maxWidth: (0, _utils.normalizeSize)(maxWidth),
+    height: (0, _utils.normalizeSize)(height)
+  };
+  return /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
+    className: (0, _classnames.default)(baseClassName, className),
+    style: finalStyle
+  }, props));
+};
+
+var _default = Skeleton;
+exports.default = _default;

package/cjs/components/Skeleton/Skeleton.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomSize = exports.Basic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const Basic = args => /*#__PURE__*/_react.default.createElement(_Skeleton.default, args);
+
+exports.Basic = Basic;
+Basic.args = {};
+
+const CustomSize = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+
+exports.CustomSize = CustomSize;
+CustomSize.args = {
+  width: 200,
+  height: 100
+};

package/cjs/components/Skeleton/SkeletonTabs.js

@@ -0,0 +1,41 @@
+"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 = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _SkeletonText = _interopRequireDefault(require("./SkeletonText"));
+
+var _constants = require("../../constants");
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
+/**
+ * Skeleton for tabs component
+ * @since `3.28.0
+ */
+const SkeletonTabs = ({
+  count = 3,
+  className,
+  baseClassName = `${_constants.CLS_PREFIX}skeleton-tabs`,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+  className: (0, _classnames.default)(baseClassName, className)
+}, props), /*#__PURE__*/_react.default.createElement(_SkeletonText.default, {
+  lineProps: {
+    maxWidth: 100
+  },
+  lines: count
+}));
+
+var _default = SkeletonTabs;
+exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Basic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SkeletonTabs = _interopRequireDefault(require("./SkeletonTabs"));
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const Basic = args => /*#__PURE__*/_react.default.createElement(_SkeletonTabs.default, args);
+
+exports.Basic = Basic;

package/cjs/components/Skeleton/SkeletonText.js

@@ -0,0 +1,45 @@
+"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 = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+var _constants = require("../../constants");
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+
+/**
+ * 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 = `${_constants.CLS_PREFIX}skeleton-text`,
+  lineProps = {},
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
+  className: (0, _classnames.default)(baseClassName, className)
+}, props), Array.from({
+  length: lines
+}).map((_, key) => /*#__PURE__*/_react.default.createElement(_Skeleton.default // eslint-disable-next-line react/no-array-index-key
+, (0, _extends2.default)({
+  key: key
+}, lineProps, {
+  className: (0, _classnames.default)(`${baseClassName}__line`, lineProps === null || lineProps === void 0 ? void 0 : lineProps.className)
+}))));
+
+var _default = SkeletonText;
+exports.default = _default;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinesCount = exports.Custom = exports.Basic = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SkeletonText = _interopRequireDefault(require("./SkeletonText"));
+
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const Basic = args => /*#__PURE__*/_react.default.createElement(_SkeletonText.default, args);
+
+exports.Basic = Basic;
+Basic.args = {};
+
+const LinesCount = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+
+exports.LinesCount = LinesCount;
+LinesCount.args = {
+  lines: 5
+};
+
+const Custom = args => /*#__PURE__*/_react.default.createElement(Basic, args);
+
+exports.Custom = Custom;
+Custom.args = {
+  lines: 5,
+  lineProps: {
+    width: 200
+  }
+};

package/cjs/components/Skeleton/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SkeletonTabs", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonTabs.default;
+  }
+});
+Object.defineProperty(exports, "SkeletonText", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonText.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+var _SkeletonText = _interopRequireDefault(require("./SkeletonText"));
+
+var _SkeletonTabs = _interopRequireDefault(require("./SkeletonTabs"));

package/cjs/components/index.js

@@ -88,7 +88,8 @@ var _exportNames = {
   Tooltip: true,
   Tour: true,
   Translate: true,
-  Link: true
+  Link: true,
+  Skeleton: true
 };
 Object.defineProperty(exports, "Action", {
   enumerable: true,
@@ -492,6 +493,12 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
 Object.defineProperty(exports, "SplitButton", {
   enumerable: true,
   get: function () {
@@ -935,6 +942,20 @@ var _Translate = _interopRequireDefault(require("./Translate"));
 
 var _Link = _interopRequireDefault(require("./Link"));
 
+var _Skeleton = _interopRequireWildcard(require("./Skeleton"));
+
+Object.keys(_Skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Skeleton[key];
+    }
+  });
+});
+
 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; }

package/cjs/components/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapFunction = exports.scrollIntoView = exports.safeInvoke = exports.mergeRefs = exports.isClickable = exports.createProxyProps = exports.createFocusManager = exports.EventEmitter = void 0;
+exports.wrapFunction = exports.scrollIntoView = exports.safeInvoke = exports.normalizeSize = exports.mergeRefs = exports.isClickable = exports.createProxyProps = exports.createFocusManager = exports.EventEmitter = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -257,4 +257,8 @@ const mergeRefs = (...refs) => value => {
   });
 };
 
-exports.mergeRefs = mergeRefs;
+exports.mergeRefs = mergeRefs;
+
+const normalizeSize = value => String(Number(value)) === String(value) ? `${value}px` : value;
+
+exports.normalizeSize = normalizeSize;

package/cjs/index.js

@@ -54,6 +54,6 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 // Copyright 1999-2018. Plesk International GmbH. All rights reserved.
-const version = "3.27.4";
+const version = "3.28.0";
 exports.version = version;
 (0, _svg4everybody.default)();