@instructure/ui-drawer-layout 8.18.0 → 8.18.1-snapshot.2

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.
package/LICENSE.md ADDED
@@ -0,0 +1,27 @@
1
+ ---
2
+ title: The MIT License (MIT)
3
+ category: Getting Started
4
+ order: 9
5
+ ---
6
+
7
+ # The MIT License (MIT)
8
+
9
+ Copyright (c) 2015 Instructure, Inc.
10
+
11
+ **Permission is hereby granted, free of charge, to any person obtaining a copy
12
+ of this software and associated documentation files (the "Software"), to deal
13
+ in the Software without restriction, including without limitation the rights
14
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
+ copies of the Software, and to permit persons to whom the Software is
16
+ furnished to do so, subject to the following conditions.**
17
+
18
+ The above copyright notice and this permission notice shall be included in all
19
+ copies or substantial portions of the Software.
20
+
21
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
+ SOFTWARE.
@@ -69,6 +69,8 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
69
69
  }
70
70
 
71
71
  componentDidMount() {
72
+ var _this$props$makeStyle, _this$props;
73
+
72
74
  const rect = getBoundingClientRect(this.ref);
73
75
  const origSize = {
74
76
  width: rect.width
@@ -93,36 +95,44 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
93
95
  };
94
96
 
95
97
  if (size.width !== origSize.width) {
96
- this._debounced?.(size);
98
+ var _this$_debounced;
99
+
100
+ (_this$_debounced = this._debounced) === null || _this$_debounced === void 0 ? void 0 : _this$_debounced.call(this, size);
97
101
  }
98
102
  }
99
103
  });
100
104
 
101
105
  this._resizeListener.observe(this.ref);
102
106
 
103
- this.props.makeStyles?.(this.makeStyleProps(false));
107
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps(false));
104
108
  }
105
109
 
106
110
  componentDidUpdate() {
107
- this.props.makeStyles?.(this.makeStyleProps(true));
111
+ var _this$props$makeStyle2, _this$props2;
112
+
113
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps(true));
108
114
  }
109
115
 
110
116
  componentWillUnmount() {
111
- this._resizeListener?.disconnect();
112
- this._debounced?.cancel();
117
+ var _this$_resizeListener, _this$_debounced2;
118
+
119
+ (_this$_resizeListener = this._resizeListener) === null || _this$_resizeListener === void 0 ? void 0 : _this$_resizeListener.disconnect();
120
+ (_this$_debounced2 = this._debounced) === null || _this$_debounced2 === void 0 ? void 0 : _this$_debounced2.cancel();
113
121
  }
114
122
 
115
123
  render() {
116
- const _this$props = this.props,
117
- style = _this$props.style,
118
- label = _this$props.label,
119
- role = _this$props.role;
124
+ var _this$props$styles;
125
+
126
+ const _this$props3 = this.props,
127
+ style = _this$props3.style,
128
+ label = _this$props3.label,
129
+ role = _this$props3.role;
120
130
  return jsx("div", Object.assign({}, omitProps(this.props, DrawerContent.allowedProps), {
121
131
  role: role,
122
132
  style: style,
123
133
  ref: this.handleContentRef,
124
134
  "aria-label": label,
125
- css: this.props.styles?.drawerContent
135
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerContent
126
136
  }), this.props.children);
127
137
  }
128
138
 
@@ -30,7 +30,7 @@
30
30
  const generateComponentTheme = theme => {
31
31
  const transitions = theme.transitions;
32
32
  return {
33
- duration: transitions?.duration
33
+ duration: transitions === null || transitions === void 0 ? void 0 : transitions.duration
34
34
  };
35
35
  };
36
36
 
@@ -100,23 +100,27 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
100
100
  }
101
101
 
102
102
  componentDidMount() {
103
- this.props.makeStyles?.(this.makeStyleProps());
103
+ var _this$props$makeStyle, _this$props;
104
+
105
+ (_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
106
  }
105
107
 
106
108
  componentDidUpdate(prevProps) {
109
+ var _this$props$makeStyle2, _this$props2;
110
+
107
111
  if (this.props.open !== prevProps.open) {
108
112
  this.setState({
109
113
  transitioning: true
110
114
  });
111
115
  }
112
116
 
113
- this.props.makeStyles?.(this.makeStyleProps());
117
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
114
118
  }
115
119
 
116
120
  get placement() {
117
- const _this$props = this.props,
118
- placement = _this$props.placement,
119
- dir = _this$props.dir;
121
+ const _this$props3 = this.props,
122
+ placement = _this$props3.placement,
123
+ dir = _this$props3.dir;
120
124
  const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
121
125
  return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
122
126
  }
@@ -138,9 +142,9 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
138
142
  }
139
143
 
140
144
  renderContent() {
141
- const _this$props2 = this.props,
142
- children = _this$props2.children,
143
- render = _this$props2.render;
145
+ const _this$props4 = this.props,
146
+ children = _this$props4.children,
147
+ render = _this$props4.render;
144
148
 
145
149
  if (typeof render === 'function') {
146
150
  return render();
@@ -152,42 +156,44 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
152
156
  }
153
157
 
154
158
  render() {
155
- const _this$props3 = this.props,
156
- label = _this$props3.label,
157
- children = _this$props3.children,
158
- render = _this$props3.render,
159
- placement = _this$props3.placement,
160
- open = _this$props3.open,
161
- onOpen = _this$props3.onOpen,
162
- onClose = _this$props3.onClose,
163
- border = _this$props3.border,
164
- shadow = _this$props3.shadow,
165
- onEnter = _this$props3.onEnter,
166
- onEntering = _this$props3.onEntering,
167
- onEntered = _this$props3.onEntered,
168
- onExit = _this$props3.onExit,
169
- onExiting = _this$props3.onExiting,
170
- onExited = _this$props3.onExited,
171
- contentRef = _this$props3.contentRef,
172
- mountNode = _this$props3.mountNode,
173
- defaultFocusElement = _this$props3.defaultFocusElement,
174
- liveRegion = _this$props3.liveRegion,
175
- onDismiss = _this$props3.onDismiss,
176
- onTransition = _this$props3.onTransition,
177
- shouldReturnFocus = _this$props3.shouldReturnFocus,
178
- shouldCloseOnEscape = _this$props3.shouldCloseOnEscape,
179
- shouldCloseOnDocumentClick = _this$props3.shouldCloseOnDocumentClick,
180
- shouldContainFocus = _this$props3.shouldContainFocus,
181
- styles = _this$props3.styles,
182
- props = _objectWithoutProperties(_this$props3, _excluded);
159
+ const _this$props5 = this.props,
160
+ label = _this$props5.label,
161
+ children = _this$props5.children,
162
+ render = _this$props5.render,
163
+ placement = _this$props5.placement,
164
+ open = _this$props5.open,
165
+ onOpen = _this$props5.onOpen,
166
+ onClose = _this$props5.onClose,
167
+ border = _this$props5.border,
168
+ shadow = _this$props5.shadow,
169
+ onEnter = _this$props5.onEnter,
170
+ onEntering = _this$props5.onEntering,
171
+ onEntered = _this$props5.onEntered,
172
+ onExit = _this$props5.onExit,
173
+ onExiting = _this$props5.onExiting,
174
+ onExited = _this$props5.onExited,
175
+ contentRef = _this$props5.contentRef,
176
+ mountNode = _this$props5.mountNode,
177
+ defaultFocusElement = _this$props5.defaultFocusElement,
178
+ liveRegion = _this$props5.liveRegion,
179
+ onDismiss = _this$props5.onDismiss,
180
+ onTransition = _this$props5.onTransition,
181
+ shouldReturnFocus = _this$props5.shouldReturnFocus,
182
+ shouldCloseOnEscape = _this$props5.shouldCloseOnEscape,
183
+ shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
184
+ shouldContainFocus = _this$props5.shouldContainFocus,
185
+ styles = _this$props5.styles,
186
+ props = _objectWithoutProperties(_this$props5, _excluded);
183
187
 
184
188
  return jsx(DrawerLayoutContext.Consumer, null, shouldOverlayTray => {
189
+ var _this$props$styles;
190
+
185
191
  const portalOpen = this.state.portalOpen;
186
192
  const needsPortal = shouldOverlayTray && !!mountNode; // we have to handle the shadow version here,
187
193
  // because passing and handling it in styles.js makes it
188
194
  // rerender the component during the transition, breaking it
189
195
 
190
- const trayStyles = shadow && shouldOverlayTray ? styles?.drawerTrayWithShadow : styles?.drawerTray;
196
+ const trayStyles = shadow && shouldOverlayTray ? styles === null || styles === void 0 ? void 0 : styles.drawerTrayWithShadow : styles === null || styles === void 0 ? void 0 : styles.drawerTray;
191
197
  let transitionIn = open;
192
198
 
193
199
  if (needsPortal && !portalOpen) {
@@ -220,7 +226,7 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
220
226
  liveRegion: liveRegion,
221
227
  onDismiss: onDismiss,
222
228
  as: "div",
223
- css: this.props.styles?.drawerTrayContent
229
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerTrayContent
224
230
  }, this.renderContent())));
225
231
 
226
232
  if (needsPortal) {
@@ -33,12 +33,12 @@ const generateComponentTheme = theme => {
33
33
  stacking = theme.stacking,
34
34
  shadows = theme.shadows;
35
35
  const componentVariables = {
36
- background: colors?.backgroundLightest,
37
- borderColor: colors?.borderMedium,
38
- borderWidth: borders?.widthSmall,
39
- borderStyle: borders?.style,
40
- zIndex: stacking?.topmost,
41
- boxShadow: shadows?.depth3
36
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
37
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
38
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
39
+ borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
40
+ zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost,
41
+ boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3
42
42
  };
43
43
  return { ...componentVariables
44
44
  };
@@ -114,11 +114,15 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
114
114
  }
115
115
 
116
116
  componentDidMount() {
117
- this.props.makeStyles?.();
117
+ var _this$props$makeStyle, _this$props;
118
+
119
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
118
120
  }
119
121
 
120
122
  componentDidUpdate() {
121
- this.props.makeStyles?.();
123
+ var _this$props$makeStyle2, _this$props2;
124
+
125
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
122
126
  }
123
127
 
124
128
  get trayProps() {
@@ -233,13 +237,15 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
233
237
  }
234
238
 
235
239
  render() {
240
+ var _this$props$styles;
241
+
236
242
  const props = {
237
243
  [DrawerLayout.locatorAttribute]: this._id
238
244
  };
239
245
  return jsx(DrawerLayoutContext.Provider, {
240
246
  value: this.state.shouldOverlayTray
241
247
  }, jsx("div", Object.assign({}, props, {
242
- css: this.props.styles?.drawerLayout,
248
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerLayout,
243
249
  ref: this.handleRef
244
250
  }), this.renderChildren()));
245
251
  }
@@ -61,6 +61,8 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
61
61
  }
62
62
 
63
63
  componentDidMount() {
64
+ var _this$props$makeStyle, _this$props;
65
+
64
66
  const rect = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref);
65
67
  const origSize = {
66
68
  width: rect.width
@@ -85,36 +87,44 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
85
87
  };
86
88
 
87
89
  if (size.width !== origSize.width) {
88
- this._debounced?.(size);
90
+ var _this$_debounced;
91
+
92
+ (_this$_debounced = this._debounced) === null || _this$_debounced === void 0 ? void 0 : _this$_debounced.call(this, size);
89
93
  }
90
94
  }
91
95
  });
92
96
 
93
97
  this._resizeListener.observe(this.ref);
94
98
 
95
- this.props.makeStyles?.(this.makeStyleProps(false));
99
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps(false));
96
100
  }
97
101
 
98
102
  componentDidUpdate() {
99
- this.props.makeStyles?.(this.makeStyleProps(true));
103
+ var _this$props$makeStyle2, _this$props2;
104
+
105
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps(true));
100
106
  }
101
107
 
102
108
  componentWillUnmount() {
103
- this._resizeListener?.disconnect();
104
- this._debounced?.cancel();
109
+ var _this$_resizeListener, _this$_debounced2;
110
+
111
+ (_this$_resizeListener = this._resizeListener) === null || _this$_resizeListener === void 0 ? void 0 : _this$_resizeListener.disconnect();
112
+ (_this$_debounced2 = this._debounced) === null || _this$_debounced2 === void 0 ? void 0 : _this$_debounced2.cancel();
105
113
  }
106
114
 
107
115
  render() {
108
- const _this$props = this.props,
109
- style = _this$props.style,
110
- label = _this$props.label,
111
- role = _this$props.role;
116
+ var _this$props$styles;
117
+
118
+ const _this$props3 = this.props,
119
+ style = _this$props3.style,
120
+ label = _this$props3.label,
121
+ role = _this$props3.role;
112
122
  return (0, _emotion.jsx)("div", Object.assign({}, (0, _omitProps.omitProps)(this.props, DrawerContent.allowedProps), {
113
123
  role: role,
114
124
  style: style,
115
125
  ref: this.handleContentRef,
116
126
  "aria-label": label,
117
- css: this.props.styles?.drawerContent
127
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerContent
118
128
  }), this.props.children);
119
129
  }
120
130
 
@@ -37,7 +37,7 @@ exports.default = void 0;
37
37
  const generateComponentTheme = theme => {
38
38
  const transitions = theme.transitions;
39
39
  return {
40
- duration: transitions?.duration
40
+ duration: transitions === null || transitions === void 0 ? void 0 : transitions.duration
41
41
  };
42
42
  };
43
43
 
@@ -98,23 +98,27 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
98
98
  }
99
99
 
100
100
  componentDidMount() {
101
- this.props.makeStyles?.(this.makeStyleProps());
101
+ var _this$props$makeStyle, _this$props;
102
+
103
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
102
104
  }
103
105
 
104
106
  componentDidUpdate(prevProps) {
107
+ var _this$props$makeStyle2, _this$props2;
108
+
105
109
  if (this.props.open !== prevProps.open) {
106
110
  this.setState({
107
111
  transitioning: true
108
112
  });
109
113
  }
110
114
 
111
- this.props.makeStyles?.(this.makeStyleProps());
115
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
112
116
  }
113
117
 
114
118
  get placement() {
115
- const _this$props = this.props,
116
- placement = _this$props.placement,
117
- dir = _this$props.dir;
119
+ const _this$props3 = this.props,
120
+ placement = _this$props3.placement,
121
+ dir = _this$props3.dir;
118
122
  const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
119
123
  return isRtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
120
124
  }
@@ -136,9 +140,9 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
136
140
  }
137
141
 
138
142
  renderContent() {
139
- const _this$props2 = this.props,
140
- children = _this$props2.children,
141
- render = _this$props2.render;
143
+ const _this$props4 = this.props,
144
+ children = _this$props4.children,
145
+ render = _this$props4.render;
142
146
 
143
147
  if (typeof render === 'function') {
144
148
  return render();
@@ -150,41 +154,43 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
150
154
  }
151
155
 
152
156
  render() {
153
- const _this$props3 = this.props,
154
- label = _this$props3.label,
155
- children = _this$props3.children,
156
- render = _this$props3.render,
157
- placement = _this$props3.placement,
158
- open = _this$props3.open,
159
- onOpen = _this$props3.onOpen,
160
- onClose = _this$props3.onClose,
161
- border = _this$props3.border,
162
- shadow = _this$props3.shadow,
163
- onEnter = _this$props3.onEnter,
164
- onEntering = _this$props3.onEntering,
165
- onEntered = _this$props3.onEntered,
166
- onExit = _this$props3.onExit,
167
- onExiting = _this$props3.onExiting,
168
- onExited = _this$props3.onExited,
169
- contentRef = _this$props3.contentRef,
170
- mountNode = _this$props3.mountNode,
171
- defaultFocusElement = _this$props3.defaultFocusElement,
172
- liveRegion = _this$props3.liveRegion,
173
- onDismiss = _this$props3.onDismiss,
174
- onTransition = _this$props3.onTransition,
175
- shouldReturnFocus = _this$props3.shouldReturnFocus,
176
- shouldCloseOnEscape = _this$props3.shouldCloseOnEscape,
177
- shouldCloseOnDocumentClick = _this$props3.shouldCloseOnDocumentClick,
178
- shouldContainFocus = _this$props3.shouldContainFocus,
179
- styles = _this$props3.styles,
180
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
157
+ 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);
181
185
  return (0, _emotion.jsx)(_index.DrawerLayoutContext.Consumer, null, shouldOverlayTray => {
186
+ var _this$props$styles;
187
+
182
188
  const portalOpen = this.state.portalOpen;
183
189
  const needsPortal = shouldOverlayTray && !!mountNode; // we have to handle the shadow version here,
184
190
  // because passing and handling it in styles.js makes it
185
191
  // rerender the component during the transition, breaking it
186
192
 
187
- const trayStyles = shadow && shouldOverlayTray ? styles?.drawerTrayWithShadow : styles?.drawerTray;
193
+ const trayStyles = shadow && shouldOverlayTray ? styles === null || styles === void 0 ? void 0 : styles.drawerTrayWithShadow : styles === null || styles === void 0 ? void 0 : styles.drawerTray;
188
194
  let transitionIn = open;
189
195
 
190
196
  if (needsPortal && !portalOpen) {
@@ -217,7 +223,7 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
217
223
  liveRegion: liveRegion,
218
224
  onDismiss: onDismiss,
219
225
  as: "div",
220
- css: this.props.styles?.drawerTrayContent
226
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerTrayContent
221
227
  }, this.renderContent())));
222
228
 
223
229
  if (needsPortal) {
@@ -40,12 +40,12 @@ const generateComponentTheme = theme => {
40
40
  stacking = theme.stacking,
41
41
  shadows = theme.shadows;
42
42
  const componentVariables = {
43
- background: colors?.backgroundLightest,
44
- borderColor: colors?.borderMedium,
45
- borderWidth: borders?.widthSmall,
46
- borderStyle: borders?.style,
47
- zIndex: stacking?.topmost,
48
- boxShadow: shadows?.depth3
43
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
44
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
45
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
46
+ borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
47
+ zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost,
48
+ boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3
49
49
  };
50
50
  return { ...componentVariables
51
51
  };
@@ -131,11 +131,15 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
131
131
  }
132
132
 
133
133
  componentDidMount() {
134
- this.props.makeStyles?.();
134
+ var _this$props$makeStyle, _this$props;
135
+
136
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
135
137
  }
136
138
 
137
139
  componentDidUpdate() {
138
- this.props.makeStyles?.();
140
+ var _this$props$makeStyle2, _this$props2;
141
+
142
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
139
143
  }
140
144
 
141
145
  get trayProps() {
@@ -253,13 +257,15 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
253
257
  }
254
258
 
255
259
  render() {
260
+ var _this$props$styles;
261
+
256
262
  const props = {
257
263
  [DrawerLayout.locatorAttribute]: this._id
258
264
  };
259
265
  return (0, _emotion.jsx)(DrawerLayoutContext.Provider, {
260
266
  value: this.state.shouldOverlayTray
261
267
  }, (0, _emotion.jsx)("div", Object.assign({}, props, {
262
- css: this.props.styles?.drawerLayout,
268
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerLayout,
263
269
  ref: this.handleRef
264
270
  }), this.renderChildren()));
265
271
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-drawer-layout",
3
- "version": "8.18.0",
3
+ "version": "8.18.1-snapshot.2+ca4c1ff9d",
4
4
  "description": "A main-content-plus-tray layout component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,29 +24,29 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.18.0",
28
- "@instructure/debounce": "8.18.0",
29
- "@instructure/emotion": "8.18.0",
30
- "@instructure/shared-types": "8.18.0",
31
- "@instructure/ui-dialog": "8.18.0",
32
- "@instructure/ui-dom-utils": "8.18.0",
33
- "@instructure/ui-i18n": "8.18.0",
34
- "@instructure/ui-motion": "8.18.0",
35
- "@instructure/ui-portal": "8.18.0",
36
- "@instructure/ui-position": "8.18.0",
37
- "@instructure/ui-prop-types": "8.18.0",
38
- "@instructure/ui-react-utils": "8.18.0",
39
- "@instructure/ui-test-utils": "8.18.0",
40
- "@instructure/ui-testable": "8.18.0",
41
- "@instructure/ui-utils": "8.18.0",
42
- "@instructure/ui-view": "8.18.0",
43
- "@instructure/uid": "8.18.0",
27
+ "@instructure/console": "8.18.1-snapshot.2+ca4c1ff9d",
28
+ "@instructure/debounce": "8.18.1-snapshot.2+ca4c1ff9d",
29
+ "@instructure/emotion": "8.18.1-snapshot.2+ca4c1ff9d",
30
+ "@instructure/shared-types": "8.18.1-snapshot.2+ca4c1ff9d",
31
+ "@instructure/ui-dialog": "8.18.1-snapshot.2+ca4c1ff9d",
32
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.2+ca4c1ff9d",
33
+ "@instructure/ui-i18n": "8.18.1-snapshot.2+ca4c1ff9d",
34
+ "@instructure/ui-motion": "8.18.1-snapshot.2+ca4c1ff9d",
35
+ "@instructure/ui-portal": "8.18.1-snapshot.2+ca4c1ff9d",
36
+ "@instructure/ui-position": "8.18.1-snapshot.2+ca4c1ff9d",
37
+ "@instructure/ui-prop-types": "8.18.1-snapshot.2+ca4c1ff9d",
38
+ "@instructure/ui-react-utils": "8.18.1-snapshot.2+ca4c1ff9d",
39
+ "@instructure/ui-test-utils": "8.18.1-snapshot.2+ca4c1ff9d",
40
+ "@instructure/ui-testable": "8.18.1-snapshot.2+ca4c1ff9d",
41
+ "@instructure/ui-utils": "8.18.1-snapshot.2+ca4c1ff9d",
42
+ "@instructure/ui-view": "8.18.1-snapshot.2+ca4c1ff9d",
43
+ "@instructure/uid": "8.18.1-snapshot.2+ca4c1ff9d",
44
44
  "prop-types": "^15"
45
45
  },
46
46
  "devDependencies": {
47
- "@instructure/ui-babel-preset": "8.18.0",
48
- "@instructure/ui-test-locator": "8.18.0",
49
- "@instructure/ui-themes": "8.18.0"
47
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.2+ca4c1ff9d",
48
+ "@instructure/ui-test-locator": "8.18.1-snapshot.2+ca4c1ff9d",
49
+ "@instructure/ui-themes": "8.18.1-snapshot.2+ca4c1ff9d"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "react": ">=16.8 <=17"
@@ -54,5 +54,6 @@
54
54
  "publishConfig": {
55
55
  "access": "public"
56
56
  },
57
- "sideEffects": false
57
+ "sideEffects": false,
58
+ "gitHead": "ca4c1ff9d3985151ae0758fb596de41652dbb58b"
58
59
  }