@instructure/ui-tray 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.
Files changed (6) hide show
  1. package/LICENSE.md +27 -0
  2. package/es/Tray/index.js +40 -34
  3. package/es/Tray/theme.js +10 -10
  4. package/lib/Tray/index.js +40 -34
  5. package/lib/Tray/theme.js +10 -10
  6. package/package.json +19 -18
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.
package/es/Tray/index.js CHANGED
@@ -67,23 +67,27 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
67
67
  }
68
68
 
69
69
  componentDidMount() {
70
- this.props.makeStyles?.();
70
+ var _this$props$makeStyle, _this$props;
71
+
72
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
71
73
  }
72
74
 
73
75
  componentDidUpdate(prevProps, prevState, snapshot) {
76
+ var _this$props$makeStyle2, _this$props2;
77
+
74
78
  if (this.props.open !== prevProps.open) {
75
79
  this.setState({
76
80
  transitioning: true
77
81
  });
78
82
  }
79
83
 
80
- this.props.makeStyles?.();
84
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
81
85
  }
82
86
 
83
87
  get placement() {
84
- const _this$props = this.props,
85
- placement = _this$props.placement,
86
- dir = _this$props.dir;
88
+ const _this$props3 = this.props,
89
+ placement = _this$props3.placement,
90
+ dir = _this$props3.dir;
87
91
  const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
88
92
  return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
89
93
  }
@@ -122,33 +126,35 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
122
126
  }
123
127
 
124
128
  render() {
125
- const _this$props2 = this.props,
126
- label = _this$props2.label,
127
- children = _this$props2.children,
128
- size = _this$props2.size,
129
- placement = _this$props2.placement,
130
- open = _this$props2.open,
131
- defaultFocusElement = _this$props2.defaultFocusElement,
132
- contentRef = _this$props2.contentRef,
133
- shouldContainFocus = _this$props2.shouldContainFocus,
134
- shouldReturnFocus = _this$props2.shouldReturnFocus,
135
- shouldCloseOnDocumentClick = _this$props2.shouldCloseOnDocumentClick,
136
- onOpen = _this$props2.onOpen,
137
- onClose = _this$props2.onClose,
138
- onDismiss = _this$props2.onDismiss,
139
- mountNode = _this$props2.mountNode,
140
- insertAt = _this$props2.insertAt,
141
- liveRegion = _this$props2.liveRegion,
142
- onEnter = _this$props2.onEnter,
143
- onEntering = _this$props2.onEntering,
144
- onEntered = _this$props2.onEntered,
145
- onExit = _this$props2.onExit,
146
- onExiting = _this$props2.onExiting,
147
- onExited = _this$props2.onExited,
148
- onTransition = _this$props2.onTransition,
149
- border = _this$props2.border,
150
- shadow = _this$props2.shadow,
151
- props = _objectWithoutProperties(_this$props2, _excluded);
129
+ var _this$props$styles, _this$props$styles2;
130
+
131
+ const _this$props4 = this.props,
132
+ label = _this$props4.label,
133
+ children = _this$props4.children,
134
+ size = _this$props4.size,
135
+ placement = _this$props4.placement,
136
+ open = _this$props4.open,
137
+ defaultFocusElement = _this$props4.defaultFocusElement,
138
+ contentRef = _this$props4.contentRef,
139
+ shouldContainFocus = _this$props4.shouldContainFocus,
140
+ shouldReturnFocus = _this$props4.shouldReturnFocus,
141
+ shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
142
+ onOpen = _this$props4.onOpen,
143
+ onClose = _this$props4.onClose,
144
+ onDismiss = _this$props4.onDismiss,
145
+ mountNode = _this$props4.mountNode,
146
+ insertAt = _this$props4.insertAt,
147
+ liveRegion = _this$props4.liveRegion,
148
+ onEnter = _this$props4.onEnter,
149
+ onEntering = _this$props4.onEntering,
150
+ onEntered = _this$props4.onEntered,
151
+ onExit = _this$props4.onExit,
152
+ onExiting = _this$props4.onExiting,
153
+ onExited = _this$props4.onExited,
154
+ onTransition = _this$props4.onTransition,
155
+ border = _this$props4.border,
156
+ shadow = _this$props4.shadow,
157
+ props = _objectWithoutProperties(_this$props4, _excluded);
152
158
 
153
159
  const portalIsOpen = open || this.state.transitioning;
154
160
  return jsx(Portal, {
@@ -170,7 +176,7 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
170
176
  transitionEnter: true,
171
177
  transitionExit: true
172
178
  }, jsx("span", Object.assign({}, omitProps(props, Tray.allowedProps), {
173
- css: this.props.styles?.tray,
179
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
174
180
  ref: contentRef
175
181
  }), this.state.transitioning ? children : jsx(Dialog, {
176
182
  as: "div",
@@ -184,7 +190,7 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
184
190
  liveRegion: liveRegion,
185
191
  onDismiss: onDismiss
186
192
  }, jsx("div", {
187
- css: this.props.styles?.content
193
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content
188
194
  }, children)))));
189
195
  }
190
196
 
package/es/Tray/theme.js CHANGED
@@ -34,18 +34,18 @@ const generateComponentTheme = theme => {
34
34
  breakpoints = theme.breakpoints,
35
35
  stacking = theme.stacking;
36
36
  const componentVariables = {
37
- background: colors?.backgroundLightest,
38
- borderColor: colors?.borderMedium,
39
- borderWidth: borders?.widthSmall,
40
- borderStyle: borders?.style,
41
- boxShadow: shadows?.depth3,
42
- xSmallWidth: breakpoints?.xSmall,
37
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
38
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
39
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
40
+ borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
41
+ boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3,
42
+ xSmallWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
43
43
  smallWidth: '20em',
44
44
  // 368px
45
- regularWidth: breakpoints?.small,
46
- mediumWidth: breakpoints?.medium,
47
- largeWidth: breakpoints?.large,
48
- zIndex: stacking?.topmost
45
+ regularWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small,
46
+ mediumWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
47
+ largeWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.large,
48
+ zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost
49
49
  };
50
50
  return { ...componentVariables
51
51
  };
package/lib/Tray/index.js CHANGED
@@ -64,23 +64,27 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
64
64
  }
65
65
 
66
66
  componentDidMount() {
67
- this.props.makeStyles?.();
67
+ var _this$props$makeStyle, _this$props;
68
+
69
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
68
70
  }
69
71
 
70
72
  componentDidUpdate(prevProps, prevState, snapshot) {
73
+ var _this$props$makeStyle2, _this$props2;
74
+
71
75
  if (this.props.open !== prevProps.open) {
72
76
  this.setState({
73
77
  transitioning: true
74
78
  });
75
79
  }
76
80
 
77
- this.props.makeStyles?.();
81
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
78
82
  }
79
83
 
80
84
  get placement() {
81
- const _this$props = this.props,
82
- placement = _this$props.placement,
83
- dir = _this$props.dir;
85
+ const _this$props3 = this.props,
86
+ placement = _this$props3.placement,
87
+ dir = _this$props3.dir;
84
88
  const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
85
89
  return isRtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
86
90
  }
@@ -119,33 +123,35 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
119
123
  }
120
124
 
121
125
  render() {
122
- const _this$props2 = this.props,
123
- label = _this$props2.label,
124
- children = _this$props2.children,
125
- size = _this$props2.size,
126
- placement = _this$props2.placement,
127
- open = _this$props2.open,
128
- defaultFocusElement = _this$props2.defaultFocusElement,
129
- contentRef = _this$props2.contentRef,
130
- shouldContainFocus = _this$props2.shouldContainFocus,
131
- shouldReturnFocus = _this$props2.shouldReturnFocus,
132
- shouldCloseOnDocumentClick = _this$props2.shouldCloseOnDocumentClick,
133
- onOpen = _this$props2.onOpen,
134
- onClose = _this$props2.onClose,
135
- onDismiss = _this$props2.onDismiss,
136
- mountNode = _this$props2.mountNode,
137
- insertAt = _this$props2.insertAt,
138
- liveRegion = _this$props2.liveRegion,
139
- onEnter = _this$props2.onEnter,
140
- onEntering = _this$props2.onEntering,
141
- onEntered = _this$props2.onEntered,
142
- onExit = _this$props2.onExit,
143
- onExiting = _this$props2.onExiting,
144
- onExited = _this$props2.onExited,
145
- onTransition = _this$props2.onTransition,
146
- border = _this$props2.border,
147
- shadow = _this$props2.shadow,
148
- props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
126
+ var _this$props$styles, _this$props$styles2;
127
+
128
+ const _this$props4 = this.props,
129
+ label = _this$props4.label,
130
+ children = _this$props4.children,
131
+ size = _this$props4.size,
132
+ placement = _this$props4.placement,
133
+ open = _this$props4.open,
134
+ defaultFocusElement = _this$props4.defaultFocusElement,
135
+ contentRef = _this$props4.contentRef,
136
+ shouldContainFocus = _this$props4.shouldContainFocus,
137
+ shouldReturnFocus = _this$props4.shouldReturnFocus,
138
+ shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
139
+ onOpen = _this$props4.onOpen,
140
+ onClose = _this$props4.onClose,
141
+ onDismiss = _this$props4.onDismiss,
142
+ mountNode = _this$props4.mountNode,
143
+ insertAt = _this$props4.insertAt,
144
+ liveRegion = _this$props4.liveRegion,
145
+ onEnter = _this$props4.onEnter,
146
+ onEntering = _this$props4.onEntering,
147
+ onEntered = _this$props4.onEntered,
148
+ onExit = _this$props4.onExit,
149
+ onExiting = _this$props4.onExiting,
150
+ onExited = _this$props4.onExited,
151
+ onTransition = _this$props4.onTransition,
152
+ border = _this$props4.border,
153
+ shadow = _this$props4.shadow,
154
+ props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
149
155
  const portalIsOpen = open || this.state.transitioning;
150
156
  return (0, _emotion.jsx)(_Portal.Portal, {
151
157
  open: portalIsOpen,
@@ -166,7 +172,7 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
166
172
  transitionEnter: true,
167
173
  transitionExit: true
168
174
  }, (0, _emotion.jsx)("span", Object.assign({}, (0, _omitProps.omitProps)(props, Tray.allowedProps), {
169
- css: this.props.styles?.tray,
175
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
170
176
  ref: contentRef
171
177
  }), this.state.transitioning ? children : (0, _emotion.jsx)(_Dialog.Dialog, {
172
178
  as: "div",
@@ -180,7 +186,7 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
180
186
  liveRegion: liveRegion,
181
187
  onDismiss: onDismiss
182
188
  }, (0, _emotion.jsx)("div", {
183
- css: this.props.styles?.content
189
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content
184
190
  }, children)))));
185
191
  }
186
192
 
package/lib/Tray/theme.js CHANGED
@@ -41,18 +41,18 @@ const generateComponentTheme = theme => {
41
41
  breakpoints = theme.breakpoints,
42
42
  stacking = theme.stacking;
43
43
  const componentVariables = {
44
- background: colors?.backgroundLightest,
45
- borderColor: colors?.borderMedium,
46
- borderWidth: borders?.widthSmall,
47
- borderStyle: borders?.style,
48
- boxShadow: shadows?.depth3,
49
- xSmallWidth: breakpoints?.xSmall,
44
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
45
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
46
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
47
+ borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
48
+ boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3,
49
+ xSmallWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
50
50
  smallWidth: '20em',
51
51
  // 368px
52
- regularWidth: breakpoints?.small,
53
- mediumWidth: breakpoints?.medium,
54
- largeWidth: breakpoints?.large,
55
- zIndex: stacking?.topmost
52
+ regularWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small,
53
+ mediumWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
54
+ largeWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.large,
55
+ zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost
56
56
  };
57
57
  return { ...componentVariables
58
58
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-tray",
3
- "version": "8.18.0",
3
+ "version": "8.18.1-snapshot.2+ca4c1ff9d",
4
4
  "description": "Tray component for secondary/menu content",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,25 +24,25 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.18.0",
28
- "@instructure/emotion": "8.18.0",
29
- "@instructure/shared-types": "8.18.0",
30
- "@instructure/ui-dialog": "8.18.0",
31
- "@instructure/ui-i18n": "8.18.0",
32
- "@instructure/ui-motion": "8.18.0",
33
- "@instructure/ui-portal": "8.18.0",
34
- "@instructure/ui-position": "8.18.0",
35
- "@instructure/ui-prop-types": "8.18.0",
36
- "@instructure/ui-react-utils": "8.18.0",
37
- "@instructure/ui-testable": "8.18.0",
38
- "@instructure/ui-utils": "8.18.0",
27
+ "@instructure/console": "8.18.1-snapshot.2+ca4c1ff9d",
28
+ "@instructure/emotion": "8.18.1-snapshot.2+ca4c1ff9d",
29
+ "@instructure/shared-types": "8.18.1-snapshot.2+ca4c1ff9d",
30
+ "@instructure/ui-dialog": "8.18.1-snapshot.2+ca4c1ff9d",
31
+ "@instructure/ui-i18n": "8.18.1-snapshot.2+ca4c1ff9d",
32
+ "@instructure/ui-motion": "8.18.1-snapshot.2+ca4c1ff9d",
33
+ "@instructure/ui-portal": "8.18.1-snapshot.2+ca4c1ff9d",
34
+ "@instructure/ui-position": "8.18.1-snapshot.2+ca4c1ff9d",
35
+ "@instructure/ui-prop-types": "8.18.1-snapshot.2+ca4c1ff9d",
36
+ "@instructure/ui-react-utils": "8.18.1-snapshot.2+ca4c1ff9d",
37
+ "@instructure/ui-testable": "8.18.1-snapshot.2+ca4c1ff9d",
38
+ "@instructure/ui-utils": "8.18.1-snapshot.2+ca4c1ff9d",
39
39
  "prop-types": "^15"
40
40
  },
41
41
  "devDependencies": {
42
- "@instructure/ui-babel-preset": "8.18.0",
43
- "@instructure/ui-test-locator": "8.18.0",
44
- "@instructure/ui-test-utils": "8.18.0",
45
- "@instructure/ui-themes": "8.18.0"
42
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.2+ca4c1ff9d",
43
+ "@instructure/ui-test-locator": "8.18.1-snapshot.2+ca4c1ff9d",
44
+ "@instructure/ui-test-utils": "8.18.1-snapshot.2+ca4c1ff9d",
45
+ "@instructure/ui-themes": "8.18.1-snapshot.2+ca4c1ff9d"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "react": ">=16.8 <=17"
@@ -50,5 +50,6 @@
50
50
  "publishConfig": {
51
51
  "access": "public"
52
52
  },
53
- "sideEffects": false
53
+ "sideEffects": false,
54
+ "gitHead": "ca4c1ff9d3985151ae0758fb596de41652dbb58b"
54
55
  }