@plesk/ui-library 3.35.1 → 3.35.3

package/styleguide/images/symbols.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="11856" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="12144" 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" />
@@ -23,6 +23,12 @@
       <path d="M5.645 10.355a.496.496 0 0 1 0-.702L14.298 1H10.5a.5.5 0 0 1 0-1h5.002A.494.494 0 0 1 16 .498V5.5a.5.5 0 0 1-1 0V1.702l-8.653 8.653a.496.496 0 0 1-.702 0z" />
       <path d="M8 4.5a.5.5 0 0 0-.5-.5H1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8.5a.5.5 0 0 0-1 0V15H1V5h6.5a.5.5 0 0 0 .5-.5z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="arrow-down-circle-filled:12">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zM6 2.5a.5.5 0 0 1 1 0v5.798l1.653-1.653a.496.496 0 0 1 .702.702L6.903 9.798a.5.5 0 0 1-.401.202h-.004a.495.495 0 0 1-.401-.202L3.645 7.347a.496.496 0 0 1 .702-.702L6 8.298V2.5z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="arrow-down-circle-filled:16">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5a7.5 7.5 0 1 0-15 0 7.5 7.5 0 0 0 15 0zm-3.645.146a.496.496 0 0 0-.702 0L9 11.299V3.5a.5.5 0 0 0-1 0v7.799L5.347 8.646a.496.496 0 0 0-.702.701L8.097 12.8a.504.504 0 0 0 .401.201h.004a.494.494 0 0 0 .401-.201l3.452-3.452a.496.496 0 0 0 0-.701z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="arrow-down-in:12">
       <path d="M11 2v9H2V2h1a.5.5 0 0 0 0-1H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-1a.5.5 0 0 0 0 1h1z" />
       <path d="M8.653 5.645a.496.496 0 0 1 .702.702L6.903 8.798A.499.499 0 0 1 6.502 9h-.004a.495.495 0 0 1-.401-.202L3.645 6.347a.496.496 0 0 1 .702-.702L6 7.298V.5a.5.5 0 0 1 1 0v6.798l1.653-1.653z" />
@@ -52,6 +58,12 @@
     <symbol viewBox="0 0 16 16" id="arrow-down:16">
       <path d="M8 .5a.5.5 0 0 1 1 0v13.7984l2.6531-2.6531a.4962.4962 0 0 1 .7016.7016l-3.4513 3.4513A.4944.4944 0 0 1 8.502 16h-.004a.4944.4944 0 0 1-.4014-.2018l-3.4513-3.4513a.4961.4961 0 0 1 .7016-.7016L8 14.2984V.5z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="arrow-left-circle-filled:12">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM10.5 6a.5.5 0 0 1 0 1H4.702l1.653 1.653a.496.496 0 0 1-.702.702L3.202 6.903A.5.5 0 0 1 3 6.502v-.004a.495.495 0 0 1 .202-.401l2.451-2.452a.496.496 0 0 1 .702.702L4.702 6H10.5z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="arrow-left-circle-filled:16">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 16a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm-.146-3.645a.496.496 0 0 0 0-.702L5.701 9H13.5a.5.5 0 0 0 0-1H5.701l2.654-2.653a.496.496 0 0 0-.702-.702L4.202 8.097A.499.499 0 0 0 4 8.498v.004a.495.495 0 0 0 .202.401l3.45 3.452a.496.496 0 0 0 .702 0z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="arrow-left:12">
       <path d="M.202 6.097A.499.499 0 0 0 0 6.498v.004a.495.495 0 0 0 .202.401l2.451 2.452a.496.496 0 0 0 .702-.702L1.702 7H11.5a.5.5 0 0 0 0-1H1.702l1.653-1.653a.496.496 0 0 0-.702-.702L.202 6.097z" />
     </symbol>
@@ -86,6 +98,12 @@
     <symbol viewBox="0 0 16 16" id="arrow-right:16">
       <path d="M11.6453 5.3469a.4961.4961 0 0 1 .7016-.7016l3.4513 3.4513A.4944.4944 0 0 1 16 8.498v.004a.4944.4944 0 0 1-.2018.4014l-3.4513 3.4513a.4962.4962 0 0 1-.7016-.7016L14.2984 9H.5a.5.5 0 0 1 0-1h13.7984l-2.6531-2.6531z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="arrow-up-circle-filled:12">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM6 10.5a.5.5 0 0 0 1 0V4.702l1.653 1.653a.496.496 0 0 0 .702-.702L6.903 3.202A.5.5 0 0 0 6.502 3h-.004a.495.495 0 0 0-.401.202L3.645 5.653a.496.496 0 0 0 .702.702L6 4.702V10.5z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="arrow-up-circle-filled:16">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm-3.645-.146a.496.496 0 0 1-.702 0L9 5.701V13.5a.5.5 0 0 1-1 0V5.701L5.347 8.355a.496.496 0 0 1-.702-.702l3.452-3.451A.499.499 0 0 1 8.498 4h.004a.495.495 0 0 1 .401.202l3.452 3.45a.496.496 0 0 1 0 .702z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="arrow-up-circle:12">
       <path d="M6 11.5a.5.5 0 001 0V4.702l1.653 1.653a.496.496 0 00.702-.702L6.903 3.202A.5.5 0 006.502 3h-.004a.495.495 0 00-.401.202L3.645 5.653a.496.496 0 00.702.702L6 4.702V11.5z" />
       <path d="M9 9.528c0-.179.09-.343.232-.452a4.5 4.5 0 10-5.464 0A.573.573 0 014 9.528c0 .399-.42.65-.742.415a5.5 5.5 0 116.485 0C9.42 10.18 9 9.927 9 9.528z" />
@@ -640,6 +658,12 @@
       <path fill-rule="evenodd" d="M8.5 15c3.5899 0 6.5-2.9101 6.5-6.5S12.0899 2 8.5 2 2 4.9101 2 8.5 4.9101 15 8.5 15zm0 1c4.1421 0 7.5-3.3579 7.5-7.5S12.6421 1 8.5 1 1 4.3579 1 8.5 4.3579 16 8.5 16z" clip-rule="evenodd" />
       <path d="M8 4.5a.5.5 0 0 1 1 0V5h1.5a.5.5 0 0 1 0 1H8c-.5523 0-1 .4477-1 1s.4477 1 1 1h1c1.1046 0 2 .8954 2 2s-.8954 2-2 2v.5a.5.5 0 0 1-1 0V12H6.5a.5.5 0 0 1 0-1H9c.5523 0 1-.4477 1-1s-.4477-1-1-1H8c-1.1046 0-2-.8954-2-2s.8954-2 2-2v-.5z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="dot-big:12">
+      <path d="M10 6a4 4 0 1 1-8 0 4 4 0 0 1 8 0z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="dot-big:16">
+      <circle cx="8" cy="8" r="5" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="dot:12">
       <path d="M7.5 6a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
     </symbol>
@@ -1296,6 +1320,20 @@
     <symbol viewBox="0 0 16 16" id="plugins:16">
       <path fill-rule="evenodd" d="M15 2h-5v5h5V2zm-5-1c-.5523 0-1 .4477-1 1v5c0 .5523.4477 1 1 1h5c.5523 0 1-.4477 1-1V2c0-.5523-.4477-1-1-1h-5zM7 10H2v5h5v-5zM2 9c-.5523 0-1 .4477-1 1v5c0 .5523.4477 1 1 1h5c.5523 0 1-.4477 1-1v-5c0-.5523-.4477-1-1-1H2zM15 10h-5v5h5v-5zm-5-1c-.5523 0-1 .4477-1 1v5c0 .5523.4477 1 1 1h5c.5523 0 1-.4477 1-1v-5c0-.5523-.4477-1-1-1h-5z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="plus-circle-filled:12">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0-2.5A.5.5 0 0 1 6 9V7H4a.5.5 0 0 1 0-1h2V4a.5.5 0 0 1 1 0v2h2a.5.5 0 0 1 0 1H7v2a.5.5 0 0 1-.5.5z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="plus-circle-filled:16">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm-11.5 0A.5.5 0 0 1 5 8h3V5a.5.5 0 0 1 1 0v3h3a.5.5 0 0 1 0 1H9v3a.5.5 0 0 1-1 0V9H5a.5.5 0 0 1-.5-.5z" />
+    </symbol>
+    <symbol viewBox="0 0 12 12" id="plus-circle:12">
+      <path d="M4 6a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0V7h2a.5.5 0 0 0 0-1H7V4a.5.5 0 0 0-1 0v2H4z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zm-1 0a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="plus-circle:16">
+      <path d="M5 8a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0V9h3a.5.5 0 0 0 0-1H9V5a.5.5 0 0 0-1 0v3H5z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm-1 0a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="plus:12">
       <path d="M6.5 2a.5.5 0 0 0-.5.5V6H2.5a.5.5 0 1 0 0 1H6v3.5a.5.5 0 0 0 1 0V7h3.5a.5.5 0 0 0 0-1H7V2.5a.5.5 0 0 0-.5-.5z" />
     </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.35.1</title>
+    <title>Plesk UI Library 3.35.3</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.edc3f2a1.js"></script>
+    <script src="build/bundle.8058bbce.js"></script>
   </body>
 </html>

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

@@ -14,7 +14,7 @@ declare type AutoClosableProps = {
      * Optional function that returns an array of DOM nodes clicks on which should be ignored.
      * @ignore
      */
-    ignoreNodes?: () => Array<ReactInstance | typeof Node | RefObject<HTMLElement> | null>;
+    ignoreNodes?: () => Array<ReactInstance | typeof Node | RefObject<HTMLElement> | Text | null | undefined>;
     /**
      * A React reference to the DOM element that needs tracking outside clicks.
      * @since 3.12.0
@@ -31,7 +31,28 @@ declare class AutoClosable extends Component<AutoClosableProps> {
     children: AutoClosable[];
     addChild: (child: AutoClosable) => void;
     removeChild: (child: AutoClosable) => void;
-    getIgnoreNodes: () => Array<ReactInstance | typeof Node | RefObject<HTMLElement> | null>;
+    getIgnoreNodes: () => (Text | {
+        new (): Node;
+        prototype: Node;
+        readonly ATTRIBUTE_NODE: number;
+        readonly CDATA_SECTION_NODE: number;
+        readonly COMMENT_NODE: number;
+        readonly DOCUMENT_FRAGMENT_NODE: number;
+        readonly DOCUMENT_NODE: number;
+        readonly DOCUMENT_POSITION_CONTAINED_BY: number;
+        readonly DOCUMENT_POSITION_CONTAINS: number;
+        readonly DOCUMENT_POSITION_DISCONNECTED: number;
+        readonly DOCUMENT_POSITION_FOLLOWING: number;
+        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
+        readonly DOCUMENT_POSITION_PRECEDING: number;
+        readonly DOCUMENT_TYPE_NODE: number;
+        readonly ELEMENT_NODE: number;
+        readonly ENTITY_NODE: number;
+        readonly ENTITY_REFERENCE_NODE: number;
+        readonly NOTATION_NODE: number;
+        readonly PROCESSING_INSTRUCTION_NODE: number;
+        readonly TEXT_NODE: number;
+    } | ReactInstance | RefObject<HTMLElement> | null | undefined)[];
     onOutsideClick: (event: MouseEvent) => void;
     render(): JSX.Element;
 }

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

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode, ReactElement } from 'react';
-import { PolymorphicComponentPropsWithRef } from '../../utils/types';
+import { DataAttributes, PolymorphicComponentPropsWithRef } from '../../utils/types';
 import { IconName, IconProps } from '../Icon';
 import '../../helpers/base.less';
 import './Button.less';
@@ -79,9 +79,6 @@ interface BaseButtonPops {
      */
     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>`.
@@ -95,11 +92,10 @@ 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
+ * @since 0.0.37
  */
+declare const _default: ButtonComponent<"button">;
 export default _default;

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

@@ -0,0 +1,58 @@
+import { Component, CSSProperties, ReactNode } from 'react';
+import { ContentRect } from 'react-measure';
+import './Carousel.less';
+export interface CarouselProps {
+    /**
+     * Slides
+     * @since 0.0.42
+     */
+    children?: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * Carousel component is used for optimizing page space by displaying only some parts
+ * of entire content in a cyclic view.
+ * @since 0.0.42
+ */
+declare class Carousel extends Component<CarouselProps> {
+    static defaultProps: {
+        children: null;
+        className: null;
+        baseClassName: string;
+    };
+    constructor(props: CarouselProps);
+    state: {
+        showControls: boolean;
+        current: number;
+        next: number;
+        moving: boolean;
+        slideWidths: never[];
+        totalWidth: number;
+    };
+    componentDidMount(): void;
+    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;
+    setCurrentSlide(next: number): void;
+    handleResize({ bounds }: ContentRect): void;
+    listStyle(): CSSProperties;
+    render(): JSX.Element;
+}
+export default Carousel;

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

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

package/types/src/components/Columns/Column.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, ReactNode } from 'react';
-declare type ColumnProps = {
+export interface ColumnProps {
     /**
      * @ignore
      */
@@ -43,7 +43,7 @@ declare type ColumnProps = {
      * @since 2.6.0
      */
     maxWidth?: number | string;
-};
+}
 /**
  * `Column` component is a part of [Columns](#!/Columns).
  * @since 2.6.0

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

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode } from 'react';
 import '../../helpers/base.less';
 import './Columns.less';
-declare type ColumnsProps = {
+export interface ColumnsProps {
     /**
      * @ignore
      */
@@ -25,7 +25,7 @@ declare type ColumnsProps = {
      * @since 2.6.0
      */
     gap?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
+}
 /**
  * `Columns` component is used for creating of multi-column layouts.
  * @since 2.6.0

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

@@ -1,2 +1,4 @@
 export { default } from './Columns';
+export type { ColumnsProps } from './Columns';
 export { default as Column } from './Column';
+export type { ColumnProps } from './Column';

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

@@ -4,7 +4,7 @@ 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 ImageType = string | ReactElement | HTMLAttributes<HTMLImageElement>;
 export declare type DialogProps<FV extends FormValues = FormValues> = {
     /**
      * Toggles visibility.

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

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

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

@@ -1,4 +1,4 @@
-declare type DistractionFreeMode = {
+export declare type DistractionFreeMode = {
     enabled: boolean;
     toggle: () => void;
 };

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

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

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

@@ -1,28 +1,12 @@
-import { Component, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import './Header.less';
-declare type HeaderProps = {
+interface 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 {};
+declare const Header: ({ baseClassName, onClose, children, backButton, hideButton, tabs, ...props }: HeaderProps) => JSX.Element;
+export default Header;

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

@@ -101,5 +101,10 @@ export type { FormValues, FormInstanceHandles };
 declare type FormComponent = <FV extends FormValues>(props: FormProps<FV> & {
     ref?: ForwardedRef<FormInstanceHandles>;
 }) => ReactElement;
+/**
+ * `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 _default: FormComponent;
 export default _default;

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

@@ -0,0 +1,53 @@
+import { ComponentProps, ReactNode } from 'react';
+import FormField from '../FormField';
+import '../../helpers/base.less';
+import './FormFieldCheckbox.less';
+export interface FormFieldCheckboxProps extends ComponentProps<typeof FormField> {
+    /**
+     * Disabled state of field.
+     * @since 0.1.0
+     */
+    disabled?: boolean;
+    /**
+     * Custom checked value. Default is boolean true.
+     * @since 0.0.59
+     */
+    checkedValue?: boolean | string;
+    /**
+     * Custom unchecked value. Default is boolean false.
+     * @since 0.0.59
+     */
+    uncheckedValue?: boolean | string;
+    /**
+     * The browser will automatically focus on the component upon rendering the screen
+     * @since 1.9.0
+     */
+    autoFocus?: boolean;
+    /**
+     * @ignore
+     */
+    label?: ReactNode;
+    /**
+     * @ignore
+     */
+    required?: boolean;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * Adds an info icon with the additional description.
+     */
+    fullDescription?: string;
+}
+/**
+ * `FormFieldCheckbox` component is used for turning an option on or off
+ * and selecting or deselecting an item.
+ * @since 0.0.58
+ */
+declare const FormFieldCheckbox: ({ className, label, autoFocus, required, checkedValue, uncheckedValue, baseClassName, ...props }: FormFieldCheckboxProps) => JSX.Element;
+export default FormFieldCheckbox;

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

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

package/types/src/components/FormFieldPassword/PasswordMeter.d.ts

@@ -1,9 +1,10 @@
-import { ComponentProps, FunctionComponent } from 'react';
-import Popover from '../Popover';
+import { FunctionComponent, ReactElement } from 'react';
+import { PopoverProps } from '../Popover';
 import estimatePassword, { EstimateResult, EstimateRule } from './estimatePassword';
 export declare type PasswordMeterProps = {
+    children: ReactElement;
     value: string;
     onEstimate?: (password: string, defaultEstimateFn: typeof estimatePassword, defaultEstimateRules: EstimateRule[]) => EstimateResult;
-} & ComponentProps<typeof Popover>;
+} & Omit<PopoverProps, 'children' | 'target'>;
 declare const PasswordMeter: FunctionComponent<PasswordMeterProps>;
 export default PasswordMeter;

package/types/src/components/FormFieldPassword/generatePassword.d.ts

@@ -0,0 +1,2 @@
+declare const generatePassword: () => string;
+export default generatePassword;

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

@@ -0,0 +1,72 @@
+import { ReactElement, ReactNode, FunctionComponent, ComponentProps } from 'react';
+import FormField from '../FormField';
+import './FormFieldRadioButtons.less';
+export interface FormFieldRadioButtonsProps extends ComponentProps<typeof FormField> {
+    /**
+     * @since 0.2.0
+     */
+    options: {
+        /**
+         * Option value.
+         */
+        value: string;
+        /**
+         * Option label.
+         */
+        label: ReactNode;
+        /**
+         * Text hint located below option for providing additional information.
+         */
+        description?: ReactNode;
+        /**
+         * Set true if option is not available to choice.
+         */
+        disabled?: boolean;
+        /**
+         * Optional array of `FormField` components under this option.
+         */
+        indentFields?: ReactElement[];
+    }[];
+    /**
+     * Value of current chosen option.
+     * @deprecated Use [Form](#!/Form) values.
+     * @since 0.2.0
+     */
+    value?: string;
+    /**
+     * Disabled state of field.
+     * @since 0.2.0
+     */
+    disabled?: boolean;
+    /**
+     * The browser will automatically focus on the component upon rendering the screen
+     * @since 1.9.0
+     */
+    autoFocus?: boolean;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * @ignore
+     */
+    label?: ReactNode;
+    /**
+     * @ignore
+     */
+    name?: string;
+    /**
+     * @ignore
+     */
+    required?: boolean;
+}
+/**
+ * `FormFieldRadioButtons` is used for making a choice among a set of mutually exclusive, related options. Only one option can be chosen.
+ * @since 0.2.0
+ */
+declare const FormFieldRadioButtons: FunctionComponent<FormFieldRadioButtonsProps>;
+export default FormFieldRadioButtons;

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

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

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

@@ -2,7 +2,7 @@ import { FunctionComponent, ComponentProps } from 'react';
 import Select from '../Select';
 import './FormFieldSelect.less';
 declare type SelectProps = ComponentProps<typeof Select>;
-declare type FormFieldSelectProps = Omit<SelectProps, 'value' | 'defaultValue' | 'onChange'>;
+export declare type FormFieldSelectProps = Omit<SelectProps, 'value' | 'defaultValue' | 'onChange'>;
 /**
  * `FormFieldSelect` componentis is used for making a choice among a set of related options.
  * See description of `Select` for [the full list of properties](#!/Select) of this component.

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

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

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

@@ -0,0 +1,82 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import FormField from '../FormField';
+import { InputProps } from '../Input';
+import { TextAreaProps } from '../TextArea';
+import './FormFieldText.less';
+declare type MultilineProps = {
+    multiline: true;
+    inputProps?: Partial<TextAreaProps>;
+};
+declare type SingleLineProps = {
+    multiline?: false;
+    inputProps?: Partial<InputProps>;
+};
+declare type LinePropsBase = MultilineProps | SingleLineProps;
+export declare type FormFieldTextProps = ComponentProps<typeof FormField> & {
+    /**
+     * Size of the input
+     * @since 0.0.58
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'fill';
+    /**
+     * If `true`, a textarea element will be rendered.
+     * @since 1.3.0
+     */
+    multiline?: boolean;
+    /**
+     * Number of rows to display when multiline option is set to true.
+     * @since 1.3.0
+     */
+    rows?: number | {
+        min: number;
+        max: number;
+    };
+    /**
+     * Placeholder of the input
+     * @since 0.0.58
+     */
+    placeholder?: string;
+    /**
+     * Disabled state of field.
+     * @since 0.2.0
+     */
+    disabled?: boolean;
+    /**
+     * The browser will automatically focus on the component upon rendering the screen
+     * @since 1.9.0
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether the value of the control can be automatically completed by the browser or not.
+     * @since 2.5.1
+     */
+    autoComplete?: string;
+    /**
+     * If 'true', a field will be multiple. You can also limit the number of fields with a value like { max: 5 }.
+     * @since 1.12.0
+     */
+    multi?: boolean | {
+        max: number;
+    };
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * Adjust height automatically when multiline option is set to true.
+     * @since 1.9.0
+     */
+    autoheight?: boolean;
+} & LinePropsBase;
+/**
+ * `FormFieldText` component is used for entering of user data in text format.
+ *
+ * [FormField](#!/FormField) with [InputNumber](#!/InputNumber) can be used for entering of integer numbers.
+ * @since 0.0.58
+ */
+declare const FormFieldText: FunctionComponent<FormFieldTextProps>;
+export default FormFieldText;

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

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