react-drawers - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+# Version 1.3.0
+24th August 2020
+
+* **New features**
+  * Added properties to control whether drawers should move or cover content when opened
+
 # Version 1.2.1
@@ -8,3 +14,3 @@ 6th April 2020
 # Version 1.2.0
-10th February 2019
+10th February 2020
 
@@ -11,0 +17,0 @@ * **New Features**

dist/index.es.js

 import React, { useContext } from 'react';
 
-var LayoutContext = React.createContext({
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+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;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+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);
+  };
+}
+
+var LayoutContext = /*#__PURE__*/React.createContext({
   top: 0,
@@ -22,8 +172,9 @@ bottom: 0,
 };
-
 var getZIndex = function getZIndex(mode, item) {
   var idx = mode.indexOf(item);
+
   if (idx === -1) {
     return undefined;
   }
+
   return 4 - idx;
@@ -60,3 +211,3 @@ };
 var css_248z = ".Layout-module_layout_panel__1verX {\r\n  z-index: 1030;\r\n  transition: all 750ms ease-in-out;\r\n}\r\n\r\n.Layout-module_layout_animated__3IC_W {\r\n  transition: all 750ms ease-in-out;\r\n}\r\n\r\n.Layout-module_position_fixed__2YzYG {\r\n  position: fixed !important;\r\n}\r\n\r\n.Layout-module_layout_absolute__2G9Q1 .Layout-module_position_fixed__2YzYG {\r\n  position: absolute !important;\r\n}\r\n\r\n.Layout-module_overflow_hidden__2RJOD {\r\n  overflow: hidden;\r\n}\r\n\r\n.Layout-module_w_100__A6Ykb {\r\n  width: 100% !important;\r\n}\r\n\r\n.Layout-module_min_h_100__U389h {\r\n  min-height: 100% !important;\r\n}\r\n\r\n.Layout-module_layout_root__1BEgC {\r\n  transition: all 750ms ease-in-out;\r\n  overflow: hidden;\r\n  width: 100% !important;\r\n  min-height: 100% !important;\r\n  position: relative;\r\n}\r\n";
-var styles = { "layout_panel": "Layout-module_layout_panel__1verX", "layout_animated": "Layout-module_layout_animated__3IC_W", "position_fixed": "Layout-module_position_fixed__2YzYG", "layout_absolute": "Layout-module_layout_absolute__2G9Q1", "overflow_hidden": "Layout-module_overflow_hidden__2RJOD", "w_100": "Layout-module_w_100__A6Ykb", "min_h_100": "Layout-module_min_h_100__U389h", "layout_root": "Layout-module_layout_root__1BEgC" };
+var styles = {"layout_panel":"Layout-module_layout_panel__1verX","layout_animated":"Layout-module_layout_animated__3IC_W","position_fixed":"Layout-module_position_fixed__2YzYG","layout_absolute":"Layout-module_layout_absolute__2G9Q1","overflow_hidden":"Layout-module_overflow_hidden__2RJOD","w_100":"Layout-module_w_100__A6Ykb","min_h_100":"Layout-module_min_h_100__U389h","layout_root":"Layout-module_layout_root__1BEgC"};
 styleInject(css_248z);
@@ -79,16 +230,17 @@
     left: 0,
-    transform: 'translate3d(' + (left - leftWidth) + 'px, 0, 0)',
+    transform: "translate3d(".concat(left - leftWidth, "px, 0, 0)"),
     zIndex: getZIndex(mode, 'L')
   };
-  return React.createElement(
-    'div',
-    { className: styles.position_fixed + ' ' + styles.layout_panel, style: style },
-    React.createElement(
-      'div',
-      { className: className, style: { width: leftWidth, minWidth: leftWidth, height: '100%' } },
-      children
-    )
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.position_fixed, " ").concat(styles.layout_panel),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      width: leftWidth,
+      minWidth: leftWidth,
+      height: '100%'
+    }
+  }, children));
 };
-
 LayoutLeft.defaultProps = {
@@ -113,16 +265,17 @@ className: ''
     right: 0,
-    transform: 'translate3d(' + (rightWidth - right) + 'px, 0, 0)',
+    transform: "translate3d(".concat(rightWidth - right, "px, 0, 0)"),
     zIndex: getZIndex(mode, 'R')
   };
-  return React.createElement(
-    'div',
-    { className: styles.position_fixed + ' ' + styles.layout_panel, style: style },
-    React.createElement(
-      'div',
-      { className: className, style: { width: rightWidth, minWidth: rightWidth, height: '100%' } },
-      children
-    )
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.position_fixed, " ").concat(styles.layout_panel),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      width: rightWidth,
+      minWidth: rightWidth,
+      height: '100%'
+    }
+  }, children));
 };
-
 LayoutRight.defaultProps = {
@@ -147,16 +300,17 @@ className: ''
     top: 0,
-    transform: 'translate3d(0, ' + (top - topHeight) + 'px, 0)',
+    transform: "translate3d(0, ".concat(top - topHeight, "px, 0)"),
     zIndex: getZIndex(mode, 'T')
   };
-  return React.createElement(
-    'div',
-    { className: styles.position_fixed + ' ' + styles.layout_panel, style: style },
-    React.createElement(
-      'div',
-      { className: className, style: { height: topHeight, minHeight: topHeight, width: '100%' } },
-      children
-    )
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.position_fixed, " ").concat(styles.layout_panel),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      height: topHeight,
+      minHeight: topHeight,
+      width: '100%'
+    }
+  }, children));
 };
-
 LayoutTop.defaultProps = {
@@ -181,16 +335,17 @@ className: ''
     bottom: 0,
-    transform: 'translate3d(0, ' + (bottomHeight - bottom) + 'px, 0)',
+    transform: "translate3d(0, ".concat(bottomHeight - bottom, "px, 0)"),
     zIndex: getZIndex(mode, 'B')
   };
-  return React.createElement(
-    'div',
-    { className: styles.position_fixed + ' ' + styles.layout_panel, style: style },
-    React.createElement(
-      'div',
-      { className: className, style: { height: bottomHeight, minHeight: bottomHeight, width: '100%' } },
-      children
-    )
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.position_fixed, " ").concat(styles.layout_panel),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      height: bottomHeight,
+      minHeight: bottomHeight,
+      width: '100%'
+    }
+  }, children));
 };
-
 LayoutBottom.defaultProps = {
@@ -206,9 +361,10 @@ className: ''
       children = _ref.children;
-
   var ctx = useContext(LayoutContext);
   var open = (left && ctx.left || right && ctx.right || top && ctx.top || bottom && ctx.bottom) > 0;
   var toggle = left && ctx.toggleLeft || right && ctx.toggleRight || top && ctx.toggleTop || bottom && ctx.toggleBottom;
-  return children({ open: open, toggle: toggle });
+  return children({
+    open: open,
+    toggle: toggle
+  });
 };
-
 LayoutSwitch.defaultProps = {
@@ -264,5 +420,5 @@ left: false,
 /** Built-in value references. */
-var Symbol$1 = _root.Symbol;
+var Symbol = _root.Symbol;
 
-var _Symbol = Symbol$1;
+var _Symbol = Symbol;
 
@@ -298,6 +454,7 @@ /** Used for built-in method references. */
     value[symToStringTag] = undefined;
+    var unmasked = true;
   } catch (e) {}
 
   var result = nativeObjectToString.call(value);
-  {
+  if (unmasked) {
     if (isOwn) {
@@ -1387,3 +1544,3 @@ value[symToStringTag] = tag;
 
-var _defineProperty = defineProperty;
+var _defineProperty$1 = defineProperty;
 
@@ -1400,4 +1557,4 @@ /**
 function baseAssignValue(object, key, value) {
-  if (key == '__proto__' && _defineProperty) {
-    _defineProperty(object, key, {
+  if (key == '__proto__' && _defineProperty$1) {
+    _defineProperty$1(object, key, {
       'configurable': true,
@@ -1492,2 +1649,6 @@ 'enumerable': true,
 
+    if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+      return object;
+    }
+
     if (index != lastIndex) {
@@ -1928,4 +2089,4 @@ var objValue = nested[key];
  */
-var baseSetToString = !_defineProperty ? identity_1 : function(func, string) {
-  return _defineProperty(func, 'toString', {
+var baseSetToString = !_defineProperty$1 ? identity_1 : function(func, string) {
+  return _defineProperty$1(func, 'toString', {
     'configurable': true,
@@ -2026,72 +2187,13 @@ 'enumerable': false,
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
+var LayoutMaster = /*#__PURE__*/function (_React$Component) {
+  _inherits(LayoutMaster, _React$Component);
 
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
+  var _super = _createSuper(LayoutMaster);
 
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var _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;
-};
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
-var LayoutMaster = function (_React$Component) {
-  inherits(LayoutMaster, _React$Component);
-
   function LayoutMaster(props) {
-    classCallCheck(this, LayoutMaster);
+    var _this;
 
-    var _this = possibleConstructorReturn(this, (LayoutMaster.__proto__ || Object.getPrototypeOf(LayoutMaster)).call(this, props));
+    _classCallCheck(this, LayoutMaster);
 
+    _this = _super.call(this, props);
     _this.state = {
@@ -2110,2 +2212,6 @@ top: props.topOpenOnStart ? props.top : 0,
       bottomCollapsedHeight: props.bottomCollapsedHeight,
+      topOverContent: props.topOverContent,
+      leftOverContent: props.leftOverContent,
+      rightOverContent: props.rightOverContent,
+      bottomOverContent: props.bottomOverContent,
       toggleTop: function toggleTop() {
@@ -2144,4 +2250,4 @@ _this.setState(function (prevState) {
 
-  createClass(LayoutMaster, [{
-    key: 'componentDidUpdate',
+  _createClass(LayoutMaster, [{
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
@@ -2151,5 +2257,7 @@ var prev = pick_1(prevProps, ['mode', 'top', 'left', 'bottom', 'right']);
       var changes = false;
+
       for (var k in prev) {
         if (prev[k] !== curr[k]) changes = true;
       }
+
       if (changes) this.setState({
@@ -2164,13 +2272,11 @@ mode: curr.mode,
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var children = this.props.children;
-
-      return React.createElement(
-        LayoutContext.Provider,
-        { value: this.state },
-        children
-      );
+      return /*#__PURE__*/React.createElement(LayoutContext.Provider, {
+        value: this.state
+      }, children);
     }
   }]);
+
   return LayoutMaster;
@@ -2192,2 +2298,6 @@ }(React.Component);
   bottomCollapsedHeight: 0,
+  topOverContent: false,
+  leftOverContent: false,
+  rightOverContent: false,
+  bottomOverContent: false,
   mode: 'TBLR'
@@ -2207,21 +2317,25 @@ };
       right = _useContext.right,
-      bottom = _useContext.bottom;
+      bottom = _useContext.bottom,
+      topOverContent = _useContext.topOverContent,
+      leftOverContent = _useContext.leftOverContent,
+      rightOverContent = _useContext.rightOverContent,
+      bottomOverContent = _useContext.bottomOverContent;
 
   var style = {
-    left: left,
-    right: right,
-    top: top,
-    bottom: bottom
+    left: leftOverContent ? 0 : left,
+    right: rightOverContent ? 0 : right,
+    top: topOverContent ? 0 : top,
+    bottom: bottomOverContent ? 0 : bottom
   };
-  return React.createElement(
-    'div',
-    { className: styles.position_fixed + ' ' + styles.layout_animated, style: style },
-    React.createElement(
-      'div',
-      { className: className, style: { height: '100%', width: '100%' } },
-      children
-    )
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.position_fixed, " ").concat(styles.layout_animated),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      height: '100%',
+      width: '100%'
+    }
+  }, children));
 };
-
 LayoutContent.defaultProps = {
@@ -2231,61 +2345,115 @@ className: ''
 
-var Layout = function (_React$Component) {
-  inherits(Layout, _React$Component);
+var Layout = /*#__PURE__*/function (_React$Component) {
+  _inherits(Layout, _React$Component);
 
+  var _super = _createSuper(Layout);
+
   function Layout() {
-    classCallCheck(this, Layout);
-    return possibleConstructorReturn(this, (Layout.__proto__ || Object.getPrototypeOf(Layout)).apply(this, arguments));
+    _classCallCheck(this, Layout);
+
+    return _super.apply(this, arguments);
   }
 
-  createClass(Layout, [{
-    key: 'render',
+  _createClass(Layout, [{
+    key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this$props = this.props,
+          children = _this$props.children,
+          className = _this$props.className,
+          absolute = _this$props.absolute;
+      var drawers = {
+        paddingTop: 0,
+        paddingRight: 0,
+        paddingLeft: 0,
+        paddingBottom: 0
+      };
+      var padding = {
+        paddingTop: 0,
+        paddingRight: 0,
+        paddingLeft: 0,
+        paddingBottom: 0
+      };
+      var classNames = [styles.layout_root, className];
+      var _this$context = this.context,
+          ctxTop = _this$context.top,
+          ctxLeft = _this$context.left,
+          ctxRight = _this$context.right,
+          ctxBottom = _this$context.bottom,
+          topOverContent = _this$context.topOverContent,
+          leftOverContent = _this$context.leftOverContent,
+          rightOverContent = _this$context.rightOverContent,
+          bottomOverContent = _this$context.bottomOverContent;
 
-      var _props = this.props,
-          children = _props.children,
-          className = _props.className,
-          absolute = _props.absolute;
-
-      var padding = { paddingTop: 0, paddingRight: 0, paddingLeft: 0, paddingBottom: 0 };
-      var classNames = [styles.layout_root, className];
       if (absolute) {
         classNames.push(styles.layout_absolute);
       }
+
       React.Children.forEach(children, function (child) {
         if (!child || !child.type) return;
-        if (child.type === LayoutTop) padding.paddingTop = _this2.context.top;
-        if (child.type === LayoutBottom) padding.paddingBottom = _this2.context.bottom;
-        if (child.type === LayoutLeft) padding.paddingLeft = _this2.context.left;
-        if (child.type === LayoutRight) padding.paddingRight = _this2.context.right;
+
+        if (child.type === LayoutTop) {
+          drawers.paddingTop = ctxTop;
+
+          if (!topOverContent) {
+            padding.paddingTop = ctxTop;
+          }
+        }
+
+        if (child.type === LayoutBottom) {
+          drawers.paddingBottom = ctxBottom;
+
+          if (!bottomOverContent) {
+            padding.paddingBottom = ctxBottom;
+          }
+        }
+
+        if (child.type === LayoutLeft) {
+          drawers.paddingLeft = ctxLeft;
+
+          if (!leftOverContent) {
+            padding.paddingLeft = ctxLeft;
+          }
+        }
+
+        if (child.type === LayoutRight) {
+          drawers.paddingRight = ctxRight;
+
+          if (!rightOverContent) {
+            padding.paddingRight = ctxRight;
+          }
+        }
       });
-      return React.createElement(
-        LayoutContext.Provider,
-        { value: _extends({}, this.context, {
-            top: padding.paddingTop,
-            left: padding.paddingLeft,
-            right: padding.paddingRight,
-            bottom: padding.paddingBottom
-          }) },
-        React.createElement(
-          'div',
-          { className: classNames.join(' '), style: _extends({}, padding) },
-          children
-        )
-      );
+      return /*#__PURE__*/React.createElement(LayoutContext.Provider, {
+        value: _objectSpread2(_objectSpread2({}, this.context), {}, {
+          top: drawers.paddingTop,
+          left: drawers.paddingLeft,
+          right: drawers.paddingRight,
+          bottom: drawers.paddingBottom
+        })
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames.join(' '),
+        style: _objectSpread2({}, padding)
+      }, children));
     }
   }]);
+
   return Layout;
 }(React.Component);
 
-Layout.contextType = LayoutContext;
-Layout.Left = LayoutLeft;
-Layout.Right = LayoutRight;
-Layout.Top = LayoutTop;
-Layout.Bottom = LayoutBottom;
-Layout.Master = LayoutMaster;
-Layout.Switch = LayoutSwitch;
-Layout.Content = LayoutContent;
+_defineProperty(Layout, "contextType", LayoutContext);
 
+_defineProperty(Layout, "Left", LayoutLeft);
 
+_defineProperty(Layout, "Right", LayoutRight);
+
+_defineProperty(Layout, "Top", LayoutTop);
+
+_defineProperty(Layout, "Bottom", LayoutBottom);
+
+_defineProperty(Layout, "Master", LayoutMaster);
+
+_defineProperty(Layout, "Switch", LayoutSwitch);
+
+_defineProperty(Layout, "Content", LayoutContent);
+
 Layout.defaultProps = {
@@ -2292,0 +2460,0 @@ className: ''

package.json

 {
   "name": "react-drawers",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Collapsible docked panels for React",
   "author": "[e-mail]",
   "license": "MIT",
-  "repository": "osioalberto/react-drawers",
+  "repository": "https://github.com/inmagik/react-drawers",
   "main": "dist/index.js",
@@ -26,8 +26,12 @@ "module": "dist/index.es.js",
   "devDependencies": {
-    "babel-core": "^6.26.3",
+    "@babel/core": "^7.11.4",
+    "@babel/plugin-external-helpers": "^7.10.4",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "@rollup/plugin-babel": "^5.2.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-url": "^5.0.1",
     "babel-eslint": "^10.1.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
     "cross-env": "^5.1.4",
@@ -43,9 +47,5 @@ "eslint": "^6.8.0",
     "react-dom": "^16.10.2",
-    "rollup": "^0.64.1",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup": "^2.26.5",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^2.5.0",
-    "rollup-plugin-url": "^1.4.0"
+    "rollup-plugin-postcss": "^2.5.0"
   },
@@ -52,0 +52,0 @@ "files": [

README.md

@@ -94,17 +94,21 @@ # react-drawers
 
-| Property             | Type   | Description                                                          |
-| -------------------- | ------ | -------------------------------------------------------------------- |
-| top                  | int    | The height of the top drawer                                         |
-| left                 | int    | The width of the left drawer                                         |
-| right                | int    | The width of the right drawer                                        |
-| bottom               | int    | The height of the bottom drawer                                      |
-| topOpenOnStart       | bool   | Whether to spawn the top drawer open or closed                       |
-| leftOpenOnStart      | bool   | Whether to spawn the left drawer open or closed                      |
-| rightOpenOnStart     | bool   | Whether to spawn the right drawer open or closed                     |
-| bottomOpenOnStart    | bool   | Whether to spawn the bottom drawer open or closed                    |
-| topCollapsedWidth    | int    | The dimension of the top drawer when it is in the collapsed state    |
-| leftCollapsedWidth   | int    | The dimension of the left drawer when it is in the collapsed state   |
-| rightCollapsedWidth  | int    | The dimension of the right drawer when it is in the collapsed state  |
-| bottomCollapsedWidth | int    | The dimension of the bottom drawer when it is in the collapsed state |
-| mode                 | string | The definition of how to solve the overlapping of drawers, see later |
+| Property             | Type   | Description                                                                            |
+| -------------------- | ------ | -------------------------------------------------------------------------------------- |
+| top                  | int    | The height of the top drawer                                                           |
+| left                 | int    | The width of the left drawer                                                           |
+| right                | int    | The width of the right drawer                                                          |
+| bottom               | int    | The height of the bottom drawer                                                        |
+| topOpenOnStart       | bool   | Whether to spawn the top drawer open or closed                                         |
+| leftOpenOnStart      | bool   | Whether to spawn the left drawer open or closed                                        |
+| rightOpenOnStart     | bool   | Whether to spawn the right drawer open or closed                                       |
+| bottomOpenOnStart    | bool   | Whether to spawn the bottom drawer open or closed                                      |
+| topCollapsedWidth    | int    | The dimension of the top drawer when it is in the collapsed state                      |
+| leftCollapsedWidth   | int    | The dimension of the left drawer when it is in the collapsed state                     |
+| rightCollapsedWidth  | int    | The dimension of the right drawer when it is in the collapsed state                    |
+| bottomCollapsedWidth | int    | The dimension of the bottom drawer when it is in the collapsed state                   |
+| topOverContent       | bool   | True if top drawer should cover content when open, false otherwise (default: false)    |
+| leftOverContent      | bool   | True if left drawer should cover content when open, false otherwise (default: false)   |
+| rightOverContent     | bool   | True if right drawer should cover content when open, false otherwise (default: false)  |
+| bottomOverContent    | bool   | True if bottom drawer should cover content when open, false otherwise (default: false) |
+| mode                 | string | The definition of how to solve the overlapping of drawers, see later                   |
 
@@ -111,0 +115,0 @@ The **mode** property is used to define how the drawers overlap when they are open simultaneously. Not all the possible overlappings are currently supported. A mode is any anagram of the word `TLBR`, where `T` stands for `Top`, `L` for `Left` and so on. The earlier the letter appears in the string, the higher the priority of the drawer. The drawer corresponding to the first letter covers all the others, the drawer correponding to the second letter is covered by the first (in case they overlap) but covers the other two, and so on.

New alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

369927

increased by10.57%

Lines of code

4243

increased by6.85%

Number of lines in readme file

192

increased by2.13%

No dependency changes