@mui-treasury/layout - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

components/CollapseBtn/CollapseBtn.js

@@ -18,4 +18,2 @@ "use strict";
 
-var _EdgeCollapseCompiler = _interopRequireDefault(require("../../compilers/EdgeCollapseCompiler"));
-
 var _StyledProxy = require("../Shared/StyledProxy");
@@ -25,4 +23,2 @@
 
-var _utils = require("../../utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -66,9 +62,8 @@
 
-    var _useSidebarCta = (0, _hooks.useSidebarCta)(sidebarId, 'CollapseBtn'),
-        id = _useSidebarCta.id,
-        anchor = _useSidebarCta.anchor,
-        breakpoints = _useSidebarCta.breakpoints,
-        edgeSidebar = _useSidebarCta.edgeSidebar,
-        state = _useSidebarCta.state,
-        setCollapsed = _useSidebarCta.setCollapsed;
+    var _useSidebarCollapse = (0, _hooks.useSidebarCollapse)(sidebarId, 'CollapseBtn'),
+        id = _useSidebarCollapse.id,
+        anchor = _useSidebarCollapse.anchor,
+        hiddenStyles = _useSidebarCollapse.hiddenStyles,
+        state = _useSidebarCollapse.state,
+        setCollapsed = _useSidebarCollapse.setCollapsed;
 
@@ -91,3 +86,2 @@ var arrowR = /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRightRounded["default"], SvgIconProps);
 
-    var hiddenStyles = (0, _utils.createDisplayNone)((0, _EdgeCollapseCompiler["default"])(edgeSidebar).getHiddenBreakpoints(id), breakpoints);
     return /*#__PURE__*/_react["default"].createElement(StyledButton, _extends({}, props, {
@@ -94,0 +88,0 @@ classes: classes,

components/DrawerSidebar/DrawerSidebar.d.ts

 /// <reference types="react" />
 import { DrawerProps } from '@material-ui/core/Drawer';
-declare const _default: (styled: any) => ({ sidebarId, onClose, children, PaperProps, ModalProps, SlideProps, ...props }: Pick<DrawerProps, "id" | "anchor" | "hidden" | "ref" | "slot" | "style" | "title" | "className" | "classes" | "innerRef" | "color" | "lang" | "role" | "tabIndex" | "elevation" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "transitionDuration" | "open" | "container" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "disableAutoFocus" | "disableBackdropClick" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "manager" | "onBackdropClick" | "onClose" | "onEscapeKeyDown" | "onRendered" | "PaperProps" | "ModalProps" | "SlideProps"> & {
+declare const _default: (styled: any) => ({ sidebarId, onClose, children, PaperProps, ModalProps, SlideProps, ...props }: Pick<DrawerProps, "id" | "anchor" | "hidden" | "ref" | "slot" | "style" | "title" | "className" | "classes" | "innerRef" | "color" | "lang" | "role" | "tabIndex" | "elevation" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "PaperProps" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "open" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableBackdropClick" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "manager" | "onBackdropClick" | "onClose" | "onEscapeKeyDown" | "onRendered" | "SlideProps" | "transitionDuration" | "ModalProps"> & {
     sidebarId: string;
 }) => JSX.Element;
 export default _default;

components/DrawerSidebar/DrawerSidebar.js

@@ -36,14 +36,2 @@ "use strict";
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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; }
@@ -78,7 +66,2 @@
 
-    var _React$useState = _react["default"].useState(false),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        entered = _React$useState2[0],
-        setEntered = _React$useState2[1];
-
     var _useTheme = (0, _useTheme2["default"])(),
@@ -104,28 +87,2 @@ breakpoints = _useTheme.breakpoints;
 
-    var commonProps = _extends({}, props, {
-      PaperProps: _extends({}, PaperProps, {
-        className: (0, _clsx["default"])((entered || (0, _utils.get)(config, 'variant') === 'permanent') && transition.root, (0, _utils.get)(PaperProps, 'className'))
-      }),
-      ModalProps: _extends({
-        container: iDocument ? iDocument.body : undefined
-      }, ModalProps),
-      SlideProps: _extends({}, SlideProps, {
-        // @ts-ignore
-        onEntered: function onEntered() {
-          if (SlideProps && typeof SlideProps.onEntered === 'function') // @ts-ignore
-            SlideProps.onEntered.apply(SlideProps, arguments);
-          setEntered(true);
-        },
-        // @ts-ignore
-        onExit: function onExit(arg) {
-          if (SlideProps && typeof SlideProps.onExit === 'function') // @ts-ignore
-            SlideProps.onExit(arg);
-          setEntered(false);
-        }
-      }),
-      anchor: anchor,
-      open: state.open,
-      onClose: wrappedOnClose
-    });
-
     var headerAdjustment = /*#__PURE__*/_react["default"].createElement(EdgeHeaderOffset, {
@@ -136,15 +93,45 @@ sidebarId: sidebarId
     return /*#__PURE__*/_react["default"].createElement(_contexts.SidebarProvider, {
-      id: sidebarId
-    }, /*#__PURE__*/_react["default"].createElement(TemporaryDrawer, _extends({
-      disableScrollLock: true
-    }, commonProps, {
-      hiddenStyles: (0, _utils.createHiddenStyles)(temporary, [permanent, persistent], breakpoints),
-      styles: (0, _utils.createBreakpointStyles)(temporary, breakpoints)
-    }), children), /*#__PURE__*/_react["default"].createElement(PersistentDrawer, _extends({}, commonProps, {
-      hiddenStyles: (0, _utils.createHiddenStyles)(persistent, [temporary, permanent], breakpoints),
-      styles: (0, _utils.createBreakpointStyles)(persistent, breakpoints)
-    }), headerAdjustment, children), /*#__PURE__*/_react["default"].createElement(PermanentDrawer, _extends({}, commonProps, {
-      hiddenStyles: (0, _utils.createHiddenStyles)(permanent, [temporary, persistent], breakpoints),
-      styles: (0, _utils.createBreakpointStyles)(permanent, breakpoints)
-    }), headerAdjustment, children));
+      id: sidebarId,
+      config: config,
+      sidebarState: state
+    }, /*#__PURE__*/_react["default"].createElement(_contexts.SidebarConsumer, null, function (_ref2) {
+      var entered = _ref2.entered,
+          inlineStyle = _ref2.inlineStyle,
+          wrapOnEntered = _ref2.wrapOnEntered,
+          wrapOnExit = _ref2.wrapOnExit,
+          wrapOnMouseEnter = _ref2.wrapOnMouseEnter,
+          wrapOnMouseLeave = _ref2.wrapOnMouseLeave;
+
+      var commonProps = _extends({}, props, {
+        PaperProps: _extends({}, PaperProps, {
+          style: _extends({}, (0, _utils.get)(PaperProps, 'style'), {}, inlineStyle),
+          className: (0, _clsx["default"])((entered || (0, _utils.get)(config, 'variant') === 'permanent') && transition.root, (0, _utils.get)(PaperProps, 'className')),
+          onMouseEnter: wrapOnMouseEnter(PaperProps),
+          onMouseLeave: wrapOnMouseLeave(PaperProps)
+        }),
+        ModalProps: _extends({
+          container: iDocument ? iDocument.body : undefined
+        }, ModalProps),
+        SlideProps: _extends({}, SlideProps, {
+          onEntered: wrapOnEntered(SlideProps),
+          onExit: wrapOnExit(SlideProps)
+        }),
+        anchor: anchor,
+        open: state.open,
+        onClose: wrappedOnClose
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(TemporaryDrawer, _extends({
+        disableScrollLock: true
+      }, commonProps, {
+        hiddenStyles: (0, _utils.createHiddenStyles)(temporary, [permanent, persistent], breakpoints),
+        styles: (0, _utils.createBreakpointStyles)(temporary, breakpoints)
+      }), children), /*#__PURE__*/_react["default"].createElement(PersistentDrawer, _extends({}, commonProps, {
+        hiddenStyles: (0, _utils.createHiddenStyles)(persistent, [temporary, permanent], breakpoints),
+        styles: (0, _utils.createBreakpointStyles)(persistent, breakpoints)
+      }), headerAdjustment, children), /*#__PURE__*/_react["default"].createElement(PermanentDrawer, _extends({}, commonProps, {
+        hiddenStyles: (0, _utils.createHiddenStyles)(permanent, [temporary, persistent], breakpoints),
+        styles: (0, _utils.createBreakpointStyles)(permanent, breakpoints)
+      }), headerAdjustment, children));
+    }));
   };
@@ -151,0 +138,0 @@

components/SidebarTrigger/SidebarTrigger.js

@@ -20,8 +20,4 @@ "use strict";
 
-var _EdgeTriggerCompiler = _interopRequireDefault(require("../../compilers/EdgeTriggerCompiler"));
-
 var _hooks = require("../../hooks");
 
-var _utils = require("../../utils");
-
 var _StyledProxy = require("../Shared/StyledProxy");
@@ -66,9 +62,8 @@
 
-    var _useSidebarCta = (0, _hooks.useSidebarCta)(sidebarId, 'SidebarTrigger'),
-        id = _useSidebarCta.id,
-        anchor = _useSidebarCta.anchor,
-        breakpoints = _useSidebarCta.breakpoints,
-        edgeSidebar = _useSidebarCta.edgeSidebar,
-        state = _useSidebarCta.state,
-        setOpen = _useSidebarCta.setOpen;
+    var _useSidebarTrigger = (0, _hooks.useSidebarTrigger)(sidebarId, 'SidebarTrigger'),
+        id = _useSidebarTrigger.id,
+        anchor = _useSidebarTrigger.anchor,
+        hiddenStyles = _useSidebarTrigger.hiddenStyles,
+        state = _useSidebarTrigger.state,
+        setOpen = _useSidebarTrigger.setOpen;
 
@@ -87,5 +82,4 @@ var classes = useStyles(_extends({}, props, {
 
-    var styles = (0, _utils.createDisplayNone)((0, _EdgeTriggerCompiler["default"])(edgeSidebar).getHiddenBreakpoints(id), breakpoints);
     return /*#__PURE__*/_react["default"].createElement(StyledIconBtn, _extends({}, props, {
-      styles: styles,
+      styles: hiddenStyles,
       classes: classes,
@@ -92,0 +86,0 @@ onClick: function onClick(e) {

components/SwipeableSidebar/SwipeableSidebar.d.ts

 import React from 'react';
 import { SwipeableDrawerProps } from '@material-ui/core/SwipeableDrawer';
-declare const _default: (styled: any) => ({ onClose, onOpen, children, PaperProps, ModalProps, SlideProps, ...props }: Pick<SwipeableDrawerProps, "id" | "anchor" | "hidden" | "ref" | "slot" | "style" | "title" | "className" | "classes" | "innerRef" | "color" | "lang" | "role" | "tabIndex" | "elevation" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "transitionDuration" | "container" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "disableAutoFocus" | "disableBackdropClick" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "manager" | "onBackdropClick" | "onEscapeKeyDown" | "onRendered" | "PaperProps" | "ModalProps" | "SlideProps" | "disableBackdropTransition" | "disableDiscovery" | "disableSwipeToOpen" | "hysteresis" | "minFlingVelocity" | "SwipeAreaProps" | "swipeAreaWidth"> & {
+declare const _default: (styled: any) => ({ onClose, onOpen, children, PaperProps, ModalProps, SlideProps, ...props }: Pick<SwipeableDrawerProps, "id" | "anchor" | "hidden" | "ref" | "slot" | "style" | "title" | "className" | "classes" | "innerRef" | "color" | "lang" | "role" | "tabIndex" | "elevation" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "PaperProps" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableBackdropClick" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "manager" | "onBackdropClick" | "onEscapeKeyDown" | "onRendered" | "SlideProps" | "transitionDuration" | "ModalProps" | "disableBackdropTransition" | "disableDiscovery" | "disableSwipeToOpen" | "hysteresis" | "minFlingVelocity" | "SwipeAreaProps" | "swipeAreaWidth"> & {
     sidebarId: string;
@@ -5,0 +5,0 @@ onClose?: (event: React.SyntheticEvent<{}, Event>) => void;

components/SwipeableSidebar/SwipeableSidebar.js

@@ -34,14 +34,2 @@ "use strict";
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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; }
@@ -77,7 +65,2 @@
 
-    var _React$useState = _react["default"].useState(false),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        entered = _React$useState2[0],
-        setEntered = _React$useState2[1];
-
     var _useTheme = (0, _styles.useTheme)(),
@@ -108,29 +91,2 @@ breakpoints = _useTheme.breakpoints;
 
-    var commonProps = _extends({}, props, {
-      PaperProps: _extends({}, PaperProps, {
-        className: (0, _clsx["default"])((entered || (0, _utils.get)(config, 'variant') === 'permanent') && transition.root, (0, _utils.get)(PaperProps, 'className'))
-      }),
-      ModalProps: _extends({
-        container: iDocument ? iDocument.body : undefined
-      }, ModalProps),
-      SlideProps: _extends({}, SlideProps, {
-        // @ts-ignore
-        onEntered: function onEntered() {
-          if (SlideProps && typeof SlideProps.onEntered === 'function') // @ts-ignore
-            SlideProps.onEntered.apply(SlideProps, arguments);
-          setEntered(true);
-        },
-        // @ts-ignore
-        onExit: function onExit(arg) {
-          if (SlideProps && typeof SlideProps.onExit === 'function') // @ts-ignore
-            SlideProps.onExit(arg);
-          setEntered(false);
-        }
-      }),
-      anchor: anchor,
-      open: state.open,
-      onOpen: wrappedOnOpen,
-      onClose: wrappedOnClose
-    });
-
     var headerAdjustment = /*#__PURE__*/_react["default"].createElement(EdgeHeaderOffset, {
@@ -141,15 +97,46 @@ sidebarId: sidebarId
     return /*#__PURE__*/_react["default"].createElement(_contexts.SidebarProvider, {
-      id: sidebarId
-    }, /*#__PURE__*/_react["default"].createElement(TemporarySwipeableDrawer, _extends({
-      disableScrollLock: true
-    }, commonProps, {
-      hiddenStyles: (0, _utils.createHiddenStyles)(temporary, [permanent, persistent], breakpoints),
-      styles: (0, _utils.createBreakpointStyles)(temporary, breakpoints)
-    }), children), /*#__PURE__*/_react["default"].createElement(PersistentSwipeableDrawer, _extends({}, commonProps, {
-      hiddenStyles: (0, _utils.createHiddenStyles)(persistent, [temporary, permanent], breakpoints),
-      styles: (0, _utils.createBreakpointStyles)(persistent, breakpoints)
-    }), headerAdjustment, children), /*#__PURE__*/_react["default"].createElement(PermanentSwipeableDrawer, _extends({}, commonProps, {
-      hiddenStyles: (0, _utils.createHiddenStyles)(permanent, [temporary, persistent], breakpoints),
-      styles: (0, _utils.createBreakpointStyles)(permanent, breakpoints)
-    }), headerAdjustment, children));
+      id: sidebarId,
+      config: config,
+      sidebarState: state
+    }, /*#__PURE__*/_react["default"].createElement(_contexts.SidebarConsumer, null, function (_ref2) {
+      var entered = _ref2.entered,
+          inlineStyle = _ref2.inlineStyle,
+          wrapOnEntered = _ref2.wrapOnEntered,
+          wrapOnExit = _ref2.wrapOnExit,
+          wrapOnMouseEnter = _ref2.wrapOnMouseEnter,
+          wrapOnMouseLeave = _ref2.wrapOnMouseLeave;
+
+      var commonProps = _extends({}, props, {
+        PaperProps: _extends({}, PaperProps, {
+          style: _extends({}, (0, _utils.get)(PaperProps, 'style'), {}, inlineStyle),
+          className: (0, _clsx["default"])((entered || (0, _utils.get)(config, 'variant') === 'permanent') && transition.root, (0, _utils.get)(PaperProps, 'className')),
+          onMouseEnter: wrapOnMouseEnter(PaperProps),
+          onMouseLeave: wrapOnMouseLeave(PaperProps)
+        }),
+        ModalProps: _extends({
+          container: iDocument ? iDocument.body : undefined
+        }, ModalProps),
+        SlideProps: _extends({}, SlideProps, {
+          onEntered: wrapOnEntered(SlideProps),
+          onExit: wrapOnExit(SlideProps)
+        }),
+        anchor: anchor,
+        open: state.open,
+        onOpen: wrappedOnOpen,
+        onClose: wrappedOnClose
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(TemporarySwipeableDrawer, _extends({
+        disableScrollLock: true
+      }, commonProps, {
+        hiddenStyles: (0, _utils.createHiddenStyles)(temporary, [permanent, persistent], breakpoints),
+        styles: (0, _utils.createBreakpointStyles)(temporary, breakpoints)
+      }), children), /*#__PURE__*/_react["default"].createElement(PersistentSwipeableDrawer, _extends({}, commonProps, {
+        hiddenStyles: (0, _utils.createHiddenStyles)(persistent, [temporary, permanent], breakpoints),
+        styles: (0, _utils.createBreakpointStyles)(persistent, breakpoints)
+      }), headerAdjustment, children), /*#__PURE__*/_react["default"].createElement(PermanentSwipeableDrawer, _extends({}, commonProps, {
+        hiddenStyles: (0, _utils.createHiddenStyles)(permanent, [temporary, persistent], breakpoints),
+        styles: (0, _utils.createBreakpointStyles)(permanent, breakpoints)
+      }), headerAdjustment, children));
+    }));
   };
@@ -156,0 +143,0 @@

contexts/SidebarContext.d.ts

@@ -1,7 +0,25 @@
-import React from "react";
-export declare const useSidebarCtx: () => {
-    id: any;
+import React from 'react';
+import { DrawerProps } from '@material-ui/core/Drawer';
+import { PaperProps } from '@material-ui/core/Paper';
+import { SlideProps } from '@material-ui/core/Slide';
+import { Dictionary, EdgeSidebarConfig, SidebarState } from '../types';
+declare type SidebarContextValue = {
+    id: string;
+    entered: boolean;
+    expanded: boolean;
+    setEntered: (value: boolean) => void;
+    setExpanded: (value: boolean) => void;
+    inlineStyle?: Dictionary<string | number>;
+    wrapOnMouseEnter?: (props: DrawerProps['PaperProps']) => (...args: Parameters<PaperProps['onMouseEnter']>) => void;
+    wrapOnMouseLeave?: (props: DrawerProps['PaperProps']) => (...args: Parameters<PaperProps['onMouseLeave']>) => void;
+    wrapOnEntered?: (props: DrawerProps['SlideProps']) => (...args: Parameters<SlideProps['onEntered']>) => void;
+    wrapOnExit?: (props: DrawerProps['SlideProps']) => (...args: Parameters<SlideProps['onExit']>) => void;
 };
-export declare const SidebarProvider: ({ id, children, }: React.PropsWithChildren<{
+export declare const useSidebarCtx: () => SidebarContextValue;
+export declare const SidebarProvider: ({ id, children, config, sidebarState, }: React.PropsWithChildren<{
     id: string;
+    config: EdgeSidebarConfig;
+    sidebarState: SidebarState;
 }>) => JSX.Element;
+export declare const SidebarConsumer: React.Consumer<SidebarContextValue>;
+export {};

contexts/SidebarContext.js

@@ -6,13 +6,37 @@ "use strict";
 });
-exports.SidebarProvider = exports.useSidebarCtx = void 0;
+exports.SidebarConsumer = exports.SidebarProvider = exports.useSidebarCtx = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _utils = require("../utils");
+
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var Context = _react["default"].createContext({
-  id: undefined
+  id: undefined,
+  entered: false,
+  expanded: false,
+  setEntered: function setEntered() {},
+  setExpanded: function setExpanded() {}
 });
 
-Context.displayName = "SidebarCtx";
+Context.displayName = 'SidebarCtx';
+var initialState = {
+  entered: false,
+  expanded: false
+};
 
@@ -27,10 +51,92 @@ var useSidebarCtx = function useSidebarCtx() {
   var id = _ref.id,
-      children = _ref.children;
+      children = _ref.children,
+      config = _ref.config,
+      sidebarState = _ref.sidebarState;
+
+  var _React$useState = _react["default"].useState(initialState),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      state = _React$useState2[0],
+      setState = _React$useState2[1];
+
+  _react["default"].useEffect(function () {
+    if (!sidebarState.collapsed) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          expanded: false
+        });
+      });
+    }
+  }, [sidebarState.collapsed]);
+
+  var setEntered = _react["default"].useCallback(function (payload) {
+    return setState(function (prevState) {
+      return _extends({}, prevState, {
+        entered: payload
+      });
+    });
+  }, []);
+
+  var setExpanded = _react["default"].useCallback(function (payload) {
+    return setState(function (prevState) {
+      return _extends({}, prevState, {
+        expanded: payload
+      });
+    });
+  }, []);
+
+  var wrapOnMouseEnter = _react["default"].useCallback(function (paper) {
+    return function () {
+      if (paper && typeof paper.onMouseEnter === 'function') {
+        paper.onMouseEnter.apply(paper, arguments);
+      }
+
+      if (sidebarState.collapsed) {
+        setExpanded(true);
+      }
+    };
+  }, [setExpanded, sidebarState.collapsed]);
+
+  var wrapOnMouseLeave = _react["default"].useCallback(function (paper) {
+    return function () {
+      if (paper && typeof paper.onMouseLeave === 'function') {
+        paper.onMouseLeave.apply(paper, arguments);
+      }
+
+      setExpanded(false);
+    };
+  }, [setExpanded]);
+
+  var wrapOnEntered = _react["default"].useCallback(function (slide) {
+    return function () {
+      if (slide && typeof slide.onEntered === 'function') slide.onEntered.apply(slide, arguments);
+      setEntered(true);
+    };
+  }, [setEntered]);
+
+  var wrapOnExit = _react["default"].useCallback(function (slide) {
+    return function () {
+      if (slide && typeof slide.onExit === 'function') slide.onExit.apply(slide, arguments);
+      setEntered(false);
+    };
+  }, [setEntered]);
+
   return /*#__PURE__*/_react["default"].createElement(Context.Provider, {
-    value: {
+    value: _extends({
       id: id
-    }
+    }, state, {
+      setEntered: setEntered,
+      setExpanded: setExpanded,
+      wrapOnMouseEnter: wrapOnMouseEnter,
+      wrapOnMouseLeave: wrapOnMouseLeave,
+      wrapOnEntered: wrapOnEntered,
+      wrapOnExit: wrapOnExit,
+      inlineStyle: _extends({}, state.expanded && {
+        width: (0, _utils.get)(config, ['width'])
+      })
+    })
   }, children);
 };
 
-exports.SidebarProvider = SidebarProvider;
+exports.SidebarProvider = SidebarProvider;
+var SidebarConsumer = Context.Consumer;
+exports.SidebarConsumer = SidebarConsumer;

esm/components/CollapseBtn/CollapseBtn.js

@@ -14,6 +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); }
 import ArrowRight from '@material-ui/icons/KeyboardArrowRightRounded';
-import EdgeCollapseCompiler from '../../compilers/EdgeCollapseCompiler';
 import { generateStyledProxyCreator } from '../Shared/StyledProxy';
-import { useSidebarCta } from '../../hooks';
-import { createDisplayNone } from '../../utils';
+import { useSidebarCollapse } from '../../hooks';
 export default (function (styled) {
@@ -47,9 +45,8 @@ var styledProxy = generateStyledProxyCreator(styled);
 
-    var _useSidebarCta = useSidebarCta(sidebarId, 'CollapseBtn'),
-        id = _useSidebarCta.id,
-        anchor = _useSidebarCta.anchor,
-        breakpoints = _useSidebarCta.breakpoints,
-        edgeSidebar = _useSidebarCta.edgeSidebar,
-        state = _useSidebarCta.state,
-        setCollapsed = _useSidebarCta.setCollapsed;
+    var _useSidebarCollapse = useSidebarCollapse(sidebarId, 'CollapseBtn'),
+        id = _useSidebarCollapse.id,
+        anchor = _useSidebarCollapse.anchor,
+        hiddenStyles = _useSidebarCollapse.hiddenStyles,
+        state = _useSidebarCollapse.state,
+        setCollapsed = _useSidebarCollapse.setCollapsed;
 
@@ -71,3 +68,2 @@ var arrowR = /*#__PURE__*/React.createElement(ArrowRight, SvgIconProps);
 
-    var hiddenStyles = createDisplayNone(EdgeCollapseCompiler(edgeSidebar).getHiddenBreakpoints(id), breakpoints);
     return /*#__PURE__*/React.createElement(StyledButton, _extends({}, props, {
@@ -74,0 +70,0 @@ classes: classes,

esm/components/DrawerSidebar/DrawerSidebar.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); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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; }
@@ -23,3 +11,3 @@
 import useTheme from '@material-ui/core/styles/useTheme';
-import { SidebarProvider, useWindowCtx } from '../../contexts';
+import { SidebarProvider, SidebarConsumer, useWindowCtx } from '../../contexts';
 import { useSidebar, useBreakpointConfig, useSidebarAutoCollapse } from '../../hooks';
@@ -57,7 +45,2 @@ import getEdgeHeaderOffset from '../EdgeHeaderOffset';
 
-    var _React$useState = React.useState(false),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        entered = _React$useState2[0],
-        setEntered = _React$useState2[1];
-
     var _useTheme = useTheme(),
@@ -82,29 +65,2 @@ breakpoints = _useTheme.breakpoints;
     var config = useBreakpointConfig(edgeSidebar.configMapById[sidebarId]);
-
-    var commonProps = _extends({}, props, {
-      PaperProps: _extends({}, PaperProps, {
-        className: cx((entered || get(config, 'variant') === 'permanent') && transition.root, get(PaperProps, 'className'))
-      }),
-      ModalProps: _extends({
-        container: iDocument ? iDocument.body : undefined
-      }, ModalProps),
-      SlideProps: _extends({}, SlideProps, {
-        // @ts-ignore
-        onEntered: function onEntered() {
-          if (SlideProps && typeof SlideProps.onEntered === 'function') // @ts-ignore
-            SlideProps.onEntered.apply(SlideProps, arguments);
-          setEntered(true);
-        },
-        // @ts-ignore
-        onExit: function onExit(arg) {
-          if (SlideProps && typeof SlideProps.onExit === 'function') // @ts-ignore
-            SlideProps.onExit(arg);
-          setEntered(false);
-        }
-      }),
-      anchor: anchor,
-      open: state.open,
-      onClose: wrappedOnClose
-    });
-
     var headerAdjustment = /*#__PURE__*/React.createElement(EdgeHeaderOffset, {
@@ -114,15 +70,45 @@ sidebarId: sidebarId
     return /*#__PURE__*/React.createElement(SidebarProvider, {
-      id: sidebarId
-    }, /*#__PURE__*/React.createElement(TemporaryDrawer, _extends({
-      disableScrollLock: true
-    }, commonProps, {
-      hiddenStyles: createHiddenStyles(temporary, [permanent, persistent], breakpoints),
-      styles: createBreakpointStyles(temporary, breakpoints)
-    }), children), /*#__PURE__*/React.createElement(PersistentDrawer, _extends({}, commonProps, {
-      hiddenStyles: createHiddenStyles(persistent, [temporary, permanent], breakpoints),
-      styles: createBreakpointStyles(persistent, breakpoints)
-    }), headerAdjustment, children), /*#__PURE__*/React.createElement(PermanentDrawer, _extends({}, commonProps, {
-      hiddenStyles: createHiddenStyles(permanent, [temporary, persistent], breakpoints),
-      styles: createBreakpointStyles(permanent, breakpoints)
-    }), headerAdjustment, children));
+      id: sidebarId,
+      config: config,
+      sidebarState: state
+    }, /*#__PURE__*/React.createElement(SidebarConsumer, null, function (_ref2) {
+      var entered = _ref2.entered,
+          inlineStyle = _ref2.inlineStyle,
+          wrapOnEntered = _ref2.wrapOnEntered,
+          wrapOnExit = _ref2.wrapOnExit,
+          wrapOnMouseEnter = _ref2.wrapOnMouseEnter,
+          wrapOnMouseLeave = _ref2.wrapOnMouseLeave;
+
+      var commonProps = _extends({}, props, {
+        PaperProps: _extends({}, PaperProps, {
+          style: _extends({}, get(PaperProps, 'style'), {}, inlineStyle),
+          className: cx((entered || get(config, 'variant') === 'permanent') && transition.root, get(PaperProps, 'className')),
+          onMouseEnter: wrapOnMouseEnter(PaperProps),
+          onMouseLeave: wrapOnMouseLeave(PaperProps)
+        }),
+        ModalProps: _extends({
+          container: iDocument ? iDocument.body : undefined
+        }, ModalProps),
+        SlideProps: _extends({}, SlideProps, {
+          onEntered: wrapOnEntered(SlideProps),
+          onExit: wrapOnExit(SlideProps)
+        }),
+        anchor: anchor,
+        open: state.open,
+        onClose: wrappedOnClose
+      });
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TemporaryDrawer, _extends({
+        disableScrollLock: true
+      }, commonProps, {
+        hiddenStyles: createHiddenStyles(temporary, [permanent, persistent], breakpoints),
+        styles: createBreakpointStyles(temporary, breakpoints)
+      }), children), /*#__PURE__*/React.createElement(PersistentDrawer, _extends({}, commonProps, {
+        hiddenStyles: createHiddenStyles(persistent, [temporary, permanent], breakpoints),
+        styles: createBreakpointStyles(persistent, breakpoints)
+      }), headerAdjustment, children), /*#__PURE__*/React.createElement(PermanentDrawer, _extends({}, commonProps, {
+        hiddenStyles: createHiddenStyles(permanent, [temporary, persistent], breakpoints),
+        styles: createBreakpointStyles(permanent, breakpoints)
+      }), headerAdjustment, children));
+    }));
   };
@@ -129,0 +115,0 @@

esm/components/SidebarTrigger/SidebarTrigger.js

@@ -13,5 +13,3 @@ 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; }
 import MenuRounded from '@material-ui/icons/MenuRounded';
-import EdgeTriggerCompiler from '../../compilers/EdgeTriggerCompiler';
-import { useSidebarCta } from '../../hooks';
-import { createDisplayNone } from '../../utils';
+import { useSidebarTrigger } from '../../hooks';
 import { generateStyledProxyCreator } from '../Shared/StyledProxy';
@@ -47,9 +45,8 @@ export default (function (styled) {
 
-    var _useSidebarCta = useSidebarCta(sidebarId, 'SidebarTrigger'),
-        id = _useSidebarCta.id,
-        anchor = _useSidebarCta.anchor,
-        breakpoints = _useSidebarCta.breakpoints,
-        edgeSidebar = _useSidebarCta.edgeSidebar,
-        state = _useSidebarCta.state,
-        setOpen = _useSidebarCta.setOpen;
+    var _useSidebarTrigger = useSidebarTrigger(sidebarId, 'SidebarTrigger'),
+        id = _useSidebarTrigger.id,
+        anchor = _useSidebarTrigger.anchor,
+        hiddenStyles = _useSidebarTrigger.hiddenStyles,
+        state = _useSidebarTrigger.state,
+        setOpen = _useSidebarTrigger.setOpen;
 
@@ -68,5 +65,4 @@ var classes = useStyles(_extends({}, props, {
 
-    var styles = createDisplayNone(EdgeTriggerCompiler(edgeSidebar).getHiddenBreakpoints(id), breakpoints);
     return /*#__PURE__*/React.createElement(StyledIconBtn, _extends({}, props, {
-      styles: styles,
+      styles: hiddenStyles,
       classes: classes,
@@ -73,0 +69,0 @@ onClick: function onClick(e) {

esm/components/SwipeableSidebar/SwipeableSidebar.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); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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; }
@@ -23,3 +11,3 @@
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
-import { SidebarProvider, useWindowCtx } from '../../contexts';
+import { SidebarProvider, SidebarConsumer, useWindowCtx } from '../../contexts';
 import { useBreakpointConfig, useSidebarAutoCollapse, useSidebar } from '../../hooks';
@@ -57,7 +45,2 @@ import getEdgeHeaderOffset from '../EdgeHeaderOffset';
 
-    var _React$useState = React.useState(false),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        entered = _React$useState2[0],
-        setEntered = _React$useState2[1];
-
     var _useTheme = useTheme(),
@@ -87,30 +70,2 @@ breakpoints = _useTheme.breakpoints;
     var config = useBreakpointConfig(edgeSidebar.configMapById[sidebarId]);
-
-    var commonProps = _extends({}, props, {
-      PaperProps: _extends({}, PaperProps, {
-        className: cx((entered || get(config, 'variant') === 'permanent') && transition.root, get(PaperProps, 'className'))
-      }),
-      ModalProps: _extends({
-        container: iDocument ? iDocument.body : undefined
-      }, ModalProps),
-      SlideProps: _extends({}, SlideProps, {
-        // @ts-ignore
-        onEntered: function onEntered() {
-          if (SlideProps && typeof SlideProps.onEntered === 'function') // @ts-ignore
-            SlideProps.onEntered.apply(SlideProps, arguments);
-          setEntered(true);
-        },
-        // @ts-ignore
-        onExit: function onExit(arg) {
-          if (SlideProps && typeof SlideProps.onExit === 'function') // @ts-ignore
-            SlideProps.onExit(arg);
-          setEntered(false);
-        }
-      }),
-      anchor: anchor,
-      open: state.open,
-      onOpen: wrappedOnOpen,
-      onClose: wrappedOnClose
-    });
-
     var headerAdjustment = /*#__PURE__*/React.createElement(EdgeHeaderOffset, {
@@ -120,15 +75,46 @@ sidebarId: sidebarId
     return /*#__PURE__*/React.createElement(SidebarProvider, {
-      id: sidebarId
-    }, /*#__PURE__*/React.createElement(TemporarySwipeableDrawer, _extends({
-      disableScrollLock: true
-    }, commonProps, {
-      hiddenStyles: createHiddenStyles(temporary, [permanent, persistent], breakpoints),
-      styles: createBreakpointStyles(temporary, breakpoints)
-    }), children), /*#__PURE__*/React.createElement(PersistentSwipeableDrawer, _extends({}, commonProps, {
-      hiddenStyles: createHiddenStyles(persistent, [temporary, permanent], breakpoints),
-      styles: createBreakpointStyles(persistent, breakpoints)
-    }), headerAdjustment, children), /*#__PURE__*/React.createElement(PermanentSwipeableDrawer, _extends({}, commonProps, {
-      hiddenStyles: createHiddenStyles(permanent, [temporary, persistent], breakpoints),
-      styles: createBreakpointStyles(permanent, breakpoints)
-    }), headerAdjustment, children));
+      id: sidebarId,
+      config: config,
+      sidebarState: state
+    }, /*#__PURE__*/React.createElement(SidebarConsumer, null, function (_ref2) {
+      var entered = _ref2.entered,
+          inlineStyle = _ref2.inlineStyle,
+          wrapOnEntered = _ref2.wrapOnEntered,
+          wrapOnExit = _ref2.wrapOnExit,
+          wrapOnMouseEnter = _ref2.wrapOnMouseEnter,
+          wrapOnMouseLeave = _ref2.wrapOnMouseLeave;
+
+      var commonProps = _extends({}, props, {
+        PaperProps: _extends({}, PaperProps, {
+          style: _extends({}, get(PaperProps, 'style'), {}, inlineStyle),
+          className: cx((entered || get(config, 'variant') === 'permanent') && transition.root, get(PaperProps, 'className')),
+          onMouseEnter: wrapOnMouseEnter(PaperProps),
+          onMouseLeave: wrapOnMouseLeave(PaperProps)
+        }),
+        ModalProps: _extends({
+          container: iDocument ? iDocument.body : undefined
+        }, ModalProps),
+        SlideProps: _extends({}, SlideProps, {
+          onEntered: wrapOnEntered(SlideProps),
+          onExit: wrapOnExit(SlideProps)
+        }),
+        anchor: anchor,
+        open: state.open,
+        onOpen: wrappedOnOpen,
+        onClose: wrappedOnClose
+      });
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TemporarySwipeableDrawer, _extends({
+        disableScrollLock: true
+      }, commonProps, {
+        hiddenStyles: createHiddenStyles(temporary, [permanent, persistent], breakpoints),
+        styles: createBreakpointStyles(temporary, breakpoints)
+      }), children), /*#__PURE__*/React.createElement(PersistentSwipeableDrawer, _extends({}, commonProps, {
+        hiddenStyles: createHiddenStyles(persistent, [temporary, permanent], breakpoints),
+        styles: createBreakpointStyles(persistent, breakpoints)
+      }), headerAdjustment, children), /*#__PURE__*/React.createElement(PermanentSwipeableDrawer, _extends({}, commonProps, {
+        hiddenStyles: createHiddenStyles(permanent, [temporary, persistent], breakpoints),
+        styles: createBreakpointStyles(permanent, breakpoints)
+      }), headerAdjustment, children));
+    }));
   };
@@ -135,0 +121,0 @@

esm/contexts/SidebarContext.js

@@ -1,6 +0,29 @@
-import React from "react";
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import { get } from '../utils';
 var Context = React.createContext({
-  id: undefined
+  id: undefined,
+  entered: false,
+  expanded: false,
+  setEntered: function setEntered() {},
+  setExpanded: function setExpanded() {}
 });
-Context.displayName = "SidebarCtx";
+Context.displayName = 'SidebarCtx';
+var initialState = {
+  entered: false,
+  expanded: false
+};
 export var useSidebarCtx = function useSidebarCtx() {
@@ -11,8 +34,82 @@ return React.useContext(Context);
   var id = _ref.id,
-      children = _ref.children;
+      children = _ref.children,
+      config = _ref.config,
+      sidebarState = _ref.sidebarState;
+
+  var _React$useState = React.useState(initialState),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      state = _React$useState2[0],
+      setState = _React$useState2[1];
+
+  React.useEffect(function () {
+    if (!sidebarState.collapsed) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          expanded: false
+        });
+      });
+    }
+  }, [sidebarState.collapsed]);
+  var setEntered = React.useCallback(function (payload) {
+    return setState(function (prevState) {
+      return _extends({}, prevState, {
+        entered: payload
+      });
+    });
+  }, []);
+  var setExpanded = React.useCallback(function (payload) {
+    return setState(function (prevState) {
+      return _extends({}, prevState, {
+        expanded: payload
+      });
+    });
+  }, []);
+  var wrapOnMouseEnter = React.useCallback(function (paper) {
+    return function () {
+      if (paper && typeof paper.onMouseEnter === 'function') {
+        paper.onMouseEnter.apply(paper, arguments);
+      }
+
+      if (sidebarState.collapsed) {
+        setExpanded(true);
+      }
+    };
+  }, [setExpanded, sidebarState.collapsed]);
+  var wrapOnMouseLeave = React.useCallback(function (paper) {
+    return function () {
+      if (paper && typeof paper.onMouseLeave === 'function') {
+        paper.onMouseLeave.apply(paper, arguments);
+      }
+
+      setExpanded(false);
+    };
+  }, [setExpanded]);
+  var wrapOnEntered = React.useCallback(function (slide) {
+    return function () {
+      if (slide && typeof slide.onEntered === 'function') slide.onEntered.apply(slide, arguments);
+      setEntered(true);
+    };
+  }, [setEntered]);
+  var wrapOnExit = React.useCallback(function (slide) {
+    return function () {
+      if (slide && typeof slide.onExit === 'function') slide.onExit.apply(slide, arguments);
+      setEntered(false);
+    };
+  }, [setEntered]);
   return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: {
+    value: _extends({
       id: id
-    }
+    }, state, {
+      setEntered: setEntered,
+      setExpanded: setExpanded,
+      wrapOnMouseEnter: wrapOnMouseEnter,
+      wrapOnMouseLeave: wrapOnMouseLeave,
+      wrapOnEntered: wrapOnEntered,
+      wrapOnExit: wrapOnExit,
+      inlineStyle: _extends({}, state.expanded && {
+        width: get(config, ['width'])
+      })
+    })
   }, children);
-};
+};
+export var SidebarConsumer = Context.Consumer;

esm/hooks/index.js

@@ -1,9 +0,10 @@
-export * from "./useEdgeHeaderMagnet";
-export * from "./useHeaderHeight";
-export * from "./useInsetSidebar";
-export * from "./useScreen";
-export * from "./useScrollY";
-export * from "./useSidebar";
-export * from "./useSidebarAutoCollapse";
-export * from "./useSidebarCta";
-export * from "./useBreakpointConfig";
+export * from './useEdgeHeaderMagnet';
+export * from './useHeaderHeight';
+export * from './useInsetSidebar';
+export * from './useScreen';
+export * from './useScrollY';
+export * from './useSidebar';
+export * from './useSidebarAutoCollapse';
+export * from './useBreakpointConfig';
+export * from './useSidebarCollapse';
+export * from './useSidebarTrigger';

esm/hooks/useSidebar.js

@@ -19,6 +19,8 @@ import { useTheme } from '@material-ui/core/styles';
 
-  var anchor = getSidebarAnchor(data.edgeSidebar.configMapById[id]);
+  var sidebarConfigMap = data.edgeSidebar.configMapById[id];
+  var anchor = getSidebarAnchor(sidebarConfigMap);
   var styles = EdgeSidebarCompiler(state, data.edgeSidebar, data.header).getResultStyle(id);
   return {
     anchor: anchor,
+    sidebarConfigMap: sidebarConfigMap,
     state: state.sidebar[id],
@@ -25,0 +27,0 @@ edgeSidebar: data.edgeSidebar,

esm/index.js

@@ -5,2 +5,2 @@ export { default } from './builders';
 export { LayoutConsumer, useLayoutCtx, WindowConsumer, WindowProvider, useWindowCtx } from './contexts';
-export { useScreen, useScrollY, useHeaderHeight } from './hooks';
+export { useScreen, useScrollY, useHeaderHeight, useSidebarTrigger, useSidebarCollapse } from './hooks';

hooks/index.d.ts

@@ -1,9 +0,10 @@
-export * from "./useEdgeHeaderMagnet";
-export * from "./useHeaderHeight";
-export * from "./useInsetSidebar";
-export * from "./useScreen";
-export * from "./useScrollY";
-export * from "./useSidebar";
-export * from "./useSidebarAutoCollapse";
-export * from "./useSidebarCta";
-export * from "./useBreakpointConfig";
+export * from './useEdgeHeaderMagnet';
+export * from './useHeaderHeight';
+export * from './useInsetSidebar';
+export * from './useScreen';
+export * from './useScrollY';
+export * from './useSidebar';
+export * from './useSidebarAutoCollapse';
+export * from './useBreakpointConfig';
+export * from './useSidebarCollapse';
+export * from './useSidebarTrigger';

hooks/index.js

@@ -91,5 +91,5 @@ "use strict";
 
-var _useSidebarCta = require("./useSidebarCta");
+var _useBreakpointConfig = require("./useBreakpointConfig");
 
-Object.keys(_useSidebarCta).forEach(function (key) {
+Object.keys(_useBreakpointConfig).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -99,3 +99,3 @@ Object.defineProperty(exports, key, {
     get: function get() {
-      return _useSidebarCta[key];
+      return _useBreakpointConfig[key];
     }
@@ -105,5 +105,5 @@ });
 
-var _useBreakpointConfig = require("./useBreakpointConfig");
+var _useSidebarCollapse = require("./useSidebarCollapse");
 
-Object.keys(_useBreakpointConfig).forEach(function (key) {
+Object.keys(_useSidebarCollapse).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -113,5 +113,17 @@ Object.defineProperty(exports, key, {
     get: function get() {
-      return _useBreakpointConfig[key];
+      return _useSidebarCollapse[key];
     }
   });
+});
+
+var _useSidebarTrigger = require("./useSidebarTrigger");
+
+Object.keys(_useSidebarTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useSidebarTrigger[key];
+    }
+  });
 });

hooks/useSidebar.d.ts

 export declare const useSidebar: (id: string, consumer?: string) => {
     anchor: import("../types").DrawerAnchor;
+    sidebarConfigMap: import("../types").MapBreakpoint<import("../types").EdgeSidebarConfig>;
     state: import("../types").SidebarState;
@@ -4,0 +5,0 @@ edgeSidebar: import("../types").EdgeSidebarData;

hooks/useSidebar.js

@@ -32,6 +32,8 @@ "use strict";
 
-  var anchor = (0, _utils.getSidebarAnchor)(data.edgeSidebar.configMapById[id]);
+  var sidebarConfigMap = data.edgeSidebar.configMapById[id];
+  var anchor = (0, _utils.getSidebarAnchor)(sidebarConfigMap);
   var styles = (0, _EdgeSidebarCompiler["default"])(state, data.edgeSidebar, data.header).getResultStyle(id);
   return {
     anchor: anchor,
+    sidebarConfigMap: sidebarConfigMap,
     state: state.sidebar[id],
@@ -38,0 +40,0 @@ edgeSidebar: data.edgeSidebar,

index.d.ts

@@ -5,2 +5,2 @@ export { default } from './builders';
 export { LayoutConsumer, useLayoutCtx, WindowConsumer, WindowProvider, useWindowCtx, } from './contexts';
-export { useScreen, useScrollY, useHeaderHeight } from './hooks';
+export { useScreen, useScrollY, useHeaderHeight, useSidebarTrigger, useSidebarCollapse, } from './hooks';

index.js

@@ -14,3 +14,5 @@ "use strict";
   useScrollY: true,
-  useHeaderHeight: true
+  useHeaderHeight: true,
+  useSidebarTrigger: true,
+  useSidebarCollapse: true
 };
@@ -71,2 +73,14 @@ Object.defineProperty(exports, "default", {
 });
+Object.defineProperty(exports, "useSidebarTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useSidebarTrigger;
+  }
+});
+Object.defineProperty(exports, "useSidebarCollapse", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useSidebarCollapse;
+  }
+});
 
@@ -73,0 +87,0 @@ var _builders = _interopRequireDefault(require("./builders"));

package.json

 {
   "name": "@mui-treasury/layout",
   "module": "./esm/index.js",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "author": "siriwatknp <[e-mail]>",
@@ -6,0 +6,0 @@ "description": "Supercharge your site with instant-layout, 100% compatible with material-ui",

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

485370

increased by2.62%

Number of package files

463

increased by0.65%

Lines of code

9085

increased by3.11%

No dependency changes