@steroidsjs/core 3.0.0-beta.99 → 3.0.0

package/ui/form/TimeRangeField/TimeRangeField.d.ts

@@ -40,9 +40,18 @@ export interface ITimeRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
     placeholder?: any;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
      */
     pickerProps?: any;
+    /**
+     * Устанавливать ли фокус и показывать панель времени сразу после рендера страницы
+     * @example true
+     */
+    hasInitialFocus?: boolean;
     [key: string]: any;
 }
 export interface ITimeRangeFieldViewProps extends IDateInputStateOutput, Pick<ITimeRangeFieldProps, 'size' | 'errors' | 'showRemove' | 'className' | 'timePanelViewProps' | 'disabled' | 'style' | 'icon'>, Omit<IFieldWrapperOutputProps, 'input'> {

package/ui/form/TimeRangeField/TimeRangeField.js

@@ -62,7 +62,8 @@ function TimeRangeField(props) {
         inputPropsTo: inputPropsTo,
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
-        useSmartFocus: true
+        useSmartFocus: false,
+        hasInitialFocus: props.hasInitialFocus
     }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
     var timePanelFromViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowFrom, onClose: onCloseFrom, value: inputPropsFrom.value, onSelect: inputPropsFrom.onChange }, props.timePanelViewProps)); }, [inputPropsFrom.onChange, inputPropsFrom.value, onCloseFrom, onNowFrom, props.timePanelViewProps]);
     var timePanelToViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowTo, onClose: onCloseTo, value: inputPropsTo.value, onSelect: inputPropsTo.onChange }, props.timePanelViewProps)); }, [inputPropsTo.onChange, inputPropsTo.value, onCloseTo, onNowTo, props.timePanelViewProps]);
@@ -73,6 +74,7 @@ TimeRangeField.defaultProps = {
     displayFormat: 'HH:mm',
     required: false,
     showRemove: true,
+    hasInitialFocus: false,
     type: 'text',
     valueFormat: 'HH:mm',
     useUTC: true,

package/ui/form/WizardForm/WizardForm.d.ts

@@ -0,0 +1,119 @@
+import React from 'react';
+import { IFieldProps } from '@steroidsjs/core/ui/form/Field/Field';
+import { IStepsProps, IStepItem } from '../../list/Steps/Steps';
+import { IButtonProps } from '../Button/Button';
+import { IFormProps } from '../Form/Form';
+export interface IWizardStepItem extends Partial<IStepItem> {
+    fields?: IFieldProps[];
+    component?: React.ReactNode;
+    stepLabel?: string;
+}
+/**
+ * WizardForm
+ *
+ * Компонент для создания пошаговой формы. Предоставляет управление и синхронизацию состояния формы,
+ * а также список шагов формы для удобной навигации.
+ * Поля для шагов можно передавать как в виде компонентов, так и в виде объекта с названием поля.
+ * Позволяет выполнять отправку данных формы на сервер с возможностью валидации и перехода к неверно заполненным полям.
+ *
+ */
+export interface IWizardFormProps extends IUiComponent {
+    /**
+     * Идентификатор формы
+     * @example WizardForm
+     */
+    formId: string;
+    /**
+     * Коллекция полей и аттрибутов для каждого шага формы. Можно передавать как компонент, так и объект с полями.
+     * Главное, чтобы внутри шага использовался один из способов.
+     * @example
+     * [
+     *  {
+     *   title: 'Step 1',
+     *   fields: [
+     *     {
+     *       attribute: 'category',
+     *       component: 'DropDownField'
+     *     },
+     *   ],
+     *  },
+     *  {
+     *   title: 'Step 2',
+     *   component: (
+     *      <InputField
+     *        attribute='address'
+     *      />
+     *   )
+     *  }
+     * ]
+     */
+    steps: IWizardStepItem[];
+    /**
+     * Свойства для Form
+     */
+    formProps: Omit<IFormProps, 'formId' | 'fields' | 'useRedux'> & {
+        submitButtonLabel: string;
+    };
+    /**
+     * Обработчик, который вызывается после перехода на следующий шаг формы
+     * @param {number} value
+     * @return {void}
+     */
+    onNextStep?: (nextStep: number) => void;
+    /**
+     * Обработчик, который вызывается после возврата на предыдущий шаг формы
+     * @param {number} value
+     * @return {void}
+     */
+    onPrevStep?: (prevStep: number) => void;
+    /**
+     * Свойства для кнопки возврата
+     */
+    prevStepButtonProps?: IButtonProps;
+    /**
+     * Свойства для кнопки продолжить/отправить
+     */
+    nextStepButtonProps?: IButtonProps;
+    /**
+     * Свойства для Steps
+     */
+    stepsProps?: Pick<IStepsProps, 'stepItems'>;
+    /**
+     * Ориентация списка шагов формы
+     * @example 'horizontal'
+     */
+    stepTitleOrientation?: Orientation;
+    /**
+     * Показывать ли шаги
+     * @example true
+     */
+    showSteps?: boolean;
+}
+export interface IWizardFormViewProps extends Pick<IWizardFormProps, 'prevStepButtonProps' | 'nextStepButtonProps' | 'stepsProps' | 'showSteps'> {
+    currentStep: number;
+    stepTitle: string;
+    stepItems: IStepItem[];
+    renderStep: (header: React.ReactNode, buttons: React.ReactNode, viewProps?: IUiComponent) => JSX.Element;
+    isLastStep?: boolean;
+    onPrevStep?: () => void;
+    totalSteps?: number;
+}
+declare function WizardForm(props: IWizardFormProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare namespace WizardForm {
+    var defaultProps: {
+        formProps: {
+            label: string;
+        };
+        prevStepButtonProps: {
+            color: string;
+            icon: string;
+            outline: boolean;
+            label: string;
+        };
+        nextStepButtonProps: {
+            label: string;
+        };
+        showSteps: boolean;
+    };
+}
+export default WizardForm;

package/ui/form/WizardForm/WizardForm.js

@@ -0,0 +1,167 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var has_1 = __importDefault(require("lodash-es/has"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var indexOf_1 = __importDefault(require("lodash-es/indexOf"));
+var Steps_1 = require("../../list/Steps/Steps");
+var hooks_1 = require("../../../hooks");
+var Form_1 = __importDefault(require("../Form/Form"));
+var utils_1 = require("./utils");
+var INITIAL_STEP = 0;
+function WizardForm(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, react_1.useState)(INITIAL_STEP), currentStep = _a[0], setCurrentStep = _a[1];
+    var _b = (0, react_1.useState)([]), errorSteps = _b[0], setErrorSteps = _b[1];
+    var _c = (0, react_1.useState)((0, utils_1.normalizeSteps)(props.steps)), steps = _c[0], setSteps = _c[1];
+    var totalSteps = (0, react_1.useMemo)(function () { return props.steps.length || 0; }, [props.steps.length]);
+    var isLastStep = (0, react_1.useMemo)(function () { return currentStep === totalSteps - 1; }, [currentStep, totalSteps]);
+    var activeStep = (0, react_1.useMemo)(function () { return props.steps[currentStep]; }, [currentStep, props.steps]);
+    var fieldStepMap = (0, react_1.useMemo)(function () { return (0, utils_1.generateFieldStepMap)(props.steps || []); }, [props.steps]);
+    (0, react_1.useEffect)(function () {
+        if (!(0, isEmpty_1["default"])(errorSteps)) {
+            setCurrentStep(errorSteps[0]);
+        }
+    }, [errorSteps]);
+    var onNextStep = (0, react_1.useCallback)(function () {
+        var nextStep = Math.min(currentStep + 1, totalSteps - 1);
+        if (props.onNextStep) {
+            props.onNextStep(nextStep);
+        }
+        setSteps(function (prevStepsState) { return (0, utils_1.getModifiedSteps)(prevStepsState, errorSteps, currentStep, nextStep); });
+        setCurrentStep(nextStep);
+    }, [currentStep, totalSteps, props, errorSteps]);
+    var onPrevStep = (0, react_1.useCallback)(function () {
+        var prevStep = Math.max(currentStep - 1, INITIAL_STEP);
+        if (props.onPrevStep) {
+            props.onPrevStep(prevStep);
+        }
+        setSteps(function (prevStepsState) { return (0, utils_1.getModifiedSteps)(prevStepsState, errorSteps, currentStep, prevStep); });
+        setCurrentStep(prevStep);
+    }, [currentStep, props, errorSteps]);
+    var onSubmit = (0, react_1.useCallback)(function (data) {
+        if (isLastStep) {
+            return props.formProps.onSubmit ? props.formProps.onSubmit(data) : null;
+        }
+        return onNextStep();
+    }, [isLastStep, onNextStep, props.formProps]);
+    var onAfterSubmit = (0, react_1.useCallback)(function (cleanedValues, data, response) {
+        if (props.formProps.onAfterSubmit && !!props.formProps.onAfterSubmit(cleanedValues, data, response)) {
+            return false;
+        }
+        if (data.errors) {
+            var stepsIdsWithErrorFields_1 = Object.keys(data.errors)
+                .reduce(function (acc, errorField) {
+                if ((0, has_1["default"])(fieldStepMap, errorField)) {
+                    acc.push(fieldStepMap[errorField]);
+                }
+                return acc;
+            }, [])
+                .sort();
+            if (!(0, isEmpty_1["default"])(stepsIdsWithErrorFields_1)) {
+                var firstStepErrorField_1 = stepsIdsWithErrorFields_1[0];
+                setSteps(function (prevStepsState) { return __spreadArray([], prevStepsState, true).map(function (step) {
+                    if ((0, indexOf_1["default"])(stepsIdsWithErrorFields_1, step.id) !== -1) {
+                        step.status = step.id === firstStepErrorField_1 ? Steps_1.ACTIVE_STATUS : Steps_1.ERROR_STATUS;
+                    }
+                    else {
+                        step.status = Steps_1.FINISH_STATUS;
+                    }
+                    return step;
+                }); });
+                setErrorSteps(stepsIdsWithErrorFields_1);
+            }
+        }
+        return true;
+    }, [fieldStepMap, props.formProps]);
+    var commonFormProps = (0, react_1.useMemo)(function () {
+        var _a;
+        return ({
+            formId: props.formId,
+            onSubmit: (!isLastStep || props.formProps.onSubmit) && onSubmit,
+            onAfterSubmit: onAfterSubmit,
+            fields: (_a = activeStep === null || activeStep === void 0 ? void 0 : activeStep.fields) !== null && _a !== void 0 ? _a : null,
+            useRedux: true
+        });
+    }, [activeStep === null || activeStep === void 0 ? void 0 : activeStep.fields, isLastStep, onAfterSubmit, onSubmit, props.formProps.onSubmit, props.formId]);
+    var renderStep = (0, react_1.useCallback)(function (header, buttons, viewProps) { return (react_1["default"].createElement(Form_1["default"], __assign({}, props.formProps, viewProps, commonFormProps, { buttons: buttons }),
+        header,
+        (activeStep === null || activeStep === void 0 ? void 0 : activeStep.component) && props.steps[currentStep].component)); }, [activeStep === null || activeStep === void 0 ? void 0 : activeStep.component, commonFormProps, currentStep, props.formProps, props.steps]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        renderStep: renderStep,
+        currentStep: currentStep,
+        isLastStep: isLastStep,
+        totalSteps: totalSteps,
+        onPrevStep: onPrevStep,
+        prevStepButtonProps: props.prevStepButtonProps,
+        nextStepButtonProps: __assign(__assign({}, props.nextStepButtonProps), { label: isLastStep ? props.formProps.submitButtonLabel : props.nextStepButtonProps.label }),
+        showSteps: props.showSteps,
+        stepsProps: __assign(__assign({}, props.stepsProps), { stepTitleOrientation: props.stepTitleOrientation }),
+        stepItems: steps,
+        stepTitle: activeStep.title
+    }); }, [renderStep, currentStep, isLastStep, totalSteps, onPrevStep, props.prevStepButtonProps, props.nextStepButtonProps,
+        props.formProps.submitButtonLabel, props.showSteps, props.stepsProps, props.stepTitleOrientation, steps, activeStep.title]);
+    return components.ui.renderView(props.view || 'form.WizardFormView', viewProps);
+}
+exports["default"] = WizardForm;
+WizardForm.defaultProps = {
+    formProps: {
+        label: __('Отправить')
+    },
+    prevStepButtonProps: {
+        color: 'primary',
+        icon: 'left_12x12',
+        outline: true,
+        label: __('Назад')
+    },
+    nextStepButtonProps: {
+        label: __('Далее')
+    },
+    showSteps: true
+};

package/ui/form/WizardForm/index.d.ts

@@ -0,0 +1,2 @@
+import WizardForm from './WizardForm';
+export default WizardForm;

package/ui/form/WizardForm/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var WizardForm_1 = __importDefault(require("./WizardForm"));
+exports["default"] = WizardForm_1["default"];

package/ui/form/WizardForm/utils.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IWizardStepItem } from '@steroidsjs/core/ui/form/WizardForm/WizardForm';
+export declare const generateFieldStepMap: (arr?: any[]) => any;
+export declare const normalizeSteps: (steps: IWizardStepItem[]) => {
+    id: number;
+    title: string;
+    description: string;
+    subtitle: string;
+    icon: string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment;
+    status: string;
+}[];
+export declare const getModifiedSteps: (prevStepsState: any, errorSteps: any, currentStep: number, nextStep: number) => any[];

package/ui/form/WizardForm/utils.js

@@ -0,0 +1,111 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.getModifiedSteps = exports.normalizeSteps = exports.generateFieldStepMap = void 0;
+var has_1 = __importDefault(require("lodash-es/has"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var assign_1 = __importDefault(require("lodash-es/assign"));
+var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var indexOf_1 = __importDefault(require("lodash-es/indexOf"));
+var Steps_1 = require("../../list/Steps/Steps");
+var getComponentAttributes = function (component, index) {
+    var componentAttributesStepMap = {};
+    if (Array.isArray(component)) {
+        component.forEach(function (field) {
+            (0, assign_1["default"])(componentAttributesStepMap, getComponentAttributes(field, index));
+        });
+    }
+    else {
+        var attribute = (0, get_1["default"])(component, ['props', 'attribute']) || (0, get_1["default"])(component, ['attribute']) || null;
+        if (attribute) {
+            componentAttributesStepMap[attribute] = index;
+        }
+        else {
+            var children = (0, get_1["default"])(component, ['props', 'children']) || null;
+            if ((0, isArray_1["default"])(children)) {
+                children.forEach(function (field) { return (0, assign_1["default"])(componentAttributesStepMap, getComponentAttributes(field, index)); });
+            }
+            else if (children) {
+                (0, assign_1["default"])(componentAttributesStepMap, getComponentAttributes(children, index));
+            }
+        }
+    }
+    return componentAttributesStepMap;
+};
+var getFieldsAttributes = function (fields, index) {
+    var fieldAttributesStepMap = {};
+    if ((0, isArray_1["default"])(fields)) {
+        fields.forEach(function (field) { return (0, assign_1["default"])(fieldAttributesStepMap, getFieldsAttributes(field, index)); });
+    }
+    else {
+        var attribute = (0, get_1["default"])(fields, ['attribute']) || null;
+        if (attribute) {
+            fieldAttributesStepMap[attribute] = index;
+        }
+        if ((0, has_1["default"])(fields, ['attributeFrom']) && (0, has_1["default"])(fields, ['attributeTo'])) {
+            fieldAttributesStepMap[(0, get_1["default"])(fields, 'attributeFrom')] = index;
+            fieldAttributesStepMap[(0, get_1["default"])(fields, 'attributeFrom')] = index;
+        }
+        if ((0, has_1["default"])(fields, ['items'])) {
+            var children = (0, get_1["default"])(fields, ['items']) || null;
+            if (children) {
+                (0, assign_1["default"])(fieldAttributesStepMap, getFieldsAttributes(children, index));
+            }
+        }
+    }
+    return fieldAttributesStepMap;
+};
+var generateFieldStepMap = function (arr) {
+    if (arr === void 0) { arr = []; }
+    return arr.reduce(function (fieldStepMap, step, index) {
+        if ((0, has_1["default"])(step, 'fields')) {
+            return __assign(__assign({}, fieldStepMap), getFieldsAttributes(step.fields, index));
+        }
+        if ((0, has_1["default"])(step, 'component')) {
+            return __assign(__assign({}, fieldStepMap), getComponentAttributes(step.component, index));
+        }
+        return fieldStepMap;
+    }, {});
+};
+exports.generateFieldStepMap = generateFieldStepMap;
+var normalizeSteps = function (steps) { return steps.map(function (step, index) { return ({
+    id: index,
+    title: step.stepLabel || null,
+    description: step.description || null,
+    subtitle: step.subtitle || null,
+    icon: step.icon || null,
+    status: index === 0 ? Steps_1.ACTIVE_STATUS : Steps_1.WAIT_STATUS
+}); }); };
+exports.normalizeSteps = normalizeSteps;
+var getModifiedSteps = function (prevStepsState, errorSteps, currentStep, nextStep) {
+    var newStepsState = __spreadArray([], prevStepsState, true);
+    newStepsState[currentStep].status = (0, isEmpty_1["default"])(errorSteps)
+        ? Steps_1.WAIT_STATUS
+        : ((0, indexOf_1["default"])(errorSteps, currentStep) !== -1 ? Steps_1.ERROR_STATUS : Steps_1.FINISH_STATUS);
+    newStepsState[nextStep].status = Steps_1.ACTIVE_STATUS;
+    return newStepsState;
+};
+exports.getModifiedSteps = getModifiedSteps;

package/ui/form/index.d.ts

@@ -4,6 +4,7 @@ import BlankField from './BlankField';
 import Button from './Button';
 import CheckboxField from './CheckboxField';
 import CheckboxListField from './CheckboxListField';
+import CheckboxTreeField from './CheckboxTreeField';
 import DateField from './DateField';
 import DateRangeField from './DateRangeField';
 import DateTimeField from './DateTimeField';
@@ -30,13 +31,14 @@ import TimeField from './TimeField';
 import RateField from './RateField';
 import MaskField from './MaskField';
 import EmailField from './EmailField';
-export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, InputField, NavField, NumberField, PasswordField, RadioField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, RateField, MaskField, EmailField, };
+export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, CheckboxTreeField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, InputField, NavField, NumberField, PasswordField, RadioField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, RateField, MaskField, EmailField, };
 declare const _default: {
     AutoCompleteField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./AutoCompleteField/AutoCompleteField").IAutoCompleteFieldProps>;
     BlankField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./BlankField/BlankField").IBlankFieldProps>;
     Button: typeof Button;
     CheckboxField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./CheckboxField/CheckboxField").ICheckboxFieldProps>;
     CheckboxListField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./CheckboxListField/CheckboxListField").ICheckboxListFieldProps>;
+    CheckboxTreeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./CheckboxTreeField/CheckboxTreeField").ICheckboxTreeFieldProps>;
     DateField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateField/DateField").IDateFieldProps>;
     DateRangeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateRangeField/DateRangeField").IDateRangeFieldProps>;
     DateTimeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateTimeField/DateTimeField").IDateTimeFieldProps>;

package/ui/form/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.EmailField = exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SwitcherField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.HtmlField = exports.Form = exports.FileField = exports.FieldSet = exports.FieldList = exports.FieldLayout = exports.Field = exports.DropDownField = exports.DateTimeRangeField = exports.DateTimeField = exports.DateRangeField = exports.DateField = exports.CheckboxListField = exports.CheckboxField = exports.Button = exports.BlankField = exports.AutoCompleteField = void 0;
+exports.EmailField = exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SwitcherField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.HtmlField = exports.Form = exports.FileField = exports.FieldSet = exports.FieldList = exports.FieldLayout = exports.Field = exports.DropDownField = exports.DateTimeRangeField = exports.DateTimeField = exports.DateRangeField = exports.DateField = exports.CheckboxTreeField = exports.CheckboxListField = exports.CheckboxField = exports.Button = exports.BlankField = exports.AutoCompleteField = void 0;
 var AutoCompleteField_1 = __importDefault(require("./AutoCompleteField"));
 exports.AutoCompleteField = AutoCompleteField_1["default"];
 var BlankField_1 = __importDefault(require("./BlankField"));
@@ -14,6 +14,8 @@ var CheckboxField_1 = __importDefault(require("./CheckboxField"));
 exports.CheckboxField = CheckboxField_1["default"];
 var CheckboxListField_1 = __importDefault(require("./CheckboxListField"));
 exports.CheckboxListField = CheckboxListField_1["default"];
+var CheckboxTreeField_1 = __importDefault(require("./CheckboxTreeField"));
+exports.CheckboxTreeField = CheckboxTreeField_1["default"];
 var DateField_1 = __importDefault(require("./DateField"));
 exports.DateField = DateField_1["default"];
 var DateRangeField_1 = __importDefault(require("./DateRangeField"));
@@ -72,6 +74,7 @@ exports["default"] = {
     Button: Button_1["default"],
     CheckboxField: CheckboxField_1["default"],
     CheckboxListField: CheckboxListField_1["default"],
+    CheckboxTreeField: CheckboxTreeField_1["default"],
     DateField: DateField_1["default"],
     DateRangeField: DateRangeField_1["default"],
     DateTimeField: DateTimeField_1["default"],

package/ui/layout/ProgressBar/ProgressBar.js

@@ -47,9 +47,15 @@ function ProgressBar(props) {
         return props.label(props.percent);
     });
     if (props.type === 'line') {
-        return components.ui.renderView('layout.LineProgressBarView', { percent: props.percent, status: props.status, size: props.size, label: getLabel() });
+        return components.ui.renderView('layout.LineProgressBarView', { percent: props.percent,
+            status: props.status,
+            size: props.size,
+            label: getLabel() });
     }
-    return components.ui.renderView('layout.CircleProgressBarView', { percent: props.percent, status: props.status, size: props.size, label: getLabel() });
+    return components.ui.renderView('layout.CircleProgressBarView', { percent: props.percent,
+        status: props.status,
+        size: props.size,
+        label: getLabel() });
 }
 ProgressBar.defaultProps = {
     status: 'normal',

package/ui/layout/Skeleton/Skeleton.d.ts

@@ -8,7 +8,9 @@ export interface ISkeletonViewProps {
     width?: string | number;
 }
 /**
- * Компонент Skeleton представляет собой заглушку для отображения временных данных
+ * Skeleton
+ *
+ * Компонент `Skeleton` представляет собой заглушку для отображения временных данных
  * во время загрузки или ожидания загрузки реальных данных.
  **/
 export interface ISkeletonProps {

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -72,7 +72,10 @@ export interface ITooltipProps {
     style?: ITooltipStylePosition;
     /**
      * Стили для позиционирования стрелки
-     * @example {left: 10}
+     * @example
+     * {
+     *  left: 10
+     * }
      */
     arrowPosition?: ITooltipArrowPosition;
     /**

package/ui/list/ControlsColumn/ControlsColumn.d.ts

@@ -8,7 +8,7 @@ export interface IControlsColumnItem extends IButtonProps {
 /**
  * ControlsColumn
  *
- * Компонент ControlsColumn предоставляет колонку с контролами.
+ * Компонент `ControlsColumn` предоставляет колонку с контролами.
  **/
 export interface IControlsColumnProps {
     /**
@@ -17,13 +17,27 @@ export interface IControlsColumnProps {
     primaryKey?: string;
     /**
      * Коллекция с контролами
-     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete'
+     *  },
+     *  {
+     *   id: 'view',
+     *   position: 'left'
+     *  }
+     * ]
      */
     controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
     /**
      * Элемент, для которого будет отображаться список с контролами, в нём можно задать видимость контрола
      * с помощью свойства 'can' + _upperFirst(control.id)
-     * @example {name: 'Ivan', work: 'development', canView: false}
+     * @example
+     * {
+     *  name: 'Ivan',
+     *  work: 'development',
+     *  canView: false
+     * }
      */
     item?: any;
     /**

package/ui/list/FlexGrid/FlexGrid.d.ts

@@ -36,7 +36,17 @@ export interface IFlexGridItem {
 export interface IFlexGridProps extends IUiComponent {
     /**
      * Элементы FlexGrid
-     * @example [{content: 'Block1', col: 4}, {content: 'Block2', col: 6}]
+     * @example
+     * [
+     *  {
+     *   content: 'Block1',
+     *   col: 4
+     *  },
+     *  {
+     *   content: 'Block2',
+     *   col: 6
+     *  }
+     * ]
      */
     items?: IFlexGridItem[];
     /**