@steroidsjs/core 3.0.0-beta.11 → 3.0.0-beta.110

package/hooks/useTree.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { IButtonProps } from '@steroidsjs/core/ui/form/Button/Button';
+export interface ITreeItem extends IButtonProps {
+    /**
+     * Идентификатор узла
+     */
+    id?: string | number;
+    /**
+     * Вложенные элементы
+     * @example
+     * [
+     *  {
+     *   id: 2,
+     *   label: 'Nested element',
+     *   items: [...]
+     *  }
+     * ]
+     */
+    items?: ITreeItem[];
+    /**
+     * Скрыть или показать узел
+     * @example true
+     */
+    visible?: boolean;
+}
+export interface IPreparedTreeItem extends ITreeItem {
+    uniqueId: string;
+    index: number;
+    level: number;
+    isOpened: boolean;
+    isSelected: boolean;
+    hasItems: boolean;
+    onClick: (e: Event | React.MouseEvent | any) => void;
+    className?: CssClassName;
+}
+export interface ITreeOutput {
+    treeItems: IPreparedTreeItem[];
+}
+export interface ITreeConfig {
+    /**
+     * Коллекция с узлами. Также можно передать идентификатор роута, тогда компонент найдет все
+     * вложенные роуты и отобразит их в виде дерева.
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'Root',
+     *   items: [...]
+     *  }
+     * ] | 'root'
+     */
+    items?: ITreeItem[] | string;
+    /**
+     * Ограничивает максимальный уровень вложенности дерева
+     * @example 2
+     */
+    level?: number;
+    /**
+     * Ключ для доступа к вложенным элементам узла
+     * @example 'items'
+     */
+    itemsKey?: string;
+    /**
+     * Идентификатор узла, которой нужно отобразить в раскрытом виде
+     * @example 2
+     */
+    selectedItemId?: string | number;
+    /**
+     * Максимальный уровень вложенности, до которого все узлы будут отображаться в развёрнутом виде
+     * @example 1
+     */
+    autoOpenLevels?: number;
+    /**
+     * Обработчик на клик по узлу
+     * @param args
+     */
+    onExpand?: (...args: any[]) => any;
+    /**
+     *  Используется для управления раскрытием всех элементов в дереве
+     * @example: true
+     */
+    alwaysOpened?: boolean;
+    /**
+     *  Текущая страница, используется для корректного отображения пагинации
+     * @example: 1
+     */
+    currentPage?: number;
+    /**
+     *  Количество элементов на странице, используется для корректного отображения пагинации
+     * @example: 4
+     */
+    itemsOnPage?: number;
+    /**
+     *  Параметры роутинга
+     * @example: true
+     */
+    routerParams?: any;
+}
+export default function useTree(config: ITreeConfig): ITreeOutput;

package/hooks/useTree.js

@@ -0,0 +1,168 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var isString_1 = __importDefault(require("lodash-es/isString"));
+var omit_1 = __importDefault(require("lodash-es/omit"));
+var join_1 = __importDefault(require("lodash-es/join"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var isNil_1 = __importDefault(require("lodash-es/isNil"));
+var keys_1 = __importDefault(require("lodash-es/keys"));
+var useSelector_1 = __importDefault(require("./useSelector"));
+var router_1 = require("../reducers/router");
+var INITIAL_CURRENT_LEVEL = 0;
+var DOT_SEPARATOR = '.';
+var EMPTY_PARENT_ID = '';
+var FIRST_LEVEL_PARENT_ID = '0';
+var defaultProps = {
+    itemsKey: 'items',
+    autoOpenLevels: 0
+};
+var getTreeItemUniqueId = function (item, index, parentId) { return (0, join_1["default"])([parentId || FIRST_LEVEL_PARENT_ID, String(item.id || index)], DOT_SEPARATOR); };
+var routeToItem = function (route, routerParams) {
+    var routeItems = (Array.isArray(route.items)
+        ? route.items.map(function (r) { return routeToItem(r, routerParams); })
+        : Object.keys(route.items || {}).map(function (id) { return routeToItem(route.items[id], routerParams); })).filter(function (r) { return r.visible; });
+    return {
+        id: route.id.toLowerCase(),
+        label: route.label || route.title,
+        visible: route.isNavVisible !== false,
+        toRoute: routeItems.length === 0 ? route.id : null,
+        toRouteParams: routeItems.length === 0 ? routerParams : null,
+        items: routeItems,
+        icon: route.icon
+    };
+};
+var findChildById = function (sourceItems, itemId, primaryKey, parentId, level) {
+    if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }
+    if (level === void 0) { level = 1; }
+    if ((0, isString_1["default"])(sourceItems)) {
+        return null;
+    }
+    var foundedItem = null;
+    (sourceItems || []).forEach(function (item, index) {
+        var uniqueId = getTreeItemUniqueId(item, index, parentId);
+        if (!foundedItem && (item.id === itemId || uniqueId === itemId)) {
+            foundedItem = __assign(__assign({}, item), { uniqueId: uniqueId, level: level });
+        }
+        if (!foundedItem) {
+            foundedItem = findChildById(item[primaryKey], itemId, primaryKey, uniqueId, level + 1);
+        }
+    });
+    return foundedItem;
+};
+var getAutoExpandedItems = function (sourceItems, selectedItemId, primaryKey, autoOpenLevels, parentId, level) {
+    if (autoOpenLevels === void 0) { autoOpenLevels = 1; }
+    if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }
+    if (level === void 0) { level = 1; }
+    var opened = {};
+    (sourceItems || []).forEach(function (item, index) {
+        var uniqueId = getTreeItemUniqueId(item, index, parentId);
+        if (autoOpenLevels >= level) {
+            opened[uniqueId] = true;
+        }
+        if (selectedItemId === item.id) {
+            opened[uniqueId] = true;
+        }
+        if (selectedItemId) {
+            var finedItem = findChildById(item[primaryKey], selectedItemId, primaryKey);
+            if (finedItem) {
+                opened[uniqueId] = true;
+            }
+        }
+        opened = __assign(__assign({}, opened), getAutoExpandedItems(item[primaryKey], selectedItemId, primaryKey, autoOpenLevels, uniqueId, level + 1));
+    });
+    return opened;
+};
+var isSelectedItem = function (selectedUniqueId, uniqueId, activeRouteIds, item, routerParams) { return (selectedUniqueId === uniqueId
+    || ((activeRouteIds || []).includes(item.toRoute)
+        && (0, isEqual_1["default"])(item.toRouteParams || {}, (0, omit_1["default"])(routerParams, (0, keys_1["default"])(item.toRouteParams))))); };
+function useTree(config) {
+    // Get primary key
+    var primaryKey = config.itemsKey || defaultProps.itemsKey;
+    var _a = (0, react_1.useState)(null), selectedUniqueId = _a[0], setSelectedUniqueId = _a[1];
+    var _b = (0, react_1.useState)({}), expandedItems = _b[0], setExpandedItems = _b[1];
+    //Redux connection
+    var _c = (0, useSelector_1["default"])(function (state) { return ({
+        routes: (0, isString_1["default"])(config.items) ? (0, router_1.getNavItems)(state, config.items) : null,
+        selectedItemId: (0, isString_1["default"])(config.items) ? (0, router_1.getRouteId)(state) : config.selectedItemId,
+        activeRouteIds: (0, router_1.getActiveRouteIds)(state),
+        routerParams: (0, router_1.getRouterParams)(state)
+    }); }), routes = _c.routes, selectedItemId = _c.selectedItemId, activeRouteIds = _c.activeRouteIds, routerParams = _c.routerParams;
+    var items = (0, react_1.useMemo)(function () {
+        if (!(0, isNil_1["default"])(routes)) {
+            return routes
+                .map(function (route) { return routeToItem(route, config.routerParams); })
+                .filter(function (route) { return route.visible; });
+        }
+        if (Array.isArray(config.items)) {
+            return config.items;
+        }
+        return [];
+    }, [config.items, config.routerParams, routes]);
+    // Initial expanded items
+    (0, react_1.useEffect)(function () {
+        // TODO add clientStorage
+        setExpandedItems(getAutoExpandedItems(items, selectedItemId, primaryKey, config.autoOpenLevels));
+        var selectedItem = findChildById(items, selectedItemId, primaryKey);
+        setSelectedUniqueId(selectedItem ? selectedItem.uniqueId : null);
+    }, [items]);
+    var onExpand = (0, react_1.useCallback)(function (e, uniqueId, item) {
+        var _a;
+        e.preventDefault();
+        if (config.onExpand) {
+            config.onExpand.call(null, e, item);
+        }
+        setSelectedUniqueId(selectedUniqueId === uniqueId ? null : uniqueId);
+        if (!(0, isEmpty_1["default"])(item[primaryKey])) {
+            setExpandedItems(__assign(__assign({}, expandedItems), (_a = {}, _a[uniqueId] = !expandedItems[uniqueId], _a)));
+        }
+    }, [config.onExpand, expandedItems, primaryKey, selectedUniqueId]);
+    var resultTreeItems = (0, react_1.useMemo)(function () {
+        var getItems = function (sourceItems, parentId, currentLevel) {
+            if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }
+            if (currentLevel === void 0) { currentLevel = INITIAL_CURRENT_LEVEL; }
+            if (config.level && currentLevel === config.level) {
+                return [];
+            }
+            if (config.currentPage && config.itemsOnPage && currentLevel === INITIAL_CURRENT_LEVEL) {
+                var startIndex = (config.currentPage - 1) * config.itemsOnPage;
+                sourceItems = sourceItems.slice(startIndex, startIndex + config.itemsOnPage);
+            }
+            return (sourceItems || []).reduce(function (treeItems, item, index) {
+                var uniqueId = getTreeItemUniqueId(item, index, parentId);
+                var treeItem = __assign(__assign({}, item), { index: index, level: currentLevel, uniqueId: uniqueId, isOpened: config.alwaysOpened || !!expandedItems[uniqueId], hasItems: !(0, isEmpty_1["default"])(item[primaryKey]), isSelected: isSelectedItem(selectedUniqueId, uniqueId, activeRouteIds, item, routerParams), onClick: function (e) { return onExpand(e, uniqueId, item); } });
+                // Ограничивает максимальный уровень вложенности дерева
+                if (config.level && (currentLevel === config.level - 1)) {
+                    treeItem.hasItems = false;
+                }
+                treeItems.push(treeItem);
+                if (treeItem.isOpened) {
+                    var nestedItem = getItems(item[primaryKey], uniqueId, currentLevel + 1);
+                    treeItems = treeItems.concat(nestedItem).filter(Boolean);
+                }
+                return treeItems;
+            }, []);
+        };
+        return getItems(items);
+        // eslint-disable-next-line max-len
+    }, [activeRouteIds, config.alwaysOpened, config.currentPage, config.itemsOnPage, config.level, expandedItems, items, onExpand, primaryKey, routerParams, selectedUniqueId]);
+    return {
+        treeItems: resultTreeItems
+    };
+}
+exports["default"] = useTree;

package/index.d.ts

@@ -48,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
@@ -89,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.11",
+ "version": "3.0.0-beta.110",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {
@@ -18,15 +18,20 @@
   "url": "https://github.com/steroids/react/issues"
  },
  "scripts": {
-  "docs": "typedoc --ignoreCompilerErrors --json typedoc.json .",
+  "docs": "node docs/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 docs/docs-autogen-result.json dist/ && cp docs/locales/en.json dist/",
   "watch": "tsc -p tsconfig-debug.json"
  },
  "dependencies": {
+  "@maskito/core": "1.7.0",
+  "@maskito/kit": "1.7.0",
+  "@maskito/react": "^0.12.1",
+  "@splidejs/react-splide": "^0.7.12",
   "axios": "^0.21.1",
   "connected-react-router": "^6.9.3",
+  "dayjs": "^1.11.9",
   "domready": "^1.0.8",
   "dot-prop-immutable": "^2.1.0",
   "fileup-core": "^1.2.7",
@@ -36,18 +41,16 @@
   "load-js": "^3.0.3",
   "lodash": "^4.17.21",
   "lodash-es": "^4.17.21",
-  "moment": "^2.29.1",
   "path-to-regexp": "^1.7.0",
   "qs": "^6.9.4",
   "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",
@@ -83,8 +86,11 @@
   "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",
+  "typedoc": "^0.21.0",
   "typescript": "^4.9.5"
  }
 }

package/providers/ComponentsProvider.d.ts

@@ -1,22 +1,30 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
+import { IHttpComponent } from '../components/HttpComponent';
+import { IHtmlComponent } from '../components/HtmlComponent';
+import { IWebSocketComponent } from '../components/WebSocketComponent';
+import { IMetaComponent } from '../components/MetaComponent';
+import { IStoreComponent } from '../components/StoreComponent';
+import { IClientStorageComponent } from '../components/ClientStorageComponent';
+import { ILocaleComponent } from '../components/LocaleComponent';
+import { IUiApplicationComponent } from '../components/UiComponent';
+import { IResourceComponent } from '../components/ResourceComponent';
 declare global {
     interface Window {
         SteroidsComponents: IComponents;
     }
 }
 export interface IComponents {
-    api?: any;
-    clientStorage?: any;
-    html?: any;
-    http?: any;
-    locale?: any;
-    store?: any;
-    ui?: any;
-    resource?: any;
-    ws?: any;
+    clientStorage?: IClientStorageComponent;
+    html?: IHtmlComponent;
+    http?: IHttpComponent;
+    locale?: ILocaleComponent;
+    store?: IStoreComponent;
+    ui?: IUiApplicationComponent;
+    resource?: IResourceComponent;
+    ws?: IWebSocketComponent;
     pushNotification?: any;
-    meta?: any;
+    meta?: IMetaComponent;
     [key: string]: any;
 }
 export interface IComponentsProviderProps extends PropsWithChildren<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

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