@plesk/ui-library 3.36.1 → 3.37.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.36.1</title>
+    <title>Plesk UI Library 3.37.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">
@@ -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.ed34a3c0.js"></script>
+    <script src="build/bundle.c3d05006.js"></script>
   </body>
 </html>

package/styleguide/placeholders/placeholder_400x200.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 100 600 200">
-  <path fill="#28aade" d="M0 0h600v400H0z"/>
-  <path fill="#fff" d="M234.54 148.5v103h130.92v-103H234.54zm120.37 91.83H245.7v-80.66h109.2v80.66z"/>
-  <path fill="#fff" d="M251.58 231.64l22.51-23.66 8.43 3.65 26.61-28.32 10.47 12.53 4.73-2.86 25.57 38.66z"/>
-  <circle cx="277.58" cy="180.18" r="9.83" fill="#fff"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 100 600 200">
+  <path fill="#28aade" d="M0 0h600v400H0z"/>
+  <path fill="#fff" d="M234.54 148.5v103h130.92v-103H234.54zm120.37 91.83H245.7v-80.66h109.2v80.66z"/>
+  <path fill="#fff" d="M251.58 231.64l22.51-23.66 8.43 3.65 26.61-28.32 10.47 12.53 4.73-2.86 25.57 38.66z"/>
+  <circle cx="277.58" cy="180.18" r="9.83" fill="#fff"/>
 </svg>

package/styleguide/placeholders/placeholder_400x400.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="200 100 200 200">
-<path fill="#28aade" d="M0 0h600v400H0z"/>
-<path fill="#fff" d="M234.54 148.5v103h130.92v-103H234.54zm120.37 91.83H245.7v-80.66h109.2v80.66z"/>
-<path fill="#fff" d="M251.58 231.64l22.51-23.66 8.43 3.65 26.61-28.32 10.47 12.53 4.73-2.86 25.57 38.66z"/>
-<circle cx="277.58" cy="180.18" r="9.83" fill="#fff"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="200 100 200 200">
+<path fill="#28aade" d="M0 0h600v400H0z"/>
+<path fill="#fff" d="M234.54 148.5v103h130.92v-103H234.54zm120.37 91.83H245.7v-80.66h109.2v80.66z"/>
+<path fill="#fff" d="M251.58 231.64l22.51-23.66 8.43 3.65 26.61-28.32 10.47 12.53 4.73-2.86 25.57 38.66z"/>
+<circle cx="277.58" cy="180.18" r="9.83" fill="#fff"/>
 </svg>

package/styleguide/placeholders/placeholder_600x400.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
-  <path fill="#28aade" d="M0 0h600v400H0z"/>
-  <path fill="#fff" d="M234.54 148.5v103h130.92v-103H234.54zm120.37 91.83H245.7v-80.66h109.2v80.66z"/>
-  <path fill="#fff" d="M251.58 231.64l22.51-23.66 8.43 3.65 26.61-28.32 10.47 12.53 4.73-2.86 25.57 38.66z"/>
-  <circle cx="277.58" cy="180.18" r="9.83" fill="#fff"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
+  <path fill="#28aade" d="M0 0h600v400H0z"/>
+  <path fill="#fff" d="M234.54 148.5v103h130.92v-103H234.54zm120.37 91.83H245.7v-80.66h109.2v80.66z"/>
+  <path fill="#fff" d="M251.58 231.64l22.51-23.66 8.43 3.65 26.61-28.32 10.47 12.53 4.73-2.86 25.57 38.66z"/>
+  <circle cx="277.58" cy="180.18" r="9.83" fill="#fff"/>
 </svg>

package/styleguide/safari-pinned-tab.svg

@@ -1,28 +1,28 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="666.000000pt" height="666.000000pt" viewBox="0 0 666.000000 666.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,666.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M3110 6654 c-19 -2 -84 -9 -145 -15 -1439 -143 -2649 -1266 -2909
--2699 -42 -231 -51 -342 -51 -610 0 -268 9 -379 51 -610 244 -1344 1320 -2420
-2664 -2664 231 -42 342 -51 610 -51 268 0 379 9 610 51 1344 244 2420 1320
-2664 2664 42 231 51 342 51 610 0 268 -9 379 -51 610 -213 1177 -1066 2160
--2209 2547 -207 70 -419 118 -657 149 -115 15 -547 27 -628 18z m-1368 -2031
-l28 -27 0 -872 c0 -520 4 -914 10 -975 40 -401 260 -587 670 -565 260 13 410
-100 500 288 77 159 73 109 77 1173 l4 950 26 27 27 28 181 0 181 0 28 -29 27
--28 -4 -934 c-3 -832 -5 -944 -20 -1029 -50 -270 -117 -418 -260 -567 -200
--209 -446 -297 -822 -296 -362 1 -625 96 -810 295 -142 151 -217 319 -261 580
--15 91 -18 210 -21 1027 l-4 924 27 28 28 29 180 0 180 0 28 -27z m3555 5 c22
--21 23 -28 23 -167 0 -198 8 -191 -197 -191 l-153 0 0 -1035 0 -1035 152 0
-c206 0 198 7 198 -189 0 -135 -1 -146 -22 -168 l-21 -23 -542 0 -541 0 -27 28
-c-27 28 -27 30 -27 163 0 135 0 135 28 162 28 27 29 27 180 27 l152 0 0 1035
-0 1035 -153 0 -153 0 -27 28 c-27 28 -27 30 -27 162 0 132 0 134 27 162 l27
-28 540 0 540 0 23 -22z"/>
-</g>
-</svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="666.000000pt" height="666.000000pt" viewBox="0 0 666.000000 666.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,666.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3110 6654 c-19 -2 -84 -9 -145 -15 -1439 -143 -2649 -1266 -2909
+-2699 -42 -231 -51 -342 -51 -610 0 -268 9 -379 51 -610 244 -1344 1320 -2420
+2664 -2664 231 -42 342 -51 610 -51 268 0 379 9 610 51 1344 244 2420 1320
+2664 2664 42 231 51 342 51 610 0 268 -9 379 -51 610 -213 1177 -1066 2160
+-2209 2547 -207 70 -419 118 -657 149 -115 15 -547 27 -628 18z m-1368 -2031
+l28 -27 0 -872 c0 -520 4 -914 10 -975 40 -401 260 -587 670 -565 260 13 410
+100 500 288 77 159 73 109 77 1173 l4 950 26 27 27 28 181 0 181 0 28 -29 27
+-28 -4 -934 c-3 -832 -5 -944 -20 -1029 -50 -270 -117 -418 -260 -567 -200
+-209 -446 -297 -822 -296 -362 1 -625 96 -810 295 -142 151 -217 319 -261 580
+-15 91 -18 210 -21 1027 l-4 924 27 28 28 29 180 0 180 0 28 -27z m3555 5 c22
+-21 23 -28 23 -167 0 -198 8 -191 -197 -191 l-153 0 0 -1035 0 -1035 152 0
+c206 0 198 7 198 -189 0 -135 -1 -146 -22 -168 l-21 -23 -542 0 -541 0 -27 28
+c-27 28 -27 30 -27 163 0 135 0 135 28 162 28 27 29 27 180 27 l152 0 0 1035
+0 1035 -153 0 -153 0 -27 28 c-27 28 -27 30 -27 162 0 132 0 134 27 162 l27
+28 540 0 540 0 23 -22z"/>
+</g>
+</svg>

package/styleguide/site.webmanifest

@@ -1,19 +1,19 @@
-{
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
-}
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

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

@@ -6,7 +6,36 @@ export interface CarouselProps {
      * Slides
      * @since 0.0.42
      */
-    children?: ReactNode;
+    children?: ReactNode[];
+    /**
+     * Enable autoplay
+     * @since 3.37.0
+     */
+    autoplay?: boolean;
+    /**
+     * Autoplay interval, ms
+     * @since 3.37.0
+     */
+    autoplayInterval?: number;
+    /**
+     * Show exact number of slides
+     * @since 3.37.0
+     */
+    items?: number;
+    /**
+     * Show navigation arrows
+     * @since 3.37.0
+     */
+    arrows?: boolean;
+    /**
+     * Show navigation dots. Works only with items options.
+     * @since 3.37.0
+     */
+    dots?: boolean;
+    /**
+     * Callback called on change slides
+     */
+    onSlide?: (current: number) => {};
     /**
      * @ignore
      */
@@ -24,10 +53,14 @@ export interface CarouselProps {
 declare class Carousel extends Component<CarouselProps> {
     static defaultProps: {
         children: null;
+        arrows: boolean;
+        dots: boolean;
+        autoplay: boolean;
+        autoplayInterval: number;
+        onSlide: null;
         className: null;
         baseClassName: string;
     };
-    constructor(props: CarouselProps);
     state: {
         showControls: boolean;
         current: number;
@@ -40,19 +73,21 @@ declare class Carousel extends Component<CarouselProps> {
     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;
+    handlePrevClick: () => void;
+    handleNextClick: () => void;
+    play: () => void;
+    stop: () => void;
     setCurrentSlide(next: number): void;
-    handleResize({ bounds }: ContentRect): void;
+    handleResize: ({ bounds }: ContentRect) => void;
     listStyle(): CSSProperties;
+    renderNavigationDots: () => import("react/jsx-runtime").JSX.Element | null;
+    renderNavigationArrows: () => import("react/jsx-runtime").JSX.Element | null;
+    renderSliderItems: () => ("" | 0 | import("react/jsx-runtime").JSX.Element)[] | null | undefined;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export default Carousel;

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

@@ -348,7 +348,6 @@ declare class List<T extends ListData> extends Component<ListProps<T>, ListState
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
-        placeholder?: string | undefined;
         slot?: string | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
         style?: import("react").CSSProperties | undefined;

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

@@ -1,7 +1,7 @@
-import { Component, SyntheticEvent, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { DataAttributes } from '../../utils/types';
 import './Panel.less';
-type PanelProps = {
+export type PanelProps = {
     /**
      * Panel title.
      * @since 0.0.37
@@ -40,27 +40,10 @@ type PanelProps = {
      * @ignore
      */
     baseClassName?: string;
-} & DataAttributes;
-type PanelState = {
-    collapsed: boolean;
-    prevPropsCollapsed: boolean;
-};
+} & DataAttributes & HTMLAttributes<HTMLDivElement>;
 /**
  * `Panel` component is used for visually grouping some content.
  * @since 0.0.35
  */
-declare class Panel extends Component<PanelProps, PanelState> {
-    static defaultProps: {
-        collapsible: boolean;
-        collapsed: boolean;
-        baseClassName: string;
-    };
-    constructor(props: PanelProps);
-    static getDerivedStateFromProps(props: PanelProps, state: PanelState): {
-        collapsed: boolean | undefined;
-        prevPropsCollapsed: boolean | undefined;
-    } | null;
-    handleToggle: (e: SyntheticEvent<HTMLElement, MouseEvent>) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare const Panel: ({ baseClassName, className, title, collapsible, collapsed: externalCollapsed, onToggle, children, extra, ...props }: PanelProps) => import("react/jsx-runtime").JSX.Element;
 export default Panel;

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

@@ -1 +1,2 @@
 export { default } from './Panel';
+export type { PanelProps } from './Panel';

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

@@ -1,6 +1,7 @@
-import { ReactNode, HTMLProps, FunctionComponent } from 'react';
+import { ReactNode, HTMLProps, FunctionComponent, HTMLAttributes } from 'react';
+import { DataAttributes } from '../../utils/types';
 import './Radio.less';
-export type RadioProps = {
+type BaseRadioProps = {
     /**
      * Determine whether the `Radio` is checked.
      * @since 3.2.0
@@ -35,15 +36,12 @@ export type RadioProps = {
      * @since 3.2.0
      */
     inputProps?: HTMLProps<HTMLInputElement>;
-    /**
-     * @ignore
-     */
-    className?: string;
     /**
      * @ignore
      */
     baseClassName?: string;
 };
+export type RadioProps = BaseRadioProps & DataAttributes & Omit<HTMLAttributes<HTMLLabelElement>, keyof BaseRadioProps>;
 /**
  * `Radio` component is used for making a choice among a set of mutually exclusive, related options.
  * @since 3.2.0

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

@@ -49,7 +49,7 @@ export interface SectionProps {
      * Section view will be automatically switched if this parameter is not specified explicitly.
      * @since 0.3.0
      */
-    vertical: boolean;
+    vertical?: boolean;
     /**
      * Content of the `Section`.
      * @since 0.0.54

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

@@ -99,6 +99,7 @@ export { default as Overlay } from './Overlay';
 export { default as PageHeader } from './PageHeader';
 export { default as Pagination } from './Pagination';
 export { default as Panel } from './Panel';
+export type { PanelProps } from './Panel';
 export { default as Paragraph } from './Paragraph';
 export { default as Plaintext } from './Plaintext';
 export type { PlainTextProps } from './Plaintext';