@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 +27 -0
- package/es/DrawerLayout/DrawerContent/index.js +20 -10
- package/es/DrawerLayout/DrawerContent/theme.js +1 -1
- package/es/DrawerLayout/DrawerTray/index.js +44 -38
- package/es/DrawerLayout/DrawerTray/theme.js +6 -6
- package/es/DrawerLayout/index.js +9 -3
- package/lib/DrawerLayout/DrawerContent/index.js +20 -10
- package/lib/DrawerLayout/DrawerContent/theme.js +1 -1
- package/lib/DrawerLayout/DrawerTray/index.js +44 -38
- package/lib/DrawerLayout/DrawerTray/theme.js +6 -6
- package/lib/DrawerLayout/index.js +9 -3
- package/package.json +23 -22
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
112
|
-
|
|
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
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
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
|
|
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
|
|
|
@@ -100,23 +100,27 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
componentDidMount() {
|
|
103
|
-
|
|
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
|
|
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$
|
|
118
|
-
placement = _this$
|
|
119
|
-
dir = _this$
|
|
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$
|
|
142
|
-
children = _this$
|
|
143
|
-
render = _this$
|
|
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$
|
|
156
|
-
label = _this$
|
|
157
|
-
children = _this$
|
|
158
|
-
render = _this$
|
|
159
|
-
placement = _this$
|
|
160
|
-
open = _this$
|
|
161
|
-
onOpen = _this$
|
|
162
|
-
onClose = _this$
|
|
163
|
-
border = _this$
|
|
164
|
-
shadow = _this$
|
|
165
|
-
onEnter = _this$
|
|
166
|
-
onEntering = _this$
|
|
167
|
-
onEntered = _this$
|
|
168
|
-
onExit = _this$
|
|
169
|
-
onExiting = _this$
|
|
170
|
-
onExited = _this$
|
|
171
|
-
contentRef = _this$
|
|
172
|
-
mountNode = _this$
|
|
173
|
-
defaultFocusElement = _this$
|
|
174
|
-
liveRegion = _this$
|
|
175
|
-
onDismiss = _this$
|
|
176
|
-
onTransition = _this$
|
|
177
|
-
shouldReturnFocus = _this$
|
|
178
|
-
shouldCloseOnEscape = _this$
|
|
179
|
-
shouldCloseOnDocumentClick = _this$
|
|
180
|
-
shouldContainFocus = _this$
|
|
181
|
-
styles = _this$
|
|
182
|
-
props = _objectWithoutProperties(_this$
|
|
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
|
|
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
|
|
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
|
|
37
|
-
borderColor: colors
|
|
38
|
-
borderWidth: borders
|
|
39
|
-
borderStyle: borders
|
|
40
|
-
zIndex: stacking
|
|
41
|
-
boxShadow: shadows
|
|
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
|
};
|
package/es/DrawerLayout/index.js
CHANGED
|
@@ -114,11 +114,15 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
componentDidMount() {
|
|
117
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
104
|
-
|
|
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
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
|
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$
|
|
116
|
-
placement = _this$
|
|
117
|
-
dir = _this$
|
|
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$
|
|
140
|
-
children = _this$
|
|
141
|
-
render = _this$
|
|
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$
|
|
154
|
-
label = _this$
|
|
155
|
-
children = _this$
|
|
156
|
-
render = _this$
|
|
157
|
-
placement = _this$
|
|
158
|
-
open = _this$
|
|
159
|
-
onOpen = _this$
|
|
160
|
-
onClose = _this$
|
|
161
|
-
border = _this$
|
|
162
|
-
shadow = _this$
|
|
163
|
-
onEnter = _this$
|
|
164
|
-
onEntering = _this$
|
|
165
|
-
onEntered = _this$
|
|
166
|
-
onExit = _this$
|
|
167
|
-
onExiting = _this$
|
|
168
|
-
onExited = _this$
|
|
169
|
-
contentRef = _this$
|
|
170
|
-
mountNode = _this$
|
|
171
|
-
defaultFocusElement = _this$
|
|
172
|
-
liveRegion = _this$
|
|
173
|
-
onDismiss = _this$
|
|
174
|
-
onTransition = _this$
|
|
175
|
-
shouldReturnFocus = _this$
|
|
176
|
-
shouldCloseOnEscape = _this$
|
|
177
|
-
shouldCloseOnDocumentClick = _this$
|
|
178
|
-
shouldContainFocus = _this$
|
|
179
|
-
styles = _this$
|
|
180
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
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
|
|
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
|
|
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
|
|
44
|
-
borderColor: colors
|
|
45
|
-
borderWidth: borders
|
|
46
|
-
borderStyle: borders
|
|
47
|
-
zIndex: stacking
|
|
48
|
-
boxShadow: shadows
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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.
|
|
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.
|
|
28
|
-
"@instructure/debounce": "8.18.
|
|
29
|
-
"@instructure/emotion": "8.18.
|
|
30
|
-
"@instructure/shared-types": "8.18.
|
|
31
|
-
"@instructure/ui-dialog": "8.18.
|
|
32
|
-
"@instructure/ui-dom-utils": "8.18.
|
|
33
|
-
"@instructure/ui-i18n": "8.18.
|
|
34
|
-
"@instructure/ui-motion": "8.18.
|
|
35
|
-
"@instructure/ui-portal": "8.18.
|
|
36
|
-
"@instructure/ui-position": "8.18.
|
|
37
|
-
"@instructure/ui-prop-types": "8.18.
|
|
38
|
-
"@instructure/ui-react-utils": "8.18.
|
|
39
|
-
"@instructure/ui-test-utils": "8.18.
|
|
40
|
-
"@instructure/ui-testable": "8.18.
|
|
41
|
-
"@instructure/ui-utils": "8.18.
|
|
42
|
-
"@instructure/ui-view": "8.18.
|
|
43
|
-
"@instructure/uid": "8.18.
|
|
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.
|
|
48
|
-
"@instructure/ui-test-locator": "8.18.
|
|
49
|
-
"@instructure/ui-themes": "8.18.
|
|
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
|
}
|