cozy-ui 124.1.1 → 125.0.0

package/transpiled/react/Layout/Layout.js

@@ -1,74 +1,110 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "monoColumn"],
-    _excluded2 = ["children"],
-    _excluded3 = ["children"];
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
+var _excluded = ["children", "className", "monoColumn", "withTopBar"],
+    _excluded2 = ["className", "children"],
+    _excluded3 = ["className", "children"];
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { createContext, forwardRef, useContext, useMemo } from 'react';
 var styles = {
   "o-layout": "styles__o-layout___3TSz9",
+  "o-layout-topbar": "styles__o-layout-topbar___2SHWi",
   "o-layout-2panes": "styles__o-layout-2panes___1CDQw",
-  "o-layout--rounded": "styles__o-layout--rounded___1WX4D",
-  "o-layout-2panes--rounded": "styles__o-layout-2panes--rounded___1FuZT"
+  "o-layout-main": "styles__o-layout-main___3mPxz",
+  "o-layout-main-monocolumn": "styles__o-layout-main-monocolumn___2a7vz",
+  "o-layout-main-monocolumn--topbar": "styles__o-layout-main-monocolumn--topbar___9_4Xd",
+  "o-layout-main-2panes": "styles__o-layout-main-2panes___3ickD",
+  "o-layout-main-2panes--topbar": "styles__o-layout-main-2panes--topbar___cGi-H",
+  "o-layout-content": "styles__o-layout-content___3D5gN",
+  "o-layout-content-monocolumn": "styles__o-layout-content-monocolumn___1rpxp",
+  "o-layout-content-2panes": "styles__o-layout-content-2panes___2Hotr"
 };
-export var Layout = function Layout(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      monoColumn = _ref.monoColumn,
-      rest = _objectWithoutProperties(_ref, _excluded);
+export var LayoutContext = /*#__PURE__*/createContext();
+export var useLayout = function useLayout() {
+  var context = useContext(LayoutContext);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx(monoColumn ? styles['o-layout'] : styles['o-layout-2panes'], className, [styles['o-layout--rounded']])
-  }, rest), children);
-};
-export var Main = function Main(_ref2) {
-  var children = _ref2.children,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
+  if (!context) {
+    throw new Error('useLayout must be used within a LayoutContext');
+  }
 
-  return /*#__PURE__*/React.createElement("main", rest, children);
+  return context;
 };
-export var Content = /*#__PURE__*/function (_Component) {
-  _inherits(Content, _Component);
-
-  var _super = _createSuper(Content);
+var LayoutProvider = /*#__PURE__*/React.memo(function (_ref) {
+  var monoColumn = _ref.monoColumn,
+      withTopBar = _ref.withTopBar,
+      children = _ref.children;
+  var value = useMemo(function () {
+    return {
+      monoColumn: monoColumn,
+      withTopBar: withTopBar
+    };
+  }, [monoColumn, withTopBar]);
+  return /*#__PURE__*/React.createElement(LayoutContext.Provider, {
+    value: value
+  }, children);
+});
+LayoutProvider.displayName = 'LayoutProvider';
+export var Layout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      className = _ref2.className,
+      monoColumn = _ref2.monoColumn,
+      withTopBar = _ref2.withTopBar,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
-  function Content() {
-    _classCallCheck(this, Content);
+  var variant = monoColumn ? 'monocolumn' : '2panes';
+  return /*#__PURE__*/React.createElement(LayoutProvider, {
+    monoColumn: monoColumn,
+    withTopBar: withTopBar
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: cx(className, styles['o-layout'], styles["o-layout-".concat(variant)], _defineProperty({}, styles["o-layout-topbar"], withTopBar))
+  }, props), children));
+});
+Layout.displayName = 'Layout';
+export var Main = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+      children = _ref3.children,
+      props = _objectWithoutProperties(_ref3, _excluded2);
 
-    return _super.apply(this, arguments);
-  }
+  var _useLayout = useLayout(),
+      monoColumn = _useLayout.monoColumn,
+      withTopBar = _useLayout.withTopBar;
 
-  _createClass(Content, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          rest = _objectWithoutProperties(_this$props, _excluded3);
+  var variant = monoColumn ? 'monocolumn' : '2panes';
+  return /*#__PURE__*/React.createElement("main", _extends({
+    ref: ref,
+    className: cx(className, styles['o-layout-main'], styles["o-layout-main-".concat(variant)], _defineProperty({}, styles["o-layout-main-".concat(variant, "--topbar")], withTopBar))
+  }, props), children);
+});
+Main.displayName = 'Main';
+export var Content = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var className = _ref4.className,
+      children = _ref4.children,
+      props = _objectWithoutProperties(_ref4, _excluded3);
 
-      return /*#__PURE__*/React.createElement("div", _extends({
-        role: "main"
-      }, rest), children);
-    }
-  }]);
+  var _useLayout2 = useLayout(),
+      monoColumn = _useLayout2.monoColumn;
 
-  return Content;
-}(Component);
+  var variant = monoColumn ? 'monocolumn' : '2panes';
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "main",
+    ref: ref,
+    className: cx(className, styles['o-layout-content'], styles["o-layout-content-".concat(variant)])
+  }, props), children);
+});
+Content.displayName = 'Content';
 Layout.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+
+  /** Used to add/remove top spacing when using with or without a topbar */
+  withTopBar: PropTypes.bool,
+
+  /** Should be true if no sidebar in the app */
   monoColumn: PropTypes.bool
 };
 Layout.defaultProps = {
+  withTopBar: true,
   monoColumn: false
 };

package/transpiled/react/Sidebar/index.js

@@ -7,8 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 var styles = {
   "o-sidebar": "styles__o-sidebar___1295j",
-  "o-sidebar--border": "styles__o-sidebar--border___32tfw",
-  "o-sidebar--large": "styles__o-sidebar--large___1mT8H"
+  "o-sidebar--border": "styles__o-sidebar--border___32tfw"
 };
 import { useSetFlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
 import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
@@ -31,7 +30,7 @@ var Sidebar = function Sidebar(_ref) {
   }, 'cozy-ui/Sidebar');
   return /*#__PURE__*/React.createElement("aside", _extends({
     id: "sidebar",
-    className: cx(styles['o-sidebar'], [styles['o-sidebar--large']], className)
+    className: cx(styles['o-sidebar'], className)
   }, restProps), children);
 };