@plesk/ui-library 3.35.1 → 3.35.2

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.35.1</title>
+    <title>Plesk UI Library 3.35.2</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">
@@ -26,6 +26,6 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KWST26V"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <script src="build/bundle.edc3f2a1.js"></script>
+    <script src="build/bundle.6318f4a5.js"></script>
   </body>
 </html>

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

@@ -95,11 +95,10 @@ declare type ButtonComponent<Component extends ElementType = 'button'> = {
     defaultProps?: Partial<ButtonProps<Component>>;
     displayName?: string;
 } & (<C extends ElementType = Component>(props: ButtonProps<C>) => ReactElement | null);
-declare const _default: ButtonComponent<"button">;
 /**
  * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
  * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).
- *
- * Since: 0.0.37
+ * @since 0.0.37
  */
+declare const _default: ButtonComponent<"button">;
 export default _default;

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

@@ -0,0 +1,58 @@
+import { Component, CSSProperties, ReactNode } from 'react';
+import { ContentRect } from 'react-measure';
+import './Carousel.less';
+export interface CarouselProps {
+    /**
+     * Slides
+     * @since 0.0.42
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * Carousel component is used for optimizing page space by displaying only some parts
+ * of entire content in a cyclic view.
+ * @since 0.0.42
+ */
+declare class Carousel extends Component<CarouselProps> {
+    static defaultProps: {
+        children: null;
+        className: null;
+        baseClassName: string;
+    };
+    constructor(props: CarouselProps);
+    state: {
+        showControls: boolean;
+        current: number;
+        next: number;
+        moving: boolean;
+        slideWidths: never[];
+        totalWidth: number;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    private readonly speed;
+    private readonly playSpeed;
+    private isRtl;
+    private playTimer;
+    private movingCallback;
+    private readonly rootRef;
+    private readonly genuineRef;
+    handlePrevClick(): void;
+    handleNextClick(): void;
+    play(): void;
+    stop(): void;
+    setCurrentSlide(next: number): void;
+    handleResize({ bounds }: ContentRect): void;
+    listStyle(): CSSProperties;
+    render(): JSX.Element;
+}
+export default Carousel;

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

@@ -0,0 +1,2 @@
+export { default } from './Carousel';
+export type { CarouselProps } from './Carousel';

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

@@ -4,7 +4,7 @@ import Form, { FormProps, FormValues } from '../Form';
 import { ButtonProps } from '../Button';
 import '../../helpers/base.less';
 import './Dialog.less';
-declare type ImageType = string | ReactElement | HTMLAttributes<HTMLImageElement>;
+export declare type ImageType = string | ReactElement | HTMLAttributes<HTMLImageElement>;
 export declare type DialogProps<FV extends FormValues = FormValues> = {
     /**
      * Toggles visibility.

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

@@ -1,2 +1,2 @@
 export { default } from './Dialog';
-export type { DialogProps } from './Dialog';
+export type { DialogProps, ImageType } from './Dialog';

package/types/src/components/Drawer/Header.d.ts

@@ -1,28 +1,12 @@
-import { Component, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import './Header.less';
-declare type HeaderProps = {
+interface HeaderProps {
     baseClassName?: string;
     onClose?: () => void;
     children?: ReactNode;
     backButton?: boolean;
     hideButton?: boolean;
     tabs?: ReactNode;
-};
-export default class Header extends Component<HeaderProps> {
-    static defaultProps: {
-        onClose: null;
-        baseClassName: string;
-        backButton: boolean;
-        hideButton: boolean;
-        tabs: undefined;
-    };
-    componentDidMount(): void;
-    private isRtl;
-    renderBackButton(): JSX.Element;
-    renderHideButton(): JSX.Element;
-    renderCloseButton({ disabled }?: {
-        disabled?: boolean | undefined;
-    }): JSX.Element;
-    render(): JSX.Element;
 }
-export {};
+declare const Header: ({ baseClassName, onClose, children, backButton, hideButton, tabs, ...props }: HeaderProps) => JSX.Element;
+export default Header;

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

@@ -101,5 +101,10 @@ export type { FormValues, FormInstanceHandles };
 declare type FormComponent = <FV extends FormValues>(props: FormProps<FV> & {
     ref?: ForwardedRef<FormInstanceHandles>;
 }) => ReactElement;
+/**
+ * `Form` component is used for entering and submitting of user data.
+ * [More details about designing of forms.](#!/Good%20Forms)
+ * @since 0.0.54
+ */
 declare const _default: FormComponent;
 export default _default;

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

@@ -0,0 +1,53 @@
+import { ComponentProps, ReactNode } from 'react';
+import FormField from '../FormField';
+import '../../helpers/base.less';
+import './FormFieldCheckbox.less';
+export interface FormFieldCheckboxProps extends ComponentProps<typeof FormField> {
+    /**
+     * Disabled state of field.
+     * @since 0.1.0
+     */
+    disabled?: boolean;
+    /**
+     * Custom checked value. Default is boolean true.
+     * @since 0.0.59
+     */
+    checkedValue?: boolean | string;
+    /**
+     * Custom unchecked value. Default is boolean false.
+     * @since 0.0.59
+     */
+    uncheckedValue?: boolean | string;
+    /**
+     * The browser will automatically focus on the component upon rendering the screen
+     * @since 1.9.0
+     */
+    autoFocus?: boolean;
+    /**
+     * @ignore
+     */
+    label?: ReactNode;
+    /**
+     * @ignore
+     */
+    required?: boolean;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * Adds an info icon with the additional description.
+     */
+    fullDescription?: string;
+}
+/**
+ * `FormFieldCheckbox` component is used for turning an option on or off
+ * and selecting or deselecting an item.
+ * @since 0.0.58
+ */
+declare const FormFieldCheckbox: ({ className, label, autoFocus, required, checkedValue, uncheckedValue, baseClassName, ...props }: FormFieldCheckboxProps) => JSX.Element;
+export default FormFieldCheckbox;

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

@@ -0,0 +1,2 @@
+export { default } from './FormFieldCheckbox';
+export type { FormFieldCheckboxProps } from './FormFieldCheckbox';

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

@@ -0,0 +1,2 @@
+declare const generatePassword: () => string;
+export default generatePassword;

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

@@ -0,0 +1,97 @@
+import { Component, ReactNode } from 'react';
+import { ContentRect } from 'react-measure';
+import './Grid.less';
+declare type ColumnsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
+declare type CalculateMaxColumns = (options: {
+    width: number;
+}) => number;
+export interface GridProps {
+    /**
+     * Content of the `Grid`.
+     * @since 0.0.48
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * Minimal column width
+     * @since 0.0.50
+     */
+    minColumnWidth?: number;
+    /**
+     * Maximum columns number
+     * @since 0.0.53
+     */
+    maxColumnsNumber?: number | CalculateMaxColumns;
+    /**
+     * Number of columns for `xs` breakpoint
+     * @since 0.0.53
+     */
+    xs?: ColumnsNumber;
+    /**
+     * Number of columns for `sm` breakpoint
+     * @since 0.0.48
+     */
+    sm?: ColumnsNumber;
+    /**
+     * Number of columns for `md` breakpoint
+     * @since 0.0.48
+     */
+    md?: ColumnsNumber;
+    /**
+     * Number of columns for `lg` breakpoint
+     * @since 0.0.48
+     */
+    lg?: ColumnsNumber;
+    /**
+     * Number of columns for `xl` breakpoint
+     * @since 0.0.48
+     */
+    xl?: ColumnsNumber;
+    /**
+     * Specifying the gutters between grid items
+     * @since 0.0.53
+     */
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Columns number change notifier
+     * @since 0.0.50
+     */
+    onColumnsChange?: (columnsNumber: number) => void;
+}
+interface GridState {
+    xs: ColumnsNumber | number | undefined;
+}
+/**
+ * `Grid` component is used to layout and align content based on 12-column system.
+ * @since 0.0.48
+ */
+declare class Grid extends Component<GridProps, GridState> {
+    static defaultProps: {
+        children: null;
+        className: null;
+        baseClassName: string;
+        minColumnWidth: null;
+        maxColumnsNumber: number;
+        xs: null;
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+        gap: null;
+        onColumnsChange: null;
+    };
+    state: {
+        xs: ColumnsNumber | undefined;
+    };
+    handleResize: ({ bounds }: ContentRect) => void;
+    getGapSize(): 0 | 8 | 12 | 16 | 24 | 32;
+    render(): JSX.Element;
+}
+export default Grid;

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

@@ -0,0 +1,2 @@
+export { default } from './Grid';
+export type { GridProps } from './Grid';

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

@@ -0,0 +1,53 @@
+import { ReactNode, HTMLAttributes } from 'react';
+declare type GridColSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface GridColProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content of the `GridCol`.
+     * @since 0.0.48
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * Column size for `xs` breakpoint
+     * @type number (1...12)
+     * @since 0.0.53
+     */
+    xs?: GridColSize;
+    /**
+     * Column size for `sm` breakpoint
+     * @type number (1...12)
+     * @since 0.0.53
+     */
+    sm?: GridColSize;
+    /**
+     * Column size for `sm` breakpoint
+     * @type number (1...12)
+     * @since 0.0.53
+     */
+    md?: GridColSize;
+    /**
+     * Column size for `md` breakpoint
+     * @type number (1...12)
+     * @since 0.0.53
+     */
+    lg?: GridColSize;
+    /**
+     * Column size for `lg` breakpoint
+     * @type number (1...12)
+     * @since 0.0.53
+     */
+    xl?: GridColSize;
+}
+/**
+ * `GridCol` component is a part of [Grid](#!/Grid) component.
+ * @since 0.0.48
+ */
+declare const GridCol: ({ baseClassName, className, children, xs, sm, md, lg, xl, ...props }: GridColProps) => JSX.Element;
+export default GridCol;

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

@@ -0,0 +1,2 @@
+export { default } from './GridCol';
+export type { GridColProps } from './GridCol';

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

@@ -42,8 +42,7 @@ export declare type LinkProps<Component extends ElementType = 'a'> = {
 } & PolymorphicComponentProps<Component, BaseLinkProps>;
 /**
  * `Link` is used for navigation purposes.
- *
- * Since: 1.9.0
+ * @since 1.9.0
  */
 declare const Link: <Component extends ElementType<any> = "a">({ baseClassName, className, onClick, disabled, pseudo, component, children, ...other }: LinkProps<Component>) => JSX.Element;
 export default Link;

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

@@ -7,7 +7,7 @@ declare type Messages = {
 declare type Translate = (key: string, params?: {
     [key: string]: unknown;
 }, fallback?: string) => string | ReactNode[];
-export declare const useTranslate: (namespace?: string | undefined) => Translate;
+export declare const useTranslate: (namespace?: string) => Translate;
 declare type LocaleProviderProps = {
     /**
      * Localization messages

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

@@ -0,0 +1,125 @@
+import { Component, ReactNode } from 'react';
+import { ImageType } from '../Dialog';
+import { ProgressProps } from '../Progress';
+import '../../helpers/base.less';
+import './ProgressDialog.less';
+export interface ProgressDialogProps {
+    /**
+     * Toggles visibility.
+     * @since 1.2.0
+     */
+    isOpen?: boolean;
+    /**
+     * Banner. Renders in front of content as wide as dialog.
+     * @since 1.2.0
+     */
+    banner?: ImageType;
+    /**
+     * Image. Renders into content.
+     * @since 1.2.0
+     */
+    image?: ImageType;
+    /**
+     * Title
+     * @since 1.2.0
+     */
+    title?: ReactNode;
+    /**
+     * Description of the `ProgressDialog`.
+     * @since 1.2.0
+     */
+    description?: ReactNode;
+    /**
+     * Actions which will be shown in Dialog header.
+     * @since 1.2.0
+     */
+    actions?: ReactNode;
+    /**
+     * Whether the dialog should be canceled with the cancel button.
+     * @since 1.2.0
+     */
+    cancelable?: boolean;
+    /**
+     * The interval of time to auto close dialog when it successfully finished.
+     * Set `null` for disable auto close.
+     * @since 1.2.0
+     */
+    autoCloseTimeout?: number | null;
+    /**
+     * On cancel event handler.
+     * @since 1.2.0
+     */
+    onCancel?: () => void;
+    /**
+     * On close event handler.
+     * @since 1.2.0
+     */
+    onClose?: () => void;
+    /**
+     * On finish event handler.
+     * @since 1.2.0
+     */
+    onFinish?: () => void;
+    /**
+     * On fail event handler.
+     * @since 1.2.0
+     */
+    onFail?: () => void;
+    /**
+     * Content of the `ProgressDialog`.
+     * @since 1.2.0
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+declare type ProgressDialogState = {
+    isOpen: boolean;
+    isFinished: boolean;
+    isFailed: boolean;
+};
+/**
+ * `ProgressDialog` is a [Dialog](#!/Dialog) combined with of [Progress](#!/Progress) component.
+ * @since 1.2.0
+ */
+declare class ProgressDialog extends Component<ProgressDialogProps, ProgressDialogState> {
+    static defaultProps: {
+        isOpen: boolean;
+        banner: null;
+        image: null;
+        title: null;
+        description: null;
+        actions: null;
+        cancelable: boolean;
+        autoCloseTimeout: number;
+        onCancel: null;
+        onClose: null;
+        onFinish: null;
+        onFail: null;
+        children: null;
+        className: null;
+        baseClassName: string;
+    };
+    static getDerivedStateFromProps({ isOpen }: ProgressDialogState): {
+        isOpen: boolean;
+    };
+    state: {
+        isOpen: boolean;
+        isFinished: boolean;
+        isFailed: boolean;
+    };
+    componentDidUpdate(_: ProgressDialogProps, prevState: ProgressDialogState): void;
+    componentWillUnmount(): void;
+    private closeTimeout;
+    clearCloseTimeout(): void;
+    handleStatusChange: ProgressProps['onStatusChange'];
+    handleClose: () => void;
+    render(): JSX.Element;
+}
+export default ProgressDialog;

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

@@ -0,0 +1,2 @@
+export { default } from './ProgressDialog';
+export type { ProgressDialogProps } from './ProgressDialog';

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

@@ -0,0 +1,27 @@
+import './Rating.less';
+export interface RatingProps {
+    /**
+     * Rating value from 0 to 5.
+     * @since 0.0.42
+     */
+    value?: number;
+    /**
+     * Small variant.
+     * @since 0.0.42
+     */
+    small?: boolean;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `Rating` component is used for showing and collecting feedback of users' opinion in 0-5 grade scale.
+ * @since 0.0.42
+ */
+declare const Rating: ({ baseClassName, className, value, small, ...props }: RatingProps) => JSX.Element;
+export default Rating;

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

@@ -0,0 +1,2 @@
+export { default } from './Rating';
+export type { RatingProps } from './Rating';

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

@@ -1,4 +1,4 @@
-import { ComponentType, FC, JSX } from 'react';
+import { ComponentType, FC, JSX, CSSProperties } from 'react';
 import './Skeleton.less';
 export declare type SkeletonProps = {
     /**
@@ -20,12 +20,10 @@ export declare type SkeletonProps = {
      */
     height?: number | string;
     /**
-     * custom styles for skeleton
+     * Custom styles for skeleton
      * @since 3.28.0
      */
-    style?: {
-        [key: string]: string;
-    };
+    style?: CSSProperties;
     /**
      * Component to render as the root element.
      * @since 3.28.0

package/types/src/components/Skeleton/SkeletonTabs.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import './SkeletonTabs.less';
-declare type SkeletonTabsProps = {
+export interface SkeletonTabsProps {
     /**
      * Number of tabs
      * @since 3.28.0
@@ -9,12 +9,12 @@ declare type SkeletonTabsProps = {
     /**
      * @ignore
      */
-    className: string;
+    className?: string;
     /**
      * @ignore
      */
-    baseClassName: string;
-};
+    baseClassName?: string;
+}
 /**
  * Skeleton for tabs component
  * @since `3.28.0

package/types/src/components/Skeleton/SkeletonText.d.ts

@@ -1,7 +1,7 @@
 import { FC, ComponentType, JSX } from 'react';
 import { SkeletonProps } from './Skeleton';
 import './SkeletonText.less';
-declare type SkeletonTextProps = {
+export interface SkeletonTextProps {
     /**
      * Number of rows
      * @since 3.28.0
@@ -25,7 +25,7 @@ declare type SkeletonTextProps = {
      * @ignore
      */
     className?: string;
-};
+}
 /**
  * Skeleton for text-containing components. Is can be used inside Paragraph, as title, or single text
  * @since 3.28.0

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

@@ -1,3 +1,6 @@
 export { default } from './Skeleton';
-export { default as SkeletonText } from './SkeletonText';
+export type { SkeletonProps } from './Skeleton';
 export { default as SkeletonTabs } from './SkeletonTabs';
+export type { SkeletonTabsProps } from './SkeletonTabs';
+export { default as SkeletonText } from './SkeletonText';
+export type { SkeletonTextProps } from './SkeletonText';

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

@@ -46,8 +46,7 @@ export interface SplitButtonProps {
  * `Split Button` is a combination of a standard [Button](#!/Button) with a [Dropdown](#!/Dropdown) menu.
  * It is used for grouping several related actions when one of the actions should be accessible immediately
  * because it is used more often than others.
- *
- * Since: 0.0.40
+ * @since 0.0.40
  */
 declare const SplitButton: ({ baseClassName, className, menu, children, onClick, onKeyDown, icon, size, ...props }: SplitButtonProps) => JSX.Element;
 export default SplitButton;

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

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+import '../../helpers/base.less';
+import './SwitchesPanel.less';
+export interface SwitchesPanelProps {
+    /**
+     * Content of the `SwitchesPanel`. Recommended to use [SwitchesPanelItem](#!/SwitchesPanelItem) components.
+     * @since 0.3.0
+     */
+    children?: ReactElement[] | ReactElement;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `SwitchesPanel` component is used for grouping several [SwitchesPanelItems](#!/SwitchesPanelItem) into one set.
+ * @since 0.3.0
+ */
+declare const SwitchesPanel: ({ baseClassName, className, children, ...props }: SwitchesPanelProps) => JSX.Element;
+export default SwitchesPanel;

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

@@ -0,0 +1,2 @@
+export { default } from './SwitchesPanel';
+export type { SwitchesPanelProps } from './SwitchesPanel';