@mui-treasury/layout - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

adapters/sidebar.js

@@ -17,2 +17,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     secondaryCollapseBreakpoint,
+    secondaryInsetHiddenBreakpoint,
+    secondaryInsetHiddenDisabled,
     getSecondarySidebarWidth,
@@ -27,3 +29,3 @@ getSecondarySidebarGap,
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["secondarySidebar", "secondaryOpened", "setSecondaryOpened", "secondaryCollapsed", "setSecondaryCollapsed", "secondaryClipped", "secondaryAutoCollapseDisabled", "secondaryCollapseBreakpoint", "getSecondarySidebarWidth", "getSecondarySidebarGap", "getSecondarySidebarZIndex", "getSecondaryInsetSidebarStyle", "getSecondaryInsetSidebarBodyStyle", "secondaryPersistentBehavior", "secondaryInsetBehavior"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["secondarySidebar", "secondaryOpened", "setSecondaryOpened", "secondaryCollapsed", "setSecondaryCollapsed", "secondaryClipped", "secondaryAutoCollapseDisabled", "secondaryCollapseBreakpoint", "secondaryInsetHiddenBreakpoint", "secondaryInsetHiddenDisabled", "getSecondarySidebarWidth", "getSecondarySidebarGap", "getSecondarySidebarZIndex", "getSecondaryInsetSidebarStyle", "getSecondaryInsetSidebarBodyStyle", "secondaryPersistentBehavior", "secondaryInsetBehavior"]);
 
@@ -39,2 +41,4 @@ return _extends({}, rest, {
     collapseBreakpoint: secondaryCollapseBreakpoint,
+    insetHiddenBreakpoint: secondaryInsetHiddenBreakpoint,
+    insetHiddenDisabled: secondaryInsetHiddenDisabled,
     getSidebarWidth: getSecondarySidebarWidth,
@@ -41,0 +45,0 @@ getSidebarGap: getSecondarySidebarGap,

components/Content.js

@@ -11,2 +11,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { useLayoutCtx } from '../hooks';
+import createContent from '../models/content';
 import HeaderOffset from './HeaderOffset';
@@ -31,5 +32,3 @@ const useStyles = makeStyles(() => ({
   const ctx = useLayoutCtx();
-  const {
-    getContentStyle
-  } = ctx;
+  const contentModel = createContent(ctx);
   const styles = useStyles(props);
@@ -39,4 +38,4 @@ const transition = useTransitionStyles();
     className: cx(styles.root, transition.root, className),
-    style: _extends({}, style, {}, getContentStyle())
-  }), !omitHeaderOffset && React.createElement(HeaderOffset, null), typeof children === 'function' ? children(ctx) : children);
+    style: _extends({}, style, {}, contentModel.getStyle())
+  }), !omitHeaderOffset && React.createElement(HeaderOffset, null), children);
 };
@@ -43,0 +42,0 @@

components/Footer.js

@@ -10,3 +10,5 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { useLayoutCtx, useInsetBreakpoint } from '../hooks';
+import SidebarAdapter from '../adapters/sidebar';
 import { transitionStyles } from '../styles';
+import createFooter from '../models/footer';
 import upperFirst from '../utils/upperFirst';
@@ -22,2 +24,3 @@ const useStyles = makeStyles(({
     padding: spacing(2),
+    flex: 'auto',
     [breakpoints.up('sm')]: {
@@ -40,22 +43,18 @@ padding: spacing(3)
   const {
-    getFooterStyle,
     sidebar,
     secondarySidebar
   } = ctx;
-  const {
-    isTargetDown,
-    insetHiddenDisabled
-  } = useInsetBreakpoint(ctx);
+  const footerModel = createFooter(ctx);
+  const main = useInsetBreakpoint(ctx);
+  const sub = useInsetBreakpoint(SidebarAdapter.mapSecondaryConfig(ctx));
   const styles = useStyles(props);
   const transition = useTransitionStyles();
-  const footerStyle = getFooterStyle();
+  const footerStyle = footerModel.getStyle();
 
-  if (isTargetDown && !insetHiddenDisabled) {
-    if (sidebar.inset) {
-      delete footerStyle[`margin${upperFirst(sidebar.anchor)}`];
-    }
+  if (main.isTargetDown && !main.insetHiddenDisabled && sidebar.inset) {
+    delete footerStyle[`margin${upperFirst(sidebar.anchor)}`];
+  }
 
-    if (secondarySidebar.inset) {
-      delete footerStyle[`margin${upperFirst(secondarySidebar.anchor)}`];
-    }
+  if (sub.isTargetDown && !sub.insetHiddenDisabled && secondarySidebar.inset) {
+    delete footerStyle[`margin${upperFirst(secondarySidebar.anchor)}`];
   }
@@ -62,0 +61,0 @@

components/Header.js

@@ -10,2 +10,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import AppBar from '@material-ui/core/AppBar';
+import createHeader from '../models/header';
+import createAllSidebars from '../models/allSidebars';
 import { useLayoutCtx } from '../hooks';
@@ -29,6 +31,4 @@ import { transitionStyles } from '../styles';
   const ctx = useLayoutCtx();
-  const {
-    header,
-    getHeaderStyle
-  } = ctx;
+  const headerModel = createHeader(ctx);
+  const allSidebars = createAllSidebars(ctx);
   const styles = useStyles();
@@ -41,5 +41,5 @@ const transition = useTransitionStyles();
   }, props, {
-    position: header.position,
+    position: ctx.header.position,
     className: cx(styles.root, transition.root, className),
-    style: _extends({}, style, {}, getHeaderStyle(theme))
+    style: _extends({}, style, {}, headerModel.getStyle(), {}, allSidebars.getHeaderStyle(theme))
   }), typeof children === 'function' ? children(ctx) : children);
@@ -46,0 +46,0 @@ };

components/index.js

@@ -17,2 +17,3 @@ export { default as CollapseBtn } from './CollapseBtn';
 export { default as InsetSidebar } from './InsetSidebar';
-export { default as SecondaryInsetSidebar } from './SecondaryInsetSidebar';
+export { default as SecondaryInsetSidebar } from './SecondaryInsetSidebar';
+export { default as InsetContainer } from './InsetContainer';

components/internal/SharedInsetSidebar.js

@@ -12,2 +12,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { useHeightAdjustment, useInsetBreakpoint, useWindow } from '../../hooks';
+import createInsetSidebar from '../../models/insetSidebar';
 import * as styles from '../../styles';
@@ -35,8 +36,9 @@ const useTransitionStyles = makeStyles(styles.transitionStyles);
     opened,
-    setOpened,
-    getSidebarWidth,
-    getInsetSidebarStyle,
-    getInsetSidebarBodyStyle
+    setOpened
   } = parsedCtx;
   const {
+    getWidth,
+    getBodyStyle
+  } = createInsetSidebar(parsedCtx);
+  const {
     displayedBelowBreakpoint
@@ -61,3 +63,3 @@ } = useInsetBreakpoint(parsedCtx);
         style: _extends({}, PaperProps.style, {
-          width: getSidebarWidth()
+          width: getWidth()
         })
@@ -73,5 +75,7 @@ }),
     className: cx('InsetSidebar-root', insetStyles.root, className),
-    style: _extends({}, style, {}, getInsetSidebarStyle())
+    style: _extends({}, style, {
+      width: getWidth()
+    })
   }, props), React.createElement("div", _extends({}, PaperProps, {
-    style: _extends({}, getInsetSidebarBodyStyle(), {}, PaperProps.style),
+    style: _extends({}, getBodyStyle(), {}, PaperProps.style),
     className: cx('InsetSidebar-paper', insetPosition === 'sticky' && insetStyles.paperSticky, PaperProps.className)
@@ -78,0 +82,0 @@ }), React.createElement("div", {

components/internal/SharedSidebar.js

@@ -13,2 +13,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { transitionStyles, sidebarStyles } from '../../styles';
+import createEdgeSidebar from '../../models/edgeSidebar';
 const useSidebarStyles = makeStyles(sidebarStyles);
@@ -41,5 +42,7 @@ const useTransitionStyles = makeStyles(transitionStyles);
     setOpened,
-    getSidebarWidth,
     getSidebarZIndex
   } = parsedCtx;
+  const {
+    getWidth
+  } = createEdgeSidebar(parsedCtx);
   const isPermanent = sidebar.variant === 'permanent';
@@ -58,3 +61,3 @@ return React.createElement(Drawer, _extends({}, props, {
       style: _extends({}, get(PaperProps, 'style'), {}, getSidebarZIndex(theme), {
-        width: getSidebarWidth()
+        width: getWidth()
       })
@@ -61,0 +64,0 @@ }),

core/layoutContext.js

@@ -6,3 +6,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import PropTypes from 'prop-types';
-import { createLayoutUtils, isSomeExisted, selectConfigByScreen } from '../utils';
+import { isSomeExisted, selectConfigByScreen } from '../utils';
 import useScreen from '../hooks/useScreen';
@@ -34,12 +34,6 @@ import { defaultLayoutPreset } from '../presets';
   const finalConfig = parseConfig(isSomeExisted(config, keys) ? selectConfigByScreen(config, screen) : config);
-  const utils = createLayoutUtils(_extends({
-    opened,
-    collapsed,
-    secondaryOpened,
-    secondaryCollapsed
-  }, finalConfig));
   return React.createElement(LayoutCtx.Provider, {
     value: _extends({
       screen
-    }, finalConfig, {}, utils, {
+    }, finalConfig, {
       autoCollapseDisabled: config.autoCollapseDisabled,
@@ -46,0 +40,0 @@ collapsedBreakpoint: config.collapsedBreakpoint,

hooks/use2ndSidebarConfig.js

@@ -6,8 +6,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import SidebarAdapter from '../adapters/sidebar';
+import createAllSidebars from '../models/allSidebars';
 export default (() => {
   const ctx = useLayoutCtx();
+  const allSidebars = createAllSidebars(ctx);
   const parsedCtx = SidebarAdapter.mapSecondaryConfig(ctx);
   return _extends({}, parsedCtx, {
+    getSidebarZIndex: allSidebars.getSecondaryStyle,
     clipped: get(parsedCtx, ['header', 'secondaryClipped'])
   });
 });

hooks/useSidebarConfig.js

@@ -5,7 +5,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import useLayoutCtx from './useLayoutCtx';
+import createAllSidebars from '../models/allSidebars';
 export default (() => {
   const ctx = useLayoutCtx();
+  const allSidebars = createAllSidebars(ctx);
   return _extends({}, ctx, {
+    getSidebarZIndex: allSidebars.getPrimaryStyle,
     clipped: get(ctx, ['header', 'clipped'])
   });
 });

models/allSidebars.js

 import get from 'lodash.get';
-import createSidebar from './sidebar';
-import createInsetSidebar from './insetSidebar';
+import createEdgeEffect from './edgeEffect';
+import createInsetEffect from './insetEffect';
 import SidebarAdapter from '../adapters/sidebar';
@@ -9,17 +9,27 @@ export default ((ctx = {}) => {
     sidebar = {},
-    secondarySidebar: secSidebar = {}
+    secondarySidebar = {}
   } = ctx;
-  const primarySidebar = sidebar.inset ? createInsetSidebar(ctx) : createSidebar(ctx);
-  const secondarySidebar = SidebarAdapter.normalize2ndSidebarConfigToFn(secSidebar.inset ? createInsetSidebar : createSidebar, ctx);
 
-  const getZIndexStyle = theme => ({
-    zIndex: get(theme, 'zIndex.drawer', 1200) + 20
+  const incrementZIndex = (theme, plus) => ({
+    zIndex: get(theme, 'zIndex.drawer', 1200) + plus
   });
 
+  const isNotStatic = header.position !== 'static';
+  const isAboveMainSidebar = header.clipped && isNotStatic;
+  const isAboveSubSidebar = header.secondaryClipped && isNotStatic;
+  const isAboveSomeSidebars = isAboveMainSidebar || isAboveSubSidebar;
+  const mainEffect = sidebar.inset ? createInsetEffect(ctx) : createEdgeEffect(ctx);
+  const subEffect = SidebarAdapter.normalize2ndSidebarConfigToFn(secondarySidebar.inset ? createInsetEffect : createEdgeEffect, ctx);
   return {
-    primarySidebar,
-    secondarySidebar,
+    isEdgeAndInset: sidebar.inset && !secondarySidebar.inset || !sidebar.inset && secondarySidebar.inset,
+    isPrimaryEdge: !sidebar.inset,
+    isPrimaryInset: sidebar.inset,
+    isSecondaryEdge: !secondarySidebar.inset,
+    isSecondaryInset: secondarySidebar.inset,
+    mainEffect,
+    subEffect,
+    mapSecondaryConfig: SidebarAdapter.mapSecondaryConfig,
     getPrimaryStyle: theme => {
       if (!header.clipped && header.secondaryClipped) {
-        return getZIndexStyle(theme);
+        return incrementZIndex(theme, 20);
       }
@@ -31,3 +41,3 @@
       if (header.clipped && !header.secondaryClipped) {
-        return getZIndexStyle(theme);
+        return incrementZIndex(theme, 20);
       }
@@ -37,9 +47,10 @@
     },
-    getTargetProps: (target = {}) => ({
-      primaryWidth: primarySidebar.calculateAffectedWidth(target),
-      secondaryWidth: SidebarAdapter.normalize2ndSidebarConfigToFn(secondarySidebar.calculateAffectedWidth, target),
-      primaryGap: primarySidebar.calculateGap(target),
-      secondaryGap: SidebarAdapter.normalize2ndSidebarConfigToFn(secondarySidebar.calculateGap, target)
-    })
+    getHeaderStyle: theme => {
+      if (isAboveSomeSidebars) {
+        return incrementZIndex(theme, 10);
+      }
+
+      return undefined;
+    }
   };
 });

models/content.js

@@ -1,13 +0,32 @@
-import createSidebarEffect from './sidebarEffect';
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import createAllSidebars from './allSidebars';
+import { reduceWidths } from './width';
 export default ((ctx = {}) => {
   const {
-    sidebar = {}
+    content = {}
   } = ctx;
   const {
-    getStyle
-  } = createSidebarEffect(ctx, ctx.content);
+    mainEffect,
+    subEffect,
+    mapSecondaryConfig,
+    isEdgeAndInset
+  } = createAllSidebars(ctx);
+  const subContent = mapSecondaryConfig(content);
   return {
-    // todo write content.test
-    getStyle: () => sidebar.inset ? undefined : getStyle()
+    getMarginStyle() {
+      if (isEdgeAndInset) return undefined;
+      return _extends({}, mainEffect.getMarginStyle(content), {}, subEffect.getMarginStyle(subContent));
+    },
+
+    getWidthStyle() {
+      if (isEdgeAndInset) return undefined;
+      return reduceWidths([mainEffect.getWidthObj(content), subEffect.getWidthObj(subContent)]).getStyle();
+    },
+
+    getStyle() {
+      return _extends({}, this.getMarginStyle(), {}, this.getWidthStyle());
+    }
+
   };
 });

models/footer.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import createSidebarEffect from './sidebarEffect';
+import createAllSidebars from './allSidebars';
+import { reduceWidths } from './width';
 export default ((ctx = {}) => {
   const {
-    sidebar = {},
-    secondarySidebar = {},
     footer = {}
   } = ctx;
   const {
-    getStyle
-  } = createSidebarEffect(ctx, footer);
+    mainEffect,
+    subEffect,
+    mapSecondaryConfig,
+    isEdgeAndInset,
+    isPrimaryInset,
+    isPrimaryEdge,
+    isSecondaryEdge,
+    isSecondaryInset
+  } = createAllSidebars(ctx);
+  const subFooter = mapSecondaryConfig(footer);
+  const mainAttached = !isEdgeAndInset || isPrimaryInset && isSecondaryEdge;
+  const subAttached = !isEdgeAndInset || isPrimaryEdge && isSecondaryInset;
   return {
-    getStyle: () => {
-      if (sidebar.inset && secondarySidebar.inset) {
-        return _extends({}, getStyle({
-          primaryDisabled: footer.insetBehavior !== 'fit',
-          secondaryDisabled: footer.secondaryInsetBehavior !== 'fit'
-        }), {
-          width: 'auto'
-        });
-      }
+    getMarginStyle() {
+      return _extends({}, mainAttached && mainEffect.getMarginStyle(footer), {}, subAttached && subEffect.getMarginStyle(subFooter));
+    },
 
-      if (sidebar.inset && !secondarySidebar.inset) {
-        return _extends({}, getStyle({
-          primaryDisabled: footer.insetBehavior !== 'fit'
-        }));
-      }
+    getWidthStyle() {
+      const finalWidthObj = reduceWidths([...(mainAttached ? [mainEffect.getWidthObj(footer)] : []), ...(subAttached ? [subEffect.getWidthObj(subFooter)] : [])]);
+      return finalWidthObj.getStyle();
+    },
 
-      if (!sidebar.inset && secondarySidebar.inset) {
-        return _extends({}, getStyle({
-          secondaryDisabled: footer.secondaryInsetBehavior !== 'fit'
-        }));
-      }
+    getStyle() {
+      return _extends({}, this.getMarginStyle(), {}, this.getWidthStyle());
+    }
 
-      return getStyle();
-    }
   };
 });

models/header.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import get from 'lodash.get';
-import createSidebarEffect from './sidebarEffect';
+import createAllSidebars from './allSidebars';
+import { reduceWidths } from './width';
 export default ((ctx = {}) => {
   const {
-    header = {},
-    sidebar = {},
-    secondarySidebar = {}
+    header = {}
   } = ctx;
   const {
-    getStyle
-  } = createSidebarEffect(ctx, header);
+    mainEffect,
+    subEffect,
+    mapSecondaryConfig
+  } = createAllSidebars(ctx);
+  const subHeader = mapSecondaryConfig(header);
   return {
-    getStyle: theme => {
-      const isHeaderOverPrimarySidebar = header.clipped && header.position !== 'static';
-      const isHeaderOverSecondarySidebar = header.secondaryClipped && header.position !== 'static';
-      const isHeaderOnTop = isHeaderOverPrimarySidebar || isHeaderOverSecondarySidebar;
-      const layerStyle = isHeaderOnTop ? {
-        zIndex: get(theme, 'zIndex.drawer', 1200) + 10
-      } : undefined;
+    getMarginStyle() {
+      return _extends({}, !header.clipped && mainEffect.getMarginStyle(header), {}, !header.secondaryClipped && subEffect.getMarginStyle(subHeader));
+    },
 
-      if (sidebar.inset && secondarySidebar.inset) {
-        return {};
-      }
+    getWidthStyle() {
+      return reduceWidths([...(!header.clipped ? [mainEffect.getWidthObj(header)] : []), ...(!header.secondaryClipped ? [subEffect.getWidthObj(subHeader)] : [])]).getStyle();
+    },
 
-      if (!sidebar.inset && isHeaderOverPrimarySidebar && secondarySidebar.inset) {
-        return layerStyle;
-      }
+    getStyle() {
+      return _extends({}, this.getMarginStyle(), {}, this.getWidthStyle());
+    }
 
-      if (sidebar.inset && !secondarySidebar.inset && isHeaderOverSecondarySidebar) {
-        return layerStyle;
-      }
-
-      if (header.clipped && header.secondaryClipped) {
-        return layerStyle;
-      }
-
-      if (!header.clipped && header.secondaryClipped) {
-        return _extends({}, layerStyle, {}, getStyle({
-          secondaryDisabled: true
-        }));
-      }
-
-      if (header.clipped && !header.secondaryClipped) {
-        return _extends({}, layerStyle, {}, getStyle({
-          primaryDisabled: true
-        }));
-      }
-
-      return _extends({}, layerStyle, {}, getStyle());
-    }
   };
 });

models/insetSidebar.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import get from 'lodash.get';
+
+const parseUnit = amount => typeof amount === 'number' ? `${amount}px` : amount;
+
 export default ((ctx = {}) => {
   const {
-    sidebar = {}
+    sidebar = {},
+    header = {}
   } = ctx;
-  const insetPosition = get(sidebar, 'insetProps.position');
-  return _extends({}, sidebar, {
-    calculateGap: ({
-      insetBehavior
-    } = {}) => {
-      if (insetBehavior === 'fit') {
-        return sidebar.width;
-      }
-
-      return 0;
+  const insetProps = get(sidebar, 'insetProps', {});
+  return {
+    getWidth: () => {
+      if (sidebar.hidden) return 0;
+      return sidebar.width;
     },
-    calculateAffectedWidth: () => 'auto',
-    getStyle: () => ({
-      width: sidebar.width
-    }),
     getBodyStyle: () => _extends({
-      width: sidebar.width,
-      position: insetPosition
-    }, insetPosition === 'fixed' && {
-      height: '100%',
-      top: 0
+      position: insetProps.position,
+      top: insetProps.top
+    }, insetProps.position === 'fixed' && {
+      height: '100%'
+    }, {}, insetProps.position === 'absolute' && {
+      height: `calc(100vh - ${parseUnit(header.offsetHeight)})`
     })
-  });
+  };
 });

package.json

 {
   "name": "@mui-treasury/layout",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "author": "siriwatknp <[e-mail]>",
   "license": "MIT",
   "dependencies": {
-    "@material-ui/core": "^4.5.2",
-    "@material-ui/styles": "^4.5.2",
-    "@mui-treasury/styling": "^0.2.6",
+    "@mui-treasury/styling": "^0.2.7",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2"
   },
-  "gitHead": "34cdb5ba53411ddd387435f45e203d0f0fe1ddb4",
+  "peerDepdencies": {
+    "@material-ui/core": "^4.5.2",
+    "@material-ui/styles": "^4.5.2"
+  },
+  "gitHead": "8ad7a8c57faf1104e546e540f4d7904311ea412c",
   "private": false,
   "main": "./index.js"
 }

styles/insetSidebar.styles.js

 export default {
   root: {
-    flexShrink: 0
+    flexShrink: 0,
+    position: 'relative'
   },
@@ -5,0 +6,0 @@ paperSticky: {

utils/ConfigGenerator/BehaviorGenerator.js

@@ -20,2 +20,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+    initContainer() {
+      config.persistentBehavior = 'fit';
+      config.secondaryPersistentBehavior = 'none';
+      return this;
+    },
+
     initContent() {
@@ -22,0 +28,0 @@ config.persistentBehavior = 'fit';

utils/ConfigGenerator/ConfigGenerator.js

@@ -5,2 +5,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import ContentGenerator from './ContentGenerator';
+import ContainerGenerator from './ContainerGenerator';
 import FooterGenerator from './FooterGenerator';
@@ -16,2 +17,3 @@ import HeaderGenerator from './HeaderGenerator';
   const content = ContentGenerator();
+  const container = ContainerGenerator();
   const header = HeaderGenerator();
@@ -28,2 +30,3 @@ const footer = FooterGenerator();
       secondarySidebar: secondarySidebar.get(),
+      container: container.get(),
       content: content.get(),
@@ -82,2 +85,3 @@ header: header.get(),
     content,
+    container,
     header,
@@ -84,0 +88,0 @@ footer

utils/ConfigGenerator/SidebarGenerator.js

@@ -14,3 +14,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     insetProps: {
-      position: 'fixed'
+      position: 'fixed',
+      top: 0
     }
@@ -27,3 +28,4 @@ };
     insetProps: {
-      position: 'sticky'
+      position: 'sticky',
+      top: 0
     }
@@ -30,0 +32,0 @@ };

utils/index.js

@@ -1,2 +0,1 @@
-export { default as createLayoutUtils } from './LayoutUtils';
 export { default as isSomeExisted } from './isSomeExisted';
@@ -3,0 +2,0 @@ export { default as selectConfigByScreen } from './selectConfigByScreen';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88691

increased by5.61%

Dependency count

3

decreased by-40%

Number of package files

88

increased by4.76%

Lines of code

2145

increased by4.89%

Dependency changes

• - Removed@material-ui/core@^4.5.2

• - Removed@material-ui/styles@^4.5.2

• Updated@mui-treasury/styling@^0.2.7