@steroidsjs/core 3.0.0-beta.6 → 3.0.0-beta.60

package/index.d.ts

@@ -34,6 +34,7 @@ declare type ColorName =
     | 'danger'
     | 'light'
     | 'dark'
+    | 'basic'
     | string;
 
 /**
@@ -47,21 +48,9 @@ declare type PrimaryKey = number | string;
 declare type Size = 'small' | 'middle' | 'large' | string;
 
 /**
- * Макет формы или ее части, влияющий на расположение полей
+ * Ориентация элемента
  */
-declare type FormLayoutName = 'default' | 'horizontal' | 'inline' | string;
-
-/**
- * Свойства для настройки макета формы
- */
-declare type FormLayout = FormLayoutName | boolean | {
-    layout?: FormLayoutName | boolean,
-    className?: string,
-    style?: any,
-    label?: boolean,
-    cols?: number[],
-    [key: string]: any,
-};
+declare type Orientation = 'horizontal' | 'vertical' | string;
 
 /**
  * Объект из свойства `input` от redux-form
@@ -88,9 +77,34 @@ declare type CustomStyle = React.CSSProperties;
  * Переопределение view React компонента для кастомизации отображения
  * @example MyCustomView
  */
-declare type CustomView = React.ReactNode | React.FunctionComponent;
+declare type CustomView = React.ReactNode | ((props: React.ComponentProps<any>) => JSX.Element);
+
+/**
+ * Кастомная иконка
+ * @example custom-icon
+ */
+declare type CustomIcon = string | React.ReactElement;
 
 /**
  * HTTP метод
  */
 declare type HttpMethod = 'get' | 'post' | 'put' | 'delete' | string;
+
+declare interface IUiComponent {
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
+
+    /**
+     * Объект CSS стилей
+     * @example {width: '45%'}
+     */
+    style?: CustomStyle;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.6",
+ "version": "3.0.0-beta.60",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {
@@ -18,13 +18,17 @@
   "url": "https://github.com/steroids/react/issues"
  },
  "scripts": {
-  "docs": "typedoc --ignoreCompilerErrors --json typedoc.json .",
+  "docs": "node build/docs-autogen.js",
   "test": "jest",
   "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src ./tests --quiet",
-  "build": "tsc && cp ./{package.json,LICENSE,README.md} dist/ && cp src/index.d.ts dist/",
+  "build": "tsc && cp ./{package.json,LICENSE,README.md} dist/ && cp src/index.d.ts dist/ && cp build/docs-autogen-result.json dist/",
   "watch": "tsc -p tsconfig-debug.json"
  },
  "dependencies": {
+  "@maskito/core": "^0.12.1",
+  "@maskito/kit": "^0.12.1",
+  "@maskito/react": "^0.12.1",
+  "@splidejs/react-splide": "^0.7.12",
   "axios": "^0.21.1",
   "connected-react-router": "^6.9.3",
   "domready": "^1.0.8",
@@ -42,12 +46,11 @@
   "query-string": "^6.14.0",
   "react": "^18.2.0",
   "react-click-outside": "^3.0.1",
-  "react-day-picker": "^8.2.1",
+  "react-day-picker": "^8.7.1",
   "react-dom": "^18.2.0",
   "react-grid-gallery": "^0.4.8",
   "react-helmet": "^6.1.0",
   "react-image-crop": "^9.0.2",
-  "react-input-mask": "^3.0.0-alpha.2",
   "react-redux": "^8.0.5",
   "react-router": "^5.2.0",
   "react-router-dom": "^5.2.0",
@@ -62,7 +65,7 @@
   "@babel/preset-env": "^7.13.15",
   "@babel/preset-react": "^7.13.13",
   "@babel/preset-typescript": "^7.13.0",
-  "@steroidsjs/eslint-config": "^2.1.3",
+  "@steroidsjs/eslint-config": "^2.1.4",
   "@testing-library/dom": "^8.20.0",
   "@testing-library/jest-dom": "^5.16.5",
   "@testing-library/react": "^13.4.0",
@@ -83,7 +86,9 @@
   "enzyme": "^3.11.0",
   "eslint": "^8.34.0",
   "jest": "^26.6.3",
+  "jest-environment-jsdom-fifteen": "^1.0.2",
   "jest-enzyme": "^7.1.2",
+  "rc-slider": "9.7.4",
   "ts-jest": "^26.5.1",
   "typescript": "^4.9.5"
  }

package/providers/ComponentsProvider.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
+import { IUiApplicationComponent } from 'src/components/UiComponent';
+import { IResourceComponent } from '../components/ResourceComponent';
 declare global {
     interface Window {
         SteroidsComponents: IComponents;
@@ -12,8 +14,8 @@ export interface IComponents {
     http?: any;
     locale?: any;
     store?: any;
-    ui?: any;
-    resource?: any;
+    ui?: IUiApplicationComponent;
+    resource?: IResourceComponent;
     ws?: any;
     pushNotification?: any;
     meta?: any;

package/providers/ThemeProvider.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface ITheme {
+    theme: string;
+    toggleTheme: VoidFunction;
+    setTheme: React.Dispatch<any>;
+}
+export interface IThemeProviderProps extends React.PropsWithChildren<any> {
+    themes?: string[];
+    themeStorageKey?: string;
+}
+export declare const LIGHT_THEME = "light";
+export declare const DARK_THEME = "dark";
+export declare const ThemeContext: React.Context<ITheme>;
+export default function ThemeProvider(props: IThemeProviderProps): JSX.Element;

package/providers/ThemeProvider.js

@@ -0,0 +1,62 @@
+"use strict";
+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;
+};
+exports.__esModule = true;
+exports.ThemeContext = exports.DARK_THEME = exports.LIGHT_THEME = void 0;
+var React = __importStar(require("react"));
+var hooks_1 = require("../hooks");
+exports.LIGHT_THEME = 'light';
+exports.DARK_THEME = 'dark';
+var DEFAULT_THEMES = [
+    exports.LIGHT_THEME,
+    exports.DARK_THEME,
+];
+var DEFAULT_THEME_STORAGE_KEY = 'theme';
+exports.ThemeContext = React.createContext({});
+function ThemeProvider(props) {
+    var themes = props.themes || DEFAULT_THEMES;
+    var themeStorageKey = props.themeStorageKey || DEFAULT_THEME_STORAGE_KEY;
+    var clientStorage = (0, hooks_1.useComponents)().clientStorage;
+    var _a = React.useState(clientStorage.get(themeStorageKey) || themes[0]), theme = _a[0], setTheme = _a[1];
+    var toggleTheme = React.useCallback(function () {
+        var themesExpectedCount = 2;
+        if (themes.length !== themesExpectedCount) {
+            throw new Error('toggleTheme callback can only be used if the number of themes is two');
+        }
+        var lightTheme = themes[0];
+        var darkTheme = themes[1];
+        setTheme(theme === lightTheme ? darkTheme : lightTheme);
+    }, [theme, themes]);
+    React.useEffect(function () {
+        document.querySelector('html').setAttribute('data-theme', theme);
+        clientStorage.set(themeStorageKey, theme);
+    }, [theme, clientStorage, themeStorageKey]);
+    var value = React.useMemo(function () { return ({
+        theme: theme,
+        toggleTheme: toggleTheme,
+        setTheme: setTheme
+    }); }, [theme, toggleTheme]);
+    return (React.createElement(exports.ThemeContext.Provider, { value: value }, props.children));
+}
+exports["default"] = ThemeProvider;

package/reducers/list.d.ts

@@ -10,3 +10,4 @@ export declare const getListItems: (state: any, listId: any) => any;
 export declare const getSelectedIds: (state: any, listId: any) => any;
 export declare const isSelected: (state: any, listId: any, itemId: any) => any;
 export declare const isSelectedAll: (state: any, listId: any) => any;
+export declare const getCheckedIds: (state: any, listId: any) => any;

package/reducers/list.js

@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a;
 exports.__esModule = true;
-exports.isSelectedAll = exports.isSelected = exports.getSelectedIds = exports.getListItems = exports.getIds = exports.getList = exports.isListInitialized = void 0;
+exports.getCheckedIds = exports.isSelectedAll = exports.isSelected = exports.getSelectedIds = exports.getListItems = exports.getIds = exports.getList = exports.isListInitialized = void 0;
 var get_1 = __importDefault(require("lodash-es/get"));
 var isMatch_1 = __importDefault(require("lodash-es/isMatch"));
 var every_1 = __importDefault(require("lodash-es/every"));
@@ -152,3 +152,6 @@ var isSelectedAll = function (state, listId) {
         && (0, every_1["default"])((0, exports.getIds)(state, listId).map(function (id) { return selectedIds.includes(id); })));
 };
 exports.isSelectedAll = isSelectedAll;
+// deprecated
+var getCheckedIds = function (state, listId) { return (0, get_1["default"])(state, ['list', 'selectedIds', listId]) || []; };
+exports.getCheckedIds = getCheckedIds;

package/reducers/router.d.ts

@@ -58,7 +58,6 @@ export declare const normalizeRoutes: (state: any, item: IRouteItem, activeIds:
     models?: string | string[];
     enums?: string | string[];
     role?: string;
-    fetch?: import("../hoc/fetch").IFetchHocConfigFunc;
     preloadData?: (match: Record<string, any>) => (import("../hooks/useFetch").IFetchConfig | import("../ui/list/List/List").IListProps)[];
 };
 /**

package/reducers/router.js

@@ -135,13 +135,13 @@ exports.normalizeRoutes = normalizeRoutes;
  */
 var findRecursive = function (item, predicate, pathItems) {
     if (pathItems === void 0) { pathItems = null; }
-    if (((0, isFunction_1["default"])(predicate) && predicate(item)) || predicate === item.id) {
+    if (((0, isFunction_1["default"])(predicate) && predicate(item)) || predicate === (item === null || item === void 0 ? void 0 : item.id)) {
         if (pathItems) {
             pathItems.push(item);
         }
         return item;
     }
-    if (Array.isArray((item.items))) {
+    if (Array.isArray((item === null || item === void 0 ? void 0 : item.items))) {
         var foundedItem = item.items.find(function (subItem) { return (0, exports.findRecursive)(subItem, predicate, pathItems); }) || null;
         if (foundedItem && pathItems) {
             pathItems.push(item);

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

@@ -0,0 +1,90 @@
+import * as React from 'react';
+export interface IAccordionIcon {
+    /**
+    * Пользовательская иконка открытия
+    * @example 'user
+    */
+    open: React.ReactElement | string;
+    /**
+    * Пользовательская иконка закрытия
+    * @example 'user'
+    */
+    close: React.ReactElement | string;
+}
+/**
+ * Accordion
+ *
+ * Компонент-аккордеон позволяет создавать интерактивные списки или контейнеры,
+ * где содержимое может быть развернуто или свернуто по требованию пользователя.
+ * Каждый элемент аккордеона может быть раскрытым или свернутым, и пользователь может
+ * изменять их состояние путем нажатия на соответствующий заголовок элемента.
+ *
+ * Компонент `Accordion` обычно используется для создания разделов, подразделов или
+ * списков, где необходимо показывать или скрывать дополнительную информацию по требованию.
+ *
+ * Внутри компонента `Accordion` могут быть использованы дочерние элементы `AccordionItem`,
+ * каждый из которых представляет отдельный элемент аккордеона с заголовком и содержимым.
+ * При нажатии на заголовок, соответствующий элемент может быть развернут или свернут.
+ *
+ * Примечание: В компоненте `Accordion` должен быть указан хотя бы один дочерний элемент `AccordionItem`.
+ */
+export interface IAccordionProps extends IUiComponent {
+    /**
+    * Дочерние элементы
+    */
+    children?: React.ReactNode;
+    /**
+     * Переводит Accordion в выключенное состояние
+     * @example true
+     */
+    disabled?: boolean;
+    /**
+     * Пользовательская иконка svg или название иконки или объект с иконками open и close
+     * @example 'circle'
+     */
+    icon?: IAccordionIcon | React.ReactElement | string;
+    /**
+   * Включает режим в котором можно открыть только один AccordionItem
+   * @example true
+   */
+    hasOneOpenItem?: boolean;
+    /**
+     * Название AccordionItem
+     * @example 'Подробнее'
+     */
+    title?: string;
+    /**
+     * Тема аккордеона
+     */
+    theme?: 'light' | 'dark' | 'intermediate';
+    /**
+     * Номер активного AccordionItem, который может меняться динамический или быть статичным
+     * @example 1
+     */
+    activeKey?: number;
+    /**
+     * Вызываемая функция при каждом изменении состояния
+     * @example {() => {console.log('success')}}
+     */
+    onChange?: () => void;
+    /**
+     * Стилизация позиционирования.
+     * При значении "top" верхняя часть шапки будет закруглена.
+     * @example 'top'
+     */
+    position?: 'bottom' | 'middle' | 'top';
+    /**
+     * Отображать ли иконку у AccordionItem
+     */
+    showIcon?: boolean;
+}
+export interface IAccordionViewProps extends IAccordionProps {
+    toggleAccordion?: (number: any) => void;
+    toggleCollapse?: (number: any) => void;
+    childIndex?: number;
+    isShowMore?: boolean;
+}
+export type IAccordionItemProps = IAccordionProps;
+export type IAccordionItemViewProps = IAccordionViewProps;
+declare function Accordion(props: IAccordionProps): JSX.Element;
+export default Accordion;

package/ui/content/{Collapse/Collapse.js → Accordion/Accordion.js}

@@ -45,43 +45,39 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
-function Collapse(props) {
-    var _a = React.useState([]), state = _a[0], setState = _a[1];
+function Accordion(props) {
+    var _a = React.useState([]), selectedAccordionItems = _a[0], setSelectedAccordionItems = _a[1];
     React.useEffect(function () {
         if (props.onChange) {
-            props.onChange(state);
+            props.onChange();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state]);
+    }, [selectedAccordionItems]);
     var toggleCollapse = function (indexSelected) {
-        if (state.includes(indexSelected)) {
-            var newState = __spreadArray([], state, true);
-            var indexInArray = state.indexOf(indexSelected);
+        if (selectedAccordionItems.includes(indexSelected)) {
+            var newState = __spreadArray([], selectedAccordionItems, true);
+            var indexInArray = selectedAccordionItems.indexOf(indexSelected);
             newState.splice(indexInArray, 1);
-            setState(newState);
+            setSelectedAccordionItems(newState);
         }
         else {
-            var newState = __spreadArray([], state, true);
+            var newState = __spreadArray([], selectedAccordionItems, true);
             newState.push(indexSelected);
-            setState(newState);
+            setSelectedAccordionItems(newState);
         }
     };
     var toggleAccordion = function (indexSelected) {
-        if (state.includes(indexSelected)) {
-            setState([]);
+        if (selectedAccordionItems.includes(indexSelected)) {
+            setSelectedAccordionItems([]);
         }
         else {
-            var newState = [];
-            newState.push(indexSelected);
-            setState(newState);
+            var newSelectedAccordion = [];
+            newSelectedAccordion.push(indexSelected);
+            setSelectedAccordionItems(newSelectedAccordion);
         }
     };
     var components = (0, hooks_1.useComponents)();
-    var CollapseView = components.ui.getView(props.view || 'content.CollapseView');
-    return (React.createElement(CollapseView, __assign({}, props), React.Children.map(props.children, function (child, index) { return React.cloneElement(child, __assign({ style: props.style, activeKey: props.activeKey, isAccordion: props.isAccordion, childIndex: index, toggleAccordion: toggleAccordion, toggleCollapse: toggleCollapse, isShowMore: (state || []).includes(index), icon: props.icon, showIcon: props.showIcon, iconPosition: props.iconPosition, borderless: props.borderless }, child.props)); })));
+    var AccordionView = components.ui.getView(props.view || 'content.AccordionView');
+    return (React.createElement(AccordionView, __assign({}, props), React.Children.map(props.children, function (child, index) { return React.cloneElement(child, __assign({ style: props.style, activeKey: props.activeKey, childIndex: index, toggleCollapse: toggleCollapse, toggleAccordion: toggleAccordion, hasOneOpenItem: props.hasOneOpenItem, isShowMore: (selectedAccordionItems || []).includes(index), icon: props.icon, showIcon: props.showIcon }, child.props)); })));
 }
-Collapse.defaultProps = {
-    iconPosition: 'right',
-    showIcon: true
-};
-exports["default"] = Collapse;
+exports["default"] = Accordion;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IAccordionItemProps } from './Accordion';
+declare function AccordionItem(props: IAccordionItemProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare namespace AccordionItem {
+    var defaultProps: import("./Accordion").IAccordionViewProps;
+}
+export default AccordionItem;

package/ui/content/Accordion/AccordionItem.js

@@ -0,0 +1,25 @@
+"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);
+};
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+function AccordionItem(props) {
+    var components = (0, hooks_1.useComponents)();
+    return components.ui.renderView(props.view || 'content.AccordionItemView', __assign({}, props));
+}
+AccordionItem.defaultProps = {
+    title: 'Accordion',
+    positionStyle: 'top',
+    theme: 'light',
+    showIcon: true
+};
+exports["default"] = AccordionItem;

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

@@ -0,0 +1,3 @@
+import AccordionItem from './AccordionItem';
+import Accordion from './Accordion';
+export { AccordionItem, Accordion, };

package/ui/content/Accordion/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Accordion = exports.AccordionItem = void 0;
+var AccordionItem_1 = __importDefault(require("./AccordionItem"));
+exports.AccordionItem = AccordionItem_1["default"];
+var Accordion_1 = __importDefault(require("./Accordion"));
+exports.Accordion = Accordion_1["default"];

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

@@ -1,32 +1,46 @@
 import React from 'react';
-export interface IAlertProps {
-    view?: any;
-    className?: CssClassName;
+/**
+ * Alert
+ *
+ * Компонент оповещения, который отображает сообщения для пользователя.
+ * Он может быть использован для показа уведомлений, предупреждений или ошибок,
+ * которые требуют внимания пользователя.
+ *
+ * Компонент `Alert` может содержать текстовое сообщение и дополнительное описание,
+ * а также опциональную кнопку для закрытия оповещения.
+ *
+ * Оповещения могут иметь различные типы, такие как 'success', 'info', 'warning', 'error'
+ * или другие пользовательские типы.
+ *
+ * Компонент также предлагает настройки для отображения иконки, анимации, а также
+ * обратного вызова при закрытии оповещения.
+ */
+export interface IAlertProps extends IUiComponent {
     /**
     * Дочерние элементы
+    * @example {<span>children</span>}
     */
     children?: React.ReactNode;
     /**
      * Типы Оповещений
-     * @example {'info'}
+     * @example 'info'
      */
-    type: 'success' | 'info' | 'warning' | 'error' | 'default' | string;
+    type?: 'success' | 'info' | 'warning' | 'error' | 'default' | string;
     /** Основное сообщения Оповещения
-     * @example {'Sending is confirmed!'}
+     * @example 'Sending is confirmed!'
      */
     message?: string;
     /** Дополнительное содрежание сообщения.
-     * @example {'Please, check your email.'}
+     * @example 'Please, check your email.'
      */
     description?: string;
-    style?: React.CSSProperties;
     /**
      *  Нужно ли отображать кнопку, чтобы закрыть Оповещение
      */
     showClose?: boolean;
     /**
      * Нужно ли отображать иконку, соответствующую типа Оповещения
-     * @example {true}
+     * @example true
      */
     showIcon?: boolean;
     /**
@@ -34,12 +48,17 @@ export interface IAlertProps {
      * @example {() => console.log('this is callback')}
      */
     onClose?: () => void;
+    /**
+    * Флаг, который включает анимацию
+    * @example true
+    */
     animation?: boolean;
     /**
      * Время анимации в миллисекундах
-     * @example {1000}
+     * @example 1000
      */
     animationDuration?: number;
+    [key: string]: any;
 }
 export interface IAlertViewProps extends IAlertProps {
     isExist: boolean;

package/ui/content/Avatar/Avatar.d.ts

@@ -1,56 +1,58 @@
-export interface IAvatarProps {
+/// <reference types="react" />
+/**
+ * Avatar
+ *
+ * Компонент аватара, который отображает изображение пользователя или иконку.
+ * Он может использоваться для представления пользователя, контакта или профиля.
+ *
+ * Компонент `Avatar` позволяет указать размер, форму, изображение или иконку,
+ * а также добавить альтернативный текст и статус онлайна.
+ *
+ * Если изображение аватара не загружается, можно показать альтернативный текст
+ * или иконку вместо него.
+ */
+export interface IAvatarProps extends IUiComponent {
     /**
      * Альтернативный текст для изображения
-     * @example {'default image'}
+     * @example 'default image'
      */
     alt?: string;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
     /**
      * Дочерние элементы
      */
-    children?: CustomView;
+    children?: React.ReactNode;
     /**
      * Размер аватара
-     * @example {'md'}
+     * @example 'md'
      */
-    size?: Size | 'x-large' | number;
+    size?: Size | number;
     /**
      * Форма аватара
-     * @example {'circle'}
+     * @example 'circle'
      */
     shape?: 'circle' | 'square' | string;
     /**
      * Ссылка на изображение для аватара
-     * @example {'https://user/avatar.png'}
+     * @example 'https://user/avatar.png'
      */
     src?: string;
+    /**
+    * Набор адаптивных изображений
+    */
     srcSet?: string;
     /**
      * Статус онлайна
-     * @example {true}
+     * @example true
      */
     status?: boolean;
-    /**
-     * Объект CSS стилей
-     * @example {width: '30px'}
-     */
-    style?: CustomStyle;
     /**
      * Заголовок аватарки
-     * @example {'Avatar'}
+     * @example 'Avatar'
      */
     title?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Наличие обводки вокруг аватара
-     * @example {true}
+     * @example true
      */
     hasBorder?: boolean;
 }
@@ -59,7 +61,7 @@ export interface IAvatarViewProps extends IAvatarProps {
     onError: () => void;
     formattedTitle: () => void;
 }
-declare function Avatar(props: IAvatarProps): any;
+declare function Avatar(props: IAvatarProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 declare namespace Avatar {
     var defaultProps: {
         size: string;

package/ui/content/Avatar/AvatarGroup.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 export interface AvatarGroupProps {
-    view?: any;
-    children?: CustomView[];
-    style?: React.CSSProperties;
+    view?: CustomView;
+    children?: React.ReactNode[];
+    style?: CustomStyle;
     maxCount?: number;
 }
 export type IAvatarGroupViewProps = AvatarGroupProps;