@mui-treasury/layout - npm Package Compare versions

Comparing version 5.0.0-alpha.10 to 5.0.0-alpha.11

esm/InsetSidebar/InsetContainer.js

@@ -1,12 +0,20 @@
-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); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import React from "react";
+import cx from "clsx";
 import Container from "@material-ui/core/Container";
-import { experimentalStyled } from "@material-ui/core/styles";
-import { useFullscreenCtx } from "../Fullscreen/FullscreenContext";
-var FullscreenWrapperRoot = experimentalStyled("div")({
-  overflow: "auto",
-  flexGrow: 1
+import { experimentalStyled as styled, unstable_useThemeProps as useThemeProps } from "@material-ui/core/styles";
+var contentClassName = "AppInsetContainer-content";
+var InsetContainerRoot = styled(Container, {}, {
+  name: "AppInsetContainer",
+  slot: "Root",
+  overridesResolver: (props, styles) => styles.root
+})({
+  display: "flex",
+  flexFlow: "row nowrap",
+  flexGrow: 1,
+  ["& .".concat(contentClassName)]: {
+    flexGrow: 1,
+    overflow: "auto"
+  }
 });
@@ -17,20 +25,17 @@ export var InsetContainer = (_ref) => {
     leftSidebar,
-    rightSidebar,
-    FullscreenWrapper = FullscreenWrapperRoot,
-    FullscreenWrapperProps
+    rightSidebar
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "leftSidebar", "rightSidebar", "FullscreenWrapper", "FullscreenWrapperProps"]);
+      inProps = _objectWithoutPropertiesLoose(_ref, ["children", "leftSidebar", "rightSidebar"]);
 
-  var isFullscreen = useFullscreenCtx();
-  return /*#__PURE__*/React.createElement(Container, _extends({}, props, {
-    sx: _extends({
-      display: "flex",
-      flexFlow: "row nowrap",
-      flexGrow: 1
-    }, props.sx)
-  }), leftSidebar && /*#__PURE__*/React.cloneElement(leftSidebar, {
+  var props = useThemeProps({
+    props: inProps,
+    name: "AppInsetContainer"
+  });
+  return /*#__PURE__*/React.createElement(InsetContainerRoot, props, leftSidebar && /*#__PURE__*/React.cloneElement(leftSidebar, {
     anchor: "left"
-  }), isFullscreen ? /*#__PURE__*/React.createElement(FullscreenWrapper, FullscreenWrapperProps, children) : children, rightSidebar && /*#__PURE__*/React.cloneElement(rightSidebar, {
+  }), /*#__PURE__*/React.cloneElement(children, {
+    className: cx(children.props.className, contentClassName)
+  }), rightSidebar && /*#__PURE__*/React.cloneElement(rightSidebar, {
     anchor: "right"
   }));
 };

InsetSidebar/InsetContainer.d.ts

 import React from "react";
 import { ContainerProps } from "@material-ui/core/Container";
-import { Theme } from "@material-ui/core/styles";
-import { SxProps } from "@material-ui/system";
 export declare type DivProps = JSX.IntrinsicElements["div"];
@@ -9,7 +7,4 @@ export declare type InsetContainerProps = {
     rightSidebar?: React.ReactElement;
-    FullscreenWrapper?: React.ElementType;
-    FullscreenWrapperProps?: DivProps & {
-        sx?: SxProps<Theme>;
-    };
-} & ContainerProps;
-export declare const InsetContainer: ({ children, leftSidebar, rightSidebar, FullscreenWrapper, FullscreenWrapperProps, ...props }: InsetContainerProps) => JSX.Element;
+    children: React.ReactElement;
+} & Omit<ContainerProps, "children">;
+export declare const InsetContainer: ({ children, leftSidebar, rightSidebar, ...inProps }: InsetContainerProps) => JSX.Element;

InsetSidebar/InsetContainer.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
@@ -15,8 +17,4 @@
 
-var _FullscreenContext = require("../Fullscreen/FullscreenContext");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -26,6 +24,19 @@
 
-var FullscreenWrapperRoot = (0, _styles.experimentalStyled)("div")({
-  overflow: "auto",
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var contentClassName = "AppInsetContainer-content";
+var InsetContainerRoot = (0, _styles.experimentalStyled)(_Container["default"], {}, {
+  name: "AppInsetContainer",
+  slot: "Root",
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})(_defineProperty({
+  display: "flex",
+  flexFlow: "row nowrap",
   flexGrow: 1
-});
+}, "& .".concat(contentClassName), {
+  flexGrow: 1,
+  overflow: "auto"
+}));
 
@@ -36,17 +47,13 @@ var InsetContainer = function InsetContainer(_ref) {
       rightSidebar = _ref.rightSidebar,
-      _ref$FullscreenWrappe = _ref.FullscreenWrapper,
-      FullscreenWrapper = _ref$FullscreenWrappe === void 0 ? FullscreenWrapperRoot : _ref$FullscreenWrappe,
-      FullscreenWrapperProps = _ref.FullscreenWrapperProps,
-      props = _objectWithoutProperties(_ref, ["children", "leftSidebar", "rightSidebar", "FullscreenWrapper", "FullscreenWrapperProps"]);
+      inProps = _objectWithoutProperties(_ref, ["children", "leftSidebar", "rightSidebar"]);
 
-  var isFullscreen = (0, _FullscreenContext.useFullscreenCtx)();
-  return /*#__PURE__*/_react["default"].createElement(_Container["default"], _extends({}, props, {
-    sx: _extends({
-      display: "flex",
-      flexFlow: "row nowrap",
-      flexGrow: 1
-    }, props.sx)
-  }), leftSidebar && /*#__PURE__*/_react["default"].cloneElement(leftSidebar, {
+  var props = (0, _styles.unstable_useThemeProps)({
+    props: inProps,
+    name: "AppInsetContainer"
+  });
+  return /*#__PURE__*/_react["default"].createElement(InsetContainerRoot, props, leftSidebar && /*#__PURE__*/_react["default"].cloneElement(leftSidebar, {
     anchor: "left"
-  }), isFullscreen ? /*#__PURE__*/_react["default"].createElement(FullscreenWrapper, FullscreenWrapperProps, children) : children, rightSidebar && /*#__PURE__*/_react["default"].cloneElement(rightSidebar, {
+  }), /*#__PURE__*/_react["default"].cloneElement(children, {
+    className: (0, _clsx["default"])(children.props.className, contentClassName)
+  }), rightSidebar && /*#__PURE__*/_react["default"].cloneElement(rightSidebar, {
     anchor: "right"
@@ -53,0 +60,0 @@ }));

package.json

 {
   "name": "@mui-treasury/layout",
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.11",
   "description": "mui-treasury | layout-core",
@@ -35,3 +35,3 @@ "author": "siriwatknp <[e-mail]>",
   },
-  "gitHead": "74e0e26860494b592319a6834432b61ceb35302c"
+  "gitHead": "f4faf898390698f4e58316d5821ae37264a11df6"
 }

theme-augment.d.ts

 import { StyleRules } from "@material-ui/core/styles";
+import { ContainerClassKey, ContainerProps } from "@material-ui/core/Container";
 import { HeaderProps, HeaderClassKey, SubheaderProps, SubheaderClassKey, TopHeaderProps, TopHeaderClassKey } from "./Header/Header";
@@ -34,2 +35,6 @@ import { EdgeSidebarProps, EdgeSidebarClassKey } from "./EdgeSidebar/EdgeSidebar";
         };
+        AppInsetContainer?: {
+            defaultProps?: Partial<ContainerProps>;
+            styleOverrides?: Partial<StyleRules<ContainerClassKey>>;
+        };
         AppFooter?: {
@@ -36,0 +41,0 @@ defaultProps?: Partial<FooterProps>;

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

Lines of code

5427

increased by0.2%

Worsened metrics

Total package byte prevSize

277888

decreased by-0.13%

No dependency changes