@plesk/ui-library 3.35.2 → 3.35.3

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

@@ -0,0 +1,161 @@
+import { Component, ReactNode } from 'react';
+import { ContentRect } from 'react-measure';
+import '../../helpers/base.less';
+import './Layout.less';
+declare type CollapsedState = 'responsive' | 'desktop';
+export interface LayoutProps {
+    /**
+     * Type of the `Layout`
+     * @since 1.4.0
+     */
+    type?: 'fluid' | 'simplified';
+    /**
+     * Header content.
+     * @since 1.4.0
+     */
+    header?: ReactNode;
+    /**
+     * Define header position - always on top (fixed) or static.
+     * @since 1.4.0
+     */
+    headerFixed?: boolean;
+    /**
+     * Additional content at the top of the header.
+     * @since 3.2.0
+     */
+    headerAddon?: ReactNode;
+    /**
+     * Sidebar content.
+     * @since 1.4.0
+     */
+    sidebar?: ReactNode;
+    /**
+     * Sidebar type.
+     * @since 3.2.0
+     */
+    sidebarType?: 'collapsed' | 'folded';
+    /**
+     * Define if sidebar can collapse.
+     * @since 1.4.0
+     */
+    sidebarCollapsible?: boolean;
+    /**
+     * Sidebar collapsed state.
+     * A boolean value is used for desktop mode only, but you can set an array with collapsed states for all modes, e.g. `['responsive', 'desktop']`.
+     *
+     * @since 1.4.0
+     */
+    sidebarCollapsed?: boolean | CollapsedState[];
+    /**
+     * Additional content between header and main content.
+     * @since 1.4.0
+     */
+    contentAddon?: ReactNode;
+    /**
+     * Content header.
+     * @since 3.0.0
+     */
+    contentHeader?: ReactNode;
+    /**
+     * Footer content.
+     * @since 1.4.0
+     */
+    footer?: ReactNode;
+    /**
+     * Main content of the `Layout`.
+     * @since 1.4.0
+     */
+    children?: ReactNode;
+    /**
+     * Width of the content
+     * @since 3.0.0
+     */
+    width?: 'sm' | 'md' | 'lg';
+    /**
+     * Sidebar onToggle handler.
+     * The handler is called with two args:
+     *
+     * * Whether collapsed or not.
+     * * In which mode: responsive or desktop.
+     *
+     * @since 1.4.0
+     */
+    onSidebarToggle?: (sidebarClosed: boolean, state: CollapsedState) => void;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+declare type LayoutState = {
+    isSidebarClosedDesktop?: boolean;
+    isSidebarClosedResponsive?: boolean;
+    headerHeight?: number | null;
+    isResponsive?: boolean;
+    prevSidebarCollapsed?: LayoutProps['sidebarCollapsed'];
+};
+/**
+ * @since 1.4.0
+ */
+export default class Layout extends Component<LayoutProps, LayoutState> {
+    static defaultProps: {
+        type: string;
+        header: undefined;
+        headerFixed: boolean;
+        headerAddon: undefined;
+        sidebar: undefined;
+        sidebarType: string;
+        sidebarCollapsible: boolean;
+        sidebarCollapsed: boolean;
+        contentAddon: undefined;
+        contentHeader: undefined;
+        footer: undefined;
+        width: undefined;
+        onSidebarToggle: undefined;
+        children: undefined;
+        className: undefined;
+        baseClassName: string;
+    };
+    state: {
+        isSidebarClosedDesktop: boolean;
+        isSidebarClosedResponsive: boolean;
+        headerHeight: null;
+        isResponsive: boolean;
+    };
+    static getDerivedStateFromProps(props: LayoutProps, state: LayoutState): LayoutState;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private readonly headerRef;
+    private readonly sidebarRef;
+    private readonly responsiveSidebarTogglerRef;
+    private unsubscribeMatchMedia?;
+    private unsubscribeClickOutside?;
+    handleMatchMedia: ({ matches }: MediaQueryListEvent | MediaQueryList) => void;
+    handleClickOutside: () => void;
+    handleToggle: () => void;
+    handleResize: ({ bounds }: ContentRect) => void;
+    getSidebarClosed: () => boolean;
+    renderHeader({ header }: {
+        header: ReactNode;
+    }): JSX.Element | null;
+    renderContentAddon({ contentAddon }: {
+        contentAddon: ReactNode;
+    }): JSX.Element | null;
+    renderContentHeader({ contentHeader }: {
+        contentHeader: ReactNode;
+    }): JSX.Element | null;
+    renderSidebar({ sidebar }: {
+        sidebar: ReactNode;
+    }): JSX.Element | null;
+    renderMainContent({ children }: {
+        children: ReactNode;
+    }): JSX.Element;
+    renderFooter({ footer }: {
+        footer: ReactNode;
+    }): JSX.Element | null;
+    render(): JSX.Element;
+}
+export {};

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

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

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

@@ -0,0 +1,66 @@
+import { ReactNode, HTMLProps } from 'react';
+import './Media.less';
+export interface MediaProps extends Omit<HTMLProps<HTMLDivElement>, 'title'> {
+    /**
+     * Title
+     * @since 0.0.45
+     */
+    title?: ReactNode;
+    /**
+     * Title addon
+     * @since 0.0.68
+     */
+    titleAddon?: ReactNode;
+    /**
+     * Title size
+     * @deprecated Pass a component as a title prop
+     * @since 0.0.68
+     */
+    titleSize?: 'md' | 'lg' | 'xl';
+    /**
+     * Image
+     * @since 0.0.45
+     */
+    image?: ReactNode;
+    /**
+     * Spacings between image and content
+     * @since 0.3.0
+     */
+    imageSpacing?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * Media object and content alignment
+     * @since 3.19.0
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Media object (image) alignment
+     * @since 3.19.0
+     */
+    imageAlign?: 'start' | 'center' | 'end';
+    /**
+     * Media vertical direction
+     * @since 3.19.0
+     */
+    vertical?: boolean;
+    /**
+     * Content of the `Media`.
+     * @since 0.0.45
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `Media` component is a combination of icon, text title and content.
+ * This layout was so widely spread in our products so we have decided to create a special component for it.
+ * Probably we should have named the component differently (not Media), but we didn't have better idea then ;)
+ * @since 0.0.45
+ */
+declare const Media: ({ className, children, title, titleAddon, titleSize, image, imageSpacing, imageAlign, align, vertical, baseClassName, ...props }: MediaProps) => JSX.Element;
+export default Media;

package/types/src/components/Media/MediaSection.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface MediaSectionProps {
+    /**
+     * Content of the `MediaSection`.
+     * @since 0.0.68
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `MediaSection` is a part of [Media](#!/Media) component.
+ * @since 0.0.68
+ */
+declare const MediaSection: ({ className, children, baseClassName, ...props }: MediaSectionProps) => JSX.Element;
+export default MediaSection;

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

@@ -0,0 +1,4 @@
+export { default } from './Media';
+export type { MediaProps } from './Media';
+export { default as MediaSection } from './MediaSection';
+export type { MediaSectionProps } from './MediaSection';

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

@@ -0,0 +1,40 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import '../../helpers/base.less';
+import './Menu.less';
+export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Triggered when menu item was clicked.
+     * @since 0.0.56
+     */
+    onItemClick?: () => void;
+    /**
+     * Content of the `Menu`.
+     * @since 0.0.55
+     */
+    children?: ReactNode;
+    /**
+     * Show menu in overlay.
+     * @ignore
+     */
+    overlay?: boolean;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `Menu` component displays grouped controls for navigating the UI, performing actions on objects, or showing
+ * options for [Lists](#!/List) (for example, sorting and filtering settings). `Menu` is most typically used in a
+ * [Dropdown](#!/Dropdown).
+ *
+ * `Menu` consists of several [Menu Items](#!/MenuItem) (or [Selectable Menu
+ * Items](#!/MenuSelectableItem)) which can be grouped by [Menu Headers](#!/MenuHeader)
+ * or separated by [Menu Dividers](#!/MenuDivider).
+ * @since 0.0.55
+ */
+declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLElement>>;
+export default Menu;

package/types/src/components/Menu/MenuBaseItem.d.ts

@@ -0,0 +1,41 @@
+import { ElementType, ReactNode } from 'react';
+import { IconName, IconProps } from '../Icon';
+import { PolymorphicComponentProps } from '../../utils/types';
+declare type MenuBaseItemBaseProps = {
+    /**
+     * Icon
+     * @since 0.0.60
+     */
+    icon?: IconName | IconProps | ReactNode;
+    /**
+     * Right label of item.
+     * @since 0.0.60
+     */
+    label?: ReactNode;
+    /**
+     * Content of the `MenuBaseItem`.
+     * @since 0.0.60
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+};
+export declare type MenuBaseItemProps<Component extends ElementType = 'div'> = {
+    /**
+     * Component to render as the root element. Useful when rendering a `MenuBaseItem` as other component or tag.
+     * @since 1.9.1
+     */
+    component?: Component;
+} & PolymorphicComponentProps<Component, MenuBaseItemBaseProps>;
+/**
+ * `MenuBaseItem` component.
+ * @since 0.0.60
+ */
+declare const MenuBaseItem: ({ className, children, icon, label, component: Component, baseClassName, ...props }: MenuBaseItemProps) => JSX.Element;
+export default MenuBaseItem;

package/types/src/components/Menu/MenuDivider.d.ts

@@ -0,0 +1,16 @@
+export interface MenuDividerProps {
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `MenuDivider` is a part of [Menu](#!/Menu) component.
+ * @since 0.0.57
+ */
+declare const MenuDivider: ({ className, baseClassName, ...props }: MenuDividerProps) => JSX.Element;
+export default MenuDivider;

package/types/src/components/Menu/MenuHeader.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface MenuHeaderProps {
+    /**
+     * Content of the `MenuHeader`.
+     * @since 0.0.57
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `MenuHeader` is a part of [Menu](#!/Menu) component.
+ * @since 0.0.57
+ */
+declare const MenuHeader: ({ className, children, baseClassName, ...props }: MenuHeaderProps) => JSX.Element;
+export default MenuHeader;

package/types/src/components/Menu/MenuItem.d.ts

@@ -0,0 +1,49 @@
+import { ElementType, ReactNode } from 'react';
+import { MenuBaseItemProps } from './MenuBaseItem';
+import { IconName, IconProps } from '../Icon';
+export declare type MenuItemProps<Component extends ElementType = 'div'> = {
+    /**
+     * Whether item is active.
+     * @since 0.0.55
+     */
+    active?: boolean;
+    /**
+     * Whether item is disabled.
+     * @since 0.0.55
+     */
+    disabled?: boolean;
+    /**
+     * Icon
+     * @since 0.0.55
+     */
+    icon?: IconName | IconProps | ReactNode;
+    /**
+     * Right label of item.
+     * @since 0.0.57
+     */
+    label?: ReactNode;
+    /**
+     * Tooltip for component.
+     * @since 2.6.1
+     */
+    tooltip?: ReactNode;
+    /**
+     * Content of the `MenuItem`.
+     * @since 0.0.55
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+} & MenuBaseItemProps<Component>;
+/**
+ * `MenuItem` is a part of [Menu](#!/Menu) component.
+ * @since 0.0.55
+ */
+declare const MenuItem: ({ className, children, onClick, icon, label, tooltip, baseClassName, disabled, active, ...props }: MenuItemProps) => JSX.Element;
+export default MenuItem;

package/types/src/components/Menu/MenuSelectableItem.d.ts

@@ -0,0 +1,28 @@
+import { ElementType, ReactNode } from 'react';
+import { MenuItemProps } from './MenuItem';
+export declare type MenuSelectableItemProps<Component extends ElementType = 'div'> = {
+    /**
+     * Whether item is selected.
+     * @since 0.0.57
+     */
+    selected?: boolean;
+    /**
+     * Content of the `MenuSelectableItem`.
+     * @since 0.0.57
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+} & MenuItemProps<Component>;
+/**
+ * `MenuSelectableItem` is a part of [Menu](#!/Menu) component.
+ * @since 0.0.57
+ */
+declare const MenuSelectableItem: ({ className, children, selected, baseClassName, ...props }: MenuSelectableItemProps) => JSX.Element;
+export default MenuSelectableItem;

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

@@ -0,0 +1,11 @@
+export { default } from './Menu';
+export type { MenuProps } from './Menu';
+export { default as MenuItem } from './MenuItem';
+export type { MenuItemProps } from './MenuItem';
+export { default as MenuBaseItem } from './MenuBaseItem';
+export { default as MenuSelectableItem } from './MenuSelectableItem';
+export type { MenuSelectableItemProps } from './MenuSelectableItem';
+export { default as MenuDivider } from './MenuDivider';
+export type { MenuDividerProps } from './MenuDivider';
+export { default as MenuHeader } from './MenuHeader';
+export type { MenuHeaderProps } from './MenuHeader';

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

@@ -1,4 +1,5 @@
 import { Component, SyntheticEvent, ReactNode } from 'react';
+import { DataAttributes } from '../../utils/types';
 import './Panel.less';
 declare type PanelProps = {
     /**
@@ -39,7 +40,7 @@ declare type PanelProps = {
      * @ignore
      */
     baseClassName?: string;
-};
+} & DataAttributes;
 declare type PanelState = {
     collapsed: boolean;
     prevPropsCollapsed: boolean;

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import './Plaintext.less';
+export interface PlainTextProps {
+    /**
+     * Content of the Plaintext
+     * @since 0.0.42
+     */
+    children: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `Plaintext` component is used to show regular text, without any formatting options and ignoring html tags.
+ * @since 0.0.42
+ */
+declare const Plaintext: ({ className, children, baseClassName, }: PlainTextProps) => JSX.Element;
+export default Plaintext;

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

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

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

@@ -0,0 +1,156 @@
+import { ContentRect } from 'react-measure';
+import { PopperState } from '../Popper';
+import { Placement } from 'popper.js';
+import { Component, KeyboardEventHandler, MouseEvent, MutableRefObject, ReactElement, ReactNode } from 'react';
+import './Popover.less';
+declare const PLACEMENT_MAP: Record<string, Placement>;
+export interface PopoverProps {
+    /**
+     * The reference element used to position the popover.
+     * @since 0.0.65
+     */
+    target: ReactElement;
+    /**
+     * A React reference to the DOM element that needs for calculating the position of the popup.
+     * It is required only when visible or defaultVisible props are provided.
+     * @since 3.12.0
+     */
+    targetRef?: MutableRefObject<HTMLElement | null>;
+    /**
+     * Popover visibility. For controlled component only.
+     * @since 0.0.65
+     */
+    visible?: boolean;
+    /**
+     * Popover default (on init) visibility. For uncontrolled component only.
+     * @since 0.0.66
+     */
+    defaultVisible?: boolean;
+    /**
+     * Popover title. Header will only be rendered if this prop is defined.
+     * @since 0.0.42
+     */
+    title?: ReactNode;
+    /**
+     * Click handler for close button. If it is not defined then default behavior (hide popover) will be used.
+     * @since 0.0.42
+     */
+    onClose: () => void;
+    /**
+     * Popover placement
+     * @since 0.0.42
+     */
+    placement?: keyof typeof PLACEMENT_MAP;
+    /**
+     * Indicating if clicking outside the popover should close it.
+     * @since 0.0.65
+     */
+    canCloseOnOutsideClick?: boolean;
+    /**
+     * Indicating if pressing the escape key should close the popover.
+     * @since 0.0.65
+     */
+    canCloseOnEscapePress?: boolean;
+    /**
+     * Content of the Popover
+     * @since 0.0.42
+     */
+    children?: ReactNode;
+    /**
+     * Visual intent color to apply to component.
+     * @since 0.0.59
+     */
+    intent?: 'info' | 'success' | 'warning' | 'danger';
+    /**
+     * Undo predefined max-width.
+     * @since 2.4.0
+     */
+    wide?: boolean;
+    /**
+     * Define the popover width.
+     * @since 3.2.0
+     */
+    width?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Define the popover height.
+     * @since 3.3.0
+     */
+    height?: number | string;
+    /**
+     * A slot for buttons or links in the header.
+     * @since 3.16.0
+     */
+    extra?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * Boundaries element for preventOverflow property.
+     * @since 1.12.4
+     */
+    boundariesElement?: 'scrollParent' | 'window' | 'viewport';
+    /**
+     * @ignore
+     */
+    autoFocus?: boolean;
+}
+declare type PopoverState = {
+    show?: boolean;
+    arrowInHeader: boolean;
+};
+/**
+ * `Popover` component is non-modal pop-up window used for providing additional information
+ * for an interface element. It also may contain Form with few fields or any other small content.
+ * @since 0.0.42
+ */
+declare class Popover extends Component<PopoverProps, PopoverState> {
+    static contextType: import("react").Context<boolean>;
+    static defaultProps: {
+        visible: null;
+        defaultVisible: boolean;
+        title: undefined;
+        onClose: undefined;
+        placement: string;
+        canCloseOnOutsideClick: boolean;
+        canCloseOnEscapePress: boolean;
+        children: undefined;
+        intent: undefined;
+        wide: undefined;
+        width: undefined;
+        height: undefined;
+        extra: undefined;
+        className: undefined;
+        baseClassName: string;
+        boundariesElement: undefined;
+        autoFocus: boolean;
+        targetRef: undefined;
+    };
+    state: {
+        show: boolean | undefined;
+        arrowInHeader: boolean;
+    };
+    static getDerivedStateFromProps(props: PopoverProps, state: PopoverState): {
+        show: boolean | undefined;
+    };
+    componentDidUpdate(_: PopoverProps, prevState: PopoverState): void;
+    private contentRef;
+    private targetRef;
+    private prevFocusElement;
+    private popperData;
+    private headerBounds;
+    focus(): void;
+    checkArrowPosition: () => void;
+    hotkeyHandler: KeyboardEventHandler<HTMLDivElement>;
+    handleTargetClick: (e: MouseEvent<HTMLDivElement>) => void;
+    handleClose: () => void;
+    handleHeaderResize: (contentRect: ContentRect) => void;
+    handlePopperUpdate: (popperData: PopperState) => void;
+    getIgnoreNodes: () => (Element | Text | null)[] | (MutableRefObject<HTMLElement | null> | undefined)[];
+    render(): JSX.Element;
+}
+export default Popover;

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

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