@steroidsjs/core 3.0.0-beta.104 → 3.0.0-beta.106

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -85,6 +85,7 @@ function DateTimeRangeField(props) {
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
         useSmartFocus: false,
+        hasInitialFocus: props.hasInitialFocus,
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
     }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
@@ -110,6 +111,7 @@ DateTimeRangeField.defaultProps = {
     displayFormat: 'DD.MM.YYYY' + DATE_TIME_SEPARATOR + 'HH:mm',
     valueFormat: 'YYYY-MM-DD' + DATE_TIME_SEPARATOR + 'HH:mm',
     showRemove: true,
+    hasInitialFocus: false,
     useUTC: false,
     dateInUTC: false,
     icon: true,

package/ui/form/DropDownField/DropDownField.d.ts

@@ -86,7 +86,11 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     groupAttribute?: string;
     /**
      * Свойство, которое устанавливает один type и src контента для всех пунктов
-     * @example {type: 'icon', src: 'user'}
+     * @example
+     * {
+     *  type: 'icon',
+     *  src: 'user'
+     * }
      */
     itemsContent?: {
         type: ContentType | string;
@@ -94,7 +98,15 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     };
     /**
      * Элементы вложенные внутрь DropDownField
-     * @example [{id: 1, label: 'Ivan Ivanov', type: 'icon', typeSrc: 'user'}]
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'Ivan Ivanov',
+     *   type: 'icon',
+     *   typeSrc: 'user'
+     *  }
+     * ]
      */
     items?: IDropDownFieldItem[] | DataProviderItems;
     /**
@@ -104,7 +116,11 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     showEllipses?: boolean;
     /**
     * Добавляет кнопку при нажатии на которую выбираются все элементы, работает только при multiple: true
-    * @example {label: 'All', id: 'all'}
+    * @example
+     * {
+     *  label: 'All',
+     *  id: 'all'
+     * }
     */
     itemToSelectAll?: boolean | {
         label: string;

package/ui/form/Field/Field.d.ts

@@ -16,7 +16,15 @@ export interface IFieldProps extends IFieldWrapperInputProps {
     attribute?: any;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: Model;
     /**

package/ui/form/Field/Field.js

@@ -50,7 +50,7 @@ function Field(props) {
     var fieldModel = (0, react_1.useMemo)(function () {
         var _a;
         var model = props.model || context.model;
-        var modelAttributes = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || []);
+        var modelAttributes = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || (model === null || model === void 0 ? void 0 : model.attributes) || []);
         var result = modelAttributes
             .find(function (field) { return field.attribute === props.attribute; });
         return result || {};

package/ui/form/Field/fieldWrapper.d.ts

@@ -16,7 +16,15 @@ export interface IFieldWrapperInputProps {
     attribute?: string;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: string | ((...args: any[]) => any) | any;
     /**

package/ui/form/FieldList/FieldList.d.ts

@@ -34,7 +34,11 @@ export interface IFieldListItem extends IFieldWrapperInputProps, IUiComponent {
 export interface IFieldListProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Начальные значения в полях
-     * @example {name: 'Ivan', amount: 5}
+     * @example
+     * {
+     *  name: 'Ivan',
+     *  amount: 5
+     * }
      */
     initialValues?: {
         [key: string]: any;

package/ui/form/Form/Form.d.ts

@@ -19,7 +19,15 @@ export interface IFormProps extends IUiComponent {
     prefix?: string;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: string | ((...args: any[]) => any) | any;
     /**
@@ -45,7 +53,11 @@ export interface IFormProps extends IUiComponent {
     /**
      * Набор с правилами для проверки соответствия значений полей формы определенному формату.
      * Проверка запускается в момент отправки формы (в обработчике onSubmit).
-     * @example [['name', 'required'], ['age', 'integer']]
+     * @example
+     * [
+     *  ['name', 'required'],
+     *  ['age', 'integer']
+     * ]
      */
     validators?: any[];
     /**
@@ -97,7 +109,13 @@ export interface IFormProps extends IUiComponent {
     viewProps?: any;
     /**
      * Поля, которые необходимо поместить в форму
-     * @example [{attribute: 'category', component: 'DropDownField'}]
+     * @example
+     * [
+     *  {
+     *   attribute: 'category',
+     *   component: 'DropDownField'
+     *  }
+     * ]
      */
     fields?: (string | IFieldProps)[];
     /**

package/ui/form/ImageField/ImageField.d.ts

@@ -6,7 +6,15 @@ import { IButtonProps } from '../Button/Button';
 export interface ICropConfig {
     /**
      * Изначальные параметры обрезки изображения
-     * @example {unit: 'px', aspect: 1, x: 0, y: 0, width: 200, height: 200}
+     * @example
+     * {
+     *  unit: 'px',
+     *  aspect: 1,
+     *  x: 0,
+     *  y: 0,
+     *  width: 200,
+     *  height: 200
+     * }
      */
     initialValues?: Crop;
     /**

package/ui/form/InputField/InputField.d.ts

@@ -15,7 +15,7 @@ export type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'date
 export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Свойства для элемента input
-     * @example {onKeyDown: ...}
+     * @example { onKeyDown: ... }
      */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     /**
@@ -25,7 +25,10 @@ export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     showClear?: boolean;
     /**
      * Свойства для компонента отображения
-     * @example {customHandler: () => {...}}
+     * @example
+     * {
+     *  customHandler: () => {...}
+     * }
      */
     viewProps?: {
         [key: string]: any;

package/ui/form/InputField/InputField.js

@@ -97,11 +97,18 @@ function InputField(props) {
         }
     }, [inputRef, maskedInputRef]);
     (0, useInputFieldWarningByType_1.useInputFieldWarningByType)(props.type);
-    var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
+    var onChangeHandle = (0, react_1.useCallback)(function (e, value) {
+        var _a;
+        var currentValue = value !== null && value !== void 0 ? value : (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
+        if (props.onChange) {
+            props.onChange(e, currentValue);
+        }
+    }, [props]);
+    var onClear = React.useCallback(function () { return onChangeHandle(null, ''); }, [onChangeHandle]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ type: props.type, name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onInput: onChange, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.type]);
+        return (__assign({ type: props.type, name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onInput: onChangeHandle, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
+    }, [onChangeHandle, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.type]);
     // No render for hidden input
     if (props.type === 'hidden') {
         return null;

package/ui/form/SliderField/SliderField.d.ts

@@ -43,7 +43,12 @@ export interface ISliderFieldProps extends IFieldWrapperInputProps, IUiComponent
      * Метки на ползунке. В объекте '{'key: value'}' key определяет положение, а value определяет, что будет отображаться.
      * Если вы хотите задать стиль определенной точки метки, значением должен быть объект,
      * содержащий свойства style и label.
-     * @example { min: 20, 40: 40, max: 100 }
+     * @example
+     * {
+     *  min: 20,
+     *  40: 40,
+     *  max: 100
+     * }
      */
     marks?: Record<string, {
         style: {
@@ -54,7 +59,10 @@ export interface ISliderFieldProps extends IFieldWrapperInputProps, IUiComponent
     /**
      * Функция, вызываемая после отпускания tip'а у слайдера (при событии onmouseup)
      * @see https://github.com/schrodinger/rc-slider
-     * @example {() => console.log('Slider handler is released')}
+     * @example
+     * {
+     *  () => console.log('Slider handler is released')
+     * }
      */
     onAfterChange?: (value: any) => void;
     [key: string]: any;

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/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

@@ -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[];
     /**

package/ui/list/Grid/Grid.d.ts

@@ -18,7 +18,11 @@ export interface IGridColumn {
     attribute?: string;
     /**
      * Свойства для компонента форматирования
-     * @example {component: DateFormatter, format: 'DD MMMM'}
+     * @example
+     * {
+     *  component: DateFormatter,
+     *  format: 'DD MMMM'
+     * }
      */
     formatter?: Record<string, any>;
     /**
@@ -74,7 +78,12 @@ export interface IGridColumn {
     subtitleAttribute?: string;
     /**
      * Параметры для ссылки в колонке
-    * @example {attribute: 'name', linkProps: {target: 'blank'}, url: 'https://kozhindev.com'}
+    * @example
+     * {
+     *  attribute: 'name',
+     *  linkProps: {target: 'blank'},
+     *  url: 'https://kozhindev.com'
+     * }
     */
     link?: {
         attribute: string;
@@ -83,7 +92,11 @@ export interface IGridColumn {
     };
     /**
     * Параметры для иконки в колонке
-    * @example {attribute: 'icon', isLeft: true}
+    * @example
+     * {
+     *  attribute: 'icon',
+     *  isLeft: true
+     * }
     */
     icon?: {
         attribute: string;
@@ -91,7 +104,11 @@ export interface IGridColumn {
     };
     /**
     *  Параметры для картинки в колонке
-    * @example {attribute: 'icon', isLeft: true}
+    * @example
+     * {
+     *  attribute: 'icon',
+     *  isLeft: true
+     * }
     */
     picture?: {
         attribute: string;
@@ -122,13 +139,32 @@ export interface IGridProps extends IListConfig {
     view?: CustomView;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
-     * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]
+     * @example
+     * [
+     *  {
+     *   label: 'Name',
+     *   attribute: 'name'
+     *  },
+     *  {
+     *   label: 'Work',
+     *   attribute: 'work'
+     *  }
+     * ]
      */
     columns: (string | IGridColumn)[];
     /**
      * Коллекция с элементами управления. Данная коллекция отобразится в колонке рядом с каждой записью в таблице.
      * Например, кнопки для удаления и детального просмотра записи.
-     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete'
+     *  },
+     *  {
+     *   id: 'view',
+     *   position: 'left'
+     *  }
+     * ]
      */
     controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
     /**

package/ui/list/LayoutNames/LayoutNames.d.ts

@@ -34,7 +34,17 @@ export interface ILayoutNamesProps {
     position?: ListControlPosition;
     /**
      * Коллекция с шаблонами
-     * @example [{id: 'list', label: 'List'}, {id: 'grid', label: 'Grid'}]
+     * @example
+     * [
+     *  {
+     *   id: 'list',
+     *   label: 'List'
+     *  },
+     *  {
+     *   id: 'grid',
+     *   label: 'Grid'
+     *  }
+     * ]
      */
     items?: INavItem[];
     /**

package/ui/list/TreeTable/TreeTable.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { IColumnViewProps, IGridColumn, IGridProps } from '../Grid/Grid';
 export interface ITreeColumnViewProps extends IColumnViewProps {
-    item: {
-        onTreeItemClick?: (uniqueId: string, item: {
-            [key: string]: any;
-        }) => void;
-        [key: string]: any;
+    item: ITreeTableItem & {
+        uniqueId: string;
+        level: number;
+        isOpened: boolean;
+        hasItems: boolean;
+        onClick: () => void;
     };
 }
 export interface ITreeTableItem {
@@ -15,14 +16,15 @@ export interface ITreeTableItem {
     id?: string | number;
     /**
      * Вложенные элементы
-     * @example items: [{id: 3, name: 'Ivan'}]
+     * @example
+     * items: [
+     *  {
+     *   id: 3,
+     *   name: 'Ivan'
+     *  }
+     * ]
      */
-    items?: any[];
-    /**
-     * Уникальный идентификатор,
-     * используется для сохранения состояния открыта или закрыта ячейка
-     */
-    uniqueId?: string;
+    items?: ITreeTableItem[];
 }
 /**
  * TreeTable
@@ -32,9 +34,31 @@ export interface ITreeTableItem {
 export interface ITreeTableProps extends Omit<IGridProps, 'items'> {
     /**
      * Элементы коллекции
-     * @example [{id: 1, name: 'Jane'}, {id: 2, name: 'John', items: [...]}]
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   name: 'Jane'
+     *  },
+     *  {
+     *   id: 2,
+     *   name: 'John',
+     *   items: [...]
+     *  }
+     * ]
      */
     items?: ITreeTableItem[];
+    /**
+     * Расстояние вложенных элементов от родителя для каждого уровня
+     * @example 32
+     */
+    levelPadding?: number | string;
+}
+export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[], levelPadding: string | number) => IGridColumn[];
+declare function TreeTable(props: ITreeTableProps): JSX.Element;
+declare namespace TreeTable {
+    var defaultProps: {
+        levelPadding: number;
+    };
 }
-export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[]) => IGridColumn[];
-export default function TreeTable(props: ITreeTableProps): JSX.Element;
+export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -55,15 +55,18 @@ var TREE_COLUMN_VIEW_FIELDS = {
     valueView: 'TreeColumnView',
     headerClassName: 'TreeColumnHeader'
 };
-var addTreeColumnFieldsToFirstColumn = function (columns) {
+var addTreeColumnFieldsToFirstColumn = function (columns, levelPadding) {
     var newColumns = __spreadArray([], columns, true);
     // Add tree view to the first column
-    (0, merge_1["default"])(newColumns[0], TREE_COLUMN_VIEW_FIELDS);
+    (0, merge_1["default"])(newColumns[0], __assign(__assign({}, TREE_COLUMN_VIEW_FIELDS), { levelPadding: levelPadding }));
     return newColumns;
 };
 exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
 function TreeTable(props) {
-    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns); }, [props.columns]);
+    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns, props.levelPadding); }, [props.columns, props.levelPadding]);
     return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: props.items, itemsIndexing: false, hasTreeItems: true })));
 }
 exports["default"] = TreeTable;
+TreeTable.defaultProps = {
+    levelPadding: 32
+};

package/ui/modal/Modal/Modal.d.ts

@@ -21,7 +21,13 @@ export interface IModalProps {
     componentProps?: any;
     /**
      * Коллекция кнопок, которая отобразится в нижней секции Modal
-     * @example [{label: __(('Закрыть')), onClick: () => props.onClose()}]
+     * @example
+     * [
+     *  {
+     *   label: __(('Закрыть')),
+     *   onClick: () => props.onClose()
+     *  }
+     * ]
      */
     buttons?: IButtonProps[];
     /**

package/ui/nav/Breadcrumbs/Breadcrumbs.d.ts

@@ -13,7 +13,17 @@ export interface IBreadcrumbsProps {
     className?: CssClassName;
     /**
      * Коллекция элементов навигационной цепочки
-     * @example [{id: 'root', title: 'Home'}, {id: 'catalog', title: 'Catalog'}]
+     * @example
+     * [
+     *  {
+     *   id: 'root',
+     *   title: 'Home'
+     *  },
+     *  {
+     *   id: 'catalog',
+     *   title: 'Catalog'
+     *  }
+     * ]
      */
     items?: IRouteItem[];
     /**

package/ui/nav/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Dispatch, SetStateAction } from 'react';
 import { IButtonProps } from '../../form/Button/Button';
 import { DataProviderItems } from '../../../hooks/useDataProvider';
 /**
@@ -9,14 +9,19 @@ import { DataProviderItems } from '../../../hooks/useDataProvider';
 export interface IButtonGroupProps extends IUiComponent {
     /**
      * Элементы для группы кнопок
-     * @example ['button1', 'button2', 'button3']
+     * @example
+     * [
+     *  'button1',
+     *  'button2',
+     *  'button3'
+     * ]
      */
     items: DataProviderItems;
     /**
      * Функция, которая будет вызываться при клике по кнопке
      * @example setActiveTab
      */
-    onClick: (value: number | string | boolean) => void;
+    onClick: ((value: number | string | boolean) => void) | Dispatch<SetStateAction<string | number | boolean>>;
     /**
      * При указании в связке с onClick предоставляет возможность реализовать two-way binding
      * @example 'button1'
@@ -28,7 +33,11 @@ export interface IButtonGroupProps extends IUiComponent {
     defaultActiveButton?: number | string;
     /**
      * Общие свойства для всех кнопок группы
-     * @example {outline: true, color: 'secondary'}
+     * @example
+     * {
+     *  outline: true,
+     *  color: 'secondary'
+     * }
      */
     buttonProps?: IButtonProps;
 }

package/ui/nav/Controls/Controls.d.ts

@@ -27,7 +27,13 @@ export interface IControlItem extends IButtonProps {
 export interface IControlsProps {
     /**
      * Коллекция контролов
-     * @example [{id: 'delete', onClick: () => alert("It's deleted")}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete',
+     *   onClick: () => alert("It's deleted")
+     *  }
+     * ]
      */
     items?: IControlItem[];
     /**