@plesk/ui-library 3.34.2 → 3.35.0

package/styleguide/images/symbols.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="11712" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="11760" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <symbol viewBox="0 0 12 12" id="archive:12">
       <path d="M2 1h7v.5a.5.5 0 0 0 1 0V1a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-.5a.5.5 0 0 0-1 0v.5H2V1z" />
@@ -181,6 +181,14 @@
       <path d="M4.145 11.855a.496.496 0 0 1 0-.702L13.298 2H9.5a.5.5 0 0 1 0-1h5.002a.495.495 0 0 1 .498.5v5a.5.5 0 0 1-1 0V2.702l-9.153 9.153a.496.496 0 0 1-.702 0z" />
       <path d="M1.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0V14h12.5a.5.5 0 0 1 0 1h-13z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="bar-chart-vertical-lock:12">
+      <path d="M4 .5a.5.5 0 0 1 1 0v9a.5.5 0 0 1-1 0v-9zM1.5 5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5zM.5 11a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM7.5 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 1 0v-1a.5.5 0 0 0-.5-.5zM10 1.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3z" />
+      <path d="M7 9a1 1 0 0 1 1-1V7a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V9zm3-1V7H9v1h1z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="bar-chart-vertical-lock:16">
+      <path d="M13 .5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zM4.5 2a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 1 0v-11a.5.5 0 0 0-.5-.5zM1 9.5a.5.5 0 0 1 1 0v4a.5.5 0 0 1-1 0v-4zm-1 6a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5zm7-9a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zM10.5 4a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5z" />
+      <path d="M10 12a1 1 0 0 1 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-3zm3-1v-1h-1v1h1z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="bar-chart-vertical:12">
       <path d="M0 11.5a.5.5 0 01.5-.5h11a.5.5 0 010 1H.5a.5.5 0 01-.5-.5zM1 5.5a.5.5 0 011 0v4a.5.5 0 01-1 0v-4zM4 .5a.5.5 0 011 0v9a.5.5 0 01-1 0v-9zM7 4.5a.5.5 0 011 0v5a.5.5 0 01-1 0v-5zM10 2.5a.5.5 0 011 0v7a.5.5 0 01-1 0v-7z" />
     </symbol>

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.2</title>
+    <title>Plesk UI Library 3.35.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.70f167a3.js"></script>
+    <script src="build/bundle.2a886a79.js"></script>
   </body>
 </html>

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, Ref } from 'react';
+import { FunctionComponent, ReactNode, Ref, HTMLAttributes } from 'react';
 import './ButtonGroup.less';
 declare type ButtonGroupProps = {
     /**
@@ -18,7 +18,7 @@ declare type ButtonGroupProps = {
      * @ignore
      */
     innerRef?: Ref<HTMLDivElement>;
-};
+} & HTMLAttributes<HTMLDivElement>;
 /**
  * `ButtonGroup` component is used for visual grouping of several [Buttons](#!/Button) together.
  * @since 0.0.37

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

@@ -1,11 +1,11 @@
-import { FunctionComponent, ReactNode, HTMLAttributes, ComponentProps, ReactElement, CSSProperties } from 'react';
+import { ReactNode, HTMLAttributes, ReactElement, CSSProperties } from 'react';
 import { OverlayProps } from '../Overlay';
-import Form from '../Form';
+import Form, { FormProps, FormValues } from '../Form';
 import { ButtonProps } from '../Button';
 import '../../helpers/base.less';
 import './Dialog.less';
 declare type ImageType = string | ReactElement | HTMLAttributes<HTMLImageElement>;
-export declare type DialogProps = {
+export declare type DialogProps<FV extends FormValues = FormValues> = {
     /**
      * Toggles visibility.
      * @since 0.0.68
@@ -71,13 +71,9 @@ export declare type DialogProps = {
     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;
+    form?: FormProps<FV> | typeof Form;
     /**
      * Dialog width
      * @since 0.0.68
@@ -122,5 +118,29 @@ export declare type DialogProps = {
  * `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>;
+declare const Dialog: {
+    <FV extends FormValues = FormValues>({ baseClassName, className, children, actions, isOpen, banner, image, title, subtitle, cancelTitle, cancelButton, buttons, form, size, closable, onClose, closingConfirmation, canClose, ...props }: DialogProps<FV>): JSX.Element;
+    defaultProps: {
+        isOpen: boolean;
+        banner: undefined;
+        sideBanner: undefined;
+        sideBannerContainer: undefined;
+        image: undefined;
+        title: undefined;
+        subtitle: undefined;
+        cancelTitle: undefined;
+        cancelButton: undefined;
+        buttons: undefined;
+        actions: undefined;
+        form: undefined;
+        size: string;
+        closable: boolean;
+        canClose: boolean;
+        onClose: undefined;
+        closingConfirmation: undefined;
+        children: undefined;
+        className: undefined;
+        baseClassName: string;
+    };
+};
 export default Dialog;

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

@@ -1,9 +1,9 @@
-import { ReactNode, ReactElement, HTMLAttributes, FunctionComponent, ComponentProps, CSSProperties } from 'react';
-import Form from '../Form';
+import { ReactNode, ReactElement, HTMLAttributes, CSSProperties } from 'react';
+import Form, { FormProps, FormValues } from '../Form';
 import { DrawerProgressProps } from './DrawerProgress';
 import '../../helpers/base.less';
 import './Drawer.less';
-export interface DrawerProps {
+export interface DrawerProps<FV extends FormValues = FormValues> {
     /**
      * Toggles visibility.
      * @since 0.0.65
@@ -58,14 +58,9 @@ export interface DrawerProps {
     /**
      * 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;
+    form?: FormProps<FV> | typeof Form;
     /**
      * Block with an image, placed at the side of the component
      * @type string | ReactElement | HTMLAttributes<HTMLImageElement>
@@ -78,7 +73,7 @@ export interface DrawerProps {
      */
     sideBannerContainer?: {
         background: string;
-        align: CSSProperties['alignItems'];
+        align?: CSSProperties['alignItems'];
     };
     /**
      * Content of the `Drawer`.
@@ -89,7 +84,7 @@ export interface DrawerProps {
      * Adds [Progress](#!/Progress) into footer.
      * @since 1.11.0
      */
-    progress?: DrawerProgressProps;
+    progress?: DrawerProgressProps | null;
     /**
      * @ignore
      */
@@ -104,5 +99,8 @@ export interface DrawerProps {
  * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
  * @since 0.0.65
  */
-declare const Drawer: FunctionComponent<DrawerProps>;
+declare const Drawer: {
+    <FV extends FormValues = FormValues>({ baseClassName, className, children, title, subtitle, backButton, hideButton, tabs, onClose, form, progress, closingConfirmation, ...props }: DrawerProps<FV>): JSX.Element;
+    defaultProps: Partial<DrawerProps<FormValues>>;
+};
 export default Drawer;

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

@@ -2,10 +2,9 @@ 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 {
+import { Placement } from 'popper.js';
+export declare type PopoverPlacement = Placement;
+export interface DropdownProps {
     /**
      * Dropdown [menu](#!/Menu).
      * @type ReactElement

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

@@ -0,0 +1,2 @@
+export { default } from './Dropdown';
+export * from './Dropdown';

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

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import './Figure.less';
+export interface FigureProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * External link
+     * @since 0.0.42
+     */
+    href?: string;
+    /**
+     * Bottom content
+     * @since 0.0.42
+     */
+    caption?: ReactNode;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+}
+/**
+ * Figure component.
+ * @since 0.0.42
+ */
+declare const Figure: ({ baseClassName, className, href, caption, children, ...props }: FigureProps) => JSX.Element;
+export default Figure;

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

@@ -0,0 +1,2 @@
+export { default } from './Figure';
+export * from './Figure';

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

@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement, MutableRefObject, HTMLProps } from 'react';
+import { ReactNode, ReactElement, MutableRefObject, HTMLProps, ForwardedRef } from 'react';
 import { ButtonProps } from '../Button';
 import { FormInstanceHandles, FormValues, FormErrors } from './types';
 import './Form.less';
@@ -58,7 +58,7 @@ export declare type FormProps<FV extends FormValues> = {
      * A callback function, can be executed when some field value is changing.
      * @since 3.1.0
      */
-    onFieldChange?: (name: string, value: any) => void;
+    onFieldChange?: <Key extends keyof FV>(name: Key, value: FV[Key]) => void;
     /**
      * Submit handler
      * @since 0.0.54
@@ -97,104 +97,9 @@ export declare type FormProps<FV extends FormValues> = {
      */
     innerRef?: MutableRefObject<null | HTMLFormElement>;
 } & Omit<HTMLProps<HTMLFormElement>, 'onSubmit' | 'ref'>;
-/**
- * `Form` component is used for entering and submitting of user data.
- * [More details about designing of forms.](#!/Good%20Forms)
- * @since 0.0.54
- */
-declare const RefForwardingForm: import("react").ForwardRefExoticComponent<{
-    /**
-     * Required mark.
-     * @since 0.0.54
-     */
-    requiredMark?: ReactNode;
-    /**
-     * Hide required legend.
-     * @ignore
-     * @deprecated
-     */
-    hideRequiredLegend?: boolean | undefined;
-    /**
-     * Form values.
-     * @since 0.0.57
-     */
-    values?: FormValues | undefined;
-    /**
-     * Form errors.
-     * @since 0.0.57
-     */
-    errors?: FormErrors | undefined;
-    /**
-     * Current active state
-     * @since 0.0.59
-     */
-    state?: "cancel" | "submit" | "apply" | undefined;
-    /**
-     * Content of the `Form`.
-     * @since 0.0.54
-     */
-    children?: ReactNode;
-    /**
-     * Submit button visibility or custom configuration
-     * @since 0.0.58
-     */
-    submitButton?: boolean | Partial<ButtonProps<"button">> | undefined;
-    /**
-     * Apply button visibility or custom configuration
-     * @since 0.0.58
-     */
-    applyButton?: boolean | Partial<ButtonProps<"button">> | undefined;
-    /**
-     * Cancel button visibility or custom configuration
-     * @since 0.0.58
-     */
-    cancelButton?: boolean | Partial<ButtonProps<"button">> | undefined;
-    /**
-     * Additional buttons
-     * @since 0.0.58
-     */
-    additionalButtons?: ReactNode[] | undefined;
-    /**
-     * A callback function, can be executed when some field value is changing.
-     * @since 3.1.0
-     */
-    onFieldChange?: ((name: string, value: any) => void) | undefined;
-    /**
-     * Submit handler
-     * @since 0.0.54
-     */
-    onSubmit?: ((values: FormValues, isApply?: boolean | undefined) => void) | undefined;
-    /**
-     * Additional class name for the buttons container.
-     * @since 0.0.66
-     */
-    footerClassName?: string | undefined;
-    /**
-     * Form responsive view will be switched automatically.
-     * Specify this parameter explicitly if you want disable this behaviour and choice vertical or horizontal form view.
-     * @since 0.4.1
-     */
-    vertical?: boolean | undefined;
-    /**
-     * @ignore
-     */
-    className?: string | undefined;
-    /**
-     * @ignore
-     */
-    baseClassName?: string | undefined;
-    /**
-     * @ignore
-     */
-    render?: ((params: {
-        renderForm: (params?: {
-            actionButtons?: ReactNode;
-        } | undefined) => ReactElement;
-        renderActionButtons: () => ReactElement;
-    }) => ReactNode) | undefined;
-    /**
-     * @ignore
-     */
-    innerRef?: MutableRefObject<HTMLFormElement | null> | undefined;
-} & Omit<HTMLProps<HTMLFormElement>, "ref" | "onSubmit"> & import("react").RefAttributes<FormInstanceHandles>>;
-export default RefForwardingForm;
+export type { FormValues, FormInstanceHandles };
+declare type FormComponent = <FV extends FormValues>(props: FormProps<FV> & {
+    ref?: ForwardedRef<FormInstanceHandles>;
+}) => ReactElement;
+declare const _default: FormComponent;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const ScrollableElementFormContext: import("react").Context<HTMLElement | null>;
+export default ScrollableElementFormContext;

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

@@ -1,2 +1,3 @@
 export { default } from './Form';
+export * from './Form';
 export { getIn, setIn } from './utils';

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

@@ -3,6 +3,7 @@ export declare type FormInstanceHandles = {
     submit: () => void;
 };
 export declare type FormValues = Record<string, any>;
+export declare type FormFieldErrors = Record<string, any>;
 export declare type FormErrors = Record<string, any>;
 export declare type FormState<FV> = {
     values?: FV;
@@ -13,6 +14,9 @@ export declare type FormState<FV> = {
     prevErrors?: FormErrors;
     prevRequiredMark?: ReactNode;
 };
+export declare type Field = {
+    focus: (errors: FormFieldErrors) => void;
+};
 export declare type FormContextProps = {
     getValues: () => Readonly<FormValues> | undefined;
     getValue: (name: string, def?: any) => any;
@@ -21,9 +25,7 @@ export declare type FormContextProps = {
         [key: string]: any;
     };
     setRequiredField: (name: string, required: boolean) => void;
-    registerField: (name: string, field: {
-        focus: () => void;
-    }) => void;
+    registerField: (name: string, field: Field) => void;
     unregisterField: (name: string) => void;
     getRequiredMark: () => ReactNode;
 };

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

@@ -1,3 +1,3 @@
 export declare const NAMES_12: IconName[];
-export declare type IconName = 'archive' | 'arrow-back' | 'arrow-diagonal-out' | 'arrow-down' | 'arrow-down-in' | 'arrow-down-out' | 'arrow-down-tray' | 'arrow-left' | 'arrow-right' | 'arrow-right-in' | 'arrow-right-out' | 'arrow-up' | 'arrow-up-circle' | 'arrow-up-in' | 'arrow-up-in-cloud' | 'arrow-up-out' | 'arrow-up-tray' | 'arrows-four-directions' | 'arrows-inward' | 'arrows-loop' | 'arrows-opposite' | 'arrows-outward' | 'backup' | 'backup2' | 'bar-chart-vertical' | 'bar-chart-vertical-arrow-up' | 'bell' | 'book-email' | 'boundary' | 'box-diagonal-bottom-in' | 'box-diagonal-top-in' | 'brush' | 'bug' | 'calendar' | 'calendar-clock' | 'camera' | 'card' | 'card-ribbon' | 'card-row' | 'card-tile' | 'cd' | 'cd-up-in-cloud' | 'chain' | 'chain-broken' | 'chat' | 'check-list' | 'check-mark' | 'check-mark-circle' | 'check-mark-circle-filled' | 'chevron-double-down' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-diagonal' | 'clean' | 'clip' | 'clock' | 'clone' | 'cloud' | 'cloud-checkmark' | 'cloud-crossed' | 'cloud-graph' | 'code' | 'connection' | 'console' | 'console-filled' | 'copy' | 'copy-indicator' | 'cpu' | 'crane' | 'credit-cards' | 'cross-mark' | 'cross-mark-circle' | 'cross-mark-circle-filled' | 'crown-transfer' | 'dashboard' | 'database' | 'database-box' | 'database-filled' | 'database-plus' | 'deploy' | 'docker-filled' | 'dollar' | 'dollar-filled' | 'dot' | 'emoticon-confused' | 'emoticon-dead' | 'emoticon-excited' | 'emoticon-happy' | 'emoticon-neutral' | 'emoticon-sad' | 'emoticon-smile' | 'enter' | 'exclamation-mark-circle' | 'exclamation-mark-circle-filled' | 'eye' | 'eye-closed' | 'facebook' | 'facebook-filled' | 'feedback' | 'filter' | 'filter-check-mark' | 'fire' | 'flag' | 'flag-filled' | 'flag-globe' | 'floppy-disk' | 'folder-closed' | 'folder-key' | 'folder-network' | 'folder-open' | 'folders-tree' | 'forward-circle-filled' | 'four-squares' | 'gear' | 'git' | 'github' | 'globe' | 'hard-drive' | 'hard-drive-key' | 'hat' | 'hexagons' | 'home' | 'info-circle' | 'info-circle-filled' | 'ip-addresses' | 'joomla' | 'kebab' | 'key' | 'laravel' | 'lifebuoy' | 'lightbulb' | 'limit' | 'linux' | 'list' | 'list-check-mark' | 'location' | 'lock-closed' | 'lock-closed-check' | 'lock-closed-filled' | 'lock-open' | 'lock-open-cross' | 'lock-open-filled' | 'mail' | 'mail-circle-filled' | 'mail-settings' | 'megaphone' | 'menu' | 'menu-thin' | 'microsoft' | 'minimize' | 'minus' | 'minus-circle' | 'minus-circle-filled' | 'monitoring' | 'monitoring-off' | 'my-little-admin' | 'net' | 'nine-dots' | 'node-js' | 'package' | 'panel' | 'panel-check' | 'panel-eye' | 'panel-key' | 'panel-settings' | 'panels' | 'pause-circle' | 'pencil' | 'pencil-dialog' | 'php' | 'phpmyadmin' | 'pin' | 'pipette' | 'plans' | 'plugins' | 'plus' | 'power' | 'projects' | 'puzzle' | 'question-mark-circle' | 'question-mark-circle-filled' | 'ram' | 'react-js' | 'recycle' | 'redirect-circle-filled' | 'refresh' | 'reload' | 'remove' | 'reset' | 'resource' | 'ribbon' | 'rocket' | 'ruby' | 'sand-clock' | 'scan' | 'screen' | 'search' | 'security-check' | 'send' | 'server' | 'servers' | 'share' | 'shield' | 'shield-attention-filled' | 'shield-chain' | 'shield-filled' | 'shopping-cart' | 'sidebar-right-hide' | 'sidebar-right-show' | 'signal-light' | 'site-page' | 'sleep' | 'sliders' | 'square-with-circles' | 'star' | 'star-circle-filled' | 'star-filled' | 'star-half-filled' | 'start' | 'start-circle' | 'start-filled' | 'stop' | 'stop-circle' | 'storage' | 'themes' | 'three-dots-horizontal' | 'three-dots-vertical' | 'tools' | 'transfer' | 'triangle-exclamation-mark' | 'triangle-exclamation-mark-filled' | 'unarchive' | 'user' | 'volume' | 'web' | 'web-plus' | 'web-settings' | 'windows' | 'woocommerce' | 'wordpress' | 'zero-circle-filled';
+export declare type IconName = 'archive' | 'arrow-back' | 'arrow-diagonal-out' | 'arrow-down' | 'arrow-down-in' | 'arrow-down-out' | 'arrow-down-tray' | 'arrow-left' | 'arrow-right' | 'arrow-right-in' | 'arrow-right-out' | 'arrow-up' | 'arrow-up-circle' | 'arrow-up-in' | 'arrow-up-in-cloud' | 'arrow-up-out' | 'arrow-up-tray' | 'arrows-four-directions' | 'arrows-inward' | 'arrows-loop' | 'arrows-opposite' | 'arrows-outward' | 'backup' | 'backup2' | 'bar-chart-vertical' | 'bar-chart-vertical-arrow-up' | 'bar-chart-vertical-lock' | 'bell' | 'book-email' | 'boundary' | 'box-diagonal-bottom-in' | 'box-diagonal-top-in' | 'brush' | 'bug' | 'calendar' | 'calendar-clock' | 'camera' | 'card' | 'card-ribbon' | 'card-row' | 'card-tile' | 'cd' | 'cd-up-in-cloud' | 'chain' | 'chain-broken' | 'chat' | 'check-list' | 'check-mark' | 'check-mark-circle' | 'check-mark-circle-filled' | 'chevron-double-down' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-diagonal' | 'clean' | 'clip' | 'clock' | 'clone' | 'cloud' | 'cloud-checkmark' | 'cloud-crossed' | 'cloud-graph' | 'code' | 'connection' | 'console' | 'console-filled' | 'copy' | 'copy-indicator' | 'cpu' | 'crane' | 'credit-cards' | 'cross-mark' | 'cross-mark-circle' | 'cross-mark-circle-filled' | 'crown-transfer' | 'dashboard' | 'database' | 'database-box' | 'database-filled' | 'database-plus' | 'deploy' | 'docker-filled' | 'dollar' | 'dollar-filled' | 'dot' | 'emoticon-confused' | 'emoticon-dead' | 'emoticon-excited' | 'emoticon-happy' | 'emoticon-neutral' | 'emoticon-sad' | 'emoticon-smile' | 'enter' | 'exclamation-mark-circle' | 'exclamation-mark-circle-filled' | 'eye' | 'eye-closed' | 'facebook' | 'facebook-filled' | 'feedback' | 'filter' | 'filter-check-mark' | 'fire' | 'flag' | 'flag-filled' | 'flag-globe' | 'floppy-disk' | 'folder-closed' | 'folder-key' | 'folder-network' | 'folder-open' | 'folders-tree' | 'forward-circle-filled' | 'four-squares' | 'gear' | 'git' | 'github' | 'globe' | 'hard-drive' | 'hard-drive-key' | 'hat' | 'hexagons' | 'home' | 'info-circle' | 'info-circle-filled' | 'ip-addresses' | 'joomla' | 'kebab' | 'key' | 'laravel' | 'lifebuoy' | 'lightbulb' | 'limit' | 'linux' | 'list' | 'list-check-mark' | 'location' | 'lock-closed' | 'lock-closed-check' | 'lock-closed-filled' | 'lock-open' | 'lock-open-cross' | 'lock-open-filled' | 'mail' | 'mail-circle-filled' | 'mail-settings' | 'megaphone' | 'menu' | 'menu-thin' | 'microsoft' | 'minimize' | 'minus' | 'minus-circle' | 'minus-circle-filled' | 'monitoring' | 'monitoring-off' | 'my-little-admin' | 'net' | 'nine-dots' | 'node-js' | 'package' | 'panel' | 'panel-check' | 'panel-eye' | 'panel-key' | 'panel-settings' | 'panels' | 'pause-circle' | 'pencil' | 'pencil-dialog' | 'php' | 'phpmyadmin' | 'pin' | 'pipette' | 'plans' | 'plugins' | 'plus' | 'power' | 'projects' | 'puzzle' | 'question-mark-circle' | 'question-mark-circle-filled' | 'ram' | 'react-js' | 'recycle' | 'redirect-circle-filled' | 'refresh' | 'reload' | 'remove' | 'reset' | 'resource' | 'ribbon' | 'rocket' | 'ruby' | 'sand-clock' | 'scan' | 'screen' | 'search' | 'security-check' | 'send' | 'server' | 'servers' | 'share' | 'shield' | 'shield-attention-filled' | 'shield-chain' | 'shield-filled' | 'shopping-cart' | 'sidebar-right-hide' | 'sidebar-right-show' | 'signal-light' | 'site-page' | 'sleep' | 'sliders' | 'square-with-circles' | 'star' | 'star-circle-filled' | 'star-filled' | 'star-half-filled' | 'start' | 'start-circle' | 'start-filled' | 'stop' | 'stop-circle' | 'storage' | 'themes' | 'three-dots-horizontal' | 'three-dots-vertical' | 'tools' | 'transfer' | 'triangle-exclamation-mark' | 'triangle-exclamation-mark-filled' | 'unarchive' | 'user' | 'volume' | 'web' | 'web-plus' | 'web-settings' | 'windows' | 'woocommerce' | 'wordpress' | 'zero-circle-filled';
 export declare const NAMES: IconName[];

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

@@ -1,6 +1,7 @@
-import { ReactNode, SyntheticEvent, ComponentType, HTMLProps } from 'react';
+import { ElementType, SyntheticEvent, ReactNode } from 'react';
+import { PolymorphicComponentProps } from '../../utils/types';
 import './Link.less';
-export declare type LinkProps<P> = {
+export declare type BaseLinkProps = {
     /**
      * @ignore
      */
@@ -13,7 +14,7 @@ export declare type LinkProps<P> = {
      * Content of the link.
      * @since 1.9.0
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * @ignore
      */
@@ -29,19 +30,20 @@ export declare type LinkProps<P> = {
      * @since 1.9.0
      */
     pseudo?: boolean;
+};
+export declare type LinkProps<Component extends ElementType = 'a'> = {
     /**
      * Component to render as the root element. Useful when rendering a `Link` as other component or tag.
-     * @since 1.9.0
+     * @since 0.0.42
+     * @type ElementType
+     * @default a
      */
-    component?: 'a' | ComponentType<P>;
-} & HTMLProps<HTMLElement> & P;
-/**
- * FIXME: With the following code all @ts-ignore comments can be removed, but react-docgen cannot parse it.
- * const Link = <P extends any>({ ... }: LinkProps<P>) => {
- */
+    component?: Component;
+} & PolymorphicComponentProps<Component, BaseLinkProps>;
 /**
  * `Link` is used for navigation purposes.
- * @since 1.9.0
+ *
+ * Since: 1.9.0
  */
-declare const Link: <P>({ baseClassName, className, onClick, disabled, pseudo, component, children, ...other }: LinkProps<P>) => JSX.Element;
+declare const Link: <Component extends ElementType<any> = "a">({ baseClassName, className, onClick, disabled, pseudo, component, children, ...other }: LinkProps<Component>) => JSX.Element;
 export default Link;

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

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

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

@@ -43,7 +43,7 @@ export declare type OverlayProps = {
         /**
          * One of css align-items property value: center, start, end, etc.
          */
-        align: CSSProperties['alignItems'];
+        align?: CSSProperties['alignItems'];
     };
     /**
      * @ignore

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

@@ -0,0 +1,96 @@
+import PopperJs, { Behavior, ModifierFn, Placement, Position } from 'popper.js';
+import { Component, CSSProperties, PropsWithChildren, ReactElement, RefObject } from 'react';
+export interface PopperState {
+    popperStyle: CSSStyleDeclaration | null;
+    arrowStyle: CSSStyleDeclaration | null;
+    actualPlacement: Placement | undefined;
+}
+export declare type PopperProps = PropsWithChildren<{
+    /**
+     * Target for popper.
+     */
+    target: ReactElement;
+    /**
+     * A React reference to the DOM element that needs for calculating the position of the popup.
+     */
+    targetRef?: RefObject<HTMLElement | undefined>;
+    /**
+     * Arrow element of popper
+     */
+    arrow?: ReactElement;
+    /**
+     *  Whether show popper content.
+     */
+    show?: boolean;
+    /**
+     * Boundaries element for preventOverflow property.
+     */
+    boundariesElement?: 'scrollParent' | 'window' | 'viewport' | HTMLElement;
+    /**
+     * The behavior used to change the popper's placement.
+     */
+    behavior?: Behavior | Position[];
+    /**
+     * Placement for popper.
+     */
+    placement?: Placement;
+    /**
+     * zIndex value.
+     */
+    zIndex?: number;
+    /**
+     * Shift your popper on both axis.
+     */
+    offset?: number | string;
+    /**
+     * Update callback function
+     */
+    onUpdate?: (state: PopperState) => void;
+    /**
+     * @ignore
+     */
+    style?: CSSProperties;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}>;
+/**
+ * `Popper` component.
+ */
+declare class Popper extends Component<PopperProps, PopperState> {
+    static defaultProps: {
+        show: boolean;
+        children: null;
+        arrow: null;
+        placement: string;
+        behavior: string;
+        offset: string;
+        onUpdate: null;
+        className: null;
+        baseClassName: string;
+        zIndex: null;
+        boundariesElement: string;
+        style: undefined;
+        targetRef: undefined;
+    };
+    state: {
+        popperStyle: null;
+        arrowStyle: null;
+        actualPlacement: PopperJs.Placement | undefined;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PopperProps): void;
+    componentWillUnmount(): void;
+    popper: PopperJs | null;
+    contentRef: RefObject<HTMLDivElement>;
+    arrowRef: Element | null;
+    updatePopper({ show, boundariesElement, placement, offset, behavior, arrow, targetRef, }: PopperProps): void;
+    extractStyles: ModifierFn;
+    render(): JSX.Element;
+}
+export default Popper;

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

@@ -0,0 +1,2 @@
+export { default } from './Popper';
+export * from './Popper';

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

@@ -0,0 +1,53 @@
+import { ReactNode, KeyboardEventHandler } from 'react';
+import { ButtonProps } from '../Button';
+import { DropdownProps } from '../Dropdown';
+import './SplitButton.less';
+export interface SplitButtonProps {
+    /**
+     * Dropdown [menu](#!/Menu)
+     * @type ReactElement
+     * @since 0.0.47
+     */
+    menu: DropdownProps['menu'];
+    /**
+     * Name of icon or [Icon](#!/Icon) component
+     * @type IconName | IconProps | ReactNode
+     * @since 3.35.0
+     */
+    icon?: ButtonProps['icon'];
+    /**
+     * Button size
+     * @since 3.35.0
+     */
+    size?: ButtonProps['size'];
+    /**
+     * Content of the button
+     * @since 0.0.40
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * @ignore
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    /**
+     * @ignore
+     */
+    onClick?: ButtonProps['onClick'];
+}
+/**
+ * `Split Button` is a combination of a standard [Button](#!/Button) with a [Dropdown](#!/Dropdown) menu.
+ * It is used for grouping several related actions when one of the actions should be accessible immediately
+ * because it is used more often than others.
+ *
+ * Since: 0.0.40
+ */
+declare const SplitButton: ({ baseClassName, className, menu, children, onClick, onKeyDown, icon, size, ...props }: SplitButtonProps) => JSX.Element;
+export default SplitButton;

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

@@ -0,0 +1,2 @@
+export { default } from './SplitButton';
+export * from './SplitButton';