@steroidsjs/core 3.0.0-beta.1 → 3.0.0-beta.100

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

package/ui/modal/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { IControlItem } from '../../nav/Controls/Controls';
+import * as React from 'react';
+import { IButtonProps } from '../../form/Button/Button';
 /**
  * Modal
  * Модальное окно
@@ -14,16 +14,16 @@ export interface IModalProps {
      * Компонент, который отрендерится внутри Modal
      * @example () => <InnerModalComponent />
      */
-    component?: () => JSX.Element;
+    component?: (props: React.ComponentProps<any>) => JSX.Element;
     /**
      * Свойства для внутреннего компонента
      */
     componentProps?: any;
     /**
-     * Коллекция контролов, которая отобразится в Modal
+     * Коллекция кнопок, которая отобразится в нижней секции Modal
      * @example [{label: __(('Закрыть')), onClick: () => props.onClose()}]
      */
-    controls?: IControlItem[];
+    buttons?: IButtonProps[];
     /**
      * Время, в течение которого будет происходить анимация закрытия Modal.
      * Переопределяет отрезок времени, заданный в ModalPortal
@@ -84,9 +84,13 @@ export interface IModalProps {
      * @example MyCustomView
      */
     view?: CustomView;
+    /**
+     * Вложенные элементы
+     */
+    children?: string | any;
     [key: string]: any;
 }
-export declare type IModalViewProps = IModalProps;
+export type IModalViewProps = IModalProps;
 declare function Modal(props: IModalProps): JSX.Element;
 declare namespace Modal {
     var defaultProps: {

package/ui/modal/Modal/Modal.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];
@@ -33,18 +37,19 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 function Modal(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     var ModalView = props.view || components.ui.getView('modal.ModalView');
     var ContentComponent = props.component;
     React.useEffect(function () {
         if (props.closeAfterMs) {
             setTimeout(function () { return props.onClose(); }, props.closeAfterMs);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (React.createElement(ModalView, __assign({}, props), (ContentComponent && (React.createElement(ContentComponent, __assign({}, props, props.componentProps)))) || (props.children)));
 }
 Modal.defaultProps = {
-    size: 'middle',
+    size: 'md',
     shouldCloseOnEsc: true,
     shouldCloseOnOverlayClick: true
 };

package/ui/modal/ModalPortal/ModalPortal.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+/**
+ * Компонент ModalPortal отвечает за отображение модальных окон.
+ **/
 export interface IModalPortalProps {
     /**
      * Время, через которое произойдет закрытие Modal

package/ui/modal/ModalPortal/ModalPortal.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];
@@ -41,30 +45,29 @@ var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
 var modal_1 = require("../../../actions/modal");
 var modal_2 = require("../../../reducers/modal");
 function ModalPortal(props) {
-    var dispatch = useDispatch_1["default"]();
+    var dispatch = (0, useDispatch_1["default"])();
     var group = props.group || ModalPortal.defaultProps.group;
-    var opened = hooks_1.useSelector(function (state) { return modal_2.getOpened(state, group); });
-    var closeInternal = react_1.useCallback(function (item) {
+    var opened = (0, hooks_1.useSelector)(function (state) { return (0, modal_2.getOpened)(state, group); });
+    var closeInternal = (0, react_1.useCallback)(function (item) {
         if (item.props && item.props.onClose) {
             item.props.onClose();
         }
-        dispatch(modal_1.closeModal(item.id, props.group));
+        dispatch((0, modal_1.closeModal)(item.id, props.group));
     }, [dispatch, props.group]);
-    var onClose = react_1.useCallback(function (item) {
+    var onClose = (0, react_1.useCallback)(function (item) {
         var _a, _b;
         var animationDelayMc = (_b = (_a = item.props) === null || _a === void 0 ? void 0 : _a.closeTimeoutMs) !== null && _b !== void 0 ? _b : props.animationDelayMc;
         if (animationDelayMc > 0) {
-            dispatch(modal_1.modalMarkClosing(item.id, props.group));
+            dispatch((0, modal_1.modalMarkClosing)(item.id, props.group));
             setTimeout(function () { return closeInternal(item); }, animationDelayMc);
         }
         else {
             closeInternal(item);
         }
     }, [closeInternal, dispatch, props.animationDelayMc, props.group]);
-    return orderBy_1["default"](opened, 'id').map(function (item, index) {
+    return (0, orderBy_1["default"])(opened, 'id').map(function (item, index) {
         var ModalComponent = item.modal;
-        var modalProps = __assign(__assign({}, item.props), { index: index,
-            group: group, isClosing: item.isClosing, onClose: function () { return onClose(item); }, closeTimeoutMs: item.props.closeTimeoutMs || props.animationDelayMc });
+        var modalProps = __assign(__assign({}, item.props), { index: index, group: group, isClosing: item.isClosing, onClose: function () { return onClose(item); }, closeTimeoutMs: item.props.closeTimeoutMs || props.animationDelayMc });
         return (React.createElement(ModalComponent, __assign({ key: item.id }, modalProps)));
     });
 }

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

@@ -1,7 +1,12 @@
 /// <reference types="react" />
-interface ITwoFactorModalProps {
-    view?: any;
+interface ITwoFactorModalProps extends IUiComponent {
+    /**
+    * Имя провайдера
+    */
     providerName: string;
+    /**
+    * Функция, которая вызывается при закрытии модального окна
+    */
     onClose?: any;
 }
 interface ITwoFactorModalPrivateProps extends ITwoFactorModalProps {
@@ -13,6 +18,9 @@ interface ITwoFactorModalPrivateProps extends ITwoFactorModalProps {
         isConfirmed: string;
     };
 }
+/**
+ * Компонент TwoFactorModal отображает модальное окно для двухфакторной аутентификации.
+ **/
 export interface ITwoFactorModalViewProps extends ITwoFactorModalPrivateProps {
     description?: string;
     formProps?: any;

package/ui/modal/TwoFactorModal/TwoFactorModal.js

@@ -19,11 +19,11 @@ var useComponents_1 = __importDefault(require("../../../hooks/useComponents"));
 var useFetch_1 = __importDefault(require("../../../hooks/useFetch"));
 var Modal_1 = __importDefault(require("../Modal"));
 function TwoFactorModal(props) {
-    var components = useComponents_1["default"]();
+    var components = (0, useComponents_1["default"])();
     // TODO set types
-    var data = useFetch_1["default"]({
+    var data = (0, useFetch_1["default"])({
         method: 'post',
-        url: "/api/v1/auth/2fa/" + props.providerName + "/send"
+        url: "/api/v1/auth/2fa/".concat(props.providerName, "/send")
     }).data;
     var providerData = data.providerData;
     var getDescription = function () {
@@ -49,7 +49,7 @@ function TwoFactorModal(props) {
     return (react_1["default"].createElement(Modal_1["default"], __assign({}, props, { onClose: props.onClose }),
         react_1["default"].createElement(TwoFactorModalView, __assign({}, props, { formProps: {
                 formId: 'TwoFactorModal',
-                action: "/api/v1/auth/2fa/" + props.providerName + "/confirm",
+                action: "/api/v1/auth/2fa/".concat(props.providerName, "/confirm"),
                 onComplete: function () { return props.onClose(); }
             }, description: getDescription() }))));
 }

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

@@ -2,8 +2,9 @@
 import { IRouteItem } from '../Router/Router';
 /**
  * Breadcrumbs
- * Хлебные крошки
- */
+ *
+ * Компонент Breadcrumbs отображает хлебные крошки.
+ **/
 export interface IBreadcrumbsProps {
     /**
      * Кастомный CSS-класс
@@ -27,6 +28,15 @@ export interface IBreadcrumbsProps {
      * @example 'Каталог'
      */
     pageTitle?: string;
+    /**
+     * Показать иконку заменяющую первый роут
+     * @example true
+     */
+    showIcon?: boolean;
+    /**
+     * Кастомная иконка, заменяющая первый роут
+     */
+    customIcon?: string | React.ReactElement;
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
@@ -34,7 +44,7 @@ export interface IBreadcrumbsProps {
     view?: CustomView;
     [key: string]: any;
 }
-export declare type IBreadcrumbsViewProps = IBreadcrumbsProps & {
+export type IBreadcrumbsViewProps = IBreadcrumbsProps & {
     routeParams?: any;
 };
 export default function Breadcrumbs(props: IBreadcrumbsProps): JSX.Element;

package/ui/nav/Breadcrumbs/Breadcrumbs.js

@@ -14,11 +14,10 @@ exports.__esModule = true;
 var hooks_1 = require("../../../hooks");
 var router_1 = require("../../../reducers/router");
 function Breadcrumbs(props) {
-    var components = hooks_1.useComponents();
-    var routeItems = hooks_1.useSelector(function (state) { return router_1.getRouteBreadcrumbs(state, props.pageId); });
-    var routeParams = hooks_1.useSelector(function (state) { return router_1.getRouteParams(state); });
+    var components = (0, hooks_1.useComponents)();
+    var routeItems = (0, hooks_1.useSelector)(function (state) { return (0, router_1.getRouteBreadcrumbs)(state, props.pageId); });
+    var routeParams = (0, hooks_1.useSelector)(function (state) { return (0, router_1.getRouteParams)(state); });
     var items = props.items || routeItems;
-    return components.ui.renderView(props.view || 'nav.BreadcrumbsView', __assign(__assign({}, props), { items: items,
-        routeParams: routeParams }));
+    return components.ui.renderView(props.view || 'nav.BreadcrumbsView', __assign(__assign({}, props), { items: items, routeParams: routeParams }));
 }
 exports["default"] = Breadcrumbs;

package/ui/nav/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { IButtonProps } from '../../form/Button/Button';
+import { DataProviderItems } from '../../../hooks/useDataProvider';
+/**
+ * ButtonGroup
+ *
+ * Компонент ButtonGroup отображает группу кнопок.
+ **/
+export interface IButtonGroupProps extends IUiComponent {
+    /**
+     * Элементы для группы кнопок
+     * @example ['button1', 'button2', 'button3']
+     */
+    items: DataProviderItems;
+    /**
+     * Функция, которая будет вызываться при клике по кнопке
+     * @example setActiveTab
+     */
+    onClick: (value: number | string | boolean) => void;
+    /**
+     * При указании в связке с onClick предоставляет возможность реализовать two-way binding
+     * @example 'button1'
+     */
+    activeButton?: number | string;
+    /**
+    * Кнопка по умолчанию.
+    */
+    defaultActiveButton?: number | string;
+    /**
+     * Общие свойства для всех кнопок группы
+     * @example {outline: true, color: 'secondary'}
+     */
+    buttonProps?: IButtonProps;
+}
+export interface IButtonGroupViewProps extends Omit<IButtonGroupProps, 'items'> {
+    items: {
+        id: number | string | boolean;
+        label?: string;
+        [key: string]: unknown;
+    }[];
+    size: Size;
+}
+declare function ButtonGroup(props: IButtonGroupProps): JSX.Element;
+export default ButtonGroup;

package/ui/nav/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,59 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../../hooks");
+var useDataProvider_1 = __importDefault(require("../../../hooks/useDataProvider"));
+var DEFAULT_BUTTON_GROUP_SIZE = 'md';
+function ButtonGroup(props) {
+    var _a, _b;
+    var components = (0, hooks_1.useComponents)();
+    var items = (0, useDataProvider_1["default"])({
+        items: props.items
+    }).items;
+    var _c = (0, react_1.useState)(props.activeButton || props.defaultActiveButton || ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.id)), activeButton = _c[0], setActiveButton = _c[1];
+    react_1["default"].useEffect(function () {
+        if (props.activeButton) {
+            setActiveButton(props.activeButton);
+        }
+    }, [props.activeButton]);
+    var onClick = function (buttonId) {
+        setActiveButton(buttonId);
+        props.onClick(buttonId);
+    };
+    return components.ui.renderView(props.view || 'nav.ButtonGroupView', {
+        className: props.className,
+        style: props.style,
+        buttonProps: props.buttonProps,
+        size: ((_b = props.buttonProps) === null || _b === void 0 ? void 0 : _b.size) || DEFAULT_BUTTON_GROUP_SIZE,
+        activeButton: activeButton,
+        items: items,
+        onClick: onClick
+    });
+}
+exports["default"] = ButtonGroup;

package/ui/nav/ButtonGroup/index.d.ts

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

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

package/ui/nav/Controls/Controls.d.ts

@@ -39,16 +39,16 @@ export interface IControlsProps {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * Дополнительный CSS-класс для элемента отображения
      * @example MyCustomView
      */
-    className?: string;
+    className?: CssClassName;
     [key: string]: any;
 }
 export interface IControlsViewProps extends IControlsProps {
-    className?: string;
+    className?: CssClassName;
     items: (IControlItem & {
         icon?: string;
         label?: string | any;

package/ui/nav/Controls/Controls.js

@@ -11,18 +11,19 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 exports.__esModule = true;
+/* eslint-disable react-hooks/exhaustive-deps */
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 function Controls(props) {
     var defaultItems = {
-        index: {
-            icon: 'back',
+        back: {
+            icon: 'left_12x12',
             label: __('К списку'),
             color: 'secondary',
             outline: true
         },
         create: {
-            icon: 'create',
+            icon: 'add_square',
             label: __('Добавить'),
             color: 'success',
             outline: true
@@ -34,13 +35,13 @@ function Controls(props) {
             outline: true
         },
         update: {
-            icon: 'update',
+            icon: 'edit',
             label: __('Редактировать'),
             color: 'secondary',
             outline: true
         },
         "delete": {
-            icon: 'delete',
+            icon: 'cancel_ellips',
             label: __('Удалить'),
             confirm: __('Удалить запись?'),
             color: 'danger',
@@ -48,8 +49,8 @@ function Controls(props) {
             position: 'right'
         }
     };
-    var components = hooks_1.useComponents();
-    var items = react_1.useMemo(function () { return props.items.map(function (item) { return (__assign(__assign({}, defaultItems[item.id]), item)); }); }, [defaultItems, props.items]);
+    var components = (0, hooks_1.useComponents)();
+    var items = (0, react_1.useMemo)(function () { return props.items.map(function (item) { return (__assign(__assign({}, defaultItems[item.id]), item)); }); }, [defaultItems, props.items]);
     return components.ui.renderView(props.view || 'nav.ControlsView', __assign(__assign({}, props), { items: items }));
 }
 exports["default"] = Controls;

package/ui/nav/Link/Link.d.ts

@@ -2,10 +2,11 @@
 import { IButtonProps, IButtonViewProps } from '../../form/Button/Button';
 /**
  * Link
+ *
  * Ссылка
  */
 export interface ILinkProps extends IButtonProps {
     [key: string]: any;
 }
-export declare type ILinkViewProps = IButtonViewProps;
+export type ILinkViewProps = IButtonViewProps;
 export default function Link(props: ILinkProps): JSX.Element;

package/ui/nav/Link/Link.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];
@@ -36,6 +40,6 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Button_1 = __importDefault(require("../../form/Button"));
 function Link(props) {
-    return (React.createElement(Button_1["default"], __assign({ tag: 'a', link: true }, props, { formId: false })));
+    return (React.createElement(Button_1["default"], __assign({ tag: 'a', link: true, color: 'link' }, props, { formId: false })));
 }
 exports["default"] = Link;

package/ui/nav/Nav/Nav.d.ts

@@ -28,7 +28,7 @@ export interface INavItem extends IButtonProps {
      * Переопределение view React компонента для кастомизации отображения элемента
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * Видимость элемента
      * @example true
@@ -44,6 +44,15 @@ export interface INavItem extends IButtonProps {
      * @example {content: 'Some text'}
      */
     contentProps?: any;
+    /**
+    * Вложенные элементы
+    */
+    items?: INavItem[];
+    /**
+    * Props для пункта
+    */
+    itemProps?: IButtonProps;
+    [key: string]: any;
 }
 /**
  * Nav
@@ -74,7 +83,7 @@ export interface INavProps {
      * Переопределение view React компонента для кастомизации отображения элемента
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * Обработчик, который вызывается при смене активного элемента навигации
      * @param args
@@ -84,16 +93,13 @@ export interface INavProps {
      * Размер
      */
     size?: Size;
-    /**
-     * Темная тема
-     */
-    dark?: boolean;
     [key: string]: any;
 }
 export interface INavViewProps extends INavProps {
     onClick: (item: Record<string, unknown>, index: number) => void;
     items: (INavItem & {
         isActive: boolean;
+        isActiveNested: boolean;
     })[];
     navClassName?: CssClassName;
 }
@@ -101,6 +107,7 @@ declare function Nav(props: INavProps): JSX.Element;
 declare namespace Nav {
     var defaultProps: {
         layout: string;
+        size: string;
     };
 }
 export default Nav;

package/ui/nav/Nav/Nav.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];
@@ -39,6 +43,7 @@ var has_1 = __importDefault(require("lodash-es/has"));
 var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
 var react_1 = require("react");
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var hooks_1 = require("../../../hooks");
 var router_1 = require("../../../reducers/router");
 var defaultViewMap = {
@@ -50,53 +55,66 @@ var defaultViewMap = {
     list: 'nav.NavListView'
 };
 function Nav(props) {
-    var components = hooks_1.useComponents();
-    var _a = hooks_1.useSelector(function (state) { return ({
-        routes: typeof props.items === 'string' ? router_1.getNavItems(state, props.items) : null,
-        activeRouteIds: router_1.getActiveRouteIds(state),
-        routerParams: router_1.getRouteParams(state)
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, hooks_1.useSelector)(function (state) { return ({
+        routes: typeof props.items === 'string' ? (0, router_1.getNavItems)(state, props.items) : null,
+        activeRouteIds: (0, router_1.getActiveRouteIds)(state),
+        routerParams: (0, router_1.getRouteParams)(state)
     }); }), routes = _a.routes, activeRouteIds = _a.activeRouteIds, routerParams = _a.routerParams;
-    var _b = react_1.useState(props.activeTab || get_1["default"](props, 'items.0.id') || 0), activeTab = _b[0], setActiveTab = _b[1];
-    react_1.useEffect(function () {
+    var _b = (0, react_1.useState)(props.activeTab || (0, get_1["default"])(props, 'items.0.id') || 0), activeTab = _b[0], setActiveTab = _b[1];
+    (0, react_1.useEffect)(function () {
         if (props.activeTab) {
             setActiveTab(props.activeTab);
         }
     }, [props.activeTab]);
     var renderContent = function () {
         var items = Array.isArray(props.items) ? props.items : [];
-        var activeItem = items.find(function (item, index) { return activeTab === (has_1["default"](item, 'id') ? item.id : index); });
+        var activeItem = items.find(function (item, index) { return activeTab === ((0, has_1["default"])(item, 'id') ? item.id : index); });
         if (!activeItem || !activeItem.content) {
             return null;
         }
-        if (isFunction_1["default"](activeItem.content) || isObject_1["default"](activeItem.content)) {
+        if ((0, isFunction_1["default"])(activeItem.content) || (0, isObject_1["default"])(activeItem.content)) {
             var ContentComponent = activeItem.content;
-            return React.createElement(ContentComponent, __assign({}, activeItem, activeItem.contentProps));
+            return (React.createElement(ContentComponent, __assign({}, activeItem, activeItem.contentProps)));
         }
         return activeItem.content;
     };
-    var onClick = react_1.useCallback(function (item, index) {
-        var newActiveTab = has_1["default"](item, 'id') ? item.id : index;
+    var onClick = (0, react_1.useCallback)(function (item, index) {
+        var newActiveTab = (0, has_1["default"])(item, 'id') ? item.id : index;
         setActiveTab(newActiveTab);
         if (props.onChange) {
             props.onChange.call(null, newActiveTab);
         }
     }, [props.onChange]);
-    var items = react_1.useMemo(function () { return (Array.isArray(props.items)
-        ? props.items.map(function (item, index) { return (__assign(__assign({}, item), { isActive: activeTab === (has_1["default"](item, 'id') ? item.id : index) })); })
-            .filter(function (item) { return item.visible !== false; })
-        : (routes || []).map(function (route) { return ({
-            id: route.id,
-            label: route.label,
-            toRoute: route.id,
-            toRouteParams: routerParams,
-            visible: route.isNavVisible,
-            isActive: (activeRouteIds || []).includes(route.id)
-        }); })
-            .filter(function (item) { return item.visible !== false; })); }, [activeRouteIds, activeTab, props.items, routerParams, routes]);
-    return components.ui.renderView(props.view || defaultViewMap[props.layout], __assign(__assign({}, props), { items: items,
-        onClick: onClick, disabled: props.disabled, children: renderContent() }));
+    var formatItems = React.useCallback(function (items) {
+        if (items === void 0) { items = props.items; }
+        if (Array.isArray(items)) {
+            return items.map(function (item, index) {
+                var _a;
+                return (__assign(__assign({}, item), { isActive: activeTab === ((0, has_1["default"])(item, 'id') ? item.id : index), isActiveNested: !(0, isEmpty_1["default"])((_a = item.items) === null || _a === void 0 ? void 0 : _a.filter(function (nestedItem) { return nestedItem.id === activeTab; })) || false, items: item.items ? formatItems(item.items) : null }));
+            })
+                .filter(function (item) { return item.visible !== false; });
+        }
+        return (routes || []).map(function (route) {
+            var _a;
+            return ({
+                id: route.id,
+                label: route.label,
+                toRoute: route.id,
+                toRouteParams: routerParams,
+                visible: route.isNavVisible,
+                isActive: (activeRouteIds || []).includes(route.id),
+                isActiveNested: ((_a = route.items) === null || _a === void 0 ? void 0 : _a.filter(function (nestedItem) { return activeRouteIds.includes(nestedItem.id); })),
+                items: route.items ? formatItems(route.items) : null
+            });
+        })
+            .filter(function (item) { return item.visible !== false; });
+    }, [activeRouteIds, activeTab, props.items, routerParams, routes]);
+    var items = (0, react_1.useMemo)(function () { return formatItems(); }, [formatItems]);
+    return components.ui.renderView(props.view || defaultViewMap[props.layout], __assign(__assign({}, props), { items: items, onClick: onClick, disabled: props.disabled, children: renderContent() }));
 }
 Nav.defaultProps = {
-    layout: 'button'
+    layout: 'button',
+    size: 'md'
 };
 exports["default"] = Nav;