@plesk/ui-library 3.27.0 → 3.27.3

package/styleguide/images/rating.svg

@@ -1,6 +1,6 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="56" height="248" viewBox="0 0 51 248">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="56" height="248" viewBox="0 0 51 248">
 <defs><symbol id="star"><path stroke-width="3" d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"></path></symbol></defs>
-<use x="0" y="0"   fill="none" stroke="#ff9500" xlink:href="#star"></use>
-<use x="0" y="100" fill="#ff9500" stroke="#ff9500" xlink:href="#star"></use>
-<use x="0" y="200" fill="#848484" stroke="#848484" xlink:href="#star"></use>
-</svg>
+<use x="0" y="0"   fill="none" stroke="#ff9500" href="#star"></use>
+<use x="0" y="100" fill="#ff9500" stroke="#ff9500" href="#star"></use>
+<use x="0" y="200" fill="#848484" stroke="#848484" href="#star"></use>
+</svg>

package/styleguide/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Plesk UI Library 3.27.0</title>
+    <title>Plesk UI Library 3.27.3</title>
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
     <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
@@ -40,6 +40,6 @@
     </script>
     <noscript><div><img src="https://mc.yandex.ru/watch/56446840" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
     <!-- /Yandex.Metrika counter -->
-    <script src="build/bundle.ff1f903a.js"></script>
+    <script src="build/bundle.f38c467d.js"></script>
   </body>
 </html>

package/types/package.d.ts

@@ -93,6 +93,7 @@ declare const _exports: {
         "less-loader": string;
         "mini-css-extract-plugin": string;
         "postcss": string;
+        "postcss-less": string;
         "postcss-loader": string;
         "postcss-logical": string;
         "prettier": string;
@@ -104,8 +105,12 @@ declare const _exports: {
         "rimraf": string;
         "rtlcss": string;
         "style-loader": string;
+        "stylelint": string;
         "stylelint-config-prettier": string;
+        "stylelint-declaration-block-no-ignored-properties": string;
+        "stylelint-no-unsupported-browser-features": string;
         "stylelint-prettier": string;
+        "stylelint-use-logical-spec": string;
         "svg-mixer": string;
         "terser-webpack-plugin": string;
         "typescript": string;

package/types/src/components/FormFieldPassword/FormFieldPassword.d.ts

@@ -0,0 +1,91 @@
+import { Component, ComponentProps, ReactElement, RefObject } from 'react';
+import Button from '../Button';
+import FormField from '../FormField';
+import { PasswordMeterProps } from './PasswordMeter';
+import './FormFieldPassword.less';
+export declare type FormFieldPasswordProps = {
+    /**
+     * Is show button hidden?
+     * @since 0.0.59
+     */
+    hideShowButton?: boolean;
+    /**
+     * Is generate button hidden?
+     * @since 0.0.59
+     */
+    hideGenerateButton?: boolean;
+    /**
+     * Is password meter hidden?
+     * @since 0.0.59
+     */
+    hidePasswordMeter?: boolean;
+    /**
+     * Additional props for password meter. See [Popover](#!/Popover) for more information.
+     * @since 1.5.6
+     */
+    passwordMeterProps?: PasswordMeterProps;
+    /**
+     * Size of the control
+     * @since 1.5.6
+     */
+    size: 'md' | 'lg' | 'xl' | 'fill';
+    /**
+     * The browser will automatically focus on the component upon rendering the screen
+     * @since 1.9.0
+     */
+    autoFocus?: boolean;
+    /**
+     * Prevent password autocompletion.
+     * @since 2.5.1
+     */
+    autoComplete?: 'new-password';
+    /**
+     * A render function for customizing the password generation button.
+     * @since 3.13.0
+     */
+    generateButton?: (generateButtonProps: ComponentProps<typeof Button>) => ReactElement;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+} & ComponentProps<typeof FormField>;
+declare type FormFieldPasswordState = {
+    visible: boolean;
+    passwordMeterVisible: boolean;
+};
+/**
+ * `FormFieldPassword` component provides secure way to enter a password.
+ * @since 0.0.58
+ */
+declare class FormFieldPassword extends Component<FormFieldPasswordProps, FormFieldPasswordState> {
+    static defaultProps: {
+        hideShowButton: boolean;
+        generateButton: undefined;
+        hideGenerateButton: boolean;
+        hidePasswordMeter: boolean;
+        passwordMeterProps: {};
+        size: string;
+        autoFocus: undefined;
+        autoComplete: undefined;
+        className: undefined;
+        baseClassName: string;
+    };
+    state: {
+        visible: boolean;
+        passwordMeterVisible: boolean;
+    };
+    targetRef: RefObject<HTMLSpanElement>;
+    handleToggleClick: () => void;
+    handleClosePasswordMeter: () => void;
+    handleBlur: () => void;
+    renderGenerateButton({ setValue, isDisabled, }: {
+        setValue: (value: any) => void;
+        isDisabled: () => boolean;
+    }): JSX.Element;
+    render(): JSX.Element;
+}
+export default FormFieldPassword;

package/types/src/components/FormFieldPassword/PasswordMeter.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import Popover from '../Popover';
+import estimatePassword, { EstimateResult, EstimateRule } from './estimatePassword';
+export declare type PasswordMeterProps = {
+    value: string;
+    onEstimate?: (password: string, defaultEstimateFn: typeof estimatePassword, defaultEstimateRules: EstimateRule[]) => EstimateResult;
+} & ComponentProps<typeof Popover>;
+declare const PasswordMeter: FunctionComponent<PasswordMeterProps>;
+export default PasswordMeter;

package/types/src/components/FormFieldPassword/estimatePassword.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare type EstimateRule = {
+    name: string;
+    suggestion?: ReactNode;
+    score: (password: string) => number;
+};
+export declare type EstimateResult = {
+    strength: 'VeryWeak' | 'Weak' | 'Medium' | 'Strong' | 'VeryStrong';
+    suggestions: ReactNode[];
+};
+export declare const DEFAULT_RULES: EstimateRule[];
+declare const _default: (password: string, rules?: EstimateRule[]) => EstimateResult;
+export default _default;

package/types/src/components/FormFieldPassword/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FormFieldPassword';
+export { default as generatePassword } from './generatePassword';

package/cjs/components/FormFieldPassword/passwordScore.js

@@ -1,131 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PASSWORD_SCORE_RULES = void 0;
-
-// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
-const passwordScore = (password, rules = PASSWORD_SCORE_RULES) => {
-  const unusedRules = [];
-  let score = 0;
-  rules.forEach(rule => {
-    const mark = rule.score(password);
-
-    if (mark < 0) {
-      unusedRules.push({
-        rule,
-        value: -mark
-      });
-    } else {
-      score += mark;
-    }
-  });
-  return {
-    score,
-    unusedRules
-  };
-};
-
-const PASSWORD_SCORE_RULES = [{
-  name: 'passwordTooShort',
-
-  score(passwd) {
-    return passwd.length < 5 ? -1 : 0;
-  }
-
-}, {
-  name: 'passwordLength',
-
-  score(passwd) {
-    if (passwd.length < 5) {
-      return 3;
-    }
-
-    if (passwd.length > 4 && passwd.length < 8) {
-      return 6;
-    }
-
-    if (passwd.length > 7 && passwd.length < 16) {
-      return 12;
-    }
-
-    return 18;
-  }
-
-}, {
-  name: 'lettersLowerCase',
-
-  score(passwd) {
-    // [verified] at least one lower case letter
-    return passwd.match(/[a-z]/) ? 1 : -1;
-  }
-
-}, {
-  name: 'lettersUpperCase',
-
-  score(passwd) {
-    // [verified] at least one upper case letter
-    return passwd.match(/[A-Z]/) ? 5 : -1;
-  }
-
-}, {
-  name: 'numbers1',
-
-  score(passwd) {
-    // [verified] at least one number
-    return passwd.match(/\d+/) ? 5 : -1;
-  }
-
-}, {
-  name: 'numbers3',
-
-  score(passwd) {
-    // [verified] at least three numbers
-    return passwd.match(/(.*[0-9].*[0-9].*[0-9])/) ? 5 : -1;
-  }
-
-}, {
-  name: 'specialChar1',
-
-  score(passwd) {
-    // [verified] at least one special character
-    return passwd.match(/[!@#$%^&*?_~]/) ? 5 : -1;
-  }
-
-}, {
-  name: 'specialChar2',
-
-  score(passwd) {
-    // [verified] at least two special characters
-    return passwd.match(/(.*[!@#$%^&*?_~].*[!@#$%^&*?_~])/) ? 5 : -1;
-  }
-
-}, {
-  name: 'comboUpperAndLower',
-
-  score(passwd) {
-    // [verified] both upper and lower case
-    return passwd.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) ? 2 : -1;
-  }
-
-}, {
-  name: 'comboLettersAndNumbers',
-
-  score(passwd) {
-    // [verified] both letters and numbers
-    return passwd.match(/([a-zA-Z])/) && passwd.match(/([0-9])/) ? 2 : -1;
-  }
-
-}, {
-  name: 'comboLettersNumbersSpecial',
-
-  score(passwd) {
-    // [verified] letters, numbers, and special characters
-    return passwd.match(/([a-zA-Z0-9].*[!@#$%^&*?_~])|([!@#$%^&*?_~].*[a-zA-Z0-9])/) ? 2 : -1;
-  }
-
-}];
-exports.PASSWORD_SCORE_RULES = PASSWORD_SCORE_RULES;
-var _default = passwordScore;
-exports.default = _default;

package/esm/components/FormFieldPassword/passwordScore.js

@@ -1,122 +0,0 @@
-// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
-const passwordScore = (password, rules = PASSWORD_SCORE_RULES) => {
-  const unusedRules = [];
-  let score = 0;
-  rules.forEach(rule => {
-    const mark = rule.score(password);
-
-    if (mark < 0) {
-      unusedRules.push({
-        rule,
-        value: -mark
-      });
-    } else {
-      score += mark;
-    }
-  });
-  return {
-    score,
-    unusedRules
-  };
-};
-
-export const PASSWORD_SCORE_RULES = [{
-  name: 'passwordTooShort',
-
-  score(passwd) {
-    return passwd.length < 5 ? -1 : 0;
-  }
-
-}, {
-  name: 'passwordLength',
-
-  score(passwd) {
-    if (passwd.length < 5) {
-      return 3;
-    }
-
-    if (passwd.length > 4 && passwd.length < 8) {
-      return 6;
-    }
-
-    if (passwd.length > 7 && passwd.length < 16) {
-      return 12;
-    }
-
-    return 18;
-  }
-
-}, {
-  name: 'lettersLowerCase',
-
-  score(passwd) {
-    // [verified] at least one lower case letter
-    return passwd.match(/[a-z]/) ? 1 : -1;
-  }
-
-}, {
-  name: 'lettersUpperCase',
-
-  score(passwd) {
-    // [verified] at least one upper case letter
-    return passwd.match(/[A-Z]/) ? 5 : -1;
-  }
-
-}, {
-  name: 'numbers1',
-
-  score(passwd) {
-    // [verified] at least one number
-    return passwd.match(/\d+/) ? 5 : -1;
-  }
-
-}, {
-  name: 'numbers3',
-
-  score(passwd) {
-    // [verified] at least three numbers
-    return passwd.match(/(.*[0-9].*[0-9].*[0-9])/) ? 5 : -1;
-  }
-
-}, {
-  name: 'specialChar1',
-
-  score(passwd) {
-    // [verified] at least one special character
-    return passwd.match(/[!@#$%^&*?_~]/) ? 5 : -1;
-  }
-
-}, {
-  name: 'specialChar2',
-
-  score(passwd) {
-    // [verified] at least two special characters
-    return passwd.match(/(.*[!@#$%^&*?_~].*[!@#$%^&*?_~])/) ? 5 : -1;
-  }
-
-}, {
-  name: 'comboUpperAndLower',
-
-  score(passwd) {
-    // [verified] both upper and lower case
-    return passwd.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) ? 2 : -1;
-  }
-
-}, {
-  name: 'comboLettersAndNumbers',
-
-  score(passwd) {
-    // [verified] both letters and numbers
-    return passwd.match(/([a-zA-Z])/) && passwd.match(/([0-9])/) ? 2 : -1;
-  }
-
-}, {
-  name: 'comboLettersNumbersSpecial',
-
-  score(passwd) {
-    // [verified] letters, numbers, and special characters
-    return passwd.match(/([a-zA-Z0-9].*[!@#$%^&*?_~])|([!@#$%^&*?_~].*[a-zA-Z0-9])/) ? 2 : -1;
-  }
-
-}];
-export default passwordScore;