@plesk/ui-library 3.33.0 → 3.34.1

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.33.0</title>
+    <title>Plesk UI Library 3.34.1</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.1ca1330c.js"></script>
+    <script src="build/bundle.c6ebacd7.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,102 @@
+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;
+}
+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>;
+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,123 @@
+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?: ComponentProps<typeof Form> | 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/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
@@ -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

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

@@ -4,7 +4,7 @@ export { default as AutoClosable } from './AutoClosable';
 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 { default as Button, ButtonProps } from './Button';
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as Card } from './Card';
 export * from './Card';
@@ -40,7 +40,7 @@ export { default as Grid } from './Grid';
 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 { default as Icon, 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';