@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 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-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
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
- **Note:** Version bump only for package @instructure/ui-tray
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
 
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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 = (_Tray = class Tray extends Component {
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: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false
73
+ open: props.open ?? false
68
74
  };
69
75
  }
70
76
  componentDidMount() {
71
- var _this$props$makeStyle, _this$props;
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
- (_this$dialogRef$curre = this.dialogRef.current) === null || _this$dialogRef$curre === void 0 ? void 0 : _this$dialogRef$curre.close();
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
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
91
+ this.props.makeStyles?.();
89
92
  }
90
93
  get placement() {
91
- const _this$props3 = this.props,
92
- placement = _this$props3.placement,
93
- dir = _this$props3.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
- var _this$props$styles, _this$props$styles2;
122
- const _this$props4 = this.props,
123
- label = _this$props4.label,
124
- children = _this$props4.children,
125
- size = _this$props4.size,
126
- placement = _this$props4.placement,
127
- open = _this$props4.open,
128
- defaultFocusElement = _this$props4.defaultFocusElement,
129
- contentRef = _this$props4.contentRef,
130
- shouldContainFocus = _this$props4.shouldContainFocus,
131
- shouldReturnFocus = _this$props4.shouldReturnFocus,
132
- shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
133
- onOpen = _this$props4.onOpen,
134
- onClose = _this$props4.onClose,
135
- onDismiss = _this$props4.onDismiss,
136
- mountNode = _this$props4.mountNode,
137
- insertAt = _this$props4.insertAt,
138
- liveRegion = _this$props4.liveRegion,
139
- onEnter = _this$props4.onEnter,
140
- onEntering = _this$props4.onEntering,
141
- onEntered = _this$props4.onEntered,
142
- onExit = _this$props4.onExit,
143
- onExiting = _this$props4.onExiting,
144
- onExited = _this$props4.onExited,
145
- onTransition = _this$props4.onTransition,
146
- transitionOnMount = _this$props4.transitionOnMount,
147
- transitionEnter = _this$props4.transitionEnter,
148
- transitionExit = _this$props4.transitionExit,
149
- border = _this$props4.border,
150
- shadow = _this$props4.shadow,
151
- role = _this$props4.role,
152
- enableMask = _this$props4.enableMask,
153
- props = _objectWithoutProperties(_this$props4, _excluded);
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: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
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: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content,
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
- }, _Tray.displayName = "Tray", _Tray.componentId = 'Tray', _Tray.allowedProps = allowedProps, _Tray.defaultProps = {
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 };
@@ -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 border = props.border,
37
- shadow = props.shadow,
38
- size = props.size,
39
- placement = props.placement;
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,
@@ -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
- var _colors$contrasts, _colors$contrasts2;
32
- const colors = theme.colors,
33
- borders = theme.borders,
34
- shadows = theme.shadows,
35
- breakpoints = theme.breakpoints,
36
- stacking = theme.stacking;
31
+ const {
32
+ colors,
33
+ borders,
34
+ shadows,
35
+ breakpoints,
36
+ stacking
37
+ } = theme;
37
38
  const componentVariables = {
38
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
39
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1424,
40
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
41
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
42
- boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3,
43
- xSmallWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
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 === null || breakpoints === void 0 ? void 0 : breakpoints.small,
47
- mediumWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
48
- largeWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.large,
49
- zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost,
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 {
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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 = (_Tray = class Tray extends Component {
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: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false
72
+ open: props.open ?? false
67
73
  };
68
74
  }
69
75
  componentDidMount() {
70
- var _this$props$makeStyle, _this$props;
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
- (_this$dialogRef$curre = this.dialogRef.current) === null || _this$dialogRef$curre === void 0 ? void 0 : _this$dialogRef$curre.close();
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
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
90
+ this.props.makeStyles?.();
88
91
  }
89
92
  get placement() {
90
- const _this$props3 = this.props,
91
- placement = _this$props3.placement,
92
- dir = _this$props3.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
- var _this$props$styles, _this$props$styles2;
121
- const _this$props4 = this.props,
122
- label = _this$props4.label,
123
- children = _this$props4.children,
124
- size = _this$props4.size,
125
- placement = _this$props4.placement,
126
- open = _this$props4.open,
127
- defaultFocusElement = _this$props4.defaultFocusElement,
128
- contentRef = _this$props4.contentRef,
129
- shouldContainFocus = _this$props4.shouldContainFocus,
130
- shouldReturnFocus = _this$props4.shouldReturnFocus,
131
- shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
132
- onOpen = _this$props4.onOpen,
133
- onClose = _this$props4.onClose,
134
- onDismiss = _this$props4.onDismiss,
135
- mountNode = _this$props4.mountNode,
136
- insertAt = _this$props4.insertAt,
137
- liveRegion = _this$props4.liveRegion,
138
- onEnter = _this$props4.onEnter,
139
- onEntering = _this$props4.onEntering,
140
- onEntered = _this$props4.onEntered,
141
- onExit = _this$props4.onExit,
142
- onExiting = _this$props4.onExiting,
143
- onExited = _this$props4.onExited,
144
- onTransition = _this$props4.onTransition,
145
- transitionOnMount = _this$props4.transitionOnMount,
146
- transitionEnter = _this$props4.transitionEnter,
147
- transitionExit = _this$props4.transitionExit,
148
- border = _this$props4.border,
149
- shadow = _this$props4.shadow,
150
- role = _this$props4.role,
151
- enableMask = _this$props4.enableMask,
152
- props = _objectWithoutProperties(_this$props4, _excluded);
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: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
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: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content,
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
- }, _Tray.displayName = "Tray", _Tray.componentId = 'Tray', _Tray.allowedProps = allowedProps, _Tray.defaultProps = {
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 };
@@ -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 border = params.border,
37
- shadow = params.shadow,
38
- size = params.size,
39
- placement = params.placement;
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,