@plesk/ui-library 3.27.4 → 3.28.0

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.4</title>
+    <title>Plesk UI Library 3.28.0</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.5df0ee96.js"></script>
+    <script src="build/bundle.24d5b0eb.js"></script>
   </body>
 </html>

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/index.d.ts

@@ -96,3 +96,5 @@ 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 Skeleton } from './Skeleton';
+export * from './Skeleton';

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

@@ -25,4 +25,5 @@ export declare const createFocusManager: (containerRef: React.RefObject<HTMLElem
     focusLast: (attempt?: number) => boolean;
 };
 export declare const mergeRefs: <T>(...refs: React.Ref<T | null>[]) => (value: T | null) => void;
+export declare const normalizeSize: (value?: string | number | undefined) => string | number | undefined;
 export {};