@steroidsjs/core 3.0.0-beta.9 → 3.0.0-beta.91

package/ui/content/DropDown/DropDown.d.ts

@@ -1,25 +1,36 @@
 import * as React from 'react';
 import { IAbsolutePositioningInputProps, IAbsolutePositioningOutputProps } from '../../../hooks/useAbsolutePositioning';
+/**
+ * Menu
+ *
+ * Компонент, представляющий меню с элементами, которые могут быть выбраны или нажаты.
+ * Компонент позволяет отображать и скрывать содержимое меню, а также управлять его позиционированием.
+ */
 export interface IDropDownProps extends IAbsolutePositioningInputProps {
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
     /**
      * Содержимое DropDown (компонент или jsx-код)
      * @example () => Component
      */
     content?: () => React.ReactNode;
-    /**
-     * Переопределение view React компонента для кастомизациии отображения
-     * @example MyCustomView
-     */
-    view?: any;
     /**
      * В каком случае закрывать DropDown. По-умолчанию - `click-away`
      * @example click-any
      */
-    closeMode?: 'click-away' | 'click-any';
+    closeMode?: 'click-away' | 'click-any' | string;
+    /**
+    * Позволяет управлять отображением указателя
+    * @example true
+    */
+    hasArrow?: boolean;
+    /**
+    * Переопределение view React компонента для кастомизациии отображения
+    * @example MyCustomView
+    */
+    view?: CustomView;
+    /**
+    * Дополнительный CSS-класс
+    */
+    className?: CssClassName;
 }
 export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioningOutputProps {
     /**
@@ -40,6 +51,7 @@ declare namespace DropDown {
         gap: number;
         position: string;
         closeMode: string;
+        hasArrow: boolean;
     };
 }
 export default DropDown;

package/ui/content/DropDown/DropDown.js

@@ -1,4 +1,15 @@
 "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);
@@ -82,14 +93,15 @@ function DropDown(props) {
         isComponentExist && (
         // TODO Change Portal to global
         React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(DropDownView, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide })))));
+            React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
 }
 DropDown.defaultProps = {
-    autoPositioning: false,
+    autoPositioning: true,
     componentDestroyDelay: 300,
     defaultVisible: false,
     gap: 15,
     position: 'bottom',
-    closeMode: 'click-away'
+    closeMode: 'click-away',
+    hasArrow: true
 };
 exports["default"] = DropDown;

package/ui/content/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 /**
  * Install the latest free version of Font Awesome via yarn:
  * ```
@@ -17,7 +17,12 @@ import * as React from 'react';
  *
  * That get the icon used <Icon name={'icon-name'} />
  */
-export interface IIconProps {
+/**
+ * Icon
+ *
+ * Компонент, представляющий иконку. Иконки могут быть импортированы при старте приложения.
+ */
+export interface IIconProps extends Omit<IUiComponent, 'className' | 'style'>, Partial<HTMLElement> {
     /**
      * Имя иконки (латиницей). Импорт иконок происходит на старте приложения.
      * @example create
@@ -28,12 +33,13 @@ export interface IIconProps {
      * @example Добавить запись
      */
     title?: string;
-    className?: CssClassName;
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: React.ComponentType;
+    *  Должен ли данный элемент участвовать в последовательной навигации
+    */
+    tabIndex?: number;
+    /**
+    * Функция которая вызывается при клике по иконке
+    */
     onClick?: any;
     [key: string]: any;
 }

package/ui/content/Icon/Icon.js

@@ -17,6 +17,7 @@ exports.__esModule = true;
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
 var isString_1 = __importDefault(require("lodash-es/isString"));
 var hooks_1 = require("../../../hooks");
+var DEFAULT_ICON_NAME = 'default_24x24';
 function Icon(props) {
     var components = (0, hooks_1.useComponents)();
     var name = props.name;
@@ -42,7 +43,9 @@ function Icon(props) {
             }
         }
         if (!icon) {
-            throw new Error('Not found icon with name "' + name + '"');
+            // eslint-disable-next-line no-console
+            console.warn('Not found icon with name "' + name + '"');
+            icon = components.ui.getIcon(DEFAULT_ICON_NAME);
         }
     }
     return components.ui.renderView(props.view || 'content.IconView', __assign(__assign({}, props), { icon: icon }));

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

@@ -0,0 +1,104 @@
+/// <reference types="react" />
+export interface ITaskTag {
+    id: number;
+    message: string;
+    type: string;
+}
+export interface IKanbanTask {
+    id: string;
+    title: string;
+    description?: string;
+    priority?: string;
+    assigner?: any;
+    tags?: ITaskTag[];
+    status?: any;
+}
+export interface IDragEndResult {
+    draggableId: number;
+    type: string;
+    source: {
+        index: number;
+        droppableId: number;
+    };
+    reason: string;
+    mode: string;
+    destination: {
+        droppableId: number;
+        index: number;
+    };
+    combine: null;
+}
+export interface IKanbanColumn {
+    id: string;
+    title: string;
+    tasks: IKanbanTask[];
+}
+interface IKanbanProps extends IUiComponent {
+    /**
+     * Компонент обертка для инициализации области куда можно переместить элемент из библиотеки react-beautiful-dnd
+     * @example Droppable
+     */
+    droppableComponent: any;
+    /**
+     * Компонент обертка для регистрации элемента который можно переместить из библиотеки react-beautiful-dnd
+     * @example Draggable
+     */
+    draggableComponent: any;
+    /**
+     * Общий контекст обертка из библиотеки react-beautiful-dnd
+     * @example DragDropContext
+     */
+    dndContext: any;
+    /**
+     * Коллекция с наименованиями и свойствами колонок в таблице
+     * @example [
+     *             {
+     *              id: 'column-1',
+     *              title: 'col1',
+     *              tasks: [{ content: 'item1', id: 'task-1' }],
+     *             },
+     *             {
+     *              id: 'column-2',
+     *              title: 'col2',
+     *              tasks: [],
+     *             }
+     *          ]
+     */
+    columns?: IKanbanColumn[];
+    /**
+     * Обработчик события окончания перетаскивания карточки или колонки
+     * В result передается объект с информацией о событии
+     * @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;
+    [key: string]: any;
+}
+export interface IKanbanTaskViewProps {
+    task: IKanbanTask;
+    index: number;
+    draggableComponent: any;
+}
+export interface IKanbanColumnViewProps {
+    column: IKanbanColumn;
+    columnIndex: number;
+    droppableComponent: any;
+    draggableComponent: any;
+    renderTask: (task: IKanbanTask, index: number) => JSX.Element;
+}
+export type IKanbanViewProps = IKanbanProps;
+export default function Kanban(props: IKanbanProps): JSX.Element;
+export {};

package/ui/content/Kanban/Kanban.js

@@ -0,0 +1,56 @@
+"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;
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../../hooks");
+var hooks_2 = require("./hooks");
+function Kanban(props) {
+    var components = (0, hooks_1.useComponents)();
+    var DragDropContext = props.dndContext;
+    var _a = (0, hooks_2.useKanban)({
+        kanbanId: props.kanbanId,
+        columns: props.columns,
+        onDragEnd: props.onDragEnd
+    }), columns = _a.columns, onDragEnd = _a.onDragEnd;
+    // Task
+    var Task = components.ui.getView('content.KanbanTaskView');
+    var renderTask = (0, react_1.useCallback)(function (task, index) { return (react_1["default"].createElement(Task, { key: task.id, task: task, index: index, draggableComponent: props.draggableComponent })); }, [Task, props.draggableComponent]);
+    // Column
+    var Column = components.ui.getView('content.KanbanColumnView');
+    var renderColumn = (0, react_1.useCallback)(function (column, index) { return (react_1["default"].createElement(Column, { key: column.id, column: column, columnIndex: index, draggableComponent: props.draggableComponent, droppableComponent: props.droppableComponent, renderTask: renderTask })); }, [Column, props.draggableComponent, props.droppableComponent, renderTask]);
+    return (react_1["default"].createElement(DragDropContext, { onDragEnd: onDragEnd }, components.ui.renderView(props.view || 'content.KanbanView', __assign(__assign({}, props), { columns: columns, renderColumn: renderColumn }))));
+}
+exports["default"] = Kanban;

package/ui/content/Kanban/actions/index.d.ts

@@ -0,0 +1,2 @@
+import { KANBAN_MOVE_COLUMN, KANBAN_INIT, KANBAN_MOVE_TASK, kanbanInit, kanbanMoveColumn, kanbanMoveTask } from './kanban';
+export { KANBAN_MOVE_COLUMN, KANBAN_INIT, KANBAN_MOVE_TASK, kanbanInit, kanbanMoveColumn, kanbanMoveTask, };

package/ui/content/Kanban/actions/index.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+exports.kanbanMoveTask = exports.kanbanMoveColumn = exports.kanbanInit = exports.KANBAN_MOVE_TASK = exports.KANBAN_INIT = exports.KANBAN_MOVE_COLUMN = void 0;
+var kanban_1 = require("./kanban");
+exports.KANBAN_MOVE_COLUMN = kanban_1.KANBAN_MOVE_COLUMN;
+exports.KANBAN_INIT = kanban_1.KANBAN_INIT;
+exports.KANBAN_MOVE_TASK = kanban_1.KANBAN_MOVE_TASK;
+exports.kanbanInit = kanban_1.kanbanInit;
+exports.kanbanMoveColumn = kanban_1.kanbanMoveColumn;
+exports.kanbanMoveTask = kanban_1.kanbanMoveTask;

package/ui/content/Kanban/actions/kanban.d.ts

@@ -0,0 +1,19 @@
+export declare const KANBAN_INIT = "@kanban/init";
+export declare const KANBAN_MOVE_TASK = "@kanban/move_task";
+export declare const KANBAN_MOVE_COLUMN = "@kanban/move_column";
+export declare const kanbanInit: (kanbanId: any, payload: any) => {
+    type: string;
+    payload: any;
+};
+export declare const kanbanMoveTask: (kanbanId: any, source: any, destination: any) => {
+    type: string;
+    kanbanId: any;
+    source: any;
+    destination: any;
+};
+export declare const kanbanMoveColumn: (kanbanId: any, source: any, destination: any) => {
+    type: string;
+    kanbanId: any;
+    source: any;
+    destination: any;
+};

package/ui/content/Kanban/actions/kanban.js

@@ -0,0 +1,25 @@
+"use strict";
+exports.__esModule = true;
+exports.kanbanMoveColumn = exports.kanbanMoveTask = exports.kanbanInit = exports.KANBAN_MOVE_COLUMN = exports.KANBAN_MOVE_TASK = exports.KANBAN_INIT = void 0;
+exports.KANBAN_INIT = '@kanban/init';
+exports.KANBAN_MOVE_TASK = '@kanban/move_task';
+exports.KANBAN_MOVE_COLUMN = '@kanban/move_column';
+var kanbanInit = function (kanbanId, payload) { return ({
+    type: exports.KANBAN_INIT,
+    payload: payload
+}); };
+exports.kanbanInit = kanbanInit;
+var kanbanMoveTask = function (kanbanId, source, destination) { return ({
+    type: exports.KANBAN_MOVE_TASK,
+    kanbanId: kanbanId,
+    source: source,
+    destination: destination
+}); };
+exports.kanbanMoveTask = kanbanMoveTask;
+var kanbanMoveColumn = function (kanbanId, source, destination) { return ({
+    type: exports.KANBAN_MOVE_COLUMN,
+    kanbanId: kanbanId,
+    source: source,
+    destination: destination
+}); };
+exports.kanbanMoveColumn = kanbanMoveColumn;

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

@@ -0,0 +1,2 @@
+import useKanban from './useKanban';
+export { useKanban };

package/ui/content/Kanban/hooks/index.js

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

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

@@ -0,0 +1,25 @@
+import { IDragEndResult, IKanbanColumn } from '../Kanban';
+export interface IKanbanConfig {
+    /**
+     * Идентификатор канбан доски
+     * @example TasksKanban
+     */
+    kanbanId?: string;
+    /**
+     * Колонки канбан доски
+     */
+    columns?: IKanbanColumn[];
+    /**
+     * Обработчик события окончания перетаскивания карточки или колонки
+     */
+    onDragEnd: (result: IDragEndResult) => void;
+}
+export declare const DEFAULT_COLUMNS: {
+    id: string;
+    title: string;
+    tasks: any[];
+}[];
+export default function useKanban(config: IKanbanConfig): {
+    columns: any;
+    onDragEnd: (result: any) => void;
+};

package/ui/content/Kanban/hooks/useKanban.js

@@ -0,0 +1,76 @@
+"use strict";
+exports.__esModule = true;
+exports.DEFAULT_COLUMNS = void 0;
+var react_use_1 = require("react-use");
+var react_1 = require("react");
+var hooks_1 = require("../../../../hooks");
+var reducers_1 = require("../reducers");
+var actions_1 = require("../actions");
+var COLUMNS_DROPPABLE_ID = 'all-columns';
+exports.DEFAULT_COLUMNS = [
+    {
+        id: 'column-1',
+        title: 'TO DO',
+        tasks: []
+    },
+    {
+        id: 'column-2',
+        title: 'IN PROGRESS',
+        tasks: []
+    },
+    {
+        id: 'column-3',
+        title: 'IN REVIEW',
+        tasks: []
+    },
+    {
+        id: 'column-4',
+        title: 'DONE',
+        tasks: []
+    },
+];
+function useKanban(config) {
+    // Get kanban from redux state
+    var kanban = (0, hooks_1.useSelector)(function (state) { return (0, reducers_1.getKanban)(state, config.kanbanId); });
+    var dispatch = (0, hooks_1.useDispatch)();
+    // move card
+    var moveCard = (0, react_1.useCallback)(function (source, destination) {
+        dispatch((0, actions_1.kanbanMoveTask)(config.kanbanId, source, destination));
+    }, [config.kanbanId, dispatch]);
+    // move column
+    var moveColumn = (0, react_1.useCallback)(function (source, destination) {
+        dispatch((0, actions_1.kanbanMoveColumn)(config.kanbanId, source, destination));
+    }, [config.kanbanId, dispatch]);
+    var onDragEnd = function (result) {
+        if (config.onDragEnd) {
+            config.onDragEnd(result);
+        }
+        // drop outside the column
+        if (!result.destination) {
+            return;
+        }
+        var source = result.source, destination = result.destination;
+        if (source.droppableId === COLUMNS_DROPPABLE_ID) {
+            // handle the column movement
+            moveColumn(source, destination);
+        }
+        else {
+            // handle the task card movement
+            moveCard(source, destination);
+        }
+    };
+    // Init kanban in redux store
+    (0, react_use_1.useMount)(function () {
+        if (!kanban) {
+            dispatch((0, actions_1.kanbanInit)(config.kanbanId, {
+                kanbanId: config.kanbanId,
+                columns: config.columns || exports.DEFAULT_COLUMNS
+            }));
+        }
+    });
+    return {
+        columns: kanban === null || kanban === void 0 ? void 0 : kanban.columns,
+        onDragEnd: onDragEnd
+    };
+}
+exports["default"] = useKanban;

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

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

package/ui/content/Kanban/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Kanban_1 = __importDefault(require("./Kanban"));
+exports["default"] = Kanban_1["default"];

package/ui/content/Kanban/reducers/index.d.ts

@@ -0,0 +1,3 @@
+import kanban, { getKanban } from './kanban';
+export { getKanban };
+export default kanban;

package/ui/content/{Icon/demo/icon.js → Kanban/reducers/index.js}

@@ -22,11 +22,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 Icon_1 = __importDefault(require("../Icon"));
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Icon_1["default"], { name: 'star' }))); });
+exports.getKanban = void 0;
+var kanban_1 = __importStar(require("./kanban"));
+exports.getKanban = kanban_1.getKanban;
+exports["default"] = kanban_1["default"];

package/ui/content/Kanban/reducers/kanban.d.ts

@@ -0,0 +1,5 @@
+declare const _default: (state: {
+    kanbans: {};
+}, action: any) => any;
+export default _default;
+export declare const getKanban: (state: any, kanbanId: any) => any;

package/ui/content/Kanban/reducers/kanban.js

@@ -0,0 +1,77 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+exports.__esModule = true;
+exports.getKanban = void 0;
+var get_1 = __importDefault(require("lodash-es/get"));
+var actions_1 = require("../actions");
+var initialState = {
+    kanbans: {}
+};
+var getKanbanColumns = function (state, kanbanId) { return (0, get_1["default"])(state, ['kanbans', kanbanId, 'columns']) || []; };
+var reducerMap = (_a = {},
+    _a[actions_1.KANBAN_INIT] = function (state, action) {
+        var _a;
+        return (__assign(__assign({}, state), { kanbans: __assign(__assign({}, state.kanbans), (_a = {}, _a[action.payload.kanbanId] = __assign({}, action.payload), _a)) }));
+    },
+    _a[actions_1.KANBAN_MOVE_TASK] = function (state, action) {
+        var _a;
+        if (state.kanbans[action.kanbanId]) {
+            var columns = getKanbanColumns(state, action.kanbanId);
+            var sourceColumn = columns.find(function (column) { return column.id === action.source.droppableId; });
+            var sourceTasks = sourceColumn.tasks;
+            var removedTask = sourceTasks.splice(action.source.index, 1)[0];
+            // move task to different column
+            if (action.source.droppableId !== action.destination.droppableId) {
+                var destinationColumn = columns.find(function (column) { return column.id === action.destination.droppableId; });
+                var destinationTasks = destinationColumn.tasks;
+                destinationTasks.splice(action.destination.index, 0, removedTask);
+            }
+            else {
+                sourceTasks.splice(action.destination.index, 0, removedTask);
+            }
+            return __assign(__assign({}, state), { kanbans: __assign(__assign({}, state.kanbans), (_a = {}, _a[action.kanbanId] = __assign(__assign({}, state.kanbans[action.kanbanId]), { columns: __spreadArray([], columns, true) }), _a)) });
+        }
+        return [];
+    },
+    _a[actions_1.KANBAN_MOVE_COLUMN] = function (state, action) {
+        var _a;
+        if (state.kanbans[action.kanbanId]) {
+            var columns = getKanbanColumns(state, action.kanbanId);
+            var removedColumn = columns.splice(action.source.index, 1)[0];
+            columns.splice(action.destination.index, 0, removedColumn);
+            return __assign(__assign({}, state), { kanbans: __assign(__assign({}, state.kanbans), (_a = {}, _a[action.kanbanId] = __assign(__assign({}, state.kanbans[action.kanbanId]), { columns: __spreadArray([], columns, true) }), _a)) });
+        }
+        return [];
+    },
+    _a);
+exports["default"] = (function (state, action) {
+    if (state === void 0) { state = initialState; }
+    return reducerMap[action.type]
+        ? reducerMap[action.type](state, action)
+        : state;
+});
+var getKanban = function (state, kanbanId) { return (0, get_1["default"])(state, ['kanban', 'kanbans', kanbanId]) || null; };
+exports.getKanban = getKanban;

package/ui/content/Menu/Menu.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { IDropDownProps } from '../DropDown/DropDown';
+export interface IMenuItem {
+    /**
+     * Заголовок элемента меню
+     */
+    label: string;
+    /**
+     * Функция вызываемая при клике
+     */
+    onClick: VoidFunction;
+    /**
+     * Кастомная иконка
+     */
+    icon?: string | React.ReactElement;
+    /**
+     * Нижний border
+     */
+    hasBorder?: boolean;
+}
+/**
+ * Menu
+ *
+ * Компонент-меню позволяет создавать выпадающие списки с элементами, которые могут быть выбраны
+ * или выполнить определенные действия при клике на них.
+ *
+ * Компонент `Menu` обычно используется для создания навигационных меню или контекстных меню,
+ * где пользователь может выбирать опции или выполнять определенные действия в зависимости от выбранного элемента.
+ *
+ * Компонент `Menu` принимает массив `items`, каждый элемент которого представляет собой отдельный пункт меню.
+ * Каждый пункт меню имеет заголовок `label`, функцию `onClick`, которая будет вызываться при клике на элемент,
+ * кастомную иконку `icon` (необязательно) и флаг `hasBorder`, определяющий наличие нижней границы у элемента.
+ *
+ * Примечание: Компонент `Menu` требует указания хотя бы одного элемента меню в свойстве `items`.
+ */
+export interface IMenuProps extends IUiComponent {
+    /**
+    *   Элементы меню
+    */
+    items: IMenuItem[];
+    /**
+    * Кастомная иконка, по клику на которую открывается меню
+    */
+    icon?: string | React.ReactElement;
+    /**
+     * Пропсы для DropDown
+     */
+    dropDownProps?: IDropDownProps;
+    /**
+     * Переопределение view React элемента меню для кастомизации отображения
+     */
+    itemView?: CustomView | any;
+}
+export type IMenuViewProps = IMenuProps;
+declare function Menu(props: IMenuProps): JSX.Element;
+export default Menu;