@plesk/ui-library 3.35.8 → 3.35.9

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.35.9</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.6dff330b.js"></script>
   </body>
 </html>

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

@@ -2,7 +2,7 @@ import { FunctionComponent, ComponentProps } from 'react';
 import Select from '../Select';
 import './FormFieldSelect.less';
 type SelectProps = ComponentProps<typeof Select>;
-export type FormFieldSelectProps = Omit<SelectProps, 'value' | 'defaultValue' | 'onChange'>;
+export type FormFieldSelectProps = Omit<SelectProps, 'value' | 'defaultValue' | 'onChange' | 'form'>;
 /**
  * `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/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/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';