npm - @pdg/react-admin-layout - Versions diffs - 1.0.47 → 1.0.48 - Mend

@pdg/react-admin-layout 1.0.47 → 1.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.esm.js CHANGED Viewed

@@ -6,73 +6,56 @@ import {Grid,styled,ListItemIcon,ListItemButton,Icon,ListItemText,Badge,Collapse
     style.innerHTML = css;
     document.head.appendChild(style);
     return css;
-}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined{padding:5px 15px 4px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge{padding:7px 21px 6px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall{padding:3px 9px 2px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained{padding:6px 16px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge{padding:8px 22px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall{padding:4px 10px 3px}.MuiButtonBase-root.MuiButton-root.MuiButton-text{padding:6px 8px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge{padding:8px 11px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall{padding:4px 5px 3px}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main,input,button,textarea,pre,select,a{font-family:\"Pretendard\",\"Apple Gothic\",\"Dotum\",sans-serif;margin:0;padding:0;border:0;vertical-align:top;box-sizing:border-box;word-break:keep-all;line-height:unset}*:before,*:after{box-sizing:border-box}");var CardLayout = function (_a) {
-    var children = _a.children, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#eff3f8' : _b;
+}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined{padding:5px 15px 4px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge{padding:7px 21px 6px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall{padding:3px 9px 2px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained{padding:6px 16px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge{padding:8px 22px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall{padding:4px 10px 3px}.MuiButtonBase-root.MuiButton-root.MuiButton-text{padding:6px 8px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge{padding:8px 11px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall{padding:4px 5px 3px}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main,input,button,textarea,pre,select,a{font-family:\"Pretendard\",\"Apple Gothic\",\"Dotum\",sans-serif;margin:0;padding:0;border:0;vertical-align:top;box-sizing:border-box;word-break:keep-all;line-height:unset}*:before,*:after{box-sizing:border-box}");const CardLayout = ({ children, backgroundColor = '#eff3f8' }) => {
     return (React.createElement(Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', bgcolor: backgroundColor, minHeight: '100vh' },
         React.createElement(Grid, null, children)));
-};/******************************************************************************
-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, Iterator */
-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) {
+};const StyledExpandMore = styled(ExpandMore) `
+  margin-top: auto;
+  margin-bottom: auto;
+  @keyframes open {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(180deg);
+    }
+  }
+  @keyframes close {
+    0% {
+      transform: rotate(180deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+`;
+const StyledListItemIcon = styled(ListItemIcon) `
+  min-width: 30px;
+`;const SideMenuListItem = ({ info, badgeVariant, expandedBackgroundColor }) => {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var info = _a.info, badgeVariant = _a.badgeVariant, expandedBackgroundColor = _a.expandedBackgroundColor;
-    var location = useLocation();
-    var navigate = useNavigate();
+    const location = useLocation();
+    const navigate = useNavigate();
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _b = useState(false), isExpandable = _b[0], setIsExpandable = _b[1];
-    var _c = useState(false), isExpand = _c[0], setIsExpand = _c[1];
+    const [isExpandable, setIsExpandable] = useState(false);
+    const [isExpand, setIsExpand] = useState(false);
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
-    useEffect(function () {
+    useEffect(() => {
         setIsExpandable(!!info.items && info.items.length > 0);
-        if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
+        if (info.items && info.items.find((info) => location.pathname === info.uri)) {
             setIsExpand(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [info]);
-    useEffect(function () {
+    useEffect(() => {
         if (isExpandable && isExpand != null) {
             if (info.uri !== location.pathname) {
-                if (info.items && !info.items.find(function (info) { return location.pathname === info.uri; })) {
+                if (info.items && !info.items.find((info) => location.pathname === info.uri)) {
                     if (isExpand) {
                         setIsExpand(false);
                     }
@@ -80,7 +63,7 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
             }
         }
         if (isExpandable && !isExpand) {
-            if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
+            if (info.items && info.items.find((info) => location.pathname === info.uri)) {
                 setIsExpand(true);
             }
         }
@@ -90,7 +73,7 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
      * Render
      * ******************************************************************************************************************/
     return (React.createElement(React.Fragment, null,
-        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: {
+        React.createElement(ListItemButton, { onClick: isExpandable ? () => setIsExpand((old) => !old) : () => 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)),
@@ -99,69 +82,78 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
                 } },
                 React.createElement("div", null, info.name))) : (info.name)),
             isExpandable && (React.createElement(StyledExpandMore, { sx: {
-                    animation: "".concat(isExpand ? 'open' : 'close', " 0.1s linear"),
-                    transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
+                    animation: `${isExpand ? 'open' : 'close'} 0.1s linear`,
+                    transform: `rotate(${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) {
+            info.items.map((subInfo, idx) => React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo }))))));
+};const StyledList = styled(List) `
+  padding: 0;
+`;const SideMenuList = ({ list, badgeVariant }) => {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var list = _a.list, badgeVariant = _a.badgeVariant;
-    var theme = useTheme();
+    const 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);
+    const finalList = list.map((item) => (Object.assign(Object.assign({}, item), { icon: item.icon
+            ? item.icon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
+            : undefined })));
+    const 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 })); })));
+    return (React.createElement(StyledList, null, finalList.map((info, idx) => (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({
-        borderBottom: 'thin solid #f5f5f5',
-        color: 'text.primary',
-    });
-});
-var templateObject_1$2;var SideMenu = function (_a) {
-    var logo = _a.logo, badgeVariant = _a.badgeVariant, list = _a.list;
+var SideMenuList$1 = React.memo(SideMenuList);const StyledSimpleBar = styled(SimpleBar) `
+  max-height: 100%;
+`;
+const StyledLogoContainerBox = styled(Box)(({ theme }) => theme.unstable_sx({
+    borderBottom: 'thin solid #f5f5f5',
+    color: 'text.primary',
+}));const SideMenu = ({ logo, badgeVariant, list }) => {
     return (React.createElement(StyledSimpleBar, null,
         React.createElement(StyledLogoContainerBox, null,
             React.createElement(Toolbar, null, logo)),
         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({
-        display: { xs: 'none', sm: 'flex' },
-        alignItems: 'center',
-        opacity: 0.5,
-    });
-});
-var StyledHeadIconContainerBox = styled(Box)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  margin-right: 0.25rem;\n  line-height: 0;\n"], ["\n  margin-right: 0.25rem;\n  line-height: 0;\n"])));
-var StyledHeadIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 1rem;\n"], ["\n  font-size: 1rem;\n"])));
-var StyledHeadTitleTypography = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 0.7rem;\n"], ["\n  font-size: 0.7rem;\n"])));
-var StyledTitleContainerDiv = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 1rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 1rem;\n"])));
-var StyledTitleIconContainerDiv = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: inline-flex;\n  margin-right: 0.3rem;\n"], ["\n  flex-shrink: 0;\n  display: inline-flex;\n  margin-right: 0.3rem;\n"])));
-var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6;var Title = function (_a) {
+var SideMenu$1 = React.memo(SideMenu);const StyledContainerBox$1 = styled(Box) `
+  position: relative;
+`;
+const StyledHeadContainerBox = styled(Box)(({ theme }) => theme.unstable_sx({
+    display: { xs: 'none', sm: 'flex' },
+    alignItems: 'center',
+    opacity: 0.5,
+}));
+const StyledHeadIconContainerBox = styled(Box) `
+  margin-right: 0.25rem;
+  line-height: 0;
+`;
+const StyledHeadIcon = styled(Icon) `
+  font-size: 1rem;
+`;
+const StyledHeadTitleTypography = styled(Typography) `
+  font-size: 0.7rem;
+`;
+const StyledTitleContainerDiv = styled('div') `
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+`;
+const StyledTitleIconContainerDiv = styled('div') `
+  flex-shrink: 0;
+  display: inline-flex;
+  margin-right: 0.3rem;
+`;const Title = ({ title, icon, headTitle, headIcon }) => {
     /********************************************************************************************************************
      * Variable
      * ******************************************************************************************************************/
-    var title = _a.title, icon = _a.icon, headTitle = _a.headTitle, headIcon = _a.headIcon;
-    var finalHeadIcon = headIcon
-        ? headIcon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
+    const finalHeadIcon = headIcon
+        ? headIcon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
         : undefined;
-    var finalIcon = icon
-        ? icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
+    const finalIcon = icon
+        ? icon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
         : undefined;
     /********************************************************************************************************************
      * Render
@@ -176,9 +168,9 @@ var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4,
                 React.createElement(Icon, { fontSize: 'small' }, finalIcon))),
             React.createElement("div", null, title))));
 };
-var Title$1 = React.memo(Title);var SIDE_MENU_WIDTH = 220;
-var SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
-var _getNextScreen = function (screen) {
+var Title$1 = React.memo(Title);const SIDE_MENU_WIDTH = 220;
+const SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
+const _getNextScreen = (screen) => {
     if (screen === 'xs')
         return 'sm';
     else if (screen === 'sm')
@@ -188,27 +180,25 @@ var _getNextScreen = function (screen) {
     else
         return 'xl';
 };
-var DefaultLayout = function (_a) {
+const DefaultLayout = ({ children, logo, badgeVariant, menu, menuHideScreen = 'sm', appBarControl }) => {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var _b, _c, _d, _e, _f, _g;
-    var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, _h = _a.menuHideScreen, menuHideScreen = _h === void 0 ? 'sm' : _h, appBarControl = _a.appBarControl;
-    var location = useLocation();
+    const location = useLocation();
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _j = useState(false), isMobileOpen = _j[0], setIsMobileOpen = _j[1];
-    var _k = useState({}), menuTitles = _k[0], setMenuTitles = _k[1];
+    const [isMobileOpen, setIsMobileOpen] = useState(false);
+    const [menuTitles, setMenuTitles] = useState({});
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
-    useEffect(function () {
-        var menuTitles = {};
+    useEffect(() => {
+        const menuTitles = {};
         if (menu) {
-            menu.forEach(function (info) {
+            menu.forEach((info) => {
                 if ((info.uri == null || info.uri === '') && info.items && info.items.length > 0) {
-                    info.items.map(function (subInfo) {
+                    info.items.map((subInfo) => {
                         menuTitles[subInfo.uri] = { name: subInfo.name, parentName: info.name, parentIcon: info.icon };
                     });
                 }
@@ -219,22 +209,22 @@ var DefaultLayout = function (_a) {
         }
         setMenuTitles(menuTitles);
     }, [menu]);
-    useEffect(function () {
+    useEffect(() => {
         setIsMobileOpen(false);
     }, [location]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
-    var toggleIsMobileOpen = useCallback(function () {
-        setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
+    const toggleIsMobileOpen = useCallback(() => {
+        setIsMobileOpen((isMobileOpen) => !isMobileOpen);
     }, []);
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
-    var sideMenuTemporaryDrawerSx = useMemo(function () {
-        var found = false;
+    const sideMenuTemporaryDrawerSx = useMemo(() => {
+        let found = false;
         return {
-            display: SCREENS.reduce(function (res, screen) {
+            display: SCREENS.reduce((res, screen) => {
                 if (screen === menuHideScreen) {
                     found = true;
                     res[screen] = 'block';
@@ -246,10 +236,10 @@ var DefaultLayout = function (_a) {
             }, {}),
         };
     }, [menuHideScreen]);
-    var sideMenuPermanentDrawerSx = useMemo(function () {
-        var found = false;
+    const sideMenuPermanentDrawerSx = useMemo(() => {
+        let found = false;
         return {
-            display: SCREENS.reduce(function (res, screen) {
+            display: SCREENS.reduce((res, screen) => {
                 if (screen === menuHideScreen) {
                     found = true;
                     res[screen] = 'none';
@@ -264,25 +254,25 @@ var DefaultLayout = function (_a) {
     /********************************************************************************************************************
      * 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),
+    const nextMenuScreen = _getNextScreen(menuHideScreen);
+    const appBarSx = {
+        width: { [nextMenuScreen]: `calc(100% - ${SIDE_MENU_WIDTH}px)` },
+        ml: { [nextMenuScreen]: `${SIDE_MENU_WIDTH}px` },
     };
-    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),
+    const appBarIconButtonSx = { mr: 2, display: { [nextMenuScreen]: 'none' } };
+    const sideMenuContainerBoxSx = {
+        width: { [nextMenuScreen]: SIDE_MENU_WIDTH },
+        flexShrink: { [nextMenuScreen]: 0 },
     };
-    var mainBoxSx = {
-        width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g),
+    const mainBoxSx = {
+        width: { [nextMenuScreen]: `calc(100% - ${SIDE_MENU_WIDTH}px)` },
         flexGrow: 1,
         p: 2,
         display: 'flex',
         flexDirection: 'column',
         minHeight: '100vh',
     };
-    var titleData = menuTitles[location.pathname];
+    const titleData = menuTitles[location.pathname];
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -305,27 +295,24 @@ var DefaultLayout = function (_a) {
 /********************************************************************************************************************
  * Styled Components
  * ******************************************************************************************************************/
-var StyledContainerBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
-var StyledAppBar = styled(AppBar)(function (_a) {
-    var theme = _a.theme;
-    return theme.unstable_sx({
-        backdropFilter: 'blur(20px)',
-        backgroundColor: 'rgba(255, 255, 255, 0.7)',
-        color: 'text.primary',
-        borderBottom: 'thin solid #f5f5f5',
-    });
-});
-var StyledSideMenuTemporaryDrawer = styled(Drawer)(function (_a) {
-    var theme = _a.theme;
-    return theme.unstable_sx({
-        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
-    });
-});
-var StyledSideMenuPermanentDrawer = styled(Drawer)(function (_a) {
-    var theme = _a.theme;
-    return theme.unstable_sx({
-        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
-    });
-});
-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;export{CardLayout,DefaultLayout};
+const StyledContainerBox = styled(Box) `
+  display: flex;
+  height: 100%;
+`;
+const StyledAppBar = styled(AppBar)(({ theme }) => theme.unstable_sx({
+    backdropFilter: 'blur(20px)',
+    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+    color: 'text.primary',
+    borderBottom: 'thin solid #f5f5f5',
+}));
+const StyledSideMenuTemporaryDrawer = styled(Drawer)(({ theme }) => theme.unstable_sx({
+    '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
+}));
+const StyledSideMenuPermanentDrawer = styled(Drawer)(({ theme }) => theme.unstable_sx({
+    '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
+}));
+const StyledMainContentDiv = styled('div') `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;export{CardLayout,DefaultLayout};

package/dist/index.js CHANGED Viewed

@@ -6,73 +6,56 @@
     style.innerHTML = css;
     document.head.appendChild(style);
     return css;
-}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined{padding:5px 15px 4px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge{padding:7px 21px 6px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall{padding:3px 9px 2px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained{padding:6px 16px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge{padding:8px 22px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall{padding:4px 10px 3px}.MuiButtonBase-root.MuiButton-root.MuiButton-text{padding:6px 8px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge{padding:8px 11px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall{padding:4px 5px 3px}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main,input,button,textarea,pre,select,a{font-family:\"Pretendard\",\"Apple Gothic\",\"Dotum\",sans-serif;margin:0;padding:0;border:0;vertical-align:top;box-sizing:border-box;word-break:keep-all;line-height:unset}*:before,*:after{box-sizing:border-box}");var CardLayout = function (_a) {
-    var children = _a.children, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#eff3f8' : _b;
+}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined{padding:5px 15px 4px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge{padding:7px 21px 6px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall{padding:3px 9px 2px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained{padding:6px 16px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge{padding:8px 22px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall{padding:4px 10px 3px}.MuiButtonBase-root.MuiButton-root.MuiButton-text{padding:6px 8px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge{padding:8px 11px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall{padding:4px 5px 3px}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main,input,button,textarea,pre,select,a{font-family:\"Pretendard\",\"Apple Gothic\",\"Dotum\",sans-serif;margin:0;padding:0;border:0;vertical-align:top;box-sizing:border-box;word-break:keep-all;line-height:unset}*:before,*:after{box-sizing:border-box}");const CardLayout = ({ children, backgroundColor = '#eff3f8' }) => {
     return (React.createElement(material.Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', bgcolor: backgroundColor, minHeight: '100vh' },
         React.createElement(material.Grid, null, children)));
-};/******************************************************************************
-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, Iterator */
-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) {
+};const StyledExpandMore = material.styled(iconsMaterial.ExpandMore) `
+  margin-top: auto;
+  margin-bottom: auto;
+  @keyframes open {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(180deg);
+    }
+  }
+  @keyframes close {
+    0% {
+      transform: rotate(180deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+`;
+const StyledListItemIcon = material.styled(material.ListItemIcon) `
+  min-width: 30px;
+`;const SideMenuListItem = ({ info, badgeVariant, expandedBackgroundColor }) => {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var info = _a.info, badgeVariant = _a.badgeVariant, expandedBackgroundColor = _a.expandedBackgroundColor;
-    var location = reactRouter.useLocation();
-    var navigate = reactRouter.useNavigate();
+    const location = reactRouter.useLocation();
+    const navigate = reactRouter.useNavigate();
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _b = React.useState(false), isExpandable = _b[0], setIsExpandable = _b[1];
-    var _c = React.useState(false), isExpand = _c[0], setIsExpand = _c[1];
+    const [isExpandable, setIsExpandable] = React.useState(false);
+    const [isExpand, setIsExpand] = React.useState(false);
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
-    React.useEffect(function () {
+    React.useEffect(() => {
         setIsExpandable(!!info.items && info.items.length > 0);
-        if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
+        if (info.items && info.items.find((info) => location.pathname === info.uri)) {
             setIsExpand(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [info]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         if (isExpandable && isExpand != null) {
             if (info.uri !== location.pathname) {
-                if (info.items && !info.items.find(function (info) { return location.pathname === info.uri; })) {
+                if (info.items && !info.items.find((info) => location.pathname === info.uri)) {
                     if (isExpand) {
                         setIsExpand(false);
                     }
@@ -80,7 +63,7 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
             }
         }
         if (isExpandable && !isExpand) {
-            if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
+            if (info.items && info.items.find((info) => location.pathname === info.uri)) {
                 setIsExpand(true);
             }
         }
@@ -90,7 +73,7 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
      * Render
      * ******************************************************************************************************************/
     return (React.createElement(React.Fragment, null,
-        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: {
+        React.createElement(material.ListItemButton, { onClick: isExpandable ? () => setIsExpand((old) => !old) : () => 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)),
@@ -99,69 +82,78 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
                 } },
                 React.createElement("div", null, info.name))) : (info.name)),
             isExpandable && (React.createElement(StyledExpandMore, { sx: {
-                    animation: "".concat(isExpand ? 'open' : 'close', " 0.1s linear"),
-                    transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
+                    animation: `${isExpand ? 'open' : 'close'} 0.1s linear`,
+                    transform: `rotate(${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) {
+            info.items.map((subInfo, idx) => React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo }))))));
+};const StyledList = material.styled(material.List) `
+  padding: 0;
+`;const SideMenuList = ({ list, badgeVariant }) => {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var list = _a.list, badgeVariant = _a.badgeVariant;
-    var theme = material.useTheme();
+    const 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);
+    const finalList = list.map((item) => (Object.assign(Object.assign({}, item), { icon: item.icon
+            ? item.icon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
+            : undefined })));
+    const 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 })); })));
+    return (React.createElement(StyledList, null, finalList.map((info, idx) => (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({
-        borderBottom: 'thin solid #f5f5f5',
-        color: 'text.primary',
-    });
-});
-var templateObject_1$2;var SideMenu = function (_a) {
-    var logo = _a.logo, badgeVariant = _a.badgeVariant, list = _a.list;
+var SideMenuList$1 = React.memo(SideMenuList);const StyledSimpleBar = material.styled(SimpleBar) `
+  max-height: 100%;
+`;
+const StyledLogoContainerBox = material.styled(material.Box)(({ theme }) => theme.unstable_sx({
+    borderBottom: 'thin solid #f5f5f5',
+    color: 'text.primary',
+}));const SideMenu = ({ logo, badgeVariant, list }) => {
     return (React.createElement(StyledSimpleBar, null,
         React.createElement(StyledLogoContainerBox, null,
             React.createElement(material.Toolbar, null, logo)),
         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({
-        display: { xs: 'none', sm: 'flex' },
-        alignItems: 'center',
-        opacity: 0.5,
-    });
-});
-var StyledHeadIconContainerBox = material.styled(material.Box)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  margin-right: 0.25rem;\n  line-height: 0;\n"], ["\n  margin-right: 0.25rem;\n  line-height: 0;\n"])));
-var StyledHeadIcon = material.styled(material.Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 1rem;\n"], ["\n  font-size: 1rem;\n"])));
-var StyledHeadTitleTypography = material.styled(material.Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 0.7rem;\n"], ["\n  font-size: 0.7rem;\n"])));
-var StyledTitleContainerDiv = material.styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 1rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 1rem;\n"])));
-var StyledTitleIconContainerDiv = material.styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: inline-flex;\n  margin-right: 0.3rem;\n"], ["\n  flex-shrink: 0;\n  display: inline-flex;\n  margin-right: 0.3rem;\n"])));
-var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6;var Title = function (_a) {
+var SideMenu$1 = React.memo(SideMenu);const StyledContainerBox$1 = material.styled(material.Box) `
+  position: relative;
+`;
+const StyledHeadContainerBox = material.styled(material.Box)(({ theme }) => theme.unstable_sx({
+    display: { xs: 'none', sm: 'flex' },
+    alignItems: 'center',
+    opacity: 0.5,
+}));
+const StyledHeadIconContainerBox = material.styled(material.Box) `
+  margin-right: 0.25rem;
+  line-height: 0;
+`;
+const StyledHeadIcon = material.styled(material.Icon) `
+  font-size: 1rem;
+`;
+const StyledHeadTitleTypography = material.styled(material.Typography) `
+  font-size: 0.7rem;
+`;
+const StyledTitleContainerDiv = material.styled('div') `
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+`;
+const StyledTitleIconContainerDiv = material.styled('div') `
+  flex-shrink: 0;
+  display: inline-flex;
+  margin-right: 0.3rem;
+`;const Title = ({ title, icon, headTitle, headIcon }) => {
     /********************************************************************************************************************
      * Variable
      * ******************************************************************************************************************/
-    var title = _a.title, icon = _a.icon, headTitle = _a.headTitle, headIcon = _a.headIcon;
-    var finalHeadIcon = headIcon
-        ? headIcon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
+    const finalHeadIcon = headIcon
+        ? headIcon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
         : undefined;
-    var finalIcon = icon
-        ? icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
+    const finalIcon = icon
+        ? icon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
         : undefined;
     /********************************************************************************************************************
      * Render
@@ -176,9 +168,9 @@ var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4,
                 React.createElement(material.Icon, { fontSize: 'small' }, finalIcon))),
             React.createElement("div", null, title))));
 };
-var Title$1 = React.memo(Title);var SIDE_MENU_WIDTH = 220;
-var SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
-var _getNextScreen = function (screen) {
+var Title$1 = React.memo(Title);const SIDE_MENU_WIDTH = 220;
+const SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
+const _getNextScreen = (screen) => {
     if (screen === 'xs')
         return 'sm';
     else if (screen === 'sm')
@@ -188,27 +180,25 @@ var _getNextScreen = function (screen) {
     else
         return 'xl';
 };
-var DefaultLayout = function (_a) {
+const DefaultLayout = ({ children, logo, badgeVariant, menu, menuHideScreen = 'sm', appBarControl }) => {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var _b, _c, _d, _e, _f, _g;
-    var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, _h = _a.menuHideScreen, menuHideScreen = _h === void 0 ? 'sm' : _h, appBarControl = _a.appBarControl;
-    var location = reactRouter.useLocation();
+    const location = reactRouter.useLocation();
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _j = React.useState(false), isMobileOpen = _j[0], setIsMobileOpen = _j[1];
-    var _k = React.useState({}), menuTitles = _k[0], setMenuTitles = _k[1];
+    const [isMobileOpen, setIsMobileOpen] = React.useState(false);
+    const [menuTitles, setMenuTitles] = React.useState({});
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
-    React.useEffect(function () {
-        var menuTitles = {};
+    React.useEffect(() => {
+        const menuTitles = {};
         if (menu) {
-            menu.forEach(function (info) {
+            menu.forEach((info) => {
                 if ((info.uri == null || info.uri === '') && info.items && info.items.length > 0) {
-                    info.items.map(function (subInfo) {
+                    info.items.map((subInfo) => {
                         menuTitles[subInfo.uri] = { name: subInfo.name, parentName: info.name, parentIcon: info.icon };
                     });
                 }
@@ -219,22 +209,22 @@ var DefaultLayout = function (_a) {
         }
         setMenuTitles(menuTitles);
     }, [menu]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         setIsMobileOpen(false);
     }, [location]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
-    var toggleIsMobileOpen = React.useCallback(function () {
-        setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
+    const toggleIsMobileOpen = React.useCallback(() => {
+        setIsMobileOpen((isMobileOpen) => !isMobileOpen);
     }, []);
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
-    var sideMenuTemporaryDrawerSx = React.useMemo(function () {
-        var found = false;
+    const sideMenuTemporaryDrawerSx = React.useMemo(() => {
+        let found = false;
         return {
-            display: SCREENS.reduce(function (res, screen) {
+            display: SCREENS.reduce((res, screen) => {
                 if (screen === menuHideScreen) {
                     found = true;
                     res[screen] = 'block';
@@ -246,10 +236,10 @@ var DefaultLayout = function (_a) {
             }, {}),
         };
     }, [menuHideScreen]);
-    var sideMenuPermanentDrawerSx = React.useMemo(function () {
-        var found = false;
+    const sideMenuPermanentDrawerSx = React.useMemo(() => {
+        let found = false;
         return {
-            display: SCREENS.reduce(function (res, screen) {
+            display: SCREENS.reduce((res, screen) => {
                 if (screen === menuHideScreen) {
                     found = true;
                     res[screen] = 'none';
@@ -264,25 +254,25 @@ var DefaultLayout = function (_a) {
     /********************************************************************************************************************
      * 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),
+    const nextMenuScreen = _getNextScreen(menuHideScreen);
+    const appBarSx = {
+        width: { [nextMenuScreen]: `calc(100% - ${SIDE_MENU_WIDTH}px)` },
+        ml: { [nextMenuScreen]: `${SIDE_MENU_WIDTH}px` },
     };
-    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),
+    const appBarIconButtonSx = { mr: 2, display: { [nextMenuScreen]: 'none' } };
+    const sideMenuContainerBoxSx = {
+        width: { [nextMenuScreen]: SIDE_MENU_WIDTH },
+        flexShrink: { [nextMenuScreen]: 0 },
     };
-    var mainBoxSx = {
-        width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g),
+    const mainBoxSx = {
+        width: { [nextMenuScreen]: `calc(100% - ${SIDE_MENU_WIDTH}px)` },
         flexGrow: 1,
         p: 2,
         display: 'flex',
         flexDirection: 'column',
         minHeight: '100vh',
     };
-    var titleData = menuTitles[location.pathname];
+    const titleData = menuTitles[location.pathname];
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -305,27 +295,24 @@ var DefaultLayout = function (_a) {
 /********************************************************************************************************************
  * Styled Components
  * ******************************************************************************************************************/
-var StyledContainerBox = material.styled(material.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
-var StyledAppBar = material.styled(material.AppBar)(function (_a) {
-    var theme = _a.theme;
-    return theme.unstable_sx({
-        backdropFilter: 'blur(20px)',
-        backgroundColor: 'rgba(255, 255, 255, 0.7)',
-        color: 'text.primary',
-        borderBottom: 'thin solid #f5f5f5',
-    });
-});
-var StyledSideMenuTemporaryDrawer = material.styled(material.Drawer)(function (_a) {
-    var theme = _a.theme;
-    return theme.unstable_sx({
-        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
-    });
-});
-var StyledSideMenuPermanentDrawer = material.styled(material.Drawer)(function (_a) {
-    var theme = _a.theme;
-    return theme.unstable_sx({
-        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
-    });
-});
-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;exports.CardLayout=CardLayout;exports.DefaultLayout=DefaultLayout;
+const StyledContainerBox = material.styled(material.Box) `
+  display: flex;
+  height: 100%;
+`;
+const StyledAppBar = material.styled(material.AppBar)(({ theme }) => theme.unstable_sx({
+    backdropFilter: 'blur(20px)',
+    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+    color: 'text.primary',
+    borderBottom: 'thin solid #f5f5f5',
+}));
+const StyledSideMenuTemporaryDrawer = material.styled(material.Drawer)(({ theme }) => theme.unstable_sx({
+    '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
+}));
+const StyledSideMenuPermanentDrawer = material.styled(material.Drawer)(({ theme }) => theme.unstable_sx({
+    '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
+}));
+const StyledMainContentDiv = material.styled('div') `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;exports.CardLayout=CardLayout;exports.DefaultLayout=DefaultLayout;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pdg/react-admin-layout",
   "title": "React Admin Layout",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "description": "Admin Layout for React",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -26,8 +26,13 @@
     "build": "rollup -c --bundleConfigAsCjs",
     "build:examples": "cd examples && npm run build",
     "pub": "npm i && npm run build:examples && npm run build && npm publish --access=public && rm ./.git/hooks/pre-commit",
-    "lint": "eslint './src/**/*.{ts,tsx}'",
-    "reinstall-module": "rm -rf node_modules && rm -f package-lock.json && npm i"
+    "git:commit": "node .git-commit.cjs",
+    "git:push": "git push",
+    "git:commit:push": "npm run git:commit && npm run git:push",
+    "reset:gitignore": "git rm -r --cached . && git add .",
+    "reinstall": "npm run reinstall:module",
+    "reinstall:module": "rm -rf node_modules && rm -f package-lock.json && npm i",
+    "lint": "eslint './src/**/*.{ts,tsx}'"
   },
   "author": "YOUNG CHUL PARK",
   "license": "MIT",