@plesk/ui-library 3.34.0 → 3.34.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.34.0</title>
+    <title>Plesk UI Library 3.34.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.ad46084d.js"></script>
+    <script src="build/bundle.70f167a3.js"></script>
   </body>
 </html>

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

@@ -1,4 +1,4 @@
-import { Component, ReactElement, ReactInstance, RefObject } from 'react';
+import { Component, ReactElement, ReactInstance, RefObject, MutableRefObject } from 'react';
 declare type AutoClosableProps = {
     /**
      * onClose handler
@@ -19,7 +19,7 @@ declare type AutoClosableProps = {
      * A React reference to the DOM element that needs tracking outside clicks.
      * @since 3.12.0
      */
-    nodeRef?: RefObject<HTMLElement>;
+    nodeRef?: RefObject<HTMLElement> | MutableRefObject<HTMLElement | undefined>;
 };
 /**
  * This is helper component for handling outside clicks.

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

@@ -0,0 +1,105 @@
+import { ElementType, ReactNode, ReactElement } from 'react';
+import { PolymorphicComponentPropsWithRef } from '../../utils/types';
+import { IconName, IconProps } from '../Icon';
+import '../../helpers/base.less';
+import './Button.less';
+interface BaseButtonPops {
+    /**
+     * Button size.
+     * @since 2.5.0
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Visual intent color to apply to component.
+     * @since 0.0.42
+     */
+    intent?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+    /**
+     * Display button with transparent background.
+     * @since 2.1.0
+     */
+    ghost?: boolean;
+    /**
+     * Arrow button.
+     * @since 2.6.0
+     */
+    arrow?: 'forward' | 'backward';
+    /**
+     * Selected state of toggle button. Used in controlled component mode.
+     * @since 0.0.68
+     */
+    selected?: boolean;
+    /**
+     * Toggle button callback. Used in uncontrolled component mode.
+     * @since 0.0.68
+     */
+    onToggle?: (state: boolean) => void;
+    /**
+     * State of the button
+     * @since 0.0.42
+     */
+    state?: 'active' | 'loading' | 'hovered' | 'focused';
+    /**
+     * Is button disabled?
+     * @since 0.0.42
+     */
+    disabled?: boolean;
+    /**
+     * Tooltip for component
+     * @since 0.0.42
+     */
+    tooltip?: ReactNode;
+    /**
+     * Name of icon or [Icon](#!/Icon) component
+     * @since 0.0.42
+     * @type IconName | IconProps | ReactNode
+     */
+    icon?: IconName | IconProps | ReactNode;
+    /**
+     * Show caret
+     * @since 0.0.42
+     */
+    caret?: boolean | ReactNode;
+    /**
+     * Dynamically expand the button to fill out the whole available width of its parent container.
+     * @since 1.8.0
+     */
+    fill?: boolean;
+    /**
+     * Content of the button
+     * @since 0.0.37
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+declare type DataAttributes = {
+    [dataAttribute: `data-${string}`]: unknown;
+};
+export declare type ButtonProps<Component extends ElementType = 'button'> = {
+    /**
+     * Component to render as the root element. Useful when rendering a `Button` as `<a>` or `<Link>`.
+     * @since 0.0.42
+     * @type ElementType
+     * @default button
+     */
+    component?: Component;
+} & PolymorphicComponentPropsWithRef<Component, BaseButtonPops> & DataAttributes;
+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
+ */
+export default _default;

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

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

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

@@ -0,0 +1,126 @@
+import { FunctionComponent, ReactNode, HTMLAttributes, ComponentProps, ReactElement, CSSProperties } from 'react';
+import { OverlayProps } from '../Overlay';
+import Form from '../Form';
+import { ButtonProps } from '../Button';
+import '../../helpers/base.less';
+import './Dialog.less';
+declare type ImageType = string | ReactElement | HTMLAttributes<HTMLImageElement>;
+export declare type DialogProps = {
+    /**
+     * Toggles visibility.
+     * @since 0.0.68
+     */
+    isOpen?: boolean;
+    /**
+     * Banner. Renders in front of content as wide as dialog.
+     * @type string | ReactElement | HTMLAttributes<HTMLImageElement>
+     * @since 0.0.68
+     */
+    banner?: ImageType;
+    /**
+     * Image. Renders into content.
+     * @type string | ReactElement | HTMLAttributes<HTMLImageElement>
+     * @since 0.0.68
+     */
+    image?: ImageType;
+    /**
+     * Block with an image, placed at the side of the component
+     * @type string | ReactElement | HTMLAttributes<HTMLImageElement>
+     * @since 3.25.0
+     */
+    sideBanner?: ImageType;
+    /**
+     * Additional properties for the sideBanner
+     *
+     * @since 3.25.0
+     */
+    sideBannerContainer?: {
+        background: string;
+        align: CSSProperties['alignItems'];
+    };
+    /**
+     * Title
+     * @since 0.0.68
+     */
+    title?: ReactNode;
+    /**
+     * The subtitle of the `Dialog`.
+     * @since 4.0.0
+     */
+    subtitle?: ReactNode;
+    /**
+     * Title of "cancel" button
+     * @since 0.0.68
+     * @deprecated Use `cancelButton` instead.
+     */
+    cancelTitle?: ReactNode;
+    /**
+     * Cancel button visibility or custom configuration. It accepts all props of the `Button` component.
+     * @since 3.13.0
+     */
+    cancelButton?: boolean | Partial<ButtonProps>;
+    /**
+     * Buttons except "cancel" button
+     * @since 0.0.68
+     */
+    buttons?: ReactNode;
+    /**
+     * Actions which will be shown in Dialog header
+     * @since 1.2.0
+     */
+    actions?: ReactNode;
+    /**
+     * Wraps children into [Form](#!/Form) if not empty.
+     * @type ComponentProps<typeof Form> | typeof Form
+     * @since 0.0.68
+     */
+    form?: (Omit<ComponentProps<typeof Form>, 'values' | 'onSubmit'> & {
+        values?: any;
+        onSubmit?: any;
+    }) | typeof Form;
+    /**
+     * Dialog width
+     * @since 0.0.68
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * If the value is false, the dialog cannot be closed and the Close button is hidden.
+     * @since 1.2.0
+     */
+    closable?: boolean;
+    /**
+     * Disable close dialog button
+     * @since 4.0.0
+     */
+    canClose?: boolean;
+    /**
+     * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
+     * @type () => void
+     * @since 0.0.68
+     */
+    onClose?: () => void;
+    /**
+     * Whether show or not a confirmation dialog on close.
+     * @since 3.21.0
+     */
+    closingConfirmation?: boolean;
+    /**
+     * Content of the `DialogWindow`.
+     * @since 0.0.68
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+} & Omit<OverlayProps, 'canCloseOnBackdropClick' | 'canCloseOnEscapePress'>;
+/**
+ * `Dialog` is a modal window that asks users to make a decision or enter additional information.
+ * @since 0.0.68
+ */
+declare const Dialog: FunctionComponent<DialogProps>;
+export default Dialog;

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

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

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

@@ -0,0 +1,108 @@
+import { ReactNode, ReactElement, HTMLAttributes, FunctionComponent, ComponentProps, CSSProperties } from 'react';
+import Form from '../Form';
+import { DrawerProgressProps } from './DrawerProgress';
+import '../../helpers/base.less';
+import './Drawer.less';
+export interface DrawerProps {
+    /**
+     * Toggles visibility.
+     * @since 0.0.65
+     */
+    isOpen: boolean;
+    /**
+     * The title of the `Drawer`.
+     * @since 0.0.65
+     */
+    title: ReactNode;
+    /**
+     * The subtitle of the `Drawer`.
+     * @since 0.0.65
+     */
+    subtitle?: ReactNode;
+    /**
+     * Show the minimize button and the inactive close button.
+     * @since 1.4.1
+     */
+    hideButton?: boolean;
+    /**
+     * Show back button in the header. If true the close button is not show.
+     * @deprecated Not recommended to use. Use default close button instead.
+     * @since 0.0.65
+     */
+    backButton?: boolean;
+    /**
+     * A slot for `Tabs` component.
+     * @since 3.26.0
+     */
+    tabs?: ReactNode;
+    /**
+     * Overlay placement.
+     * @since 0.0.65
+     */
+    placement?: 'left' | 'right';
+    /**
+     * Overlay size.
+     * @since 0.0.65
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * onClose handler.
+     * @since 0.0.65
+     */
+    onClose?: () => void;
+    /**
+     * Whether show or not a confirmation dialog on close.
+     * @since 3.21.0
+     */
+    closingConfirmation?: boolean;
+    /**
+     * Wraps children into [Form](#!/Form) if not empty.<br>
+     * **Note:** in case of *element* you should take care of providing additional form props from [Drawer](#!/Drawer) through your custom component. See example below for more details
+     *
+     * @type ComponentProps<typeof Form> | typeof Form
+     * @since 0.0.66
+     */
+    form?: (Omit<ComponentProps<typeof Form>, 'values' | 'onSubmit'> & {
+        values?: any;
+        onSubmit?: any;
+    }) | typeof Form;
+    /**
+     * Block with an image, placed at the side of the component
+     * @type string | ReactElement | HTMLAttributes<HTMLImageElement>
+     * @since 3.25.0
+     */
+    sideBanner?: string | ReactElement | HTMLAttributes<HTMLImageElement>;
+    /**
+     * Additional properties for the sideBanner
+     * @since 3.25.0
+     */
+    sideBannerContainer?: {
+        background: string;
+        align: CSSProperties['alignItems'];
+    };
+    /**
+     * Content of the `Drawer`.
+     * @since 0.0.65
+     */
+    children?: ReactNode;
+    /**
+     * Adds [Progress](#!/Progress) into footer.
+     * @since 1.11.0
+     */
+    progress?: DrawerProgressProps;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
+ * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
+ * @since 0.0.65
+ */
+declare const Drawer: FunctionComponent<DrawerProps>;
+export default Drawer;

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

@@ -3,7 +3,7 @@ import { ProgressStepProps } from '../ProgressStep';
 import './DrawerProgress.less';
 declare type RenderParams = {
     content: ReactElement;
-    footer: ReactNode;
+    footer?: ReactNode;
 };
 export declare type DrawerProgressProps = {
     baseClassName?: string;

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

@@ -0,0 +1,28 @@
+import { Component, ReactNode } from 'react';
+import './Header.less';
+declare type 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 {};

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

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

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

@@ -0,0 +1,54 @@
+import { ReactNode, ReactElement, FunctionComponent, ReactChild } from 'react';
+import '../../helpers/base.less';
+import '../Menu/Menu.less';
+import './Dropdown.less';
+declare type PlacementSide = 'top' | 'right' | 'bottom' | 'left';
+declare type PlacementAlign = 'start' | 'end';
+export declare type PopoverPlacement = `${PlacementSide}-${PlacementAlign}` | PlacementSide | 'auto';
+interface DropdownProps {
+    /**
+     * Dropdown [menu](#!/Menu).
+     * @type ReactElement
+     * @since 0.0.57
+     */
+    menu: ReactElement;
+    /**
+     * Menu placement.
+     * @since 0.0.60
+     */
+    menuPlacement?: PopoverPlacement;
+    /**
+     * Content of the `Dropdown`.
+     * @type ReactChild
+     * @since 0.0.57
+     */
+    children: ReactChild;
+    /**
+     * Custom localization messages.
+     * @since 3.6.0
+     */
+    locale?: {
+        close?: ReactNode;
+    };
+    /**
+     * Display menu as overlay.
+     * @ignore
+     */
+    overlay?: boolean;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `Dropdown` component is a [Button](#!/Button) that opens a drop-down (nested) [Menu](#!/Menu).
+ * Use dropdown for grouping actions that are not used often or are less important than others -- in other words,
+ * for stuff that you don't want to show users all the time, especially if you have limited screen space.
+ * @since 0.0.57
+ */
+declare const Dropdown: FunctionComponent<DropdownProps>;
+export default Dropdown;

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

@@ -1,5 +1,5 @@
-import { ReactNode, ComponentPropsWithRef, ReactElement, MutableRefObject, HTMLProps } from 'react';
-import Button from '../Button';
+import { ReactNode, ReactElement, MutableRefObject, HTMLProps } from 'react';
+import { ButtonProps } from '../Button';
 import { FormInstanceHandles, FormValues, FormErrors } from './types';
 import './Form.less';
 export declare type FormProps<FV extends FormValues> = {
@@ -38,17 +38,17 @@ export declare type FormProps<FV extends FormValues> = {
      * Submit button visibility or custom configuration
      * @since 0.0.58
      */
-    submitButton?: boolean | Partial<ComponentPropsWithRef<typeof Button>>;
+    submitButton?: boolean | Partial<ButtonProps>;
     /**
      * Apply button visibility or custom configuration
      * @since 0.0.58
      */
-    applyButton?: boolean | Partial<ComponentPropsWithRef<typeof Button>>;
+    applyButton?: boolean | Partial<ButtonProps>;
     /**
      * Cancel button visibility or custom configuration
      * @since 0.0.58
      */
-    cancelButton?: boolean | Partial<ComponentPropsWithRef<typeof Button>>;
+    cancelButton?: boolean | Partial<ButtonProps>;
     /**
      * Additional buttons
      * @since 0.0.58
@@ -87,7 +87,7 @@ export declare type FormProps<FV extends FormValues> = {
      * @ignore
      */
     render?: (params: {
-        renderForm: (params: {
+        renderForm: (params?: {
             actionButtons?: ReactNode;
         }) => ReactElement;
         renderActionButtons: () => ReactElement;
@@ -138,17 +138,17 @@ declare const RefForwardingForm: import("react").ForwardRefExoticComponent<{
      * Submit button visibility or custom configuration
      * @since 0.0.58
      */
-    submitButton?: boolean | Partial<{}> | undefined;
+    submitButton?: boolean | Partial<ButtonProps<"button">> | undefined;
     /**
      * Apply button visibility or custom configuration
      * @since 0.0.58
      */
-    applyButton?: boolean | Partial<{}> | undefined;
+    applyButton?: boolean | Partial<ButtonProps<"button">> | undefined;
     /**
      * Cancel button visibility or custom configuration
      * @since 0.0.58
      */
-    cancelButton?: boolean | Partial<{}> | undefined;
+    cancelButton?: boolean | Partial<ButtonProps<"button">> | undefined;
     /**
      * Additional buttons
      * @since 0.0.58
@@ -187,9 +187,9 @@ declare const RefForwardingForm: import("react").ForwardRefExoticComponent<{
      * @ignore
      */
     render?: ((params: {
-        renderForm: (params: {
+        renderForm: (params?: {
             actionButtons?: ReactNode;
-        }) => ReactElement;
+        } | undefined) => ReactElement;
         renderActionButtons: () => ReactElement;
     }) => ReactNode) | undefined;
     /**

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

@@ -3,7 +3,7 @@ import { IconName } from './constants';
 import '../../helpers/base.less';
 import './Icon.less';
 export * from './constants';
-declare type IconSize = '12' | '16' | '24' | '32' | '48' | '64' | '96' | '128' | '192';
+export declare type IconSize = '12' | '16' | '24' | '32' | '48' | '64' | '96' | '128' | '192';
 export declare const ICON_SIZE_12: IconSize;
 export declare const ICON_SIZE_16: IconSize;
 export declare const ICON_SIZE_24: IconSize;

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

@@ -1,2 +1,3 @@
 export { default } from './Icon';
 export * from './Icon';
+export type { IconName, IconProps, IconSize } from './Icon';

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

@@ -1,7 +1,7 @@
 import { ReactNode, HTMLAttributes, CSSProperties, ReactElement } from 'react';
 import '../../helpers/base.less';
 import './Overlay.less';
-declare type OverlayProps = {
+export declare type OverlayProps = {
     /**
      * Toggles visibility.
      */

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

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

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

@@ -5,6 +5,7 @@ export { default as AuxiliaryActions } from './AuxiliaryActions';
 export { default as Badge } from './Badge';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export { default as Button } from './Button';
+export type { ButtonProps } from './Button';
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as Card } from './Card';
 export * from './Card';
@@ -22,6 +23,7 @@ export { default as ContentLoader } from './ContentLoader';
 export { default as Cuttable } from './Cuttable';
 export { default as Dialog } from './Dialog';
 export { default as Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
 export { default as Dropdown } from './Dropdown';
 export { default as InPlaceEdit } from './InPlaceEdit';
 export { default as ExtendedStatusMessage } from './ExtendedStatusMessage';
@@ -41,6 +43,7 @@ export { default as GridCol } from './GridCol';
 export { default as Heading } from './Heading';
 export { default as Hint } from './Hint';
 export { default as Icon } from './Icon';
+export type { IconProps, IconName, IconSize } from './Icon';
 export { default as Input } from './Input';
 export { default as InputFile } from './InputFile';
 export { default as InputNumber } from './InputNumber';

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

@@ -0,0 +1,11 @@
+import { ElementType, ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+declare type ComponentProp<C extends ElementType> = {
+    component?: C;
+};
+declare type PropsToOmit<C extends ElementType, P> = keyof (ComponentProp<C> & P);
+export declare type PolymorphicComponentProps<C extends ElementType, Props = {}> = Props & ComponentProp<C> & Omit<ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+declare type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
+export declare type PolymorphicComponentPropsWithRef<C extends ElementType, Props = {}> = PolymorphicComponentProps<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+export {};

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

@@ -0,0 +1 @@
+export type { PolymorphicComponentProps, PolymorphicComponentPropsWithRef, } from './PolymorphicComponent';