@plesk/ui-library 3.35.8 → 3.36.0

package/styleguide/images/symbols.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="12144" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="12288" 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" />
@@ -978,6 +978,22 @@
       <path fill-rule="evenodd" d="M14 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" clip-rule="evenodd" />
       <path fill-rule="evenodd" d="M11 10a5 5 0 1 0-4.622-3.09L.146 13.143a.499.499 0 0 0-.146.356V15.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14h1.5a.5.5 0 0 0 .5-.5V12h1.5a.5.5 0 0 0 .5-.5V10h2.75c.02 0 .04-.001.06-.004.063.003.126.004.19.004zm0-1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM1 13.703l5.876-5.876c.308.45.688.846 1.124 1.173h-.5a.5.5 0 0 0-.5.5V11H5.5a.5.5 0 0 0-.5.5V13H3.5a.5.5 0 0 0-.5.5V15H1v-1.297z" clip-rule="evenodd" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="label-plus:12">
+      <path d="M6.65.4a1 1 0 0 0-1.3 0l-3 2.57a1 1 0 0 0-.35.76V11a1 1 0 0 0 1 1h2a.5.5 0 1 0 0-1H3V3.73l3-2.57 3 2.57V7a.5.5 0 0 0 1 0V3.73a1 1 0 0 0-.35-.76L6.65.4z" />
+      <path d="M6 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm1 2.5a.5.5 0 0 1 1 0V9h1.5a.5.5 0 0 1 0 1H8v1.5a.5.5 0 1 1-1 0V10H5.5a.5.5 0 1 1 0-1H7V7.5z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="label-plus:16">
+      <path d="M12 5.08v5.42a.5.5 0 0 0 1 0V5.08a1 1 0 0 0-.32-.73l-4-3.72a1 1 0 0 0-1.36 0l-4 3.72a1 1 0 0 0-.32.73V15a1 1 0 0 0 1 1h3.5a.5.5 0 0 0 0-1H4V5.08l4-3.71 4 3.71z" />
+      <path d="M9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm1.5 6a.5.5 0 0 0-.5.5V13H8.5a.5.5 0 0 0 0 1H10v1.5a.5.5 0 0 0 1 0V14h1.5a.5.5 0 0 0 0-1H11v-1.5a.5.5 0 0 0-.5-.5z" />
+    </symbol>
+    <symbol viewBox="0 0 12 12" id="label:12">
+      <path d="M6 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
+      <path fill-rule="evenodd" d="M6.65.4a1 1 0 0 0-1.3 0l-3 2.57a1 1 0 0 0-.35.76V11a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3.73a1 1 0 0 0-.35-.76L6.65.4zM3 3.73l3-2.57 3 2.57V11H3V3.73z" clip-rule="evenodd" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="label:16">
+      <path d="M8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
+      <path fill-rule="evenodd" d="M3 5.08a1 1 0 0 1 .32-.73l4-3.72a1 1 0 0 1 1.36 0l4 3.72a1 1 0 0 1 .32.73V15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5.08zm9 0V15H4V5.08l4-3.71 4 3.71z" clip-rule="evenodd" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="laravel:12">
       <path fill-rule="evenodd" d="m6.75 4.95-1.5.87V1.56a.2.2 0 0 0-.1-.17L2.92.1a.61.61 0 0 0-.57 0L.1 1.4a.2.2 0 0 0-.09.16v7.59c0 .06.04.13.1.16l4.5 2.59c.14.09.4.08.56 0l4.5-2.59c.05-.03.09-.1.09-.16V6.69l2.16-1.24a.19.19 0 0 0 .09-.16V2.83a.18.18 0 0 0-.1-.16l-2.24-1.3a.8.8 0 0 0-.57 0l-2.25 1.3c-.05.03-.09.09-.09.16v2.12Zm-1.5 4.3v1.72L9 8.81v-1.7L5.25 9.27Zm4.5-4.8v1.37l1.5-.87V3.6l-1.5.87Zm-.75 0L7.5 3.6v1.36l1.5.87V4.46ZM2.25 3.2v4.69c0 .07.04.12.1.16L4.5 9.26v1.71L.75 8.81V2.32l1.5.87Zm1.87-1.52L2.62.8l-1.49.86 1.5.86 1.49-.86ZM3 7.1l1.5-.86V2.32L3 3.2V7.1Zm4.88-4.17 1.5.86 1.49-.86-1.5-.86-1.49.86Zm.73 3.53L7.13 5.6 3.39 7.76l1.48.84 3.74-2.13Z" clip-rule="evenodd" />
     </symbol>
@@ -1804,6 +1820,15 @@
       <path fill-rule="evenodd" d="M5.93 11.69a1.75 1.75 0 0 0-.68-.12c-.27 0-.5.04-.7.13-.2.09-.36.21-.49.37a1.6 1.6 0 0 0-.3.57c-.06.21-.09.45-.09.71 0 .27.03.5.09.71.06.2.15.38.27.53.12.14.28.25.47.33.2.07.42.11.69.11.26 0 .5-.04.7-.12a1.34 1.34 0 0 0 .77-.91 2.58 2.58 0 0 0 .01-1.43 1.22 1.22 0 0 0-.74-.88Zm-1.22.77c.1-.2.25-.3.47-.3a.56.56 0 0 1 .55.34c.05.1.09.22.1.36.03.14.04.3.04.47 0 .36-.05.63-.14.83-.1.19-.26.29-.47.29a.63.63 0 0 1-.34-.09.61.61 0 0 1-.22-.23c-.05-.1-.09-.23-.1-.37a3.3 3.3 0 0 1-.04-.46c0-.36.05-.64.15-.84Z" clip-rule="evenodd" />
       <path d="M9.4 15h-.62l-.41-.96a4.04 4.04 0 0 0-.16-.39 15.16 15.16 0 0 0-.2-.55v.65a10.28 10.28 0 0 1-.01.57l-.03.68h-.76l.2-3.38h.71l.78 1.95a5.88 5.88 0 0 1 .2.6 8.56 8.56 0 0 1 .22-.6l.78-1.95h.7L11 15h-.78l-.03-.68-.01-.25v-.97a25.89 25.89 0 0 0-.28.73l-.07.17-.42 1ZM13.08 15h.63l.42-1a19.93 19.93 0 0 1 .17-.4 5.74 5.74 0 0 0 .18-.5v1.22l.04.68h.77l-.2-3.38h-.7l-.77 1.95a5.97 5.97 0 0 0-.21.6 4.76 4.76 0 0 0-.2-.6l-.79-1.95h-.7l-.2 3.38h.75l.03-.68a4.6 4.6 0 0 0 0-.57v-.65a95.66 95.66 0 0 0 .37.94l.41.96Z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="wordpress-minus:12">
+      <path fill-rule="evenodd" d="m12 6-.01.34a4.02 4.02 0 0 0-1.01-.82 4.97 4.97 0 0 0-.58-1.9 3.81 3.81 0 0 1-.12 1.59A3.98 3.98 0 0 0 9.27 5a3.46 3.46 0 0 0-.3-.64l-.05-.1c-.24-.37-.44-.7-.44-1.08 0-.46.35-.89.84-.89h.03a.3.3 0 0 0 .02 0A4.98 4.98 0 0 0 6 1a5 5 0 0 0-4.18 2.25h.32c.53 0 1.33-.06 1.33-.06.27-.02.3.38.04.41l-.58.05 1.83 5.43.4-1.2a4 4 0 0 0-.13 1.63L4.6 10.8c.3.09.61.15.93.18.22.38.5.72.82 1.01A6 6 0 1 1 12 6zm-8.19 4.5a5 5 0 0 1-2.38-6.53l2.38 6.53z" clip-rule="evenodd" />
+      <path d="m6.69 3.65.58 1.74a4.01 4.01 0 0 0-2.01 2.2l.6-1.8-.8-2.14c-.26-.01-.51-.04-.51-.04-.28-.02-.24-.44.02-.41 0 0 .82.06 1.32.06.52 0 1.34-.07 1.34-.07.27-.02.3.38.03.42l-.57.04z" />
+      <path fill-rule="evenodd" d="M12 9a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-5-.5h4v1H7v-1z" clip-rule="evenodd" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="wordpress-minus:16">
+      <path fill-rule="evenodd" d="M8 16c.52 0 1.02-.05 1.5-.14a4.53 4.53 0 0 1-.79-.93 7.18 7.18 0 0 1-.71.04 6.9 6.9 0 0 1-1.97-.29l2.1-6.07.55 1.51a4.52 4.52 0 0 1 1.58-1.52l-1.3-3.86.8-.07c.37-.05.32-.6-.05-.57 0 0-1.14.08-1.87.08-.68 0-1.83-.08-1.83-.08-.37-.03-.41.55-.04.57 0 0 .36.05.73.07L7.8 7.7l-1.52 4.57-2.55-7.54.8-.07c.37-.05.33-.6-.05-.57 0 0-1.12.08-1.86.08h-.44A6.97 6.97 0 0 1 12.7 2.86h-.05a.27.27 0 0 0-.04-.01c-.69 0-1.17.6-1.17 1.24 0 .53.28.98.6 1.5l.09.13A3.69 3.69 0 0 1 12.68 8a4.5 4.5 0 0 1 .86.12l.09-.25a6.61 6.61 0 0 0 .48-3.21 6.93 6.93 0 0 1 .82 4.05c.34.22.66.5.93.8A8 8 0 1 0 8 16zM1.63 5.16c-.38.87-.6 1.83-.6 2.84a6.95 6.95 0 0 0 3.93 6.27l-3.33-9.1z" clip-rule="evenodd" />
+      <path fill-rule="evenodd" d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0zm-6-.5h5v1h-5v-1z" clip-rule="evenodd" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="wordpress:12">
       <path fill-rule="evenodd" d="M12 6A6 6 0 1 1 0 6a6 6 0 0 1 12 0zm-4.342 4.719A4.99 4.99 0 0 1 6 11c-.49 0-.964-.07-1.411-.202l1.502-4.36 1.538 4.22a.193.193 0 0 0 .029.06zm2.738-7.104C10.78 4.325 11 5.137 11 6a4.998 4.998 0 0 1-2.483 4.321l1.528-4.412c.286-.717.383-1.288.383-1.796 0-.181-.013-.343-.032-.498zM1.823 3.25A4.996 4.996 0 0 1 6 1c1.3 0 2.484.496 3.373 1.31l-.02-.004a.192.192 0 0 0-.032-.003c-.494 0-.842.431-.842.891 0 .38.202.706.437 1.084l.057.093c.188.334.411.759.411 1.378 0 .394-.14.84-.327 1.444L9 7.372 8.5 9.042 6.69 3.655c.299-.021.57-.05.57-.05.272-.034.237-.43-.035-.41 0 0-.814.063-1.336.063-.495 0-1.316-.063-1.316-.063-.265-.02-.3.397-.028.41 0 0 .257.036.522.05l.787 2.137L4.76 9.078 2.929 3.654c.307-.021.578-.05.578-.05.265-.034.237-.43-.035-.41 0 0-.807.063-1.336.063-.089 0-.197 0-.313-.007zm1.988 7.246A5 5 0 0 1 1.429 3.97l2.382 6.526z" clip-rule="evenodd" />
     </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.8</title>
+    <title>Plesk UI Library 3.36.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.50841a29.js"></script>
+    <script src="build/bundle.2c956ff2.js"></script>
   </body>
 </html>

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, ReactElement, ElementType } from 'react';
+import { FunctionComponent, ReactNode, ReactElement, ElementType, MouseEvent } from 'react';
 import { IconProps } from '../Icon';
 import '../../helpers/base.less';
 import './Action.less';
@@ -37,6 +37,11 @@ type ActionProps = {
      * @since 1.1.0
      */
     progress?: boolean;
+    /**
+     * Component visual emphasis
+     * @since 3.36.0
+     */
+    primary?: boolean;
     /**
      * Suppresses line breaks (text wrapping) within the source.
      * @since 0.0.68
@@ -50,6 +55,10 @@ type ActionProps = {
         className?: string;
         component?: string | ElementType;
     };
+    /**
+     * @ignore
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
 } & {
     [key: string]: any;
 };

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

@@ -0,0 +1,188 @@
+import { Component } from 'react';
+import CM, { Editor, EditorChange, EditorConfiguration, ModeSpec, ModeSpecOptions, ScrollInfo } from 'codemirror';
+import './CodeEditor.less';
+type ExtendedEditorConfiguration = EditorConfiguration & {
+    enterMode?: string;
+    tabMode?: string;
+};
+export interface CodeEditorProps {
+    /**
+     * The mode to use. When not given, this will default to the first mode that was loaded.
+     * @since 0.0.61
+     */
+    mode?: string | ModeSpec<ModeSpecOptions> | null;
+    /**
+     * CodeEditor can detect mode by file name. Will be ignored if you set mode property.
+     * @since 0.0.61
+     */
+    fileName?: string;
+    /**
+     * Content of the `CodeEditor`.
+     * @since 0.0.61
+     */
+    children?: string;
+    /**
+     * Set read only.
+     * @since 0.0.61
+     */
+    readOnly?: boolean | string;
+    /**
+     * Set autofocus.
+     * @since 0.0.61
+     */
+    autofocus?: boolean;
+    /**
+     * onInit event handler.
+     * @since 0.0.61
+     */
+    onInit?: (el: HTMLElement) => void;
+    /**
+     * onChange event handler.
+     * @since 0.0.61
+     */
+    onChange?: (content: string) => void;
+    /**
+     * onSave event handler.
+     * @since 0.0.61
+     */
+    onSave?: () => void;
+    /**
+     * See all supported options in [CodeMirror](https://codemirror.net/doc/manual.html#config) documentation.
+     * @since 0.0.61
+     */
+    options?: ExtendedEditorConfiguration;
+    /**
+     * Set scroll position.
+     * @since 1.12.4
+     */
+    scrollPosition?: {
+        top: number;
+        left: number;
+    };
+    /**
+     * onScroll event handler.
+     * @since 1.12.4
+     */
+    onScroll?: (scrollInfo: ScrollInfo) => void;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+type CodeEditorState = {
+    lineSeparator: string;
+    content?: string;
+    options: ExtendedEditorConfiguration;
+};
+/**
+ * `CodeEditor` component is used for editing text as code with proper color highlighting according to selected programming language.
+ * @since 0.0.61
+ */
+declare class CodeEditor extends Component<CodeEditorProps, CodeEditorState> {
+    static defaultProps: {
+        mode: string;
+        fileName: string;
+        children: string;
+        readOnly: boolean;
+        autofocus: boolean;
+        onInit: null;
+        onChange: null;
+        onSave: null;
+        options: null;
+        className: null;
+        baseClassName: string;
+        scrollPosition: undefined;
+        onScroll: undefined;
+    };
+    state: CodeEditorState;
+    static getDerivedStateFromProps({ readOnly, autofocus, options }: CodeEditorProps, state: CodeEditorState): {
+        options: {
+            autofocus: boolean | undefined;
+            readOnly: string | boolean | undefined;
+            value?: string | CM.Doc | undefined;
+            mode?: string | CM.ModeSpec<CM.ModeSpecOptions> | undefined;
+            lineSeparator?: string | null | undefined;
+            theme?: string | undefined;
+            indentUnit?: number | undefined;
+            smartIndent?: boolean | undefined;
+            tabSize?: number | undefined;
+            indentWithTabs?: boolean | undefined;
+            electricChars?: boolean | undefined;
+            specialChars?: RegExp | undefined;
+            specialCharPlaceholder?: ((char: string) => HTMLElement) | undefined;
+            direction?: "ltr" | "rtl" | undefined;
+            rtlMoveVisually?: boolean | undefined;
+            keyMap?: string | undefined;
+            extraKeys?: string | CM.KeyMap | undefined;
+            configureMouse?: ((cm: CM.Editor, repeat: "double" | "single" | "triple", event: Event) => CM.MouseSelectionConfiguration) | undefined;
+            lineWrapping?: boolean | undefined;
+            lineNumbers?: boolean | undefined;
+            firstLineNumber?: number | undefined;
+            lineNumberFormatter?: ((line: number) => string) | undefined;
+            gutters?: (string | {
+                className: string;
+                style?: string | undefined;
+            })[] | undefined;
+            fixedGutter?: boolean | undefined;
+            scrollbarStyle?: keyof CM.ScrollbarModels | undefined;
+            coverGutterNextToScrollbar?: boolean | undefined;
+            inputStyle?: CM.InputStyle | undefined;
+            screenReaderLabel?: string | undefined;
+            showCursorWhenSelecting?: boolean | undefined;
+            lineWiseCopyCut?: boolean | undefined;
+            pasteLinesPerSelection?: boolean | undefined;
+            selectionsMayTouch?: boolean | undefined;
+            undoDepth?: number | undefined;
+            historyEventDelay?: number | undefined;
+            tabindex?: number | undefined;
+            phrases?: {
+                [s: string]: unknown;
+            } | undefined;
+            dragDrop?: boolean | undefined;
+            allowDropFileTypes?: string[] | null | undefined;
+            onDragEvent?: ((instance: CM.Editor, event: DragEvent) => boolean) | undefined;
+            onKeyEvent?: ((instance: CM.Editor, event: KeyboardEvent) => boolean) | undefined;
+            cursorBlinkRate?: number | undefined;
+            cursorScrollMargin?: number | undefined;
+            cursorHeight?: number | undefined;
+            resetSelectionOnContextMenu?: boolean | undefined;
+            workTime?: number | undefined;
+            workDelay?: number | undefined;
+            pollInterval?: number | undefined;
+            flattenSpans?: boolean | undefined;
+            addModeClass?: boolean | undefined;
+            maxHighlightLength?: number | undefined;
+            viewportMargin?: number | undefined;
+            spellcheck?: boolean | undefined;
+            autocorrect?: boolean | undefined;
+            autocapitalize?: boolean | undefined;
+            matchBrackets?: boolean | CM.MatchBrackets | undefined;
+            matchTags?: boolean | CM.MatchTags | undefined;
+            search?: {
+                bottom: boolean;
+            } | undefined;
+            autoRefresh?: boolean | {
+                delay: number;
+            } | undefined;
+            enterMode?: string | undefined;
+            tabMode?: string | undefined;
+        };
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: CodeEditorProps): void;
+    componentWillUnmount(): void;
+    private readonly textareaNode;
+    private CodeMirror?;
+    private codeMirror?;
+    handleScroll: () => void;
+    findModeByFileName(fileName: string): string | null;
+    updateMode({ mode, fileName }: Pick<CodeEditorProps, 'mode' | 'fileName'>): void;
+    getLineSeparator(content?: string): string;
+    handleChange: (doc: Editor, changes: EditorChange) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default CodeEditor;

package/types/src/components/CodeEditor/CodeMirror.d.ts

@@ -0,0 +1,9 @@
+import CodeMirror from 'codemirror';
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/edit/matchtags';
+import 'codemirror/mode/meta';
+import 'codemirror/addon/dialog/dialog.js';
+import 'codemirror/addon/search/searchcursor.js';
+import 'codemirror/addon/search/search.js';
+import 'codemirror/addon/display/autorefresh';
+export { CodeMirror };

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

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

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

@@ -0,0 +1,158 @@
+import { ReactNode } from 'react';
+import type { FormContextProps, FormErrors, FormValues } from '../Form/types';
+import './FormField.less';
+export declare const BASE_FORM_FIELD_CLASS_NAME: string;
+export type FormFieldApi = {
+    getValues: () => Readonly<FormValues> | null | undefined;
+    getId: () => string | undefined;
+    getName: () => string | undefined;
+    getValue: <T>(def?: T) => any | T;
+    setValue: (value: any) => void;
+    isDisabled: () => boolean;
+    getFullDescription: () => ReactNode;
+    getRequiredMark: () => ReactNode;
+    getErrors: () => FormErrors | undefined;
+    getSeparator?: () => ReactNode;
+};
+export interface FormFieldProps {
+    /**
+     * Field name.
+     * @since 0.0.54
+     */
+    name?: string;
+    /**
+     * Field ID.
+     * @since 0.0.59
+     */
+    id?: string;
+    /**
+     * Field value.
+     * @deprecated Use [Form](#!/Form) values.
+     * @since 0.0.57
+     */
+    value?: any;
+    /**
+     * A callback function, can be executed when the value is changing.
+     * @since 0.4.1
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Field label.
+     * @since 0.0.54
+     */
+    label?: ReactNode;
+    /**
+     * Field description.
+     * @since 0.0.57
+     */
+    description?: ReactNode;
+    /**
+     * Show long descriptions in popover after clicking on "( i )" icon
+     * @since 3.14.0
+     */
+    fullDescription?: ReactNode;
+    /**
+     * Field errors.
+     *  @deprecated Use [Form](#!/Form) errors.
+     * @since 0.0.57
+     */
+    errors?: FormErrors;
+    /**
+     * Indicates whether field is required.
+     * @since 0.0.54
+     */
+    required?: boolean;
+    /**
+     * Content of the `FormField`.
+     * @since 0.0.54
+     */
+    children?: ((props: FormFieldApi) => ReactNode) | ReactNode;
+    /**
+     * 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 Disabled state of multiple field.
+     */
+    disabled?: boolean;
+    /**
+     * Localization messages
+     * @since 1.12.0
+     */
+    locale?: {
+        addMode: ReactNode;
+        remove: ReactNode;
+    };
+    /**
+     * Callback which called for all values. If it returns 'true' a pseudo-link 'Add more' will be disabled
+     * @ignore
+     * @deprecated
+     */
+    addMoreValidator?: () => void;
+    /**
+     * A callback function, can be executed when the row is removed.
+     * @since 1.12.0
+     */
+    onRemoveRow?: (index: number) => void;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+    /**
+     * @ignore
+     */
+    form?: FormContextProps;
+    /**
+     * Vertical or horizontal field view.
+     * If it is not defined explicitly, the vertical mode will use from Form or Section components.
+     * @since 3.13.0
+     */
+    vertical?: boolean;
+    /**
+     * @ignore
+     */
+    scrollableElement?: HTMLElement | null;
+}
+/**
+ * `FormField` component is used for showing of parameter values in Form or
+ * for entering of user data with any form elements.
+ *
+ * For the most cases the following form elements can be used:
+ * * [FormFieldText](#!/FormFieldText) for entering text,
+ * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
+ * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
+ */
+declare const FormFieldWrapper: {
+    (props: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: {
+        id: undefined;
+        name: undefined;
+        value: undefined;
+        onChange: null;
+        label: undefined;
+        description: undefined;
+        errors: {};
+        required: boolean;
+        children: undefined;
+        multi: undefined;
+        disabled: undefined;
+        locale: undefined;
+        addMoreValidator: undefined;
+        onRemoveRow: null;
+        fullDescription: undefined;
+        className: undefined;
+        baseClassName: string;
+        form: undefined;
+        vertical: undefined;
+        scrollableElement: undefined;
+    };
+};
+export default FormFieldWrapper;

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

@@ -0,0 +1,3 @@
+export { default } from './FormField';
+export { BASE_FORM_FIELD_CLASS_NAME } from './FormField';
+export type { FormFieldProps, FormFieldApi } from './FormField';

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

@@ -1,8 +1,9 @@
 import { FunctionComponent, ComponentProps } from 'react';
+import { FormFieldProps } from '../FormField';
 import Select from '../Select';
 import './FormFieldSelect.less';
-type SelectProps = ComponentProps<typeof Select>;
-export type FormFieldSelectProps = Omit<SelectProps, 'value' | 'defaultValue' | 'onChange'>;
+type SelectProps = Pick<ComponentProps<typeof Select>, 'children' | 'size' | 'multiple' | 'searchable' | 'clearable' | 'placeholder'>;
+export type FormFieldSelectProps = SelectProps & Omit<FormFieldProps, 'children'>;
 /**
  * `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/Icon/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const NAMES_12: IconName[];
-export type IconName = 'archive' | 'arrow-back' | 'arrow-diagonal-out' | 'arrow-down' | 'arrow-down-circle-filled' | 'arrow-down-in' | 'arrow-down-out' | 'arrow-down-tray' | 'arrow-left' | 'arrow-left-circle-filled' | 'arrow-right' | 'arrow-right-circle-filled' | 'arrow-right-in' | 'arrow-right-out' | 'arrow-up' | 'arrow-up-circle' | 'arrow-up-circle-filled' | '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' | 'dot-big' | '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' | 'plus-circle' | 'plus-circle-filled' | 'power' | 'projects' | 'puzzle' | 'python' | '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 type IconName = 'archive' | 'arrow-back' | 'arrow-diagonal-out' | 'arrow-down' | 'arrow-down-circle-filled' | 'arrow-down-in' | 'arrow-down-out' | 'arrow-down-tray' | 'arrow-left' | 'arrow-left-circle-filled' | 'arrow-right' | 'arrow-right-circle-filled' | 'arrow-right-in' | 'arrow-right-out' | 'arrow-up' | 'arrow-up-circle' | 'arrow-up-circle-filled' | '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' | 'dot-big' | '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' | 'label' | 'label-plus' | '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' | 'plus-circle' | 'plus-circle-filled' | 'power' | 'projects' | 'puzzle' | 'python' | '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' | 'wordpress-minus' | 'zero-circle-filled';
 export declare const NAMES: IconName[];

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

@@ -1,5 +1,5 @@
-import { Component, ComponentProps, ReactElement, MouseEvent, ReactNode } from 'react';
-import Grid from '../Grid';
+import { GridProps } from '../Grid';
+import { Component, ReactElement, MouseEvent, ReactNode } from 'react';
 import '../Item/Item.less';
 import './ItemList.less';
 type ItemValue = string | number;
@@ -73,7 +73,7 @@ type ItemListProps = {
      * @ignore
      */
     baseClassName?: string;
-} & Pick<ComponentProps<typeof Grid>, 'gap'>;
+} & Omit<GridProps, 'children'>;
 type ItemListState = {
     ReorderableGrid: null | any;
     ReorderableGridCol: null | any;

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

@@ -1,7 +1,36 @@
 import { FunctionComponent, HTMLProps, ReactNode } from 'react';
 import { Value } from './structures';
 import './Select.less';
-type SelectProps = {
+type SingleProps = {
+    /**
+     * In this mode, it is possible to select several options.
+     * @since 2.3.0
+     */
+    multiple?: false;
+    /**
+     * An initial value.
+     * @since 2.3.0
+     */
+    defaultValue?: Value;
+    /**
+     * An initial value. It switches component into a controlled mode.
+     * @since 2.3.0
+     */
+    value?: Value;
+    /**
+     * A callback executed when a value is changed.
+     * @since 2.3.0
+     */
+    onChange?: (value: Value | undefined) => void;
+};
+type MultipleProps = {
+    multiple: true;
+    defaultValue?: Value[];
+    value?: Value[];
+    onChange?: (value: Value[] | undefined) => void;
+};
+type MultipleBaseProps = MultipleProps | SingleProps;
+type SelectProps = MultipleBaseProps & {
     /**
      * ID of the input.
      */
@@ -39,31 +68,11 @@ type SelectProps = {
      * @since 2.3.0
      */
     clearable?: boolean;
-    /**
-     * In this mode, it is possible to select several options.
-     * @since 2.3.0
-     */
-    multiple?: boolean;
     /**
      * A placeholder for the input.
      * @since 2.3.0
      */
     placeholder?: ReactNode;
-    /**
-     * An initial value.
-     * @since 2.3.0
-     */
-    defaultValue?: Value | Value[];
-    /**
-     * An initial value. It switches component into a controlled mode.
-     * @since 2.3.0
-     */
-    value?: Value | Value[];
-    /**
-     * A callback executed when a value is changed.
-     * @since 2.3.0
-     */
-    onChange?: (value: Value | Value[] | undefined) => void;
 } & Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'size'>;
 /**
  * `Select` component is used for making a choice among a set of related options.

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

@@ -15,6 +15,7 @@ export type { CarouselProps } from './Carousel';
 export { default as Checkbox } from './Checkbox';
 export { default as Radio } from './Radio';
 export { default as CodeEditor } from './CodeEditor';
+export type { CodeEditorProps } from './CodeEditor';
 export { default as Columns, Column } from './Columns';
 export type { ColumnsProps, ColumnProps } from './Columns';
 export { default as ComboBox } from './ComboBox';
@@ -38,6 +39,7 @@ export { default as Form } from './Form';
 export type { FormProps, FormValues, FormInstanceHandles } from './Form';
 export * from './Form';
 export { default as FormField } from './FormField';
+export type { FormFieldProps, FormFieldApi } from './FormField';
 export { default as FormFieldCheckbox } from './FormFieldCheckbox';
 export type { FormFieldCheckboxProps } from './FormFieldCheckbox';
 export { default as FormFieldPassword } from './FormFieldPassword';