@instructure/ui-tray 11.7.3-snapshot-7 → 11.7.3-snapshot-26
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/CHANGELOG.md +5 -2
- package/es/Tray/v1/index.js +78 -79
- package/es/Tray/v1/styles.js +6 -4
- package/es/Tray/v1/theme.js +17 -16
- package/es/Tray/v2/index.js +78 -79
- package/es/Tray/v2/styles.js +6 -4
- package/lib/Tray/v1/index.js +78 -79
- package/lib/Tray/v1/styles.js +6 -4
- package/lib/Tray/v1/theme.js +17 -16
- package/lib/Tray/v2/index.js +78 -79
- package/lib/Tray/v2/styles.js +6 -4
- package/package.json +15 -15
- package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,9 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [11.7.3-snapshot-
|
|
6
|
+
## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
|
|
9
12
|
|
|
10
13
|
|
|
11
14
|
|
package/es/Tray/v1/index.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
const _excluded = ["label", "children", "size", "placement", "open", "defaultFocusElement", "contentRef", "shouldContainFocus", "shouldReturnFocus", "shouldCloseOnDocumentClick", "onOpen", "onClose", "onDismiss", "mountNode", "insertAt", "liveRegion", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onTransition", "transitionOnMount", "transitionEnter", "transitionExit", "border", "shadow", "role", "enableMask"];
|
|
3
|
-
var _dec, _dec2, _class, _Tray;
|
|
1
|
+
var _dec, _dec2, _class;
|
|
4
2
|
/*
|
|
5
3
|
* The MIT License (MIT)
|
|
6
4
|
*
|
|
@@ -45,52 +43,58 @@ category: components
|
|
|
45
43
|
---
|
|
46
44
|
**/
|
|
47
45
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
48
|
-
let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec(_class = _dec2(_class =
|
|
46
|
+
let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = class Tray extends Component {
|
|
47
|
+
static displayName = "Tray";
|
|
48
|
+
static componentId = 'Tray';
|
|
49
|
+
static allowedProps = allowedProps;
|
|
50
|
+
static defaultProps = {
|
|
51
|
+
defaultFocusElement: null,
|
|
52
|
+
open: false,
|
|
53
|
+
insertAt: 'bottom',
|
|
54
|
+
shouldCloseOnDocumentClick: false,
|
|
55
|
+
shouldContainFocus: true,
|
|
56
|
+
shouldReturnFocus: true,
|
|
57
|
+
size: 'small',
|
|
58
|
+
placement: 'start',
|
|
59
|
+
transitionOnMount: true,
|
|
60
|
+
transitionEnter: true,
|
|
61
|
+
transitionExit: true,
|
|
62
|
+
shadow: true,
|
|
63
|
+
border: false,
|
|
64
|
+
enableMask: false
|
|
65
|
+
};
|
|
66
|
+
ref = null;
|
|
67
|
+
dialogRef = /*#__PURE__*/createRef();
|
|
68
|
+
state;
|
|
49
69
|
constructor(props) {
|
|
50
|
-
var _props$open;
|
|
51
70
|
super(props);
|
|
52
|
-
this.ref = null;
|
|
53
|
-
this.dialogRef = /*#__PURE__*/createRef();
|
|
54
|
-
this.state = void 0;
|
|
55
|
-
this.handleTransitionComplete = _type => {
|
|
56
|
-
this.setState({
|
|
57
|
-
transitioning: false
|
|
58
|
-
});
|
|
59
|
-
};
|
|
60
|
-
this.handlePortalOpen = DOMNode => {
|
|
61
|
-
if (DOMNode) {
|
|
62
|
-
this.DOMNode = DOMNode;
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
71
|
this.state = {
|
|
66
72
|
transitioning: false,
|
|
67
|
-
open:
|
|
73
|
+
open: props.open ?? false
|
|
68
74
|
};
|
|
69
75
|
}
|
|
70
76
|
componentDidMount() {
|
|
71
|
-
|
|
72
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
77
|
+
this.props.makeStyles?.();
|
|
73
78
|
}
|
|
74
79
|
componentDidUpdate(prevProps, _prevState) {
|
|
75
|
-
var _this$props$makeStyle2, _this$props2;
|
|
76
80
|
if (this.props.open !== prevProps.open) {
|
|
77
81
|
if (!this.props.open) {
|
|
78
|
-
var _this$dialogRef$curre;
|
|
79
82
|
// calling Dialog.close() to remove focusregion immediately when transition starts
|
|
80
83
|
// so if a new Tray is opened (during transition) the new focusregion won't get treated as a child of this one
|
|
81
|
-
|
|
84
|
+
this.dialogRef.current?.close();
|
|
82
85
|
}
|
|
83
86
|
this.setState({
|
|
84
87
|
transitioning: true,
|
|
85
88
|
open: this.props.open
|
|
86
89
|
});
|
|
87
90
|
}
|
|
88
|
-
|
|
91
|
+
this.props.makeStyles?.();
|
|
89
92
|
}
|
|
90
93
|
get placement() {
|
|
91
|
-
const
|
|
92
|
-
placement
|
|
93
|
-
dir
|
|
94
|
+
const {
|
|
95
|
+
placement,
|
|
96
|
+
dir
|
|
97
|
+
} = this.props;
|
|
94
98
|
const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
|
|
95
99
|
return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
|
|
96
100
|
}
|
|
@@ -110,6 +114,11 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
|
|
|
110
114
|
get transition() {
|
|
111
115
|
return `slide-${this.direction}`;
|
|
112
116
|
}
|
|
117
|
+
handleTransitionComplete = _type => {
|
|
118
|
+
this.setState({
|
|
119
|
+
transitioning: false
|
|
120
|
+
});
|
|
121
|
+
};
|
|
113
122
|
get DOMNode() {
|
|
114
123
|
// The DOMNode property is needed for Portal type components
|
|
115
124
|
return this.ref;
|
|
@@ -117,40 +126,45 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
|
|
|
117
126
|
set DOMNode(el) {
|
|
118
127
|
this.ref = el ? el : null;
|
|
119
128
|
}
|
|
129
|
+
handlePortalOpen = DOMNode => {
|
|
130
|
+
if (DOMNode) {
|
|
131
|
+
this.DOMNode = DOMNode;
|
|
132
|
+
}
|
|
133
|
+
};
|
|
120
134
|
render() {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
135
|
+
const {
|
|
136
|
+
label,
|
|
137
|
+
children,
|
|
138
|
+
size,
|
|
139
|
+
placement,
|
|
140
|
+
open,
|
|
141
|
+
defaultFocusElement,
|
|
142
|
+
contentRef,
|
|
143
|
+
shouldContainFocus,
|
|
144
|
+
shouldReturnFocus,
|
|
145
|
+
shouldCloseOnDocumentClick,
|
|
146
|
+
onOpen,
|
|
147
|
+
onClose,
|
|
148
|
+
onDismiss,
|
|
149
|
+
mountNode,
|
|
150
|
+
insertAt,
|
|
151
|
+
liveRegion,
|
|
152
|
+
onEnter,
|
|
153
|
+
onEntering,
|
|
154
|
+
onEntered,
|
|
155
|
+
onExit,
|
|
156
|
+
onExiting,
|
|
157
|
+
onExited,
|
|
158
|
+
onTransition,
|
|
159
|
+
transitionOnMount,
|
|
160
|
+
transitionEnter,
|
|
161
|
+
transitionExit,
|
|
162
|
+
border,
|
|
163
|
+
shadow,
|
|
164
|
+
role,
|
|
165
|
+
enableMask,
|
|
166
|
+
...props
|
|
167
|
+
} = this.props;
|
|
154
168
|
const portalIsOpen = this.state.open || this.state.transitioning;
|
|
155
169
|
const content = _jsx(Transition, {
|
|
156
170
|
in: open,
|
|
@@ -167,7 +181,7 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
|
|
|
167
181
|
transitionExit: transitionExit,
|
|
168
182
|
children: _jsx("span", {
|
|
169
183
|
...omitProps(props, Tray.allowedProps),
|
|
170
|
-
css:
|
|
184
|
+
css: this.props.styles?.tray,
|
|
171
185
|
ref: contentRef,
|
|
172
186
|
children: _jsx(Dialog, {
|
|
173
187
|
ref: this.dialogRef,
|
|
@@ -183,7 +197,7 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
|
|
|
183
197
|
onDismiss: onDismiss,
|
|
184
198
|
role: role,
|
|
185
199
|
children: _jsx("div", {
|
|
186
|
-
css:
|
|
200
|
+
css: this.props.styles?.content,
|
|
187
201
|
children: children
|
|
188
202
|
})
|
|
189
203
|
})
|
|
@@ -202,21 +216,6 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
|
|
|
202
216
|
}) : content
|
|
203
217
|
});
|
|
204
218
|
}
|
|
205
|
-
}
|
|
206
|
-
defaultFocusElement: null,
|
|
207
|
-
open: false,
|
|
208
|
-
insertAt: 'bottom',
|
|
209
|
-
shouldCloseOnDocumentClick: false,
|
|
210
|
-
shouldContainFocus: true,
|
|
211
|
-
shouldReturnFocus: true,
|
|
212
|
-
size: 'small',
|
|
213
|
-
placement: 'start',
|
|
214
|
-
transitionOnMount: true,
|
|
215
|
-
transitionEnter: true,
|
|
216
|
-
transitionExit: true,
|
|
217
|
-
shadow: true,
|
|
218
|
-
border: false,
|
|
219
|
-
enableMask: false
|
|
220
|
-
}, _Tray)) || _class) || _class);
|
|
219
|
+
}) || _class) || _class);
|
|
221
220
|
export default Tray;
|
|
222
221
|
export { Tray };
|
package/es/Tray/v1/styles.js
CHANGED
|
@@ -33,10 +33,12 @@
|
|
|
33
33
|
* @return {Object} The final style object, which will be used in the component
|
|
34
34
|
*/
|
|
35
35
|
const generateStyle = (componentTheme, props) => {
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
const {
|
|
37
|
+
border,
|
|
38
|
+
shadow,
|
|
39
|
+
size,
|
|
40
|
+
placement
|
|
41
|
+
} = props;
|
|
40
42
|
const borderStyle = {
|
|
41
43
|
borderWidth: 0,
|
|
42
44
|
borderColor: componentTheme.borderColor,
|
package/es/Tray/v1/theme.js
CHANGED
|
@@ -28,25 +28,26 @@
|
|
|
28
28
|
* @return {Object} The final theme object with the overrides and component variables
|
|
29
29
|
*/
|
|
30
30
|
const generateComponentTheme = theme => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
borders
|
|
34
|
-
shadows
|
|
35
|
-
breakpoints
|
|
36
|
-
stacking
|
|
31
|
+
const {
|
|
32
|
+
colors,
|
|
33
|
+
borders,
|
|
34
|
+
shadows,
|
|
35
|
+
breakpoints,
|
|
36
|
+
stacking
|
|
37
|
+
} = theme;
|
|
37
38
|
const componentVariables = {
|
|
38
|
-
background: colors
|
|
39
|
-
borderColor: colors
|
|
40
|
-
borderWidth: borders
|
|
41
|
-
borderStyle: borders
|
|
42
|
-
boxShadow: shadows
|
|
43
|
-
xSmallWidth: breakpoints
|
|
39
|
+
background: colors?.contrasts?.white1010,
|
|
40
|
+
borderColor: colors?.contrasts?.grey1424,
|
|
41
|
+
borderWidth: borders?.widthSmall,
|
|
42
|
+
borderStyle: borders?.style,
|
|
43
|
+
boxShadow: shadows?.depth3,
|
|
44
|
+
xSmallWidth: breakpoints?.xSmall,
|
|
44
45
|
smallWidth: '20em',
|
|
45
46
|
// 368px
|
|
46
|
-
regularWidth: breakpoints
|
|
47
|
-
mediumWidth: breakpoints
|
|
48
|
-
largeWidth: breakpoints
|
|
49
|
-
zIndex: stacking
|
|
47
|
+
regularWidth: breakpoints?.small,
|
|
48
|
+
mediumWidth: breakpoints?.medium,
|
|
49
|
+
largeWidth: breakpoints?.large,
|
|
50
|
+
zIndex: stacking?.topmost,
|
|
50
51
|
position: 'fixed'
|
|
51
52
|
};
|
|
52
53
|
return {
|
package/es/Tray/v2/index.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
const _excluded = ["label", "children", "size", "placement", "open", "defaultFocusElement", "contentRef", "shouldContainFocus", "shouldReturnFocus", "shouldCloseOnDocumentClick", "onOpen", "onClose", "onDismiss", "mountNode", "insertAt", "liveRegion", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onTransition", "transitionOnMount", "transitionEnter", "transitionExit", "border", "shadow", "role", "enableMask"];
|
|
3
|
-
var _dec, _dec2, _class, _Tray;
|
|
1
|
+
var _dec, _dec2, _class;
|
|
4
2
|
/*
|
|
5
3
|
* The MIT License (MIT)
|
|
6
4
|
*
|
|
@@ -44,52 +42,58 @@ category: components
|
|
|
44
42
|
---
|
|
45
43
|
**/
|
|
46
44
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
47
|
-
let Tray = (_dec = withStyle(generateStyle), _dec2 = textDirectionContextConsumer(), _dec(_class = _dec2(_class =
|
|
45
|
+
let Tray = (_dec = withStyle(generateStyle), _dec2 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = class Tray extends Component {
|
|
46
|
+
static displayName = "Tray";
|
|
47
|
+
static componentId = 'Tray';
|
|
48
|
+
static allowedProps = allowedProps;
|
|
49
|
+
static defaultProps = {
|
|
50
|
+
defaultFocusElement: null,
|
|
51
|
+
open: false,
|
|
52
|
+
insertAt: 'bottom',
|
|
53
|
+
shouldCloseOnDocumentClick: false,
|
|
54
|
+
shouldContainFocus: true,
|
|
55
|
+
shouldReturnFocus: true,
|
|
56
|
+
size: 'small',
|
|
57
|
+
placement: 'start',
|
|
58
|
+
transitionOnMount: true,
|
|
59
|
+
transitionEnter: true,
|
|
60
|
+
transitionExit: true,
|
|
61
|
+
shadow: true,
|
|
62
|
+
border: false,
|
|
63
|
+
enableMask: false
|
|
64
|
+
};
|
|
65
|
+
ref = null;
|
|
66
|
+
dialogRef = /*#__PURE__*/createRef();
|
|
67
|
+
state;
|
|
48
68
|
constructor(props) {
|
|
49
|
-
var _props$open;
|
|
50
69
|
super(props);
|
|
51
|
-
this.ref = null;
|
|
52
|
-
this.dialogRef = /*#__PURE__*/createRef();
|
|
53
|
-
this.state = void 0;
|
|
54
|
-
this.handleTransitionComplete = _type => {
|
|
55
|
-
this.setState({
|
|
56
|
-
transitioning: false
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
this.handlePortalOpen = DOMNode => {
|
|
60
|
-
if (DOMNode) {
|
|
61
|
-
this.DOMNode = DOMNode;
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
70
|
this.state = {
|
|
65
71
|
transitioning: false,
|
|
66
|
-
open:
|
|
72
|
+
open: props.open ?? false
|
|
67
73
|
};
|
|
68
74
|
}
|
|
69
75
|
componentDidMount() {
|
|
70
|
-
|
|
71
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
76
|
+
this.props.makeStyles?.();
|
|
72
77
|
}
|
|
73
78
|
componentDidUpdate(prevProps, _prevState) {
|
|
74
|
-
var _this$props$makeStyle2, _this$props2;
|
|
75
79
|
if (this.props.open !== prevProps.open) {
|
|
76
80
|
if (!this.props.open) {
|
|
77
|
-
var _this$dialogRef$curre;
|
|
78
81
|
// calling Dialog.close() to remove focusregion immediately when transition starts
|
|
79
82
|
// so if a new Tray is opened (during transition) the new focusregion won't get treated as a child of this one
|
|
80
|
-
|
|
83
|
+
this.dialogRef.current?.close();
|
|
81
84
|
}
|
|
82
85
|
this.setState({
|
|
83
86
|
transitioning: true,
|
|
84
87
|
open: this.props.open
|
|
85
88
|
});
|
|
86
89
|
}
|
|
87
|
-
|
|
90
|
+
this.props.makeStyles?.();
|
|
88
91
|
}
|
|
89
92
|
get placement() {
|
|
90
|
-
const
|
|
91
|
-
placement
|
|
92
|
-
dir
|
|
93
|
+
const {
|
|
94
|
+
placement,
|
|
95
|
+
dir
|
|
96
|
+
} = this.props;
|
|
93
97
|
const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
|
|
94
98
|
return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
|
|
95
99
|
}
|
|
@@ -109,6 +113,11 @@ let Tray = (_dec = withStyle(generateStyle), _dec2 = textDirectionContextConsume
|
|
|
109
113
|
get transition() {
|
|
110
114
|
return `slide-${this.direction}`;
|
|
111
115
|
}
|
|
116
|
+
handleTransitionComplete = _type => {
|
|
117
|
+
this.setState({
|
|
118
|
+
transitioning: false
|
|
119
|
+
});
|
|
120
|
+
};
|
|
112
121
|
get DOMNode() {
|
|
113
122
|
// The DOMNode property is needed for Portal type components
|
|
114
123
|
return this.ref;
|
|
@@ -116,40 +125,45 @@ let Tray = (_dec = withStyle(generateStyle), _dec2 = textDirectionContextConsume
|
|
|
116
125
|
set DOMNode(el) {
|
|
117
126
|
this.ref = el ? el : null;
|
|
118
127
|
}
|
|
128
|
+
handlePortalOpen = DOMNode => {
|
|
129
|
+
if (DOMNode) {
|
|
130
|
+
this.DOMNode = DOMNode;
|
|
131
|
+
}
|
|
132
|
+
};
|
|
119
133
|
render() {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
134
|
+
const {
|
|
135
|
+
label,
|
|
136
|
+
children,
|
|
137
|
+
size,
|
|
138
|
+
placement,
|
|
139
|
+
open,
|
|
140
|
+
defaultFocusElement,
|
|
141
|
+
contentRef,
|
|
142
|
+
shouldContainFocus,
|
|
143
|
+
shouldReturnFocus,
|
|
144
|
+
shouldCloseOnDocumentClick,
|
|
145
|
+
onOpen,
|
|
146
|
+
onClose,
|
|
147
|
+
onDismiss,
|
|
148
|
+
mountNode,
|
|
149
|
+
insertAt,
|
|
150
|
+
liveRegion,
|
|
151
|
+
onEnter,
|
|
152
|
+
onEntering,
|
|
153
|
+
onEntered,
|
|
154
|
+
onExit,
|
|
155
|
+
onExiting,
|
|
156
|
+
onExited,
|
|
157
|
+
onTransition,
|
|
158
|
+
transitionOnMount,
|
|
159
|
+
transitionEnter,
|
|
160
|
+
transitionExit,
|
|
161
|
+
border,
|
|
162
|
+
shadow,
|
|
163
|
+
role,
|
|
164
|
+
enableMask,
|
|
165
|
+
...props
|
|
166
|
+
} = this.props;
|
|
153
167
|
const portalIsOpen = this.state.open || this.state.transitioning;
|
|
154
168
|
const content = _jsx(Transition, {
|
|
155
169
|
in: open,
|
|
@@ -166,7 +180,7 @@ let Tray = (_dec = withStyle(generateStyle), _dec2 = textDirectionContextConsume
|
|
|
166
180
|
transitionExit: transitionExit,
|
|
167
181
|
children: _jsx("span", {
|
|
168
182
|
...omitProps(props, Tray.allowedProps),
|
|
169
|
-
css:
|
|
183
|
+
css: this.props.styles?.tray,
|
|
170
184
|
ref: contentRef,
|
|
171
185
|
children: _jsx(Dialog, {
|
|
172
186
|
ref: this.dialogRef,
|
|
@@ -182,7 +196,7 @@ let Tray = (_dec = withStyle(generateStyle), _dec2 = textDirectionContextConsume
|
|
|
182
196
|
onDismiss: onDismiss,
|
|
183
197
|
role: role,
|
|
184
198
|
children: _jsx("div", {
|
|
185
|
-
css:
|
|
199
|
+
css: this.props.styles?.content,
|
|
186
200
|
children: children
|
|
187
201
|
})
|
|
188
202
|
})
|
|
@@ -201,21 +215,6 @@ let Tray = (_dec = withStyle(generateStyle), _dec2 = textDirectionContextConsume
|
|
|
201
215
|
}) : content
|
|
202
216
|
});
|
|
203
217
|
}
|
|
204
|
-
}
|
|
205
|
-
defaultFocusElement: null,
|
|
206
|
-
open: false,
|
|
207
|
-
insertAt: 'bottom',
|
|
208
|
-
shouldCloseOnDocumentClick: false,
|
|
209
|
-
shouldContainFocus: true,
|
|
210
|
-
shouldReturnFocus: true,
|
|
211
|
-
size: 'small',
|
|
212
|
-
placement: 'start',
|
|
213
|
-
transitionOnMount: true,
|
|
214
|
-
transitionEnter: true,
|
|
215
|
-
transitionExit: true,
|
|
216
|
-
shadow: true,
|
|
217
|
-
border: false,
|
|
218
|
-
enableMask: false
|
|
219
|
-
}, _Tray)) || _class) || _class);
|
|
218
|
+
}) || _class) || _class);
|
|
220
219
|
export default Tray;
|
|
221
220
|
export { Tray };
|
package/es/Tray/v2/styles.js
CHANGED
|
@@ -33,10 +33,12 @@ import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
|
|
|
33
33
|
* @return {Object} The final style object, which will be used in the component
|
|
34
34
|
*/
|
|
35
35
|
const generateStyle = (componentTheme, params) => {
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
const {
|
|
37
|
+
border,
|
|
38
|
+
shadow,
|
|
39
|
+
size,
|
|
40
|
+
placement
|
|
41
|
+
} = params;
|
|
40
42
|
const borderStyle = {
|
|
41
43
|
borderWidth: 0,
|
|
42
44
|
borderColor: componentTheme.borderColor,
|