@steroidsjs/core 3.0.0-beta.2 → 3.0.0-beta.20

package/ui/content/Badge/Badge.js

@@ -0,0 +1,34 @@
+"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 react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+function Badge(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, react_1.useState)(true), isExist = _a[0], setIsExist = _a[1];
+    var onClose = (0, react_1.useCallback)(function () {
+        setIsExist(false);
+        if (props.onClose) {
+            props.onClose();
+        }
+    }, [props]);
+    return components.ui.renderView(props.view || 'content.BadgeView', __assign(__assign({}, props), { isExist: isExist, onClose: onClose }));
+}
+Badge.defaultProps = {
+    type: 'primary',
+    roundingStyle: 'squarer',
+    size: 'md',
+    counter: false,
+    showClose: false
+};
+exports["default"] = Badge;

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

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

package/ui/{list/LayoutNames/demo/basic.js → content/Badge/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 Badge_1 = __importDefault(require("./Badge"));
+exports["default"] = Badge_1["default"];

package/ui/content/Calendar/Calendar.js

@@ -15,37 +15,30 @@ var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var calendar_1 = require("../../../utils/calendar");
 function Calendar(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     var currentYear = new Date().getFullYear();
-    var _a = react_1.useMemo(function () { return ({
+    var _a = (0, react_1.useMemo)(function () { return ({
         fromYear: new Date(currentYear - 100, 0),
         toYear: new Date(currentYear + 50, 11)
     }); }, [currentYear]), fromYear = _a.fromYear, toYear = _a.toYear;
-    var selectedDates = react_1.useMemo(function () { return [].concat(props.value || []).map(function (selectedDate) { return calendar_1.convertDate(selectedDate, props.valueFormat); }); }, [props.value, props.valueFormat]);
-    var _b = react_1.useState(selectedDates.length > 0
+    var selectedDates = (0, react_1.useMemo)(function () { return [].concat(props.value || []).map(function (selectedDate) { return (0, calendar_1.convertDate)(selectedDate, props.valueFormat); }); }, [props.value, props.valueFormat]);
+    var _b = (0, react_1.useState)(selectedDates.length > 0
         ? selectedDates.filter(function (date) { return !!date; })[0]
         : new Date()), month = _b[0], setMonth = _b[1];
-    var _c = react_1.useState(false), isCaptionPanelVisible = _c[0], setIsCaptionPanelVisible = _c[1];
-    react_1.useEffect(function () {
+    var _c = (0, react_1.useState)(false), isCaptionPanelVisible = _c[0], setIsCaptionPanelVisible = _c[1];
+    (0, react_1.useEffect)(function () {
         if (selectedDates.length > 0) {
             setMonth(selectedDates[0]);
         }
     }, [selectedDates]);
-    var onDaySelect = react_1.useCallback(function (date) { return props.onChange.call(null, calendar_1.convertDate(date, null, props.valueFormat, false, true)); }, [props.onChange, props.valueFormat]);
-    var toggleCaptionPanel = react_1.useCallback(function () {
+    var onDaySelect = (0, react_1.useCallback)(function (date) { return props.onChange.call(null, (0, calendar_1.convertDate)(date, null, props.valueFormat, false, true)); }, [props.onChange, props.valueFormat]);
+    var toggleCaptionPanel = (0, react_1.useCallback)(function () {
         setIsCaptionPanelVisible(!isCaptionPanelVisible);
     }, [isCaptionPanelVisible]);
-    var onMonthSelect = react_1.useCallback(function (newMonth) {
+    var onMonthSelect = (0, react_1.useCallback)(function (newMonth) {
         setMonth(newMonth);
     }, []);
-    return components.ui.renderView(props.view || 'content.CalendarView', __assign(__assign(__assign({}, props.viewProps), props.pickerProps), { month: month,
-        toYear: toYear,
-        fromYear: fromYear,
-        onDaySelect: onDaySelect,
-        onMonthSelect: onMonthSelect,
-        selectedDates: selectedDates,
-        toggleCaptionPanel: toggleCaptionPanel,
-        isCaptionPanelVisible: isCaptionPanelVisible, className: props.className, showFooter: props.showFooter, numberOfMonths: props.numberOfMonths }));
+    return components.ui.renderView(props.view || 'content.CalendarView', __assign(__assign(__assign({}, props.viewProps), props.pickerProps), { month: month, toYear: toYear, fromYear: fromYear, onDaySelect: onDaySelect, onMonthSelect: onMonthSelect, selectedDates: selectedDates, toggleCaptionPanel: toggleCaptionPanel, isCaptionPanelVisible: isCaptionPanelVisible, className: props.className, showFooter: props.showFooter, numberOfMonths: props.numberOfMonths }));
 }
 Calendar.defaultProps = {
     numberOfMonths: 1,

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

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Basic
  * @order 1
  * @col 5
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/content/Calendar/demo/basic.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

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

@@ -1,9 +1,7 @@
+import { IButtonProps } from 'src/ui/form/Button/Button';
+import { ILinkProps } from 'src/ui/nav/Link/Link';
+import { IAvatarProps } from '../Avatar/Avatar';
 export interface ICardProps {
-    /**
-     * Цвет границы (если передать false, то граница будет скрыта)
-     * @example success
-     */
-    borderColor?: ColorName | 'default' | boolean;
     /**
      * Дополнительный CSS-класс
      */
@@ -12,11 +10,6 @@ export interface ICardProps {
      * Дочерние элементы
      */
     children?: CustomView;
-    /**
-     * Цвет состояния
-     * @example success
-     */
-    color?: ColorName;
     /**
      * Обложка для карточки, нужно передать ссылку на изображение
      * @example 'https://cat/cat.png'
@@ -28,23 +21,30 @@ export interface ICardProps {
      */
     description?: string;
     /**
-     * Текст для header
+     * Контент хедера
      */
-    header?: string;
+    header?: {
+        avatar?: IAvatarProps;
+        menu?: boolean;
+        head?: string;
+        subhead?: string;
+    };
     /**
-     * Текст для footer
+     * Контент футера
      */
-    footer?: string;
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    orientation?: 'vertical' | 'vertical-reverse' | 'horizontal' | string;
+    * Коллекция ссылок
+    * @example {}
+    */
+    links?: ILinkProps[];
     /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
+     * Коллекция кнопок
      */
-    shape?: 'square' | 'circle';
+    buttons?: IButtonProps[];
     /**
      * Объект CSS стилей
      * @example {width: '30px'}
@@ -61,13 +61,6 @@ export interface ICardProps {
      */
     view?: CustomView;
 }
-export declare type ICardViewProps = ICardProps;
+export type ICardViewProps = ICardProps;
 declare function Card(props: ICardProps): any;
-declare namespace Card {
-    var defaultProps: {
-        borderColor: string;
-        orientation: string;
-        shape: string;
-    };
-}
 export default Card;

package/ui/content/Card/Card.js

@@ -13,12 +13,7 @@ var __assign = (this && this.__assign) || function () {
 exports.__esModule = true;
 var hooks_1 = require("../../../hooks");
 function Card(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     return components.ui.renderView(props.view || 'content.CardView', __assign({}, props));
 }
-Card.defaultProps = {
-    borderColor: 'default',
-    orientation: 'vertical',
-    shape: 'circle'
-};
 exports["default"] = Card;

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

@@ -8,7 +8,7 @@ interface ICopyToClipboardProps extends IBemHocOutput, IConnectHocOutput {
         level?: string;
         timeOut?: string;
     };
-    className?: string;
+    className?: CssClassName;
     children?: any;
 }
 export default function CopyToClipboard(props: ICopyToClipboardProps): any;

package/ui/content/CopyToClipboard/CopyToClipboard.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -44,7 +48,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -74,10 +78,10 @@ var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
 var notifications_1 = require("../../../actions/notifications");
 function CopyToClipboard(props) {
     var _this = this;
-    var inputRef = react_1.useRef();
-    var _a = react_1.useState(false), isCopied = _a[0], setIsCopied = _a[1];
-    var dispatch = useDispatch_1["default"]();
-    var onClick = react_1.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+    var inputRef = (0, react_1.useRef)();
+    var _a = (0, react_1.useState)(false), isCopied = _a[0], setIsCopied = _a[1];
+    var dispatch = (0, useDispatch_1["default"])();
+    var onClick = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
         var el, notification;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -99,7 +103,7 @@ function CopyToClipboard(props) {
                 case 3:
                     if (props.notification) {
                         notification = __assign({ level: 'info', params: undefined }, (typeof props.notification === 'string' ? { message: props.notification } : props.notification));
-                        dispatch(notifications_1.showNotification(notification.message, notification.level, notification.params));
+                        dispatch((0, notifications_1.showNotification)(notification.message, notification.level, notification.params));
                     }
                     setIsCopied(true);
                     setTimeout(function () { return setIsCopied(false); }, 1000);

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

@@ -70,7 +70,7 @@ export interface IDetailProps {
     /**
      * Дополнительный CSS-класс для таблицы
      */
-    className?: string;
+    className?: CssClassName;
     /**
      * Дочерние компоненты
      */
@@ -83,19 +83,19 @@ export interface IDetailItemOutputProps extends IDetailItemProps {
 }
 export interface IDetailViewProps extends IDetailProps {
     rows: IDetailItemOutputProps[][];
-    resizedNodeRef?: (node: HTMLElement) => void;
+    resizedNodeRef?: (node: HTMLDivElement) => void;
 }
 export declare const constants: Readonly<{
-    MAX_COLUMN: number;
-    CELLS_IN_COLUMN: number;
-    TABLE_HEAD_COLSPAN: number;
+    MAX_COLUMN: 3;
+    CELLS_IN_COLUMN: 2;
+    TABLE_HEAD_COLSPAN: 1;
 }>;
 declare function Detail(props: IDetailProps): JSX.Element;
 declare namespace Detail {
     var defaultProps: {
         size: string;
         layout: DetailLayoutEnum;
-        column: number;
+        column: 3;
         responsive: boolean;
     };
 }

package/ui/content/Detail/Detail.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -104,20 +108,20 @@ var normalizeResponsiveProps = function (props) { return (typeof props === 'bool
             },
         ]
     }
-    : __assign(__assign({ enable: true }, props), { media: orderBy_1["default"](props.media, ['breakpoint'], ['asc']) })); };
+    : __assign(__assign({ enable: true }, props), { media: (0, orderBy_1["default"])(props.media, ['breakpoint'], ['asc']) })); };
 function Detail(props) {
-    var components = hooks_1.useComponents();
-    var detailItems = react_1.useMemo(function () { return getDetailItems(props.children); }, [props.children]);
-    var responsiveProps = react_1.useMemo(function () { return normalizeResponsiveProps(props.responsive); }, [props.responsive]);
-    var _a = react_1.useState(props.column || exports.constants.MAX_COLUMN), column = _a[0], setColumn = _a[1];
-    var _b = react_1.useState(createRows(detailItems, column, props.layout)), rows = _b[0], setRows = _b[1];
+    var components = (0, hooks_1.useComponents)();
+    var detailItems = (0, react_1.useMemo)(function () { return getDetailItems(props.children); }, [props.children]);
+    var responsiveProps = (0, react_1.useMemo)(function () { return normalizeResponsiveProps(props.responsive); }, [props.responsive]);
+    var _a = (0, react_1.useState)(props.column || exports.constants.MAX_COLUMN), column = _a[0], setColumn = _a[1];
+    var _b = (0, react_1.useState)(createRows(detailItems, column, props.layout)), rows = _b[0], setRows = _b[1];
     // Add responsive option
-    var resizeObserver = react_1.useRef(new ResizeObserver(function (entries) {
+    var resizeObserver = (0, react_1.useRef)(new ResizeObserver(function (entries) {
         entries.forEach(function (entry) {
             if (!entry.borderBoxSize) {
                 return;
             }
-            var inlineSize = (isArray_1["default"](entry.borderBoxSize)
+            var inlineSize = ((0, isArray_1["default"])(entry.borderBoxSize)
                 ? entry.borderBoxSize[0]
                 : entry.borderBoxSize).inlineSize;
             // eslint-disable-next-line no-restricted-syntax
@@ -141,7 +145,7 @@ function Detail(props) {
         }
         resizeObserver.current.disconnect();
     }, [resizeObserver]);
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         setRows(createRows(detailItems, column, props.layout));
     }, [column, detailItems, props.layout]);
     return components.ui.renderView(props.view || 'content.DetailView', __assign(__assign(__assign({}, props), { rows: rows }), (responsiveProps.enable ? { resizedNodeRef: resizedNodeRef } : {})));

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

@@ -22,7 +22,7 @@ export interface IDetailItemProps {
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
-     */
+    */
     view?: CustomView;
     /**
      * Дополнительный CSS-класс для ячейки с наименованием

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

@@ -14,7 +14,7 @@ export interface IDropDownProps extends IAbsolutePositioningInputProps {
      * Переопределение view React компонента для кастомизациии отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * В каком случае закрывать DropDown. По-умолчанию - `click-away`
      * @example click-any

package/ui/content/DropDown/DropDown.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -29,13 +33,13 @@ var hooks_1 = require("../../../hooks");
 var TooltipPortalInner_1 = __importDefault(require("../../layout/Tooltip/TooltipPortalInner"));
 var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
 function DropDown(props) {
-    var components = hooks_1.useComponents();
-    var _a = useAbsolutePositioning_1["default"](props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, style = _a.style;
-    var childRef = react_1.useRef(null);
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, useAbsolutePositioning_1["default"])(props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, style = _a.style;
+    var childRef = (0, react_1.useRef)(null);
     var isManualControl = props.visible !== undefined;
     // Outside click -> close
-    var forwardedRef = react_1.useRef(null);
-    react_use_1.useClickAway(forwardedRef, function (event) {
+    var forwardedRef = (0, react_1.useRef)(null);
+    (0, react_use_1.useClickAway)(forwardedRef, function (event) {
         if (props.closeMode === 'click-away') {
             if (isManualControl) {
                 if (!childRef.current.contains(event.target) && props.onClose) {
@@ -48,14 +52,14 @@ function DropDown(props) {
         }
     }, ['mousedown', 'touchstart']);
     // Any click -> close
-    var onAnyClick = react_1.useCallback(function () {
+    var onAnyClick = (0, react_1.useCallback)(function () {
         if (isComponentExist && isComponentVisible && props.closeMode === 'click-any') {
             onHide();
         }
     }, [isComponentExist, isComponentVisible, onHide, props.closeMode]);
-    react_use_1.useEvent('mousedown', onAnyClick);
-    react_use_1.useEvent('touchstart', onAnyClick);
-    var calculatePosition = react_1.useCallback(function (componentSize) {
+    (0, react_use_1.useEvent)('mousedown', onAnyClick);
+    (0, react_use_1.useEvent)('touchstart', onAnyClick);
+    var calculatePosition = (0, react_1.useCallback)(function (componentSize) {
         calculateAbsolutePosition(position, childRef.current, componentSize);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

package/ui/{icon → 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:
  * ```
@@ -33,7 +33,11 @@ export interface IIconProps {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: React.ComponentType;
+    view?: CustomView;
+    /**
+    *  Должен ли данный элемент участвовать в последовательной навигации
+    */
+    tabIndex?: number;
     onClick?: any;
     [key: string]: any;
 }

package/ui/{icon → content}/Icon/Icon.js

@@ -18,9 +18,9 @@ var isObject_1 = __importDefault(require("lodash-es/isObject"));
 var isString_1 = __importDefault(require("lodash-es/isString"));
 var hooks_1 = require("../../../hooks");
 function Icon(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     var name = props.name;
-    if (!isString_1["default"](name)) {
+    if (!(0, isString_1["default"])(name)) {
         return null;
     }
     var icon;
@@ -31,11 +31,11 @@ function Icon(props) {
         icon = name.indexOf('<svg') === 0 || name.indexOf('http') === 0
             ? name
             : components.ui.getIcon(name);
-        if (isObject_1["default"](icon) && isString_1["default"](icon["default"])) {
+        if ((0, isObject_1["default"])(icon) && (0, isString_1["default"])(icon["default"])) {
             icon = icon["default"];
         }
         // Fix width attribute in icon
-        if (isString_1["default"](icon) && icon.indexOf('<svg') === 0) {
+        if ((0, isString_1["default"])(icon) && icon.indexOf('<svg') === 0) {
             var match = icon.match(/<svg([^>]+)/);
             if (match && match[0].indexOf('width') === -1) {
                 icon = icon.replace(match[0], match[0] + ' width=16');
@@ -45,6 +45,6 @@ function Icon(props) {
             throw new Error('Not found icon with name "' + name + '"');
         }
     }
-    return components.ui.renderView(props.view || 'icon.IconView', __assign(__assign({}, props), { icon: icon }));
+    return components.ui.renderView(props.view || 'content.IconView', __assign(__assign({}, props), { icon: icon }));
 }
 exports["default"] = Icon;

package/ui/{icon → content}/Icon/demo/icon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const _default: () => JSX.Element;
 export default _default;

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

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

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

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

package/ui/content/Menu/Menu.js

@@ -0,0 +1,23 @@
+"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 useComponents_1 = __importDefault(require("../../../hooks/useComponents"));
+function Menu(props) {
+    var components = (0, useComponents_1["default"])();
+    var MenuItemView = components.ui.getView(props.itemView || 'content.MenuItemView');
+    return components.ui.renderView(props.view || 'content.MenuView', __assign(__assign({}, props), { itemView: MenuItemView }));
+}
+exports["default"] = Menu;

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

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

package/ui/content/Menu/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 Menu_1 = __importDefault(require("./Menu"));
+exports["default"] = Menu_1["default"];

package/ui/content/index.d.ts

@@ -1,16 +1,10 @@
 import { Avatar, AvatarGroup } from './Avatar';
-import { Collapse, CollapseItem } from './Collapse';
+import { Accordion, AccordionItem } from './Accordion';
 import Card from './Card';
 import DropDown from './DropDown';
 import Alert from './Alert';
-export { Avatar, AvatarGroup, Collapse, CollapseItem, Alert, Card, DropDown, };
-declare const _default: {
-    Avatar: typeof Avatar;
-    AvatarGroup: typeof AvatarGroup;
-    Collapse: typeof Collapse;
-    CollapseItem: typeof CollapseItem;
-    Alert: typeof Alert;
-    Card: typeof Card;
-    DropDown: typeof DropDown;
-};
-export default _default;
+import Badge from './Badge';
+import { Detail, DetailItem } from './Detail';
+import Icon from './Icon';
+import Menu from './Menu';
+export { Avatar, AvatarGroup, Accordion, AccordionItem, Alert, Card, DropDown, Badge, Detail, DetailItem, Icon, Menu, };