@instructure/ui-drawer-layout 8.33.1 → 8.33.2-snapshot-5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/es/DrawerLayout/DrawerContent/DrawerContentLocator.js +3 -1
  3. package/es/DrawerLayout/DrawerContent/index.js +7 -26
  4. package/es/DrawerLayout/DrawerContent/props.js +1 -0
  5. package/es/DrawerLayout/DrawerContent/styles.js +0 -1
  6. package/es/DrawerLayout/DrawerContent/theme.js +0 -1
  7. package/es/DrawerLayout/DrawerLayoutLocator.js +3 -3
  8. package/es/DrawerLayout/DrawerTray/DrawerTrayLocator.js +3 -1
  9. package/es/DrawerLayout/DrawerTray/index.js +33 -64
  10. package/es/DrawerLayout/DrawerTray/props.js +1 -0
  11. package/es/DrawerLayout/DrawerTray/styles.js +0 -1
  12. package/es/DrawerLayout/DrawerTray/theme.js +5 -5
  13. package/es/DrawerLayout/__examples__/DrawerLayout.examples.js +1 -1
  14. package/es/DrawerLayout/__fixtures__/DrawerLayout.fixture.js +6 -7
  15. package/es/DrawerLayout/index.js +3 -41
  16. package/es/DrawerLayout/locator.js +1 -0
  17. package/es/DrawerLayout/props.js +1 -0
  18. package/es/DrawerLayout/styles.js +0 -1
  19. package/es/index.js +1 -0
  20. package/lib/DrawerLayout/DrawerContent/DrawerContentLocator.js +1 -3
  21. package/lib/DrawerLayout/DrawerContent/index.js +7 -36
  22. package/lib/DrawerLayout/DrawerContent/props.js +1 -3
  23. package/lib/DrawerLayout/DrawerContent/styles.js +0 -2
  24. package/lib/DrawerLayout/DrawerContent/theme.js +0 -2
  25. package/lib/DrawerLayout/DrawerLayoutLocator.js +1 -7
  26. package/lib/DrawerLayout/DrawerTray/DrawerTrayLocator.js +1 -3
  27. package/lib/DrawerLayout/DrawerTray/index.js +33 -78
  28. package/lib/DrawerLayout/DrawerTray/props.js +1 -5
  29. package/lib/DrawerLayout/DrawerTray/styles.js +0 -2
  30. package/lib/DrawerLayout/DrawerTray/theme.js +5 -6
  31. package/lib/DrawerLayout/__examples__/DrawerLayout.examples.js +0 -6
  32. package/lib/DrawerLayout/__fixtures__/DrawerLayout.fixture.js +5 -14
  33. package/lib/DrawerLayout/index.js +3 -62
  34. package/lib/DrawerLayout/locator.js +0 -2
  35. package/lib/DrawerLayout/props.js +1 -7
  36. package/lib/DrawerLayout/styles.js +0 -2
  37. package/lib/index.js +0 -1
  38. package/package.json +21 -21
  39. package/tsconfig.build.tsbuildinfo +1 -1
@@ -1,46 +1,27 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.DrawerTray = void 0;
9
-
10
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
-
12
9
  var _react = require("react");
13
-
14
10
  var _emotion = require("@instructure/emotion");
15
-
16
11
  var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
17
-
18
12
  var _Transition = require("@instructure/ui-motion/lib/Transition");
19
-
20
13
  var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
21
-
22
14
  var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
23
-
24
15
  var _testable = require("@instructure/ui-testable/lib/testable.js");
25
-
26
16
  var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
27
-
28
17
  var _Portal = require("@instructure/ui-portal/lib/Portal");
29
-
30
18
  var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHorizontalPlacement.js");
31
-
32
19
  var _styles = _interopRequireDefault(require("./styles"));
33
-
34
20
  var _theme = _interopRequireDefault(require("./theme"));
35
-
36
21
  var _index = require("../index");
37
-
38
22
  var _props = require("./props");
39
-
40
23
  const _excluded = ["label", "children", "render", "placement", "open", "onOpen", "onClose", "border", "shadow", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "contentRef", "mountNode", "defaultFocusElement", "liveRegion", "onDismiss", "onTransition", "shouldReturnFocus", "shouldCloseOnEscape", "shouldCloseOnDocumentClick", "shouldContainFocus", "styles"];
41
-
42
24
  var _dec, _dec2, _dec3, _class, _class2;
43
-
44
25
  /**
45
26
  ---
46
27
  parent: DrawerLayout
@@ -52,98 +33,78 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
52
33
  get _content() {
53
34
  return this.ref;
54
35
  }
55
-
56
36
  constructor(props) {
57
37
  super(props);
58
38
  this.ref = null;
59
39
  this._DOMNode = null;
60
-
61
40
  this.makeStyleProps = () => {
62
41
  return {
63
42
  placement: this.placement
64
43
  };
65
44
  };
66
-
67
45
  this.handleContentRef = node => {
68
46
  this.ref = node;
69
-
70
47
  if (typeof this.props.contentRef === 'function') {
71
48
  this.props.contentRef(node);
72
49
  }
73
50
  };
74
-
75
51
  this.handleTransitionEntered = _transitionType => {
76
52
  this.setState({
77
53
  transitioning: false
78
54
  });
79
55
  };
80
-
81
56
  this.handleTransitionExited = _transitionType => {
82
57
  this.setState({
83
58
  transitioning: false
84
59
  });
85
60
  };
86
-
87
61
  this.handlePortalOpen = DOMNode => {
88
62
  this.DOMNode = DOMNode;
89
63
  this.setState({
90
64
  portalOpen: true
91
65
  });
92
66
  };
93
-
94
67
  this.state = {
95
68
  transitioning: false,
96
69
  portalOpen: false
97
70
  };
98
71
  }
99
-
100
72
  componentDidMount() {
101
73
  var _this$props$makeStyle, _this$props;
102
-
103
74
  (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
104
75
  }
105
-
106
76
  componentDidUpdate(prevProps) {
107
77
  var _this$props$makeStyle2, _this$props2;
108
-
109
78
  if (this.props.open !== prevProps.open) {
110
79
  this.setState({
111
80
  transitioning: true
112
81
  });
113
82
  }
114
-
115
83
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
116
84
  }
117
-
118
85
  get placement() {
119
86
  const _this$props3 = this.props,
120
- placement = _this$props3.placement,
121
- dir = _this$props3.dir;
87
+ placement = _this$props3.placement,
88
+ dir = _this$props3.dir;
122
89
  const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
123
90
  return isRtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
124
91
  }
125
-
126
92
  get direction() {
127
93
  return this.placement === 'end' ? 'right' : 'left';
128
94
  }
129
-
130
95
  get transition() {
131
96
  return `slide-${this.direction}`;
132
97
  }
133
-
134
98
  get DOMNode() {
135
99
  return this._DOMNode;
136
100
  }
137
-
138
101
  set DOMNode(el) {
139
102
  this._DOMNode = el;
140
103
  }
141
-
142
104
  renderContent() {
143
105
  const _this$props4 = this.props,
144
- children = _this$props4.children,
145
- render = _this$props4.render;
146
-
106
+ children = _this$props4.children,
107
+ render = _this$props4.render;
147
108
  if (typeof render === 'function') {
148
109
  return render();
149
110
  } else if (typeof children === 'function') {
@@ -152,51 +113,47 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
152
113
  return children;
153
114
  }
154
115
  }
155
-
156
116
  render() {
157
117
  const _this$props5 = this.props,
158
- label = _this$props5.label,
159
- children = _this$props5.children,
160
- render = _this$props5.render,
161
- placement = _this$props5.placement,
162
- open = _this$props5.open,
163
- onOpen = _this$props5.onOpen,
164
- onClose = _this$props5.onClose,
165
- border = _this$props5.border,
166
- shadow = _this$props5.shadow,
167
- onEnter = _this$props5.onEnter,
168
- onEntering = _this$props5.onEntering,
169
- onEntered = _this$props5.onEntered,
170
- onExit = _this$props5.onExit,
171
- onExiting = _this$props5.onExiting,
172
- onExited = _this$props5.onExited,
173
- contentRef = _this$props5.contentRef,
174
- mountNode = _this$props5.mountNode,
175
- defaultFocusElement = _this$props5.defaultFocusElement,
176
- liveRegion = _this$props5.liveRegion,
177
- onDismiss = _this$props5.onDismiss,
178
- onTransition = _this$props5.onTransition,
179
- shouldReturnFocus = _this$props5.shouldReturnFocus,
180
- shouldCloseOnEscape = _this$props5.shouldCloseOnEscape,
181
- shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
182
- shouldContainFocus = _this$props5.shouldContainFocus,
183
- styles = _this$props5.styles,
184
- props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
118
+ label = _this$props5.label,
119
+ children = _this$props5.children,
120
+ render = _this$props5.render,
121
+ placement = _this$props5.placement,
122
+ open = _this$props5.open,
123
+ onOpen = _this$props5.onOpen,
124
+ onClose = _this$props5.onClose,
125
+ border = _this$props5.border,
126
+ shadow = _this$props5.shadow,
127
+ onEnter = _this$props5.onEnter,
128
+ onEntering = _this$props5.onEntering,
129
+ onEntered = _this$props5.onEntered,
130
+ onExit = _this$props5.onExit,
131
+ onExiting = _this$props5.onExiting,
132
+ onExited = _this$props5.onExited,
133
+ contentRef = _this$props5.contentRef,
134
+ mountNode = _this$props5.mountNode,
135
+ defaultFocusElement = _this$props5.defaultFocusElement,
136
+ liveRegion = _this$props5.liveRegion,
137
+ onDismiss = _this$props5.onDismiss,
138
+ onTransition = _this$props5.onTransition,
139
+ shouldReturnFocus = _this$props5.shouldReturnFocus,
140
+ shouldCloseOnEscape = _this$props5.shouldCloseOnEscape,
141
+ shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
142
+ shouldContainFocus = _this$props5.shouldContainFocus,
143
+ styles = _this$props5.styles,
144
+ props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
185
145
  return (0, _emotion.jsx)(_index.DrawerLayoutContext.Consumer, null, shouldOverlayTray => {
186
146
  var _this$props$styles;
187
-
188
147
  const portalOpen = this.state.portalOpen;
189
- const needsPortal = shouldOverlayTray && !!mountNode; // we have to handle the shadow version here,
148
+ const needsPortal = shouldOverlayTray && !!mountNode;
149
+ // we have to handle the shadow version here,
190
150
  // because passing and handling it in styles.js makes it
191
151
  // rerender the component during the transition, breaking it
192
-
193
152
  const trayStyles = shadow && shouldOverlayTray ? styles === null || styles === void 0 ? void 0 : styles.drawerTrayWithShadow : styles === null || styles === void 0 ? void 0 : styles.drawerTray;
194
153
  let transitionIn = open;
195
-
196
154
  if (needsPortal && !portalOpen) {
197
155
  transitionIn = false;
198
156
  }
199
-
200
157
  const content = (0, _emotion.jsx)(_Transition.Transition, {
201
158
  in: transitionIn,
202
159
  type: this.transition,
@@ -225,7 +182,6 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
225
182
  as: "div",
226
183
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerTrayContent
227
184
  }, this.renderContent())));
228
-
229
185
  if (needsPortal) {
230
186
  return (0, _emotion.jsx)(_Portal.Portal, {
231
187
  mountNode: mountNode,
@@ -237,7 +193,6 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
237
193
  }
238
194
  });
239
195
  }
240
-
241
196
  }, _class2.displayName = "DrawerTray", _class2.componentId = 'DrawerLayout.Tray', _class2.locatorAttribute = 'data-drawer-tray', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
242
197
  shouldContainFocus: true,
243
198
  shouldCloseOnEscape: true,
@@ -1,18 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.propTypes = exports.allowedProps = void 0;
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _element = require("@instructure/ui-prop-types/lib/element.js");
13
-
14
10
  var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
15
-
16
11
  /*
17
12
  * The MIT License (MIT)
18
13
  *
@@ -36,6 +31,7 @@ var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirect
36
31
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
37
32
  * SOFTWARE.
38
33
  */
34
+
39
35
  const propTypes = {
40
36
  label: _propTypes.default.string.isRequired,
41
37
  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  /*
9
8
  * The MIT License (MIT)
10
9
  *
@@ -96,6 +95,5 @@ const generateStyle = (componentTheme, props, state) => {
96
95
  }
97
96
  };
98
97
  };
99
-
100
98
  var _default = generateStyle;
101
99
  exports.default = _default;
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  /*
9
8
  * The MIT License (MIT)
10
9
  *
@@ -36,9 +35,9 @@ exports.default = void 0;
36
35
  */
37
36
  const generateComponentTheme = theme => {
38
37
  const colors = theme.colors,
39
- borders = theme.borders,
40
- stacking = theme.stacking,
41
- shadows = theme.shadows;
38
+ borders = theme.borders,
39
+ stacking = theme.stacking,
40
+ shadows = theme.shadows;
42
41
  const componentVariables = {
43
42
  background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
44
43
  borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
@@ -50,9 +49,9 @@ const generateComponentTheme = theme => {
50
49
  overflowY: 'auto',
51
50
  contentOverflowY: 'auto'
52
51
  };
53
- return { ...componentVariables
52
+ return {
53
+ ...componentVariables
54
54
  };
55
55
  };
56
-
57
56
  var _default = generateComponentTheme;
58
57
  exports.default = _default;
@@ -1,20 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _react = _interopRequireDefault(require("react"));
11
-
12
9
  var _View2 = require("@instructure/ui-view/lib/View");
13
-
14
10
  var _index = require("../index");
15
-
16
11
  var _DrawerLayout$Tray, _View;
17
-
18
12
  var _default = {
19
13
  propValues: {
20
14
  dir: ['ltr']
@@ -1,30 +1,23 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
-
5
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = void 0;
11
-
12
9
  var _react = _interopRequireWildcard(require("react"));
13
-
14
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
-
16
11
  var _index = require("../index");
17
-
18
12
  var _DrawerLayout$Content;
19
-
20
13
  class DrawerLayoutFixture extends _react.Component {
21
14
  render() {
22
15
  const _this$props = this.props,
23
- layoutWidth = _this$props.layoutWidth,
24
- trayWidth = _this$props.trayWidth,
25
- open = _this$props.open,
26
- placement = _this$props.placement,
27
- onOverlayTrayChange = _this$props.onOverlayTrayChange;
16
+ layoutWidth = _this$props.layoutWidth,
17
+ trayWidth = _this$props.trayWidth,
18
+ open = _this$props.open,
19
+ placement = _this$props.placement,
20
+ onOverlayTrayChange = _this$props.onOverlayTrayChange;
28
21
  return /*#__PURE__*/_react.default.createElement("div", {
29
22
  style: {
30
23
  width: layoutWidth
@@ -44,9 +37,7 @@ class DrawerLayoutFixture extends _react.Component {
44
37
  label: "Test DrawerContent"
45
38
  }, /*#__PURE__*/_react.default.createElement("div", null, "Hello from content", /*#__PURE__*/_react.default.createElement("button", null, "Expand"))))));
46
39
  }
47
-
48
40
  }
49
-
50
41
  exports.default = DrawerLayoutFixture;
51
42
  DrawerLayoutFixture.displayName = "DrawerLayoutFixture";
52
43
  DrawerLayoutFixture.propTypes = {
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
-
5
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
@@ -21,41 +19,23 @@ Object.defineProperty(exports, "DrawerTray", {
21
19
  }
22
20
  });
23
21
  exports.default = void 0;
24
-
25
22
  var _react = _interopRequireWildcard(require("react"));
26
-
27
23
  var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
28
-
29
24
  var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
30
-
31
25
  var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
32
-
33
26
  var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
34
-
35
27
  var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
36
-
37
28
  var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
38
-
39
29
  var _px = require("@instructure/ui-utils/lib/px.js");
40
-
41
30
  var _console = require("@instructure/console");
42
-
43
31
  var _testable = require("@instructure/ui-testable/lib/testable.js");
44
-
45
32
  var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHorizontalPlacement.js");
46
-
47
33
  var _DrawerContent = require("./DrawerContent");
48
-
49
34
  var _DrawerTray = require("./DrawerTray");
50
-
51
35
  var _emotion = require("@instructure/emotion");
52
-
53
36
  var _styles = _interopRequireDefault(require("./styles"));
54
-
55
37
  var _props2 = require("./props");
56
-
57
38
  var _dec, _dec2, _dec3, _dec4, _class, _class2;
58
-
59
39
  /**
60
40
  ---
61
41
  category: components
@@ -69,59 +49,46 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
69
49
  this._content = null;
70
50
  this._tray = null;
71
51
  this.ref = null;
72
-
73
52
  this.handleRef = el => {
74
53
  this.ref = el;
75
54
  };
76
-
77
55
  this.handleTrayContentRef = el => {
78
56
  this._tray = el;
79
57
  };
80
-
81
58
  this.handleContentSizeChange = _ref => {
82
59
  let width = _ref.width;
83
60
  this.setState((state, props) => {
84
61
  const nextState = this.getNextState(props.minWidth, state.trayWidth, width, state.shouldOverlayTray);
85
-
86
62
  if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
87
63
  this.notifyOverlayTrayChange(nextState.shouldOverlayTray);
88
64
  }
89
-
90
65
  return nextState;
91
66
  });
92
67
  };
93
-
94
68
  this.handleTraySizeChange = _ref2 => {
95
69
  let width = _ref2.width;
96
70
  this.setState((state, props) => {
97
71
  const nextState = this.getNextState(props.minWidth, width, state.contentWidth, true);
98
-
99
72
  if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
100
73
  this.notifyOverlayTrayChange(nextState.shouldOverlayTray);
101
74
  }
102
-
103
75
  return nextState;
104
76
  });
105
77
  };
106
-
107
78
  this.handleTrayTransitionEnter = () => {
108
79
  let width = 0;
109
-
110
80
  if (this._tray) {
111
81
  width = (0, _getBoundingClientRect.getBoundingClientRect)(this._tray).width;
112
82
  }
113
-
114
83
  this.handleTraySizeChange({
115
84
  width
116
85
  });
117
86
  };
118
-
119
87
  this.handleTrayTransitionExit = () => {
120
88
  this.handleTraySizeChange({
121
89
  width: 0
122
90
  });
123
91
  };
124
-
125
92
  this.state = {
126
93
  shouldOverlayTray: false,
127
94
  trayWidth: 0,
@@ -129,71 +96,56 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
129
96
  };
130
97
  this._id = _props.deterministicId();
131
98
  }
132
-
133
99
  componentDidMount() {
134
100
  var _this$props$makeStyle, _this$props;
135
-
136
101
  (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
137
102
  }
138
-
139
103
  componentDidUpdate() {
140
104
  var _this$props$makeStyle2, _this$props2;
141
-
142
105
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
143
106
  }
144
-
145
107
  get trayProps() {
146
108
  const tray = _react.Children.toArray(this.props.children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_DrawerTray.DrawerTray]))[0];
147
-
148
109
  return tray.props;
149
110
  }
150
-
151
111
  get trayPlacement() {
152
112
  const _this$trayProps = this.trayProps,
153
- placement = _this$trayProps.placement,
154
- _this$trayProps$dir = _this$trayProps.dir,
155
- dir = _this$trayProps$dir === void 0 ? this.props.dir : _this$trayProps$dir;
113
+ placement = _this$trayProps.placement,
114
+ _this$trayProps$dir = _this$trayProps.dir,
115
+ dir = _this$trayProps$dir === void 0 ? this.props.dir : _this$trayProps$dir;
156
116
  const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
157
117
  return isRtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
158
118
  }
159
-
160
119
  get contentMargin() {
161
120
  const trayWidth = this.state.trayWidth || 0;
162
121
  return this.state.shouldOverlayTray ? 0 : trayWidth;
163
122
  }
164
-
165
123
  get contentStyle() {
166
124
  const shouldOverlayTray = this.shouldOverlayTray(this.props.minWidth, this.state.trayWidth, this.state.contentWidth, this.state.shouldOverlayTray);
167
125
  let marginLeft = 0;
168
126
  let marginRight = 0;
169
-
170
127
  if (!shouldOverlayTray) {
171
128
  if (this.trayPlacement === 'start') {
172
129
  marginLeft = this.contentMargin;
173
130
  }
174
-
175
131
  if (this.trayPlacement === 'end') {
176
132
  marginRight = this.contentMargin;
177
133
  }
178
134
  }
179
-
180
135
  return {
181
136
  marginLeft: `${marginLeft}px`,
182
137
  marginRight: `${marginRight}px`
183
138
  };
184
139
  }
185
-
186
140
  shouldOverlayTray(minWidth, trayWidth, contentWidth, trayIsOverlayed) {
187
141
  if (!this._content) return false;
188
142
  const minWidthPx = (0, _px.px)(minWidth, this._content);
189
-
190
143
  if (trayIsOverlayed) {
191
144
  return contentWidth - trayWidth < minWidthPx;
192
145
  } else {
193
146
  return contentWidth < minWidthPx;
194
147
  }
195
148
  }
196
-
197
149
  getNextState(minWidth, trayWidth, contentWidth, trayIsOverlayed) {
198
150
  const shouldOverlayTray = this.shouldOverlayTray(minWidth, trayWidth, contentWidth, trayIsOverlayed);
199
151
  return {
@@ -202,19 +154,15 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
202
154
  shouldOverlayTray
203
155
  };
204
156
  }
205
-
206
157
  notifyOverlayTrayChange(shouldOverlayTray) {
207
158
  const onOverlayTrayChange = this.props.onOverlayTrayChange;
208
-
209
159
  if (typeof onOverlayTrayChange === 'function') {
210
160
  onOverlayTrayChange(shouldOverlayTray);
211
161
  }
212
162
  }
213
-
214
163
  renderChildren() {
215
164
  let trayCount = 0;
216
165
  let contentCount = 0;
217
-
218
166
  const children = _react.Children.map(this.props.children, (child, _index) => {
219
167
  if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrawerTray.DrawerTray])) {
220
168
  trayCount++;
@@ -228,16 +176,13 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
228
176
  });
229
177
  } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrawerContent.DrawerContent])) {
230
178
  contentCount++;
231
-
232
179
  const handleContentRef = el => {
233
180
  const contentRef = child.props.contentRef;
234
181
  this._content = el;
235
-
236
182
  if (typeof contentRef === 'function') {
237
183
  contentRef(el);
238
184
  }
239
185
  };
240
-
241
186
  return this.state.trayWidth !== null ? (0, _safeCloneElement.safeCloneElement)(child, {
242
187
  label: child.props.label,
243
188
  key: child.props.label,
@@ -250,15 +195,12 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
250
195
  return child;
251
196
  }
252
197
  });
253
-
254
198
  (0, _console.logError)(trayCount <= 1, `[DrawerLayout] Only one 'DrawerTray' per 'DrawerLayout' is supported.`);
255
199
  (0, _console.logError)(contentCount <= 1, `[DrawerLayout] Only one 'DrawerContent' per 'DrawerLayout' is supported.`);
256
200
  return children;
257
201
  }
258
-
259
202
  render() {
260
203
  var _this$props$styles;
261
-
262
204
  const props = {
263
205
  [DrawerLayout.locatorAttribute]: this._id
264
206
  };
@@ -269,7 +211,6 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
269
211
  ref: this.handleRef
270
212
  }), this.renderChildren()));
271
213
  }
272
-
273
214
  }, _class2.displayName = "DrawerLayout", _class2.componentId = 'DrawerLayout', _class2.locatorAttribute = 'data-drawer-layout', _class2.propTypes = _props2.propTypes, _class2.allowedProps = _props2.allowedProps, _class2.defaultProps = {
274
215
  minWidth: '30rem'
275
216
  }, _class2.Content = _DrawerContent.DrawerContent, _class2.Tray = _DrawerTray.DrawerTray, _class2)) || _class) || _class) || _class) || _class);
@@ -22,9 +22,7 @@ Object.defineProperty(exports, "DrawerTrayLocator", {
22
22
  }
23
23
  });
24
24
  exports.default = void 0;
25
-
26
25
  var _DrawerLayoutLocator = require("./DrawerLayoutLocator");
27
-
28
26
  /*
29
27
  * The MIT License (MIT)
30
28
  *
@@ -1,22 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.propTypes = exports.allowedProps = void 0;
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _Children = require("@instructure/ui-prop-types/lib/Children.js");
13
-
14
10
  var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
15
-
16
11
  var _DrawerContent = require("./DrawerContent");
17
-
18
12
  var _DrawerTray = require("./DrawerTray");
19
-
20
13
  /*
21
14
  * The MIT License (MIT)
22
15
  *
@@ -40,6 +33,7 @@ var _DrawerTray = require("./DrawerTray");
40
33
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
41
34
  * SOFTWARE.
42
35
  */
36
+
43
37
  const propTypes = {
44
38
  children: _Children.Children.oneOfEach([_DrawerContent.DrawerContent, _DrawerTray.DrawerTray]),
45
39
  minWidth: _propTypes.default.string,