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

package/hooks/useDataProvider.d.ts

@@ -52,7 +52,17 @@ export interface IDataProvider {
 export interface IDataProviderConfig {
     /**
      * Коллекция элементов
-     * @example [{id: 1, label: 'Krasnoyarsk'}, {id: 2, label: 'Moscow'}]
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'Krasnoyarsk'
+     *  },
+     *  {
+     *   id: 2,
+     *   label: 'Moscow'
+     *  }
+     * ]
      */
     items?: DataProviderItems;
     /**
@@ -67,7 +77,12 @@ export interface IDataProviderConfig {
     query?: string;
     /**
      * Настройки поиска
-     * @example {enable: true, minLength: 2, delay: 100}
+     * @example
+     * {
+     *  enable: true,
+     *  minLength: 2,
+     *  delay: 100
+     * }
      */
     autoComplete?: boolean | IAutoCompleteConfig;
     /**

package/hooks/useList.d.ts

@@ -49,27 +49,53 @@ export interface IListConfig {
     actionMethod?: HttpMethod;
     /**
      * Подключение пагинации
-     * @example {loadMore: true}
+     * @example
+     * {
+     *  loadMore: true
+     * }
      */
     pagination?: boolean | IPaginationProps;
     /**
      * Переключение количества элементов в списке
-     * @example {sizes: [3, 6, 9], defaultValue: 3}
+     * @example
+     * {
+     *  sizes: [3, 6, 9],
+     *  defaultValue: 3
+     * }
      */
     paginationSize?: boolean | IPaginationSizeProps;
     /**
      * Подключение сортировки
-     * @example {enable: true, defaultSort: 'startDate'}
+     * @example
+     * {
+     *  enable: true,
+     *  defaultSort: 'startDate'
+     * }
      */
     sort?: boolean | ISortConfig;
     /**
      * Варианты расположения элементов коллекции
-     * @example {items: [{id: 'list', label: 'List'}, {id: 'grid', label: 'Grid'}]}
+     * @example
+     * {
+     *  items: [
+     *   {
+     *    id: 'list',
+     *    label: 'List'
+     *   },
+     *   {
+     *    id: 'grid',
+     *    label: 'Grid'
+     *   }
+     *  ]
+     * }
      */
     layout?: boolean | ILayoutNamesProps;
     /**
      * Заглушка в случае отсутствия элементов
-     * @example {text: 'Записи не найдены'}
+     * @example
+     * {
+     *  text: 'Записи не найдены'
+     * }
      */
     empty?: boolean | string | IEmptyProps;
     /**
@@ -79,7 +105,15 @@ export interface IListConfig {
     isLoading?: boolean;
     /**
      * Форма для поиска элементов
-     * @example {fields: ['title'], model: {attributes: ['title:string:Название']}}
+     * @example
+     * {
+     *  fields: ['title'],
+     *  model: {
+     *   attributes: [
+     *    'title:string:Название'
+     *   ]
+     *  }
+     * }
      */
     searchForm?: Omit<IFormProps, 'formId'> & {
         formId?: string;
@@ -124,7 +158,10 @@ export interface IListConfig {
     scope?: string[];
     /**
      * Дополнительные параметры, значения которых нужно передавать в запросе для получения данных
-     * @example {tagName: 'MarketReviews'}
+     * @example
+     * {
+     *  tagName: 'MarketReviews'
+     * }
      */
     query?: Record<string, unknown>;
     /**
@@ -133,7 +170,15 @@ export interface IListConfig {
     model?: string;
     /**
      * Модель для синхронизации значений формы с адресной строкой
-     * @example {attributes: [{attribute: 'isMilesAvailable', type: boolean}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'isMilesAvailable',
+     *    type: boolean
+     *   }
+     *  ]
+     * }
      */
     searchModel?: string;
     /**

package/hooks/useList.js

@@ -118,7 +118,7 @@ var prepareItemsToTree = function (sourceItems, openedTreeItems, currentPage, it
         var uniqueId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
         var isOpened = !!openedTreeItems[uniqueId];
         var hasItems = !!(item.items && item.items.length > 0);
-        treeItems.push(__assign(__assign({}, item), { uniqueId: uniqueId, level: currentLevel, isOpened: isOpened, hasItems: hasItems, onTreeItemClick: onTreeItemClick }));
+        treeItems.push(__assign(__assign({}, item), { uniqueId: uniqueId, level: currentLevel, isOpened: isOpened, hasItems: hasItems, onClick: function () { return onTreeItemClick(uniqueId, item); } }));
         if (isOpened) {
             treeItems = treeItems.concat((0, exports.prepareItemsToTree)(item.items, openedTreeItems, currentPage, itemsOnPage, onTreeItemClick, uniqueId, currentLevel + 1)).filter(Boolean);
         }

package/hooks/useSaveCursorPosition.js

@@ -21,8 +21,10 @@ function useSaveCursorPosition(inputParams) {
     var onChange = react_1["default"].useCallback(function (event, value) {
         var _a, _b;
         if (value === void 0) { value = null; }
-        setCursor((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.selectionStart);
-        inputParams.onChange(value || ((_b = event.target) === null || _b === void 0 ? void 0 : _b.value));
+        if (event) {
+            setCursor((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.selectionStart);
+        }
+        inputParams.onChange.call(null, value || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value));
     }, [inputParams]);
     return {
         inputRef: inputRef,

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.104",
+ "version": "3.0.0-beta.106",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

package/ui/content/Accordion/Accordion.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface IAccordionIcon {
     /**
     * Пользовательская иконка открытия
-    * @example 'user
+    * @example 'user'
     */
     open: React.ReactElement | string;
     /**
@@ -64,7 +64,10 @@ export interface IAccordionProps extends IUiComponent {
     activeKey?: number;
     /**
      * Вызываемая функция при каждом изменении состояния
-     * @example {() => {console.log('success')}}
+     * @example
+     * {
+     *  () => { console.log('success') }
+     * }
      */
     onChange?: () => void;
     /**

package/ui/content/Alert/Alert.d.ts

@@ -18,7 +18,7 @@ import React from 'react';
 export interface IAlertProps extends IUiComponent {
     /**
     * Дочерние элементы
-    * @example {<span>children</span>}
+    * @example { <span>children</span> }
     */
     children?: React.ReactNode;
     /**
@@ -45,7 +45,10 @@ export interface IAlertProps extends IUiComponent {
     showIcon?: boolean;
     /**
      * Callback функция вызываемая при нажатии на кнопку закрытия
-     * @example {() => console.log('this is callback')}
+     * @example
+     * {
+     *  () => console.log('this is callback')
+     * }
      */
     onClose?: () => void;
     /**

package/ui/content/Badge/Badge.d.ts

@@ -47,7 +47,11 @@ export interface IBadgeProps extends IUiComponent {
     message?: string;
     /**
      * Нужно ли отображать счетчик
-     * @example {isEnable: true, content: 'Hello from counter!'}
+     * @example
+     * {
+     *  isEnable: true,
+     *  content: 'Hello from counter!',
+     * }
      */
     counter: boolean | ICounter;
     /**

package/ui/content/Calendar/Calendar.d.ts

@@ -29,7 +29,12 @@ export interface ICalendarProps extends IUiComponent {
     onChange?: (date: string) => void;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
+     * }
      */
     pickerProps?: DayPickerProps | any;
     /**

package/ui/content/Card/Card.d.ts

@@ -38,6 +38,10 @@ export interface ICardHeader {
  * футер, коллекцию ссылок и коллекцию кнопок.
  */
 export interface ICardProps extends IUiComponent {
+    /**
+     * Коллекция кнопок
+     */
+    buttons?: IButtonProps[];
     /**
      * Дочерние элементы
      */
@@ -52,46 +56,48 @@ export interface ICardProps extends IUiComponent {
      * @example 'Scroll to see more...'
      */
     description?: string;
+    /**
+     * Контент футера
+     */
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
      * Контент хедера
      * @example
      * avatar: {
-     * src: 'Kate.png',
-     * status: true,
+     *  src: 'Kate.png',
+     *  status: true,
      * },
      * head: 'Header',
      * subhead: 'Subhead',
      * menu: {
      *  dropDownProps: {
-            position: 'bottom',
-            closeMode: 'click-any',
-        },
-        items: [
-            {label: 'Вырезать', icon: 'cut', onClick: voidFunction},
-            {label: 'Копировать', icon: 'copy', hasBorder: true, onClick: voidFunction},
-            {label: 'Показать историю изменений', hasBorder: true, onClick: voidFunction},
-            {label: 'Редактировать', icon: 'edit', onClick: voidFunction},
-            {label: 'Удалить', icon: 'trash', onClick: voidFunction},
-        ],
-        icon: 'menu_dots',
+     *   position: 'bottom',
+     *   closeMode: 'click-any',
+     *  },
+     *  items: [
+     *   {
+     *    label: 'Вырезать',
+     *    icon: 'cut',
+     *    onClick: voidFunction
+     *   },
+     *   {
+     *    label: 'Копировать',
+     *    icon: 'copy',
+     *    hasBorder: true
+     *    onClick: voidFunction
+     *   },
+     *  ],
+     *  icon: 'menu_dots',
      * },
      */
     header?: ICardHeader;
     /**
-     * Контент футера
+     * Коллекция ссылок
      */
-    footer?: {
-        head: string;
-        subhead: string;
-    };
-    /**
-    * Коллекция ссылок
-    */
     links?: ILinkProps[];
-    /**
-     * Коллекция кнопок
-     */
-    buttons?: IButtonProps[];
     /**
      * Заголовок карточки
      * @example 'Main card'

package/ui/content/Chart/Chart.d.ts

@@ -16,12 +16,20 @@ export interface IChartProps extends IUiComponent {
     chartComponent: any;
     /**
      * Данные для графика
-     * @example [{id: 1, value: 15}, {id: 2, value: 30}]
+     * @example
+     * [
+     *  {id: 1, value: 15},
+     *  {id: 2, value: 30}
+     * ]
      */
     data?: Record<string, any>[];
     /**
      * Конфигурация, настройки отображения графика
-     * @example {lineWidth: 3, pointSize: 10}
+     * @example
+     * {
+     *  lineWidth: 3,
+     *  pointSize: 10
+     * }
      */
     config?: Record<string, any>;
     /**

package/ui/content/Chat/Chat.d.ts

@@ -26,35 +26,37 @@ export interface IChatProps extends IUiComponent {
     chatId: string;
     /**
      * Коллекция сообщений
-     * @example [
+     * @example
+     * [
      *  {
-     *         id: 1,
-     *         text: 'Всем привет!',
-     *         user: {
-     *             id: 1,
-     *             firstName: 'Olga',
-     *             lastName: 'Petrova',
-     *             avatar: {
-     *                 src: 'images.com/image.png',
-     *                 status: true,
-     *             },
-     *         },
-     *         timestamp: '2023-10-25T12:38:00',
+     *   id: 1,
+     *   text: 'Всем привет!',
+     *   user: {
+     *     id: 1,
+     *     firstName: 'Olga',
+     *     lastName: 'Petrova',
+     *     avatar: {
+     *       src: 'images.com/image.png',
+     *       status: true,
      *     },
+     *   },
+     *   timestamp: '2023-10-25T12:38:00',
+     *  },
      * ]
      */
     messages: IChatMessage[];
     /**
      * Данные о текущем пользователе, нужны для отправки сообщений и определения сообщений пользователя
-     * @example {
-     *             id: 1,
-     *             firstName: 'Olga',
-     *             lastName: 'Petrova',
-     *             avatar: {
-     *                 src: 'images.com/image.png',
-     *                 status: true,
-     *             },
-     *         }
+     * @example
+     * {
+     *  id: 1,
+     *  firstName: 'Olga',
+     *  lastName: 'Petrova',
+     *  avatar: {
+     *    src: 'images.com/image.png',
+     *    status: true,
+     *  },
+     * }
      */
     currentUser: IChatUser;
     /**

package/ui/content/CopyToClipboard/CopyToClipboard.d.ts

@@ -33,9 +33,9 @@ export interface ICopyToClipboardProps extends IUiComponent {
     *   message: 'Some value has been copied to buffer',
     *   level: 'info',
     *   params: {
-    *   position: 'top-left',
-    *   timeOut: 100,
-    *  }
+    *     position: 'top-left',
+    *     timeOut: 100,
+    *   }
     * }
     */
     notification?: string | {

package/ui/content/Detail/Detail.d.ts

@@ -58,7 +58,16 @@ export interface IDetailProps extends IUiComponent {
     layout?: DetailLayoutEnum;
     /**
      * Перестраивать таблицу при ресайзе
-     * @example {enable: true, media: [{breakpoint: 600, column: 2}]}
+     * @example
+     * {
+     *  enable: true,
+     *  media: [
+     *   {
+     *    breakpoint: 600,
+     *    column: 2
+     *   }
+     *  ]
+     * }
      */
     responsive?: boolean | IDetailResponsive;
     /**
@@ -73,7 +82,11 @@ export interface IDetailProps extends IUiComponent {
     title?: string | React.ReactNode;
     /**
      * Контролы, которые нужно расположить рядом с таблицей
-     * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
+     * @example
+     * [{
+     *  label: __(('Edit')),
+     *  onClick: () => props.onClick()
+     * }]
      */
     controls?: IControlItem[];
     /**

package/ui/content/Kanban/hooks/useKanban.d.ts

@@ -7,18 +7,24 @@ export interface IKanbanConfig {
     kanbanId?: string;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
-     * @example [
-     *             {
-     *              id: 1,
-     *              title: 'column 1',
-     *              tasks: [{ content: 'item 1', id: 1 }],
-     *             },
-     *             {
-     *              id: 2,
-     *              title: 'column 2',
-     *              tasks: [],
-     *             }
-     *          ]
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   title: 'column 1',
+     *   tasks: [
+     *    {
+     *      content: 'item 1',
+     *      id: 1
+     *    }
+     *    ],
+     *  },
+     *  {
+     *   id: 2,
+     *   title: 'column 2',
+     *   tasks: [],
+     *  }
+     * ]
      */
     columns: IKanbanColumn[];
     /**
@@ -32,20 +38,21 @@ export interface IKanbanConfig {
     /**
      * Обработчик события окончания перетаскивания карточки или колонки
      * В result передается объект с информацией о событии
-     * @example {
-     *     draggableId: 1,
-     *     type: 'task',
-     *     source: {
-     *         index: 0,
-     *         droppableId: 2
-     *     },
-     *     reason: 'DROP',
-     *     mode: 'FLUID',
-     *     destination: {
-     *         droppableId: 2,
-     *         index: 1
-     *     },
-     *     combine: null
+     * @example
+     * {
+     *  draggableId: 1,
+     *  type: 'task',
+     *  source: {
+     *   index: 0,
+     *   droppableId: 2
+     *  },
+     *  reason: 'DROP',
+     *  mode: 'FLUID',
+     *  destination: {
+     *    droppableId: 2,
+     *    index: 1
+     *  },
+     *  combine: null
      * }
      */
     onDragEnd?: (result: IDragEndResult) => void;

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -20,7 +20,7 @@ type CheckboxFieldListItems = string | ({
 export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
      * Свойства для элемента input
-     * @example {onKeyDown: ...}
+     * @example { onKeyDown: ... }
      */
     inputProps?: any;
     /**
@@ -29,7 +29,19 @@ export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, Omit<I
     orientation?: Orientation;
     /**
      * Коллекция элементов
-     * @example [{id: 1, label: 'Krasnoyarsk', color: 'red'}, {id: 2, label: 'Moscow', color: 'purple'}]
+     * @example
+     * [
+     *  {
+     *      id: 1,
+     *      label: 'Krasnoyarsk',
+     *      color: 'red'
+     *  },
+     *  {
+     *      id: 2,
+     *      label: 'Moscow',
+     *      color: 'purple'
+     *  }
+     * ]
      */
     items: CheckboxFieldListItems;
     [key: string]: any;

package/ui/form/DateField/useDateRange.d.ts

@@ -9,6 +9,7 @@ interface IUseDateRangeProps extends Pick<IDateInputStateInput, 'displayFormat'
     inputTo: any;
     inputFrom: any;
     useSmartFocus: boolean;
+    hasInitialFocus: boolean;
 }
 export default function useDateRange(props: IUseDateRangeProps): {
     focus: "to" | "from";

package/ui/form/DateField/useDateRange.js

@@ -21,6 +21,7 @@ var calendar_1 = require("@steroidsjs/core/utils/calendar");
 function useDateRange(props) {
     // Tracking focus for input being edited
     var _a = (0, react_1.useState)('from'), focus = _a[0], setFocus = _a[1];
+    var isFirstMount = (0, react_use_1.useFirstMountState)();
     // Local refs to handle auto-focus
     var valueFromRef = (0, react_1.useRef)('');
     var valueToRef = (0, react_1.useRef)('');
@@ -57,6 +58,9 @@ function useDateRange(props) {
     var prevValueFrom = (0, react_use_1.usePrevious)(props.inputFrom.value);
     var prevValueTo = (0, react_use_1.usePrevious)(props.inputTo.value);
     (0, react_1.useEffect)(function () {
+        if (!props.hasInitialFocus && isFirstMount) {
+            return;
+        }
         if (props.useSmartFocus) {
             if (focus === 'from' && !valueToRef.current && prevValueFrom !== props.inputFrom.value) {
                 valueFromRef.current = props.inputFrom.value;
@@ -67,8 +71,11 @@ function useDateRange(props) {
                 inputFromRef.current.focus();
             }
         }
+        else if (props.hasInitialFocus && isFirstMount) {
+            inputFromRef.current.focus();
+        }
         // eslint-disable-next-line max-len
-    }, [focus, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
+    }, [focus, isFirstMount, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
     // Swap start and end dates if start date is later than end date
     (0, react_1.useEffect)(function () {
         if (props.inputFrom.value

package/ui/form/DateRangeField/DateRangeField.d.ts

@@ -22,7 +22,12 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
     attributeTo?: string;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
+     * }
      */
     pickerProps?: any;
     /**
@@ -62,6 +67,11 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
+    /**
+     * Устанавливать ли фокус и показывать календарь сразу после рендера страницы
+     * @example true
+     */
+    hasInitialFocus?: boolean;
     [key: string]: any;
 }
 export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {

package/ui/form/DateRangeField/DateRangeField.js

@@ -63,6 +63,7 @@ function DateRangeField(props) {
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
         useSmartFocus: true,
+        hasInitialFocus: props.hasInitialFocus,
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
     }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
@@ -84,6 +85,7 @@ DateRangeField.defaultProps = {
     displayFormat: 'DD.MM.YYYY',
     valueFormat: 'YYYY-MM-DD',
     showRemove: true,
+    hasInitialFocus: false,
     icon: true,
     noBorder: false,
     size: 'md'

package/ui/form/DateTimeRangeField/DateTimeRangeField.d.ts

@@ -24,7 +24,12 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
     attributeTo?: string;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
+     * }
      */
     pickerProps?: any;
     /**
@@ -43,6 +48,11 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
+    /**
+     * Устанавливать ли фокус и показывать календарь сразу после рендера страницы
+     * @example true
+     */
+    hasInitialFocus?: boolean;
     [key: string]: any;
 }
 export interface IDateTimeRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {