@steroidsjs/core 3.0.0-beta.15 → 3.0.0-beta.17

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

@@ -74,7 +74,7 @@ export interface IFieldListProps extends IFieldWrapperInputProps {
      * Переопределение view React компонента для кастомизации отображения списка с группами полей
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * Пропсы для компонента отображения списка с группами полей - FieldListView
      */
@@ -105,9 +105,9 @@ export interface IFieldListViewProps {
     showRemove?: boolean;
     showAdd?: boolean;
     children?: React.ReactNode;
-    className?: string;
+    className?: CssClassName;
     tableClassName?: string;
-    style?: any;
+    style?: CustomStyle;
     forwardedRef?: any;
     disabled?: boolean;
     size?: Size;

package/ui/form/FieldSet/FieldSet.d.ts

@@ -27,7 +27,7 @@ export interface IFieldSetProps extends IFormContext {
     [key: string]: any;
 }
 export interface IFieldSetViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     label?: string | any;
 }

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

@@ -99,7 +99,7 @@ export interface IFormProps {
      * Объект CSS стилей
      * @example {width: '45%'}
      */
-    style?: any;
+    style?: CustomStyle;
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
@@ -155,7 +155,7 @@ export interface IFormViewProps {
     className?: CssClassName;
     isBordered?: boolean;
     autoFocus?: boolean;
-    style?: any;
+    style?: CustomStyle;
     layout?: {
         layout: FormLayoutName | boolean;
         className: CssClassName;

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

@@ -30,7 +30,7 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      */
     viewProps?: any;
@@ -43,7 +43,7 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
      * Объект CSS стилей
      * @example {width: '45%'}
      */
-    style?: any;
+    style?: CustomStyle;
     /**
      * Изображение или React-нода, которая будет отрендерена слева от поля.
      * @example require('icon.png') | <component/>

package/ui/form/RadioField/RadioField.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+export interface IRadioFieldProps extends IFieldWrapperInputProps {
+    /**
+     * Свойства для элемента \<input /\>
+     * @example {onKeyDown: ...}
+     */
+    inputProps?: any;
+    /**
+     * Дополнительный CSS-класс для элемента \<input /\>
+     */
+    className?: CssClassName;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Флаг определяющий включен ли элемент
+     * @example {'true'}
+     */
+    checked?: boolean;
+    [key: string]: any;
+}
+export interface IRadioFieldViewProps extends IRadioFieldProps, IFieldWrapperOutputProps {
+    inputProps: {
+        name: string;
+        type: string;
+        checked: boolean;
+        onChange: (value: string | React.ChangeEvent) => void;
+        disabled: boolean;
+    };
+}
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IRadioFieldProps>;
+export default _default;

package/ui/form/RadioField/RadioField.js

@@ -0,0 +1,61 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("../../../hooks");
+var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+function RadioField(props) {
+    var components = (0, hooks_1.useComponents)();
+    var onChangeHandler = React.useCallback(function () {
+        props.input.onChange(!props.input.value);
+        if (props.onChange) {
+            props.onChange();
+        }
+    }, [props]);
+    var inputProps = React.useMemo(function () { return (__assign({ name: props.input.name, type: 'radio', checked: !!props.input.value, onChange: onChangeHandler, disabled: props.disabled }, props.inputProps)); }, [onChangeHandler, props.disabled, props.input.name, props.input.value, props.inputProps]);
+    return components.ui.renderView(props.view || 'form.RadioFieldView', __assign(__assign({}, props), { inputProps: inputProps }));
+}
+RadioField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    size: 'md',
+    inputProps: {}
+};
+exports["default"] = (0, fieldWrapper_1["default"])('RadioField', RadioField);

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

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

package/ui/{list/LayoutNames/demo/basic.js → form/RadioField/index.js}

@@ -3,10 +3,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var layout_1 = __importDefault(require("../../List/demo/layout"));
-/**
- * List with layout switcher
- * @order 1
- * @col 6
- */
-exports["default"] = layout_1["default"];
+var RadioField_1 = __importDefault(require("./RadioField"));
+exports["default"] = RadioField_1["default"];

package/ui/form/RadioListField/RadioListField.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
+import { IRadioFieldViewProps } from '../RadioField/RadioField';
 /**
  * RadioListField
  * Список с радиокнопками. Используется в формах для выбора одного значения.
@@ -16,6 +17,10 @@ export interface IRadioListFieldProps extends IFieldWrapperInputProps, IDataProv
      * Дополнительный CSS-класс для элемента отображения
      */
     className?: CssClassName;
+    /**
+     * Ориентация списка
+     */
+    orientation?: 'horizontal' | 'vertical';
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
@@ -39,6 +44,7 @@ export interface IRadioListFieldViewProps extends IFieldWrapperOutputProps {
     selectedIds: (PrimaryKey | any)[];
     className?: CssClassName;
     onItemSelect: (id: PrimaryKey | any) => void;
+    renderRadio: (radioProps: IRadioFieldViewProps) => JSX.Element;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IRadioListFieldProps>;
 export default _default;

package/ui/form/RadioListField/RadioListField.js

@@ -10,10 +10,34 @@ var __assign = (this && this.__assign) || function () {
     };
     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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
@@ -28,6 +52,7 @@ function RadioListField(props) {
     }).items;
     // Data select
     var _a = (0, hooks_1.useDataSelect)({
+        multiple: props.multiple,
         selectedIds: inputSelectedIds,
         selectFirst: props.selectFirst,
         primaryKey: props.primaryKey,
@@ -49,13 +74,17 @@ function RadioListField(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.input.onChange, selectedIds]);
-    return components.ui.renderView(props.view || 'form.RadioListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds }));
+    var RadioFieldView = components.ui.getView('form.RadioFieldView');
+    var renderRadio = function (radioProps) { return React.createElement(RadioFieldView, __assign({}, radioProps)); };
+    return components.ui.renderView(props.view || 'form.RadioListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds, renderRadio: renderRadio }));
 }
 RadioListField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
+    multiple: false,
     errors: null,
-    size: 'md'
+    size: 'md',
+    orientation: 'vertical'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('RadioListField', RadioListField);

package/ui/form/TimeField/TimeField.d.ts

@@ -26,7 +26,7 @@ export interface ITimeFieldProps extends IDateInputStateInput {
      * Объект CSS стилей
      * @example {width: '45%'}
      */
-    style?: any;
+    style?: CustomStyle;
     /**
      * Свойства для view компонента
      */

package/ui/form/index.d.ts

@@ -20,6 +20,7 @@ import InputField from './InputField';
 import NavField from './NavField';
 import NumberField from './NumberField';
 import PasswordField from './PasswordField';
+import RadioField from './RadioField';
 import RadioListField from './RadioListField';
 import ReCaptchaField from './ReCaptchaField';
 import SliderField from './SliderField';
@@ -27,7 +28,7 @@ import SwitcherField from './SwitcherField';
 import TextField from './TextField';
 import TimeField from './TimeField';
 import RateField from './RateField';
-export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, InputField, NavField, NumberField, PasswordField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, RateField, };
+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, };
 declare const _default: {
     AutoCompleteField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./AutoCompleteField/AutoCompleteField").IAutoCompleteFieldProps>;
     BlankField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./BlankField/BlankField").IBlankFieldProps>;
@@ -50,6 +51,7 @@ declare const _default: {
     NavField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./NavField/NavField").INavFieldProps>;
     NumberField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./NumberField/NumberField").INumberFieldProps>;
     PasswordField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./PasswordField/PasswordField").IPasswordFieldProps>;
+    RadioField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./RadioField/RadioField").IRadioFieldProps>;
     RadioListField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./RadioListField/RadioListField").IRadioListFieldProps>;
     ReCaptchaField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./ReCaptchaField/ReCaptchaField").IReCaptchaFieldProps>;
     SliderField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./SliderField/SliderField").ISliderFieldProps>;

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.RateField = exports.TimeField = exports.TextField = exports.SwitcherField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = 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.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;
 var AutoCompleteField_1 = __importDefault(require("./AutoCompleteField"));
 exports.AutoCompleteField = AutoCompleteField_1["default"];
 var BlankField_1 = __importDefault(require("./BlankField"));
@@ -46,6 +46,8 @@ var NumberField_1 = __importDefault(require("./NumberField"));
 exports.NumberField = NumberField_1["default"];
 var PasswordField_1 = __importDefault(require("./PasswordField"));
 exports.PasswordField = PasswordField_1["default"];
+var RadioField_1 = __importDefault(require("./RadioField"));
+exports.RadioField = RadioField_1["default"];
 var RadioListField_1 = __importDefault(require("./RadioListField"));
 exports.RadioListField = RadioListField_1["default"];
 var ReCaptchaField_1 = __importDefault(require("./ReCaptchaField"));
@@ -82,6 +84,7 @@ exports["default"] = {
     NavField: NavField_1["default"],
     NumberField: NumberField_1["default"],
     PasswordField: PasswordField_1["default"],
+    RadioField: RadioField_1["default"],
     RadioListField: RadioListField_1["default"],
     ReCaptchaField: ReCaptchaField_1["default"],
     SliderField: SliderField_1["default"],

package/ui/layout/Header/Header.d.ts

@@ -2,7 +2,7 @@
 import { INavProps } from '../../nav/Nav/Nav';
 export interface IHeaderProps {
     className?: CssClassName;
-    view?: any;
+    view?: CustomView;
     logo?: {
         title: string;
         linkProps?: Record<string, unknown>;

package/ui/layout/Loader/Loader.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface ILoaderProps {
-    view?: any;
+    view?: CustomView;
     [key: string]: any;
 }
 export default function Loader(props: ILoaderProps): JSX.Element;

package/ui/layout/Notifications/Notifications.d.ts

@@ -34,7 +34,7 @@ export interface INotificationsProps {
     notifications?: INotificationItem[];
     closeTimeoutMs?: number;
     className?: CssClassName;
-    view?: any;
+    view?: CustomView;
     itemView?: any;
     position?: string;
     [key: string]: any;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export interface ISkeletonViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     animation?: 'pulse' | 'wave';
     type?: 'text' | 'rect' | 'circle';
@@ -8,7 +8,7 @@ export interface ISkeletonViewProps {
     width?: string | number;
 }
 export interface ISkeletonProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     animation?: 'pulse' | 'wave';
     type?: 'text' | 'rect' | 'circle';

package/ui/list/CheckboxColumn/CheckboxColumn.d.ts

@@ -20,7 +20,7 @@ export interface ICheckboxColumnProps {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     [key: string]: any;
 }
 export interface ICheckboxColumnViewProps {

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

@@ -29,7 +29,7 @@ export interface IControlsColumnProps {
      * Переопределение view React компонента для кастомизации отображения колонки
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     [key: string]: any;
 }
 export interface IControlsColumnViewProps {

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

@@ -68,7 +68,7 @@ export interface IGridProps extends IListConfig {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
      * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]

package/ui/list/Grid/demo/sort.js

@@ -28,14 +28,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var Grid_1 = __importDefault(require("../Grid"));
-var sort_1 = require("../../List/demo/sort");
+// import {items} from '../../List/demo/sort';
 /**
  * Grid with sorting
  * @order 7
  * @col 8
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Grid_1["default"], { listId: 'GridSortDemo', items: sort_1.items, columns: [
+    React.createElement(Grid_1["default"], { listId: 'GridSortDemo', 
+        // items={items}
+        columns: [
             {
                 attribute: 'title',
                 label: 'Title'

package/ui/list/Pagination/Pagination.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ListControlPosition } from '../../../hooks/useList';
 import { IButtonProps } from '../../form/Button/Button';
 /**
  * Pagination
@@ -40,11 +39,6 @@ export interface IPaginationProps {
      * Дополнительный CSS-класс для элемента отображения
      */
     className?: CssClassName;
-    /**
-     * Расположение пагинации
-     * @example 'both'
-     */
-    position?: ListControlPosition;
     buttonProps?: IButtonProps;
     /**
      * Переопределение view React компонента для кастомизации отображения
@@ -69,6 +63,16 @@ export interface IPaginationProps {
      * Список, для которого используется пагинация
      */
     list?: any;
+    /**
+    * Нужно ли отображать кнопки с шагом в одну страницу
+    * @example {'true'}
+    */
+    showSteps?: boolean;
+    /**
+     * Нужно ли отображать кнопки с шагом до первой / последней страницы
+     * @example {'true'}
+     */
+    showEdgeSteps?: boolean;
     [key: string]: any;
 }
 export interface IPaginationViewProps extends IPaginationProps {
@@ -80,6 +84,11 @@ export interface IPaginationViewProps extends IPaginationProps {
     }[];
     onSelect: (page: number) => void;
     onSelectNext: () => void;
+    onSelectPrev: () => void;
+    onSelectLast: () => void;
+    onSelectFirst: () => void;
+    isFirstPage: boolean;
+    isLastPage: boolean;
 }
 export declare const generatePages: (page: any, totalPages: any, aroundCount?: number) => any[];
 declare function Pagination(props: IPaginationProps): JSX.Element;
@@ -89,6 +98,7 @@ declare namespace Pagination {
         attribute: string;
         aroundCount: number;
         defaultValue: number;
+        size: string;
         loadMore: boolean;
         position: string;
         sizeAttribute: string;

package/ui/list/Pagination/Pagination.js

@@ -44,6 +44,7 @@ var React = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var useForm_1 = __importDefault(require("../../../hooks/useForm"));
 var form_1 = require("../../../actions/form");
+var FIRST_PAGE = 1;
 var generatePages = function (page, totalPages, aroundCount) {
     if (aroundCount === void 0) { aroundCount = 3; }
     if (!page || !totalPages) {
@@ -78,6 +79,8 @@ function Pagination(props) {
         });
     }) || initialValues, page = _e.page, pageSize = _e.pageSize;
     var totalPages = Math.ceil((((_c = props.list) === null || _c === void 0 ? void 0 : _c.total) || 0) / (pageSize || 1));
+    var isFirstPage = React.useMemo(function () { return page === FIRST_PAGE; }, [page]);
+    var isLastPage = React.useMemo(function () { return page === totalPages; }, [page, totalPages]);
     var pages = (0, react_1.useMemo)(function () { return (0, exports.generatePages)(page, totalPages, props.aroundCount)
         .map(function (pageItem, index, pagesArray) {
         // Номер страницы для '...' кнопки (выбирает страницу между двумя соседними пронумерованными)
@@ -99,26 +102,31 @@ function Pagination(props) {
     var onSelectNext = (0, react_1.useCallback)(function () {
         onSelect(page + 1);
     }, [onSelect, page]);
+    var onSelectPrev = (0, react_1.useCallback)(function () {
+        onSelect(page - 1);
+    }, [onSelect, page]);
+    var onSelectLast = (0, react_1.useCallback)(function () {
+        onSelect(totalPages);
+    }, [onSelect, totalPages]);
+    var onSelectFirst = (0, react_1.useCallback)(function () {
+        onSelect(FIRST_PAGE);
+    }, [onSelect]);
     if (!props.list || !page || !pageSize || props.list.total <= pageSize) {
         return null;
     }
     // Do not show in last page in 'loadMore' mode
-    if (props.loadMore && page >= totalPages) {
+    if (props.loadMore && isLastPage) {
         return null;
     }
     var defaultView = (props.loadMore ? 'list.PaginationMoreView' : 'list.PaginationButtonView');
-    return components.ui.renderView(props.view || defaultView, {
-        totalPages: totalPages,
-        pages: pages,
-        onSelect: onSelect,
-        onSelectNext: onSelectNext
-    });
+    return components.ui.renderView(props.view || defaultView, __assign(__assign({}, props), { totalPages: totalPages, pages: pages, onSelect: onSelect, onSelectNext: onSelectNext, onSelectPrev: onSelectPrev, onSelectLast: onSelectLast, onSelectFirst: onSelectFirst, isFirstPage: isFirstPage, isLastPage: isLastPage }));
 }
 Pagination.defaultProps = {
     enable: true,
     attribute: 'page',
     aroundCount: 3,
     defaultValue: 1,
+    size: 'md',
     loadMore: false,
     position: 'bottom',
     sizeAttribute: 'pageSize'

package/ui/list/PaginationSize/demo/basic.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var PaginationSize_1 = __importDefault(require("../PaginationSize"));
-var basic_1 = require("../../../../ui/list/List/demo/basic");
+// import {demoItems} from '../../../../ui/list/List/demo/basic';
 /**
  * Basic
  * @order 1
@@ -36,6 +36,5 @@ var basic_1 = require("../../../../ui/list/List/demo/basic");
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
     React.createElement(PaginationSize_1["default"], { list: {
-            pageSize: 3,
-            items: basic_1.demoItems
+            pageSize: 3
         }, enable: true, attribute: 'pageSize', sizes: [3, 6, 9], defaultValue: 3, position: 'top' }))); });

package/ui/list/PaginationSize/demo/size.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var PaginationSize_1 = __importDefault(require("../PaginationSize"));
-var basic_1 = require("../../../../ui/list/List/demo/basic");
+// import {demoItems} from '../../../../ui/list/List/demo/basic';
 var sizes = {
     sm: 'Small',
     md: 'Middle',
@@ -44,6 +44,5 @@ exports["default"] = (function () { return (React.createElement(React.Fragment,
         .map(function (size) { return (React.createElement("div", { className: 'col', key: size },
         React.createElement("h6", null, sizes[size]),
         React.createElement(PaginationSize_1["default"], { list: {
-                pageSize: 3,
-                items: basic_1.demoItems
+                pageSize: 3
             }, enable: true, attribute: 'pageSize', sizes: [3, 6, 9], defaultValue: 3, size: size, position: 'top' }))); })))); });

package/ui/list/SearchForm/demo/basic.js

@@ -28,12 +28,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var List_1 = __importDefault(require("../../List"));
-var search_form_1 = require("../../List/demo/search-form");
+// import {searchForm, items} from '../../List/demo/search-form';
 /**
  * List with search form
  * @order 1
  * @col 6
  */
-exports["default"] = (function () { return (React.createElement(List_1["default"], { listId: 'ListDemoSearch', items: search_form_1.items, searchForm: search_form_1.searchForm, className: 'list-group', itemView: function (props) { return (React.createElement("div", { className: 'list-group-item' },
+exports["default"] = (function () { return (React.createElement(List_1["default"], { listId: 'ListDemoSearch', 
+    // items={items}
+    // searchForm={searchForm}
+    className: 'list-group', itemView: function (props) { return (React.createElement("div", { className: 'list-group-item' },
         React.createElement("div", null, props.item.name),
         React.createElement("div", null, "Category: ".concat(props.item.category)))); } })); });

package/ui/list/Steps/Steps.d.ts

@@ -3,16 +3,16 @@ interface IStepsProps {
     stepItems: IStepItem[];
     currentStep: number;
     isChangeable?: boolean;
-    className?: string;
+    className?: CssClassName;
     onChange?: (index: number) => void;
 }
 export interface IStepsViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
 }
 export interface IStepItemViewProps {
     stepItem: IStepItem;
-    className?: string;
+    className?: CssClassName;
     index: number;
     status: string;
     disabled: boolean;

package/ui/modal/TwoFactorModal/TwoFactorModal.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface ITwoFactorModalProps {
-    view?: any;
+    view?: CustomView;
     providerName: string;
     onClose?: any;
 }

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

@@ -27,6 +27,15 @@ export interface IBreadcrumbsProps {
      * @example 'Каталог'
      */
     pageTitle?: string;
+    /**
+     * Показать иконку заменяющую первый роут
+     * @example true
+     */
+    showIcon?: boolean;
+    /**
+     * Кастомная иконка, заменяющая первый роут
+     */
+    customIcon?: string | React.ReactElement;
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView