@pdg/react-admin-layout 1.0.32 → 1.0.34

package/dist/CardLayout/CardLayout.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CardLayoutProps } from './CardLayout.types';
-declare const CardLayout: React.FC<CardLayoutProps>;
+declare const CardLayout: ({ children, backgroundColor }: CardLayoutProps) => React.JSX.Element;
 export default CardLayout;

package/dist/DefaultLayout/DefaultLayout.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { DefaultLayoutProps } from './DefaultLayout.types';
-declare const DefaultLayout: React.FC<DefaultLayoutProps>;
+import { DefaultLayoutProps as Props } from './DefaultLayout.types';
+declare const DefaultLayout: ({ children, logo, badgeVariant, menu, menuHideScreen: initMenuHideScreen, appBarControl, }: Props) => React.JSX.Element;
 export default DefaultLayout;

package/dist/DefaultLayout/DefaultLayout.types.d.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
-import { CommonSxProps } from '../@types';
+import { CSSProperties, ReactNode } from 'react';
 import { BadgeProps } from '@mui/material';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 export interface SubMenuItem {
     id: string;
     name: string;
@@ -19,11 +20,14 @@ export interface MenuItem {
     badgeVariant?: BadgeProps['variant'];
     items?: SubMenuItem[];
 }
-export interface DefaultLayoutProps extends CommonSxProps {
+export interface DefaultLayoutProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    sx?: SxProps<Theme>;
     logo: ReactNode;
     badgeVariant?: BadgeProps['variant'];
     menu?: MenuItem[];
     appBarControl?: ReactNode;
     menuHideScreen?: 'xs' | 'sm' | 'md' | 'lg';
-    onMenuClick?(menuItem: MenuItem): void;
 }

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import {Grid,useTheme,alpha,ListItemButton,ListItemIcon,Icon,ListItemText,Badge,Collapse,styled,List,Box,Toolbar,Typography,AppBar,Drawer,IconButton}from'@mui/material';import React,{useState,useEffect,useCallback,useMemo}from'react';import {useLocation}from'react-router-dom';import {ExpandMore,Menu}from'@mui/icons-material';import {notEmpty,empty}from'@pdg/util';import SimpleBar from'simplebar-react';function styleInject(css, ref) {
+import {Grid,styled,ListItemIcon,ListItemButton,Icon,ListItemText,Badge,Collapse,List,useTheme,alpha,Box,Toolbar,Typography,AppBar,Drawer,IconButton}from'@mui/material';import React,{useState,useEffect,useMemo}from'react';import {useLocation,useNavigate}from'react-router-dom';import {ExpandMore,Menu}from'@mui/icons-material';import {notEmpty,empty}from'@pdg/util';import SimpleBar from'simplebar-react';function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
@@ -28,13 +28,50 @@ styleInject(css_248z);var CardLayout = function (_a) {
     var children = _a.children, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#eff3f8' : _b;
     return (React.createElement(Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', style: { minHeight: '100vh', backgroundColor: backgroundColor } },
         React.createElement(Grid, { item: true, xs: 12 }, children)));
-};var SideMenuListItem = function (_a) {
+};/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(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);
+};
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};var StyledExpandMore = styled(ExpandMore)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  margin-top: auto;\n  margin-bottom: auto;\n  @keyframes open {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(180deg);\n    }\n  }\n  @keyframes close {\n    0% {\n      transform: rotate(180deg);\n    }\n    100% {\n      transform: rotate(0deg);\n    }\n  }\n"], ["\n  margin-top: auto;\n  margin-bottom: auto;\n  @keyframes open {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(180deg);\n    }\n  }\n  @keyframes close {\n    0% {\n      transform: rotate(180deg);\n    }\n    100% {\n      transform: rotate(0deg);\n    }\n  }\n"])));
+var StyledListItemIcon = styled(ListItemIcon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  min-width: 30px;\n"], ["\n  min-width: 30px;\n"])));
+var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var info = _a.info, badgeVariant = _a.badgeVariant, onClick = _a.onClick;
-    var theme = useTheme();
+    var info = _a.info, badgeVariant = _a.badgeVariant, expandedBackgroundColor = _a.expandedBackgroundColor;
     var location = useLocation();
+    var navigate = useNavigate();
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
@@ -44,7 +81,7 @@ styleInject(css_248z);var CardLayout = function (_a) {
      * Effect
      * ******************************************************************************************************************/
     useEffect(function () {
-        setIsExpandable(!!info && notEmpty(info.items));
+        setIsExpandable(notEmpty(info.items));
         if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
             setIsExpand(true);
         }
@@ -67,108 +104,44 @@ styleInject(css_248z);var CardLayout = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location]);
-    /********************************************************************************************************************
-     * Function
-     * ******************************************************************************************************************/
-    var toggleIsExpand = useCallback(function () {
-        setIsExpand(function (isExpand) { return !isExpand; });
-    }, []);
-    /********************************************************************************************************************
-     * Memo
-     * ******************************************************************************************************************/
-    var icon = useMemo(function () {
-        return info.icon
-            ? info.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
-            : undefined;
-    }, [info]);
-    var containerStyle = useMemo(function () { return ({
-        backgroundColor: isExpandable && isExpand
-            ? alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2)
-            : undefined,
-    }); }, [isExpand, isExpandable, theme]);
-    var expandIconSx = useMemo(function () {
-        return isExpandable && isExpand != null
-            ? {
-                marginTop: 'auto',
-                marginBottom: 'auto',
-                animation: "".concat(isExpand ? 'open' : 'close', " 0.1s linear"),
-                transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
-                '@keyframes open': {
-                    '0%': {
-                        transform: "rotate(0deg)",
-                    },
-                    '100%': {
-                        transform: "rotate(180deg)",
-                    },
-                },
-                '@keyframes close': {
-                    '0%': {
-                        transform: "rotate(180deg)",
-                    },
-                    '100%': {
-                        transform: "rotate(0deg)",
-                    },
-                },
-            }
-            : {
-                marginTop: 'auto',
-                marginBottom: 'auto',
-            };
-    }, [isExpandable, isExpand]);
-    var collapseStyle = useMemo(function () { return ({
-        backgroundColor: isExpand
-            ? alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2)
-            : undefined,
-    }); }, [isExpand, theme]);
-    var primaryTypographyProps = useMemo(function () { return ({ sx: { fontWeight: info.depth === 1 ? 600 : null } }); }, [info]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
     return (React.createElement(React.Fragment, null,
-        React.createElement(ListItemButton, { onClick: isExpandable
-                ? toggleIsExpand
-                : function () {
-                    if (onClick)
-                        onClick(info);
-                }, selected: isExpandable ? false : info.uri === location.pathname, style: containerStyle },
-            React.createElement(ListItemIcon, { sx: { minWidth: 30 } }, icon && React.createElement(Icon, { fontSize: 'small' }, icon)),
-            React.createElement(ListItemText, { primaryTypographyProps: primaryTypographyProps }, info.badge ? (React.createElement(Badge, { badgeContent: info.badge, color: 'error', variant: badgeVariant !== undefined ? badgeVariant : info.badgeVariant, anchorOrigin: { horizontal: 'left', vertical: 'top' }, slotProps: {
+        React.createElement(ListItemButton, { onClick: isExpandable ? function () { return setIsExpand(function (old) { return !old; }); } : function () { return info.uri && navigate(info.uri); }, selected: isExpandable ? false : info.uri === location.pathname, style: {
+                backgroundColor: isExpandable && isExpand ? expandedBackgroundColor : undefined,
+            } },
+            React.createElement(StyledListItemIcon, null, info.icon && React.createElement(Icon, { fontSize: 'small' }, info.icon)),
+            React.createElement(ListItemText, { primaryTypographyProps: { style: { fontWeight: info.depth === 1 ? 600 : undefined } } }, info.badge ? (React.createElement(Badge, { badgeContent: info.badge, color: 'error', variant: badgeVariant !== undefined ? badgeVariant : info.badgeVariant, anchorOrigin: { horizontal: 'left', vertical: 'top' }, slotProps: {
                     badge: { style: { left: '100%', top: '50%', transform: 'scale(.8) translate(10px, -50%)' } },
                 } },
                 React.createElement("div", null, info.name))) : (info.name)),
-            isExpandable && React.createElement(ExpandMore, { sx: expandIconSx })),
-        React.createElement(Collapse, { in: isExpand, style: collapseStyle }, isExpandable &&
-            info.items &&
-            info.items.map(function (subInfo, idx) { return (React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo, onClick: onClick })); }))));
-};/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+            isExpandable && (React.createElement(StyledExpandMore, { sx: {
+                    animation: "".concat(isExpand ? 'open' : 'close', " 0.1s linear"),
+                    transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
+                } }))),
+        isExpandable && (React.createElement(Collapse, { in: isExpand, style: { backgroundColor: isExpand ? expandedBackgroundColor : undefined } }, info.items &&
+            info.items.map(function (subInfo, idx) { return React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo }); })))));
 };var StyledList = styled(List)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
 var templateObject_1$3;var SideMenuList = function (_a) {
-    var list = _a.list, badgeVariant = _a.badgeVariant, onClick = _a.onClick;
-    return (React.createElement(StyledList, null, list.map(function (info, idx) { return (React.createElement(SideMenuListItem, { key: idx, info: info, badgeVariant: badgeVariant, onClick: onClick })); })));
-};var StyledSimpleBar = styled(SimpleBar)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));
+    /********************************************************************************************************************
+     * Use
+     * ******************************************************************************************************************/
+    var list = _a.list, badgeVariant = _a.badgeVariant;
+    var theme = useTheme();
+    /********************************************************************************************************************
+     * Variable
+     * ******************************************************************************************************************/
+    var finalList = list.map(function (item) { return (__assign(__assign({}, item), { icon: item.icon
+            ? item.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
+            : undefined })); });
+    var expandedBackgroundColor = alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2);
+    /********************************************************************************************************************
+     * Render
+     * ******************************************************************************************************************/
+    return (React.createElement(StyledList, null, finalList.map(function (info, idx) { return (React.createElement(SideMenuListItem, { key: idx, info: info, badgeVariant: badgeVariant, expandedBackgroundColor: expandedBackgroundColor })); })));
+};
+var SideMenuList$1 = React.memo(SideMenuList);var StyledSimpleBar = styled(SimpleBar)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));
 var StyledLogoContainerBox = styled(Box)(function (_a) {
     var theme = _a.theme;
     return theme.unstable_sx({
@@ -177,12 +150,13 @@ var StyledLogoContainerBox = styled(Box)(function (_a) {
     });
 });
 var templateObject_1$2;var SideMenu = function (_a) {
-    var logo = _a.logo, badgeVariant = _a.badgeVariant, list = _a.list, onClick = _a.onClick;
+    var logo = _a.logo, badgeVariant = _a.badgeVariant, list = _a.list;
     return (React.createElement(StyledSimpleBar, null,
         React.createElement(StyledLogoContainerBox, null,
             React.createElement(Toolbar, null, logo)),
-        list && React.createElement(SideMenuList, { badgeVariant: badgeVariant, list: list, onClick: onClick })));
-};var StyledContainerBox$1 = styled(Box)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+        list && React.createElement(SideMenuList$1, { badgeVariant: badgeVariant, list: list })));
+};
+var SideMenu$1 = React.memo(SideMenu);var StyledContainerBox$1 = styled(Box)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 var StyledHeadContainerBox = styled(Box)(function (_a) {
     var theme = _a.theme;
     return theme.unstable_sx({
@@ -251,7 +225,7 @@ var StyledMainBox = styled(Box)(function (_a) {
     });
 });
 var StyledMainContentDiv = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2;var _screens = ['xs', 'sm', 'md', 'lg', 'xl'];
+var templateObject_1, templateObject_2;var SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
 var _getNextScreen = function (screen) {
     if (screen === 'xs')
         return 'sm';
@@ -266,15 +240,16 @@ var DefaultLayout = function (_a) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl, onMenuClick = _a.onMenuClick;
+    var _b, _c, _d, _e, _f, _g;
+    var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl;
     var location = useLocation();
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _b = useState(false), isMobileOpen = _b[0], setIsMobileOpen = _b[1];
-    var _c = useState({}), menuTitles = _c[0], setMenuTitles = _c[1];
-    var _d = useState(), title = _d[0], setTitle = _d[1];
-    var _e = useState(initMenuHideScreen || 'sm'), menuHideScreen = _e[0], setMenuHideScreen = _e[1];
+    var _h = useState(false), isMobileOpen = _h[0], setIsMobileOpen = _h[1];
+    var _j = useState({}), menuTitles = _j[0], setMenuTitles = _j[1];
+    var _k = useState(), title = _k[0], setTitle = _k[1];
+    var _l = useState(initMenuHideScreen || 'sm'), menuHideScreen = _l[0], setMenuHideScreen = _l[1];
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
@@ -297,6 +272,9 @@ var DefaultLayout = function (_a) {
     useEffect(function () {
         setMenuHideScreen(initMenuHideScreen || 'sm');
     }, [initMenuHideScreen]);
+    useEffect(function () {
+        setIsMobileOpen(false);
+    }, [location]);
     useEffect(function () {
         if (menuTitles) {
             var titleData = menuTitles[location.pathname];
@@ -311,35 +289,14 @@ var DefaultLayout = function (_a) {
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
-    var toggleIsMobileOpen = useCallback(function () {
-        setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
-    }, []);
+    var toggleIsMobileOpen = function () { return setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; }); };
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
-    var appBarSx = useMemo(function () {
-        var width = {};
-        var ml = {};
-        width[_getNextScreen(menuHideScreen)] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)");
-        ml[_getNextScreen(menuHideScreen)] = "".concat(SIDE_MENU_WIDTH, "px");
-        return { width: width, ml: ml };
-    }, [menuHideScreen]);
-    var appBarIconButtonSx = useMemo(function () {
-        var display = {};
-        display[_getNextScreen(menuHideScreen)] = 'none';
-        return { mr: 2, display: display };
-    }, [menuHideScreen]);
-    var sideMenuContainerBoxSx = useMemo(function () {
-        var width = {};
-        var flexShrink = {};
-        width[_getNextScreen(menuHideScreen)] = SIDE_MENU_WIDTH;
-        flexShrink[_getNextScreen(menuHideScreen)] = 0;
-        return { width: width, flexShrink: flexShrink };
-    }, [menuHideScreen]);
     var sideMenuTemporaryDrawerSx = useMemo(function () {
         var found = false;
         return {
-            display: _screens.reduce(function (res, screen) {
+            display: SCREENS.reduce(function (res, screen) {
                 if (screen === menuHideScreen) {
                     found = true;
                     res[screen] = 'block';
@@ -354,7 +311,7 @@ var DefaultLayout = function (_a) {
     var sideMenuPermanentDrawerSx = useMemo(function () {
         var found = false;
         return {
-            display: _screens.reduce(function (res, screen) {
+            display: SCREENS.reduce(function (res, screen) {
                 if (screen === menuHideScreen) {
                     found = true;
                     res[screen] = 'none';
@@ -366,11 +323,20 @@ var DefaultLayout = function (_a) {
             }, {}),
         };
     }, [menuHideScreen]);
-    var mainBoxSx = useMemo(function () {
-        var width = {};
-        width[_getNextScreen(menuHideScreen)] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)");
-        return { width: width };
-    }, [menuHideScreen]);
+    /********************************************************************************************************************
+     * Variable
+     * ******************************************************************************************************************/
+    var nextMenuScreen = _getNextScreen(menuHideScreen);
+    var appBarSx = {
+        width: (_b = {}, _b[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _b),
+        ml: (_c = {}, _c[nextMenuScreen] = "".concat(SIDE_MENU_WIDTH, "px"), _c),
+    };
+    var appBarIconButtonSx = { mr: 2, display: (_d = {}, _d[nextMenuScreen] = 'none', _d) };
+    var sideMenuContainerBoxSx = {
+        width: (_e = {}, _e[nextMenuScreen] = SIDE_MENU_WIDTH, _e),
+        flexShrink: (_f = {}, _f[nextMenuScreen] = 0, _f),
+    };
+    var mainBoxSx = { width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g) };
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -384,12 +350,8 @@ var DefaultLayout = function (_a) {
         React.createElement(StyledSideMenuContainerBox, { component: 'nav', "aria-label": 'mailbox folders', sx: sideMenuContainerBoxSx },
             React.createElement(StyledSideMenuTemporaryDrawer, { variant: 'temporary', open: isMobileOpen, onClose: toggleIsMobileOpen, sx: sideMenuTemporaryDrawerSx, ModalProps: {
                     keepMounted: true, // Better open performance on mobile.
-                } }, menu && (React.createElement(SideMenu, { logo: logo, badgeVariant: badgeVariant, list: menu, onClick: function (menuItem) {
-                    toggleIsMobileOpen();
-                    if (onMenuClick)
-                        onMenuClick(menuItem);
-                } }))),
-            React.createElement(StyledSideMenuPermanentDrawer, { variant: 'permanent', open: true, sx: sideMenuPermanentDrawerSx }, menu && React.createElement(SideMenu, { logo: logo, badgeVariant: badgeVariant, list: menu, onClick: onMenuClick }))),
+                } }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu })),
+            React.createElement(StyledSideMenuPermanentDrawer, { variant: 'permanent', open: true, sx: sideMenuPermanentDrawerSx }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu }))),
         React.createElement(StyledMainBox, { component: 'main', sx: mainBoxSx },
             React.createElement(Toolbar, null),
             React.createElement(StyledMainContentDiv, null, children))));

package/dist/index.js

@@ -28,13 +28,50 @@ styleInject(css_248z);var CardLayout = function (_a) {
     var children = _a.children, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#eff3f8' : _b;
     return (React.createElement(material.Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', style: { minHeight: '100vh', backgroundColor: backgroundColor } },
         React.createElement(material.Grid, { item: true, xs: 12 }, children)));
-};var SideMenuListItem = function (_a) {
+};/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(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);
+};
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};var StyledExpandMore = material.styled(iconsMaterial.ExpandMore)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  margin-top: auto;\n  margin-bottom: auto;\n  @keyframes open {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(180deg);\n    }\n  }\n  @keyframes close {\n    0% {\n      transform: rotate(180deg);\n    }\n    100% {\n      transform: rotate(0deg);\n    }\n  }\n"], ["\n  margin-top: auto;\n  margin-bottom: auto;\n  @keyframes open {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(180deg);\n    }\n  }\n  @keyframes close {\n    0% {\n      transform: rotate(180deg);\n    }\n    100% {\n      transform: rotate(0deg);\n    }\n  }\n"])));
+var StyledListItemIcon = material.styled(material.ListItemIcon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  min-width: 30px;\n"], ["\n  min-width: 30px;\n"])));
+var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var info = _a.info, badgeVariant = _a.badgeVariant, onClick = _a.onClick;
-    var theme = material.useTheme();
+    var info = _a.info, badgeVariant = _a.badgeVariant, expandedBackgroundColor = _a.expandedBackgroundColor;
     var location = reactRouterDom.useLocation();
+    var navigate = reactRouterDom.useNavigate();
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
@@ -44,7 +81,7 @@ styleInject(css_248z);var CardLayout = function (_a) {
      * Effect
      * ******************************************************************************************************************/
     React.useEffect(function () {
-        setIsExpandable(!!info && util.notEmpty(info.items));
+        setIsExpandable(util.notEmpty(info.items));
         if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
             setIsExpand(true);
         }
@@ -67,108 +104,44 @@ styleInject(css_248z);var CardLayout = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location]);
-    /********************************************************************************************************************
-     * Function
-     * ******************************************************************************************************************/
-    var toggleIsExpand = React.useCallback(function () {
-        setIsExpand(function (isExpand) { return !isExpand; });
-    }, []);
-    /********************************************************************************************************************
-     * Memo
-     * ******************************************************************************************************************/
-    var icon = React.useMemo(function () {
-        return info.icon
-            ? info.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
-            : undefined;
-    }, [info]);
-    var containerStyle = React.useMemo(function () { return ({
-        backgroundColor: isExpandable && isExpand
-            ? material.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2)
-            : undefined,
-    }); }, [isExpand, isExpandable, theme]);
-    var expandIconSx = React.useMemo(function () {
-        return isExpandable && isExpand != null
-            ? {
-                marginTop: 'auto',
-                marginBottom: 'auto',
-                animation: "".concat(isExpand ? 'open' : 'close', " 0.1s linear"),
-                transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
-                '@keyframes open': {
-                    '0%': {
-                        transform: "rotate(0deg)",
-                    },
-                    '100%': {
-                        transform: "rotate(180deg)",
-                    },
-                },
-                '@keyframes close': {
-                    '0%': {
-                        transform: "rotate(180deg)",
-                    },
-                    '100%': {
-                        transform: "rotate(0deg)",
-                    },
-                },
-            }
-            : {
-                marginTop: 'auto',
-                marginBottom: 'auto',
-            };
-    }, [isExpandable, isExpand]);
-    var collapseStyle = React.useMemo(function () { return ({
-        backgroundColor: isExpand
-            ? material.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2)
-            : undefined,
-    }); }, [isExpand, theme]);
-    var primaryTypographyProps = React.useMemo(function () { return ({ sx: { fontWeight: info.depth === 1 ? 600 : null } }); }, [info]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
     return (React.createElement(React.Fragment, null,
-        React.createElement(material.ListItemButton, { onClick: isExpandable
-                ? toggleIsExpand
-                : function () {
-                    if (onClick)
-                        onClick(info);
-                }, selected: isExpandable ? false : info.uri === location.pathname, style: containerStyle },
-            React.createElement(material.ListItemIcon, { sx: { minWidth: 30 } }, icon && React.createElement(material.Icon, { fontSize: 'small' }, icon)),
-            React.createElement(material.ListItemText, { primaryTypographyProps: primaryTypographyProps }, info.badge ? (React.createElement(material.Badge, { badgeContent: info.badge, color: 'error', variant: badgeVariant !== undefined ? badgeVariant : info.badgeVariant, anchorOrigin: { horizontal: 'left', vertical: 'top' }, slotProps: {
+        React.createElement(material.ListItemButton, { onClick: isExpandable ? function () { return setIsExpand(function (old) { return !old; }); } : function () { return info.uri && navigate(info.uri); }, selected: isExpandable ? false : info.uri === location.pathname, style: {
+                backgroundColor: isExpandable && isExpand ? expandedBackgroundColor : undefined,
+            } },
+            React.createElement(StyledListItemIcon, null, info.icon && React.createElement(material.Icon, { fontSize: 'small' }, info.icon)),
+            React.createElement(material.ListItemText, { primaryTypographyProps: { style: { fontWeight: info.depth === 1 ? 600 : undefined } } }, info.badge ? (React.createElement(material.Badge, { badgeContent: info.badge, color: 'error', variant: badgeVariant !== undefined ? badgeVariant : info.badgeVariant, anchorOrigin: { horizontal: 'left', vertical: 'top' }, slotProps: {
                     badge: { style: { left: '100%', top: '50%', transform: 'scale(.8) translate(10px, -50%)' } },
                 } },
                 React.createElement("div", null, info.name))) : (info.name)),
-            isExpandable && React.createElement(iconsMaterial.ExpandMore, { sx: expandIconSx })),
-        React.createElement(material.Collapse, { in: isExpand, style: collapseStyle }, isExpandable &&
-            info.items &&
-            info.items.map(function (subInfo, idx) { return (React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo, onClick: onClick })); }))));
-};/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+            isExpandable && (React.createElement(StyledExpandMore, { sx: {
+                    animation: "".concat(isExpand ? 'open' : 'close', " 0.1s linear"),
+                    transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
+                } }))),
+        isExpandable && (React.createElement(material.Collapse, { in: isExpand, style: { backgroundColor: isExpand ? expandedBackgroundColor : undefined } }, info.items &&
+            info.items.map(function (subInfo, idx) { return React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo }); })))));
 };var StyledList = material.styled(material.List)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
 var templateObject_1$3;var SideMenuList = function (_a) {
-    var list = _a.list, badgeVariant = _a.badgeVariant, onClick = _a.onClick;
-    return (React.createElement(StyledList, null, list.map(function (info, idx) { return (React.createElement(SideMenuListItem, { key: idx, info: info, badgeVariant: badgeVariant, onClick: onClick })); })));
-};var StyledSimpleBar = material.styled(SimpleBar)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));
+    /********************************************************************************************************************
+     * Use
+     * ******************************************************************************************************************/
+    var list = _a.list, badgeVariant = _a.badgeVariant;
+    var theme = material.useTheme();
+    /********************************************************************************************************************
+     * Variable
+     * ******************************************************************************************************************/
+    var finalList = list.map(function (item) { return (__assign(__assign({}, item), { icon: item.icon
+            ? item.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
+            : undefined })); });
+    var expandedBackgroundColor = material.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2);
+    /********************************************************************************************************************
+     * Render
+     * ******************************************************************************************************************/
+    return (React.createElement(StyledList, null, finalList.map(function (info, idx) { return (React.createElement(SideMenuListItem, { key: idx, info: info, badgeVariant: badgeVariant, expandedBackgroundColor: expandedBackgroundColor })); })));
+};
+var SideMenuList$1 = React.memo(SideMenuList);var StyledSimpleBar = material.styled(SimpleBar)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));
 var StyledLogoContainerBox = material.styled(material.Box)(function (_a) {
     var theme = _a.theme;
     return theme.unstable_sx({
@@ -177,12 +150,13 @@ var StyledLogoContainerBox = material.styled(material.Box)(function (_a) {
     });
 });
 var templateObject_1$2;var SideMenu = function (_a) {
-    var logo = _a.logo, badgeVariant = _a.badgeVariant, list = _a.list, onClick = _a.onClick;
+    var logo = _a.logo, badgeVariant = _a.badgeVariant, list = _a.list;
     return (React.createElement(StyledSimpleBar, null,
         React.createElement(StyledLogoContainerBox, null,
             React.createElement(material.Toolbar, null, logo)),
-        list && React.createElement(SideMenuList, { badgeVariant: badgeVariant, list: list, onClick: onClick })));
-};var StyledContainerBox$1 = material.styled(material.Box)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+        list && React.createElement(SideMenuList$1, { badgeVariant: badgeVariant, list: list })));
+};
+var SideMenu$1 = React.memo(SideMenu);var StyledContainerBox$1 = material.styled(material.Box)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 var StyledHeadContainerBox = material.styled(material.Box)(function (_a) {
     var theme = _a.theme;
     return theme.unstable_sx({
@@ -251,7 +225,7 @@ var StyledMainBox = material.styled(material.Box)(function (_a) {
     });
 });
 var StyledMainContentDiv = material.styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2;var _screens = ['xs', 'sm', 'md', 'lg', 'xl'];
+var templateObject_1, templateObject_2;var SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
 var _getNextScreen = function (screen) {
     if (screen === 'xs')
         return 'sm';
@@ -266,15 +240,16 @@ var DefaultLayout = function (_a) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl, onMenuClick = _a.onMenuClick;
+    var _b, _c, _d, _e, _f, _g;
+    var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl;
     var location = reactRouterDom.useLocation();
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _b = React.useState(false), isMobileOpen = _b[0], setIsMobileOpen = _b[1];
-    var _c = React.useState({}), menuTitles = _c[0], setMenuTitles = _c[1];
-    var _d = React.useState(), title = _d[0], setTitle = _d[1];
-    var _e = React.useState(initMenuHideScreen || 'sm'), menuHideScreen = _e[0], setMenuHideScreen = _e[1];
+    var _h = React.useState(false), isMobileOpen = _h[0], setIsMobileOpen = _h[1];
+    var _j = React.useState({}), menuTitles = _j[0], setMenuTitles = _j[1];
+    var _k = React.useState(), title = _k[0], setTitle = _k[1];
+    var _l = React.useState(initMenuHideScreen || 'sm'), menuHideScreen = _l[0], setMenuHideScreen = _l[1];
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
@@ -297,6 +272,9 @@ var DefaultLayout = function (_a) {
     React.useEffect(function () {
         setMenuHideScreen(initMenuHideScreen || 'sm');
     }, [initMenuHideScreen]);
+    React.useEffect(function () {
+        setIsMobileOpen(false);
+    }, [location]);
     React.useEffect(function () {
         if (menuTitles) {
             var titleData = menuTitles[location.pathname];
@@ -311,35 +289,14 @@ var DefaultLayout = function (_a) {
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
-    var toggleIsMobileOpen = React.useCallback(function () {
-        setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
-    }, []);
+    var toggleIsMobileOpen = function () { return setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; }); };
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
-    var appBarSx = React.useMemo(function () {
-        var width = {};
-        var ml = {};
-        width[_getNextScreen(menuHideScreen)] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)");
-        ml[_getNextScreen(menuHideScreen)] = "".concat(SIDE_MENU_WIDTH, "px");
-        return { width: width, ml: ml };
-    }, [menuHideScreen]);
-    var appBarIconButtonSx = React.useMemo(function () {
-        var display = {};
-        display[_getNextScreen(menuHideScreen)] = 'none';
-        return { mr: 2, display: display };
-    }, [menuHideScreen]);
-    var sideMenuContainerBoxSx = React.useMemo(function () {
-        var width = {};
-        var flexShrink = {};
-        width[_getNextScreen(menuHideScreen)] = SIDE_MENU_WIDTH;
-        flexShrink[_getNextScreen(menuHideScreen)] = 0;
-        return { width: width, flexShrink: flexShrink };
-    }, [menuHideScreen]);
     var sideMenuTemporaryDrawerSx = React.useMemo(function () {
         var found = false;
         return {
-            display: _screens.reduce(function (res, screen) {
+            display: SCREENS.reduce(function (res, screen) {
                 if (screen === menuHideScreen) {
                     found = true;
                     res[screen] = 'block';
@@ -354,7 +311,7 @@ var DefaultLayout = function (_a) {
     var sideMenuPermanentDrawerSx = React.useMemo(function () {
         var found = false;
         return {
-            display: _screens.reduce(function (res, screen) {
+            display: SCREENS.reduce(function (res, screen) {
                 if (screen === menuHideScreen) {
                     found = true;
                     res[screen] = 'none';
@@ -366,11 +323,20 @@ var DefaultLayout = function (_a) {
             }, {}),
         };
     }, [menuHideScreen]);
-    var mainBoxSx = React.useMemo(function () {
-        var width = {};
-        width[_getNextScreen(menuHideScreen)] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)");
-        return { width: width };
-    }, [menuHideScreen]);
+    /********************************************************************************************************************
+     * Variable
+     * ******************************************************************************************************************/
+    var nextMenuScreen = _getNextScreen(menuHideScreen);
+    var appBarSx = {
+        width: (_b = {}, _b[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _b),
+        ml: (_c = {}, _c[nextMenuScreen] = "".concat(SIDE_MENU_WIDTH, "px"), _c),
+    };
+    var appBarIconButtonSx = { mr: 2, display: (_d = {}, _d[nextMenuScreen] = 'none', _d) };
+    var sideMenuContainerBoxSx = {
+        width: (_e = {}, _e[nextMenuScreen] = SIDE_MENU_WIDTH, _e),
+        flexShrink: (_f = {}, _f[nextMenuScreen] = 0, _f),
+    };
+    var mainBoxSx = { width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g) };
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -384,12 +350,8 @@ var DefaultLayout = function (_a) {
         React.createElement(StyledSideMenuContainerBox, { component: 'nav', "aria-label": 'mailbox folders', sx: sideMenuContainerBoxSx },
             React.createElement(StyledSideMenuTemporaryDrawer, { variant: 'temporary', open: isMobileOpen, onClose: toggleIsMobileOpen, sx: sideMenuTemporaryDrawerSx, ModalProps: {
                     keepMounted: true, // Better open performance on mobile.
-                } }, menu && (React.createElement(SideMenu, { logo: logo, badgeVariant: badgeVariant, list: menu, onClick: function (menuItem) {
-                    toggleIsMobileOpen();
-                    if (onMenuClick)
-                        onMenuClick(menuItem);
-                } }))),
-            React.createElement(StyledSideMenuPermanentDrawer, { variant: 'permanent', open: true, sx: sideMenuPermanentDrawerSx }, menu && React.createElement(SideMenu, { logo: logo, badgeVariant: badgeVariant, list: menu, onClick: onMenuClick }))),
+                } }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu })),
+            React.createElement(StyledSideMenuPermanentDrawer, { variant: 'permanent', open: true, sx: sideMenuPermanentDrawerSx }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu }))),
         React.createElement(StyledMainBox, { component: 'main', sx: mainBoxSx },
             React.createElement(material.Toolbar, null),
             React.createElement(StyledMainContentDiv, null, children))));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pdg/react-admin-layout",
   "title": "React Admin Layout",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "Admin Layout for React",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -46,7 +46,7 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.16",
-    "@pdg/util": "^1.0.20",
+    "@pdg/util": "^1.0.21",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",

package/dist/@types/index.d.ts

@@ -1 +0,0 @@
-export * from './types';

package/dist/@types/types.d.ts

@@ -1,13 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
-export type PartialPick<T, K extends keyof T> = Partial<Pick<T, K>>;
-export type PartialOmit<T, K extends keyof T> = Partial<Omit<T, K>>;
-export interface CommonProps {
-    children?: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-}
-export interface CommonSxProps extends CommonProps {
-    sx?: SxProps<Theme>;
-}

package/dist/DefaultLayout/DefaultLayout.style.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-export declare const SIDE_MENU_WIDTH = 220;
-export declare const StyledContainerBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledAppBar: import("@emotion/styled").StyledComponent<import("@mui/material").AppBarOwnProps & Omit<import("@mui/material").PaperOwnProps, "color" | "position" | "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, "style" | "className" | "color" | "children" | "position" | "sx" | "classes" | "elevation" | "square" | "variant" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledSideMenuContainerBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledSideMenuTemporaryDrawer: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledSideMenuPermanentDrawer: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledMainBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledMainContentDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/DefaultLayout/DefaultLayout.types.private.d.ts

@@ -1,9 +0,0 @@
-export interface MenuTitle {
-    name: string;
-    icon?: string;
-    parentName?: string;
-    parentIcon?: string;
-}
-export interface MenuTitleMap {
-    [key: string]: MenuTitle;
-}

package/dist/DefaultLayout/SideMenu/SideMenu.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { SideMenuProps } from './SideMenu.types';
-declare const SideMenu: React.FC<SideMenuProps>;
-export default SideMenu;

package/dist/DefaultLayout/SideMenu/SideMenu.style.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const StyledSimpleBar: import("@emotion/styled").StyledComponent<import("simplebar-react").Props & import("react").RefAttributes<import("simplebar-core").default | null> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledLogoContainerBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/DefaultLayout/SideMenu/SideMenu.types.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-import { SideMenuListProps } from '../SideMenuList';
-export interface SideMenuProps extends SideMenuListProps {
-    logo: ReactNode;
-}

package/dist/DefaultLayout/SideMenu/index.d.ts

@@ -1,4 +0,0 @@
-import SideMenu from "./SideMenu";
-export default SideMenu;
-export { SideMenu };
-export * from "./SideMenu.types";

package/dist/DefaultLayout/SideMenuList/SideMenuList.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { SideMenuListProps } from './SideMenuList.types';
-declare const SideMenuList: React.FC<SideMenuListProps>;
-export default SideMenuList;

package/dist/DefaultLayout/SideMenuList/SideMenuList.style.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const StyledList: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-    ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
-}, "className" | "style" | "classes" | "children" | "dense" | "disablePadding" | "subheader" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/DefaultLayout/SideMenuList/SideMenuList.types.d.ts

@@ -1,7 +0,0 @@
-import { MenuItem } from '../DefaultLayout.types';
-import { BadgeProps } from '@mui/material';
-export interface SideMenuListProps {
-    list: MenuItem[];
-    badgeVariant?: BadgeProps['variant'];
-    onClick?(menuItem: MenuItem): void;
-}

package/dist/DefaultLayout/SideMenuList/index.d.ts

@@ -1,4 +0,0 @@
-import SideMenuList from "./SideMenuList";
-export default SideMenuList;
-export { SideMenuList };
-export * from "./SideMenuList.types";

package/dist/DefaultLayout/SideMenuListItem/SideMenuListItem.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { SideMenuListItemProps } from './SideMenuListItem.types';
-declare const SideMenuListItem: React.FC<SideMenuListItemProps>;
-export default SideMenuListItem;

package/dist/DefaultLayout/SideMenuListItem/SideMenuListItem.types.d.ts

@@ -1,7 +0,0 @@
-import { MenuItem } from '../DefaultLayout.types';
-import { BadgeProps } from '@mui/material';
-export interface SideMenuListItemProps {
-    info: MenuItem;
-    badgeVariant?: BadgeProps['variant'];
-    onClick?(menuItem: MenuItem): void;
-}

package/dist/DefaultLayout/SideMenuListItem/index.d.ts

@@ -1,4 +0,0 @@
-import SideMenuListItem from "./SideMenuListItem";
-export default SideMenuListItem;
-export { SideMenuListItem };
-export * from "./SideMenuListItem.types";

package/dist/DefaultLayout/Title.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export interface TitleProps {
-    title: string;
-    icon?: string;
-    headTitle?: string;
-    headIcon?: string;
-}
-declare const Title: React.FC<TitleProps>;
-export default Title;

package/dist/DefaultLayout/Title.style.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-export declare const StyledContainerBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledHeadContainerBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledHeadIconContainerBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledHeadIcon: import("@emotion/styled").StyledComponent<import("@mui/material").IconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "style" | "className" | "color" | "children" | "fontSize" | "sx" | "classes" | "baseClassName"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledHeadTitleTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "p" | "style" | "className" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "sx" | "classes" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledTitleContainerDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledTitleIconContainerDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;