@plesk/ui-library 3.27.3 → 3.28.1

package/types/src/components/Select/structures.d.ts

@@ -1,19 +1,19 @@
-import { ReactNode } from 'react';
-export declare type Value = string | number;
-export declare type Group = {
-    label?: string;
-    options: Option[];
-    props?: {
-        [key: string]: any;
-    };
-};
-export declare type Option = {
-    value: Value;
-    label: string;
-    disabled: boolean;
-    children: ReactNode;
-    group?: Group;
-    props: {
-        [key: string]: any;
-    };
-};
+import { ReactNode } from 'react';
+export declare type Value = string | number;
+export declare type Group = {
+    label?: string;
+    options: Option[];
+    props?: {
+        [key: string]: any;
+    };
+};
+export declare type Option = {
+    value: Value;
+    label: string;
+    disabled: boolean;
+    children: ReactNode;
+    group?: Group;
+    props: {
+        [key: string]: any;
+    };
+};

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

@@ -0,0 +1,49 @@
+import { ComponentType, FC } from 'react';
+import './Skeleton.less';
+export declare type SkeletonProps = {
+    /**
+     * Skeleton width. For the width specified as a number, `'px'` is used as the unit.
+     * You can also specify a value with other units such as `'em'`, `'%'`, etc. (f.e. 20%, 10em)
+     * @since 3.28.0
+     */
+    width?: number | string;
+    /**
+     * Skeleton max width. For the width specified as a number, `'px'` is used as the unit.
+     * You can also specify a value with other units such as `'em'`, `'%'`, etc. (f.e. 20%, 10em)
+     * @since 3.28.0
+     */
+    maxWidth?: number | string;
+    /**
+     * Skeleton height. For the width specified as a number, `'px'` is used as the unit.
+     * You can also specify a value with other units such as `'em'`, `'%'`, etc. (f.e. 20%, 10em)
+     * @since 3.28.0
+     */
+    height?: number | string;
+    /**
+     * custom styles for skeleton
+     * @since 3.28.0
+     */
+    style?: {
+        [key: string]: string;
+    };
+    /**
+     * Component to render as the root element.
+     * @since 3.28.0
+     */
+    component?: ComponentType | keyof JSX.IntrinsicElements;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+};
+/**
+ * `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
+ */
+declare const Skeleton: FC<SkeletonProps>;
+export default Skeleton;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const Basic: {
+    (args: React.PropsWithChildren<import("./Skeleton").SkeletonProps>): JSX.Element;
+    args: {};
+};
+export declare const CustomSize: {
+    (args: React.PropsWithChildren<import("./Skeleton").SkeletonProps>): JSX.Element;
+    args: {
+        width: number;
+        height: number;
+    };
+};

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

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import './SkeletonTabs.less';
+declare type SkeletonTabsProps = {
+    /**
+     * Number of tabs
+     * @since 3.28.0
+     */
+    count?: number;
+    /**
+     * @ignore
+     */
+    className: string;
+    /**
+     * @ignore
+     */
+    baseClassName: string;
+};
+/**
+ * Skeleton for tabs component
+ * @since `3.28.0
+ */
+declare const SkeletonTabs: FC<SkeletonTabsProps>;
+export default SkeletonTabs;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Basic: (args: React.PropsWithChildren<{
+    count?: number | undefined;
+    className: string;
+    baseClassName: string;
+}>) => JSX.Element;

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

@@ -0,0 +1,34 @@
+import { FC, ComponentType } from 'react';
+import { SkeletonProps } from './Skeleton';
+import './SkeletonText.less';
+declare type SkeletonTextProps = {
+    /**
+     * Number of rows
+     * @since 3.28.0
+     */
+    lines?: number;
+    /**
+     * Props for line
+     * @since 3.28.0
+     */
+    lineProps?: SkeletonProps;
+    /**
+     * Component to render as the root element.
+     * @since 3.28.0
+     */
+    component?: ComponentType | keyof JSX.IntrinsicElements;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+};
+/**
+ * Skeleton for text-containing components. Is can be used inside Paragraph, as title, or single text
+ * @since 3.28.0
+ */
+declare const SkeletonText: FC<SkeletonTextProps>;
+export default SkeletonText;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+export declare const Basic: {
+    (args: React.PropsWithChildren<{
+        lines?: number | undefined;
+        lineProps?: import("./Skeleton").SkeletonProps | undefined;
+        component?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "menuitem" | "keygen" | "noindex" | "webview" | "animate" | "animateMotion" | "animateTransform" | "feDropShadow" | "mpath" | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined;
+        baseClassName?: string | undefined;
+        className?: string | undefined;
+    }>): JSX.Element;
+    args: {};
+};
+export declare const LinesCount: {
+    (args: React.PropsWithChildren<{
+        lines?: number | undefined;
+        lineProps?: import("./Skeleton").SkeletonProps | undefined;
+        component?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "menuitem" | "keygen" | "noindex" | "webview" | "animate" | "animateMotion" | "animateTransform" | "feDropShadow" | "mpath" | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined;
+        baseClassName?: string | undefined;
+        className?: string | undefined;
+    }>): JSX.Element;
+    args: {
+        lines: number;
+    };
+};
+export declare const Custom: {
+    (args: React.PropsWithChildren<{
+        lines?: number | undefined;
+        lineProps?: import("./Skeleton").SkeletonProps | undefined;
+        component?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "menuitem" | "keygen" | "noindex" | "webview" | "animate" | "animateMotion" | "animateTransform" | "feDropShadow" | "mpath" | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined;
+        baseClassName?: string | undefined;
+        className?: string | undefined;
+    }>): JSX.Element;
+    args: {
+        lines: number;
+        lineProps: {
+            width: number;
+        };
+    };
+};

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

@@ -0,0 +1,3 @@
+export { default } from './Skeleton';
+export { default as SkeletonText } from './SkeletonText';
+export { default as SkeletonTabs } from './SkeletonTabs';

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

@@ -1,18 +1,18 @@
-import { FunctionComponent } from 'react';
-import '../../helpers/base.less';
-import './Spinner.less';
-declare type SpinnerProps = {
-    /**
-     * @ignore
-     */
-    baseClassName?: string;
-    /**
-     * @ignore
-     */
-    className?: string;
-};
-/**
- * `Spinner` component.
- */
-declare const Spinner: FunctionComponent<SpinnerProps>;
-export default Spinner;
+import { FunctionComponent } from 'react';
+import '../../helpers/base.less';
+import './Spinner.less';
+declare type SpinnerProps = {
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+};
+/**
+ * `Spinner` component.
+ */
+declare const Spinner: FunctionComponent<SpinnerProps>;
+export default Spinner;

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

@@ -1 +1 @@
-export { default } from './Spinner';
+export { default } from './Spinner';

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

@@ -1,70 +1,70 @@
-import { ReactElement, ReactNode } from 'react';
-declare type SpotProps = {
-    /**
-     * A css selector for the node that should be highlighted.
-     * @since 3.0.1
-     */
-    selector: string;
-    /**
-     * Placement of the pulsar on the target node. By default, it places in the center of the node.
-     * @since 3.0.1
-     */
-    placement?: 'left' | 'center' | 'right';
-    /**
-     * A popup displayed when the spot is active.
-     * @since 3.0.1
-     */
-    popup?: {
-        /**
-         * @ignore
-         */
-        className?: string;
-        /**
-         * A size of the popup.
-         */
-        size?: 'xs' | 'sm' | 'md';
-        /**
-         * Placement of the popup.
-         */
-        placement?: 'auto' | 'top-left' | 'top' | 'top-right' | 'right-top' | 'right' | 'right-bottom' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left-bottom' | 'left' | 'left-top';
-        /**
-         * Buttons with some actions (go to next spot, previous, etc.).
-         */
-        buttons?: ReactElement[];
-        /**
-         * A title for the popup.
-         */
-        title?: ReactNode;
-        /**
-         * An URL to some image or React element.
-         */
-        image?: ReactNode;
-        /**
-         * Custom localization messages.
-         */
-        locale?: {
-            total?: ReactNode;
-        };
-        /**
-         * A callback fired when the popup is closed.
-         */
-        onClose?: () => void;
-        /**
-         * Content of the popup.
-         */
-        children?: ReactNode;
-    };
-    /**
-     * @ignore
-     */
-    meta?: {
-        current: number;
-        total: number;
-    };
-};
-/**
- * The component can be used to attract the user's attention to a specific element on the page.
- * @since 3.0.1
- */
-declare const Spot: ({ selector, popup, meta, placement, ...props }: SpotProps) => JSX.Element | null;
-export default Spot;
+import { ReactElement, ReactNode } from 'react';
+declare type SpotProps = {
+    /**
+     * A css selector for the node that should be highlighted.
+     * @since 3.0.1
+     */
+    selector: string;
+    /**
+     * Placement of the pulsar on the target node. By default, it places in the center of the node.
+     * @since 3.0.1
+     */
+    placement?: 'left' | 'center' | 'right';
+    /**
+     * A popup displayed when the spot is active.
+     * @since 3.0.1
+     */
+    popup?: {
+        /**
+         * @ignore
+         */
+        className?: string;
+        /**
+         * A size of the popup.
+         */
+        size?: 'xs' | 'sm' | 'md';
+        /**
+         * Placement of the popup.
+         */
+        placement?: 'auto' | 'top-left' | 'top' | 'top-right' | 'right-top' | 'right' | 'right-bottom' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left-bottom' | 'left' | 'left-top';
+        /**
+         * Buttons with some actions (go to next spot, previous, etc.).
+         */
+        buttons?: ReactElement[];
+        /**
+         * A title for the popup.
+         */
+        title?: ReactNode;
+        /**
+         * An URL to some image or React element.
+         */
+        image?: ReactNode;
+        /**
+         * Custom localization messages.
+         */
+        locale?: {
+            total?: ReactNode;
+        };
+        /**
+         * A callback fired when the popup is closed.
+         */
+        onClose?: () => void;
+        /**
+         * Content of the popup.
+         */
+        children?: ReactNode;
+    };
+    /**
+     * @ignore
+     */
+    meta?: {
+        current: number;
+        total: number;
+    };
+};
+/**
+ * The component can be used to attract the user's attention to a specific element on the page.
+ * @since 3.0.1
+ */
+declare const Spot: ({ selector, popup, meta, placement, ...props }: SpotProps) => JSX.Element | null;
+export default Spot;

package/types/src/components/Spot/SpotPopup.d.ts

@@ -1,25 +1,25 @@
-import { ReactElement, ReactNode, RefObject } from 'react';
-import SpotPulsar from './SpotPulsar';
-import './SpotPopup.less';
-declare type SpotPopupProps = {
-    baseClassName?: string;
-    className?: string;
-    pulsar: ReactElement<typeof SpotPulsar>;
-    pulsarRef: RefObject<HTMLElement>;
-    size?: 'xs' | 'sm' | 'md';
-    placement?: 'auto' | 'top-left' | 'top' | 'top-right' | 'right-top' | 'right' | 'right-bottom' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left-bottom' | 'left' | 'left-top';
-    buttons?: ReactElement[];
-    title?: ReactNode;
-    image?: ReactNode;
-    children?: ReactNode;
-    meta?: {
-        current: number;
-        total: number;
-    };
-    locale?: {
-        total?: ReactNode;
-    };
-    onClose?: () => void;
-};
-declare const SpotPopup: ({ baseClassName, className, pulsar, pulsarRef, title, placement, image, children, buttons, meta, onClose, size, locale, ...props }: SpotPopupProps) => JSX.Element;
-export default SpotPopup;
+import { ReactElement, ReactNode, RefObject } from 'react';
+import SpotPulsar from './SpotPulsar';
+import './SpotPopup.less';
+declare type SpotPopupProps = {
+    baseClassName?: string;
+    className?: string;
+    pulsar: ReactElement<typeof SpotPulsar>;
+    pulsarRef: RefObject<HTMLElement>;
+    size?: 'xs' | 'sm' | 'md';
+    placement?: 'auto' | 'top-left' | 'top' | 'top-right' | 'right-top' | 'right' | 'right-bottom' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left-bottom' | 'left' | 'left-top';
+    buttons?: ReactElement[];
+    title?: ReactNode;
+    image?: ReactNode;
+    children?: ReactNode;
+    meta?: {
+        current: number;
+        total: number;
+    };
+    locale?: {
+        total?: ReactNode;
+    };
+    onClose?: () => void;
+};
+declare const SpotPopup: ({ baseClassName, className, pulsar, pulsarRef, title, placement, image, children, buttons, meta, onClose, size, locale, ...props }: SpotPopupProps) => JSX.Element;
+export default SpotPopup;

package/types/src/components/Spot/SpotPulsar.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import './SpotPulsar.less';
-declare type SpotPulsarProps = {
-    baseClassName?: string;
-    className?: string;
-    rect: ClientRect;
-    placement?: 'left' | 'center' | 'right';
-};
-declare const SpotPulsar: React.ForwardRefExoticComponent<SpotPulsarProps & React.RefAttributes<HTMLDivElement>>;
-export default SpotPulsar;
+import React from 'react';
+import './SpotPulsar.less';
+declare type SpotPulsarProps = {
+    baseClassName?: string;
+    className?: string;
+    rect: ClientRect;
+    placement?: 'left' | 'center' | 'right';
+};
+declare const SpotPulsar: React.ForwardRefExoticComponent<SpotPulsarProps & React.RefAttributes<HTMLDivElement>>;
+export default SpotPulsar;

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

@@ -1 +1 @@
-export { default } from './Spot';
+export { default } from './Spot';

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

@@ -1,22 +1,22 @@
-import { Component, MutableRefObject, ReactElement } from 'react';
-declare type SqueezerProps = {
-    children: ({ ref }: {
-        ref: (el: Element | null) => void;
-    }) => ReactElement;
-    compact: () => boolean;
-    uncompact: () => boolean;
-    innerRef?: (el: Element) => void;
-    innerMeasure?: (measure: () => void) => void;
-};
-declare class Squeezer extends Component<SqueezerProps> {
-    rootRef: MutableRefObject<Element | null>;
-    measuring: boolean;
-    measurements: number[];
-    minWidth: number;
-    addMeasurement(width: number): void;
-    measure(force?: boolean): void;
-    check(force?: boolean): void;
-    handleResize: () => void;
-    render(): JSX.Element;
-}
-export default Squeezer;
+import { Component, MutableRefObject, ReactElement } from 'react';
+declare type SqueezerProps = {
+    children: ({ ref }: {
+        ref: (el: Element | null) => void;
+    }) => ReactElement;
+    compact: () => boolean;
+    uncompact: () => boolean;
+    innerRef?: (el: Element) => void;
+    innerMeasure?: (measure: () => void) => void;
+};
+declare class Squeezer extends Component<SqueezerProps> {
+    rootRef: MutableRefObject<Element | null>;
+    measuring: boolean;
+    measurements: number[];
+    minWidth: number;
+    addMeasurement(width: number): void;
+    measure(force?: boolean): void;
+    check(force?: boolean): void;
+    handleResize: () => void;
+    render(): JSX.Element;
+}
+export default Squeezer;

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

@@ -1 +1 @@
-export { default } from './Squeezer';
+export { default } from './Squeezer';