@instructure/ui-view 8.18.0 → 8.18.1-snapshot.12

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 (12) hide show
  1. package/LICENSE.md +27 -0
  2. package/es/ContextView/index.js +27 -23
  3. package/es/ContextView/styles.js +35 -35
  4. package/es/ContextView/theme.js +6 -4
  5. package/es/View/index.js +32 -28
  6. package/es/View/theme.js +31 -31
  7. package/lib/ContextView/index.js +27 -23
  8. package/lib/ContextView/styles.js +35 -35
  9. package/lib/ContextView/theme.js +6 -4
  10. package/lib/View/index.js +32 -28
  11. package/lib/View/theme.js +31 -31
  12. package/package.json +15 -14
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/ContextView/index.js CHANGED
@@ -55,34 +55,38 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
55
55
  }
56
56
 
57
57
  componentDidMount() {
58
- this.props.makeStyles?.();
58
+ var _this$props$makeStyle, _this$props;
59
+
60
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
59
61
  }
60
62
 
61
63
  componentDidUpdate() {
62
- this.props.makeStyles?.();
64
+ var _this$props$makeStyle2, _this$props2;
65
+
66
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
63
67
  }
64
68
 
65
69
  render() {
66
- const _this$props = this.props,
67
- as = _this$props.as,
68
- background = _this$props.background,
69
- children = _this$props.children,
70
- debug = _this$props.debug,
71
- height = _this$props.height,
72
- width = _this$props.width,
73
- maxHeight = _this$props.maxHeight,
74
- maxWidth = _this$props.maxWidth,
75
- minHeight = _this$props.minHeight,
76
- minWidth = _this$props.minWidth,
77
- margin = _this$props.margin,
78
- padding = _this$props.padding,
79
- shadow = _this$props.shadow,
80
- stacking = _this$props.stacking,
81
- style = _this$props.style,
82
- textAlign = _this$props.textAlign,
83
- styles = _this$props.styles;
70
+ const _this$props3 = this.props,
71
+ as = _this$props3.as,
72
+ background = _this$props3.background,
73
+ children = _this$props3.children,
74
+ debug = _this$props3.debug,
75
+ height = _this$props3.height,
76
+ width = _this$props3.width,
77
+ maxHeight = _this$props3.maxHeight,
78
+ maxWidth = _this$props3.maxWidth,
79
+ minHeight = _this$props3.minHeight,
80
+ minWidth = _this$props3.minWidth,
81
+ margin = _this$props3.margin,
82
+ padding = _this$props3.padding,
83
+ shadow = _this$props3.shadow,
84
+ stacking = _this$props3.stacking,
85
+ style = _this$props3.style,
86
+ textAlign = _this$props3.textAlign,
87
+ styles = _this$props3.styles;
84
88
  return jsx(View, Object.assign({}, omitProps(this.props, ContextView.allowedProps), {
85
- css: styles?.contextView,
89
+ css: styles === null || styles === void 0 ? void 0 : styles.contextView,
86
90
  style: style,
87
91
  borderWidth: "none",
88
92
  display: "inline-block",
@@ -92,7 +96,7 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
92
96
  margin: margin,
93
97
  stacking: stacking
94
98
  }), jsx(View, {
95
- css: styles?.contextView__content,
99
+ css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
96
100
  display: "block",
97
101
  borderRadius: "medium",
98
102
  borderWidth: "small",
@@ -109,7 +113,7 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
109
113
  shadow: shadow,
110
114
  textAlign: textAlign
111
115
  }, jsx("span", {
112
- css: styles?.contextView__arrow
116
+ css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
113
117
  }), children));
114
118
  }
115
119
 
package/es/ContextView/styles.js CHANGED
@@ -30,27 +30,27 @@ const topPlacements = ['top', 'top start', 'top end', 'top center'];
30
30
  const getPlacementStyle = (placement, theme) => {
31
31
  if (endPlacements.includes(placement)) {
32
32
  return {
33
- paddingInlineStart: theme?.arrowSize,
33
+ paddingInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
34
34
  paddingInlineEnd: '0'
35
35
  };
36
36
  }
37
37
 
38
38
  if (startPlacements.includes(placement)) {
39
39
  return {
40
- paddingInlineEnd: theme?.arrowSize,
40
+ paddingInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
41
41
  paddingInlineStart: '0'
42
42
  };
43
43
  }
44
44
 
45
45
  if (bottomPlacements.includes(placement)) {
46
46
  return {
47
- paddingTop: theme?.arrowSize
47
+ paddingTop: theme === null || theme === void 0 ? void 0 : theme.arrowSize
48
48
  };
49
49
  }
50
50
 
51
51
  if (topPlacements.includes(placement)) {
52
52
  return {
53
- paddingBottom: theme?.arrowSize
53
+ paddingBottom: theme === null || theme === void 0 ? void 0 : theme.arrowSize
54
54
  };
55
55
  }
56
56
 
@@ -75,27 +75,27 @@ const getArrowCorrections = (placement, theme) => {
75
75
 
76
76
  if (start.includes(placement)) {
77
77
  return {
78
- insetInlineStart: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
78
+ insetInlineStart: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
79
79
  insetInlineEnd: 'auto'
80
80
  };
81
81
  }
82
82
 
83
83
  if (end.includes(placement)) {
84
84
  return {
85
- insetInlineStart: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
85
+ insetInlineStart: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
86
86
  insetInlineEnd: 'auto'
87
87
  };
88
88
  }
89
89
 
90
90
  if (top.includes(placement)) {
91
91
  return {
92
- top: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
92
+ top: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
93
93
  };
94
94
  }
95
95
 
96
96
  if (bottom.includes(placement)) {
97
97
  return {
98
- top: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
98
+ top: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
99
99
  };
100
100
  }
101
101
 
@@ -112,24 +112,24 @@ const getArrowPlacementVariant = (placement, background, theme) => {
112
112
  top: '50%',
113
113
  insetInlineStart: '100%',
114
114
  insetInlineEnd: 'auto',
115
- marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
115
+ marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
116
116
  borderInlineEndWidth: '0',
117
117
  borderInlineEndColor: 'transparent',
118
- borderInlineStartColor: isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor,
118
+ borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
119
119
  borderTopColor: 'transparent',
120
120
  borderBottomColor: 'transparent',
121
- borderInlineStartWidth: theme?.arrowSize
121
+ borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
122
122
  },
123
123
  __after: {
124
- insetInlineEnd: theme?.arrowBorderWidth,
124
+ insetInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
125
125
  insetInlineStart: 'auto',
126
- marginTop: `calc(-1 * ${theme?.arrowSize})`,
126
+ marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
127
127
  borderInlineEndWidth: '0',
128
128
  borderInlineEndColor: 'transparent',
129
129
  borderTopColor: 'transparent',
130
130
  borderBottomColor: 'transparent',
131
- borderInlineStartWidth: theme?.arrowSize,
132
- borderInlineStartColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
131
+ borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
132
+ borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
133
133
  }
134
134
  };
135
135
  }
@@ -140,24 +140,24 @@ const getArrowPlacementVariant = (placement, background, theme) => {
140
140
  top: '50%',
141
141
  insetInlineEnd: '100%',
142
142
  insetInlineStart: 'auto',
143
- marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
143
+ marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
144
144
  borderInlineStartWidth: '0',
145
145
  borderInlineStartColor: 'transparent',
146
- borderInlineEndColor: isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor,
146
+ borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
147
147
  borderTopColor: 'transparent',
148
148
  borderBottomColor: 'transparent',
149
- borderInlineEndWidth: theme?.arrowSize
149
+ borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
150
150
  },
151
151
  __after: {
152
- insetInlineStart: theme?.arrowBorderWidth,
152
+ insetInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
153
153
  insetInlineEnd: 'auto',
154
- marginTop: `calc(-1 * ${theme?.arrowSize})`,
154
+ marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
155
155
  borderInlineStartWidth: '0',
156
156
  borderInlineStartColor: 'transparent',
157
157
  borderTopColor: 'transparent',
158
158
  borderBottomColor: 'transparent',
159
- borderInlineEndWidth: theme?.arrowSize,
160
- borderInlineEndColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
159
+ borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
160
+ borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
161
161
  }
162
162
  };
163
163
  }
@@ -166,7 +166,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
166
166
  return {
167
167
  main: {
168
168
  top: '100%',
169
- marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
169
+ marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
170
170
  marginInlineEnd: '0',
171
171
  borderBottomWidth: '0',
172
172
  borderBottomColor: 'transparent',
@@ -174,14 +174,14 @@ const getArrowPlacementVariant = (placement, background, theme) => {
174
174
  borderInlineEndColor: 'transparent'
175
175
  },
176
176
  __after: {
177
- bottom: theme?.arrowBorderWidth,
178
- marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
177
+ bottom: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
178
+ marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
179
179
  marginInlineEnd: '0',
180
180
  borderBottomWidth: '0',
181
181
  borderBottomColor: 'transparent',
182
182
  borderInlineStartColor: 'transparent',
183
183
  borderInlineEndColor: 'transparent',
184
- borderTopColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
184
+ borderTopColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
185
185
  }
186
186
  };
187
187
  }
@@ -189,7 +189,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
189
189
  return {
190
190
  main: {
191
191
  bottom: '100%',
192
- marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
192
+ marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
193
193
  marginInlineEnd: '0',
194
194
  borderTopWidth: '0',
195
195
  borderTopColor: 'transparent',
@@ -197,14 +197,14 @@ const getArrowPlacementVariant = (placement, background, theme) => {
197
197
  borderInlineEndColor: 'transparent'
198
198
  },
199
199
  __after: {
200
- top: theme?.arrowBorderWidth,
201
- marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
200
+ top: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
201
+ marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
202
202
  marginInlineEnd: '0',
203
203
  borderTopWidth: '0',
204
204
  borderTopColor: 'transparent',
205
205
  borderInlineStartColor: 'transparent',
206
206
  borderInlineEndColor: 'transparent',
207
- borderBottomColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
207
+ borderBottomColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
208
208
  }
209
209
  };
210
210
  };
@@ -234,15 +234,15 @@ const generateStyle = (componentTheme, props) => {
234
234
  borderStyle: 'solid'
235
235
  };
236
236
  const arrowBackGroundVariants = {
237
- default: componentTheme?.arrowBorderColor,
238
- inverse: componentTheme?.arrowBorderColorInverse
237
+ default: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
238
+ inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
239
239
  };
240
240
  const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme);
241
241
  return {
242
242
  contextView: {
243
243
  label: 'contextView',
244
244
  boxSizing: 'border-box',
245
- minHeight: `calc(${componentTheme?.arrowSize} * 2)`,
245
+ minHeight: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} * 2)`,
246
246
  ...getPlacementStyle(placement, componentTheme)
247
247
  },
248
248
  contextView__content: {
@@ -253,12 +253,12 @@ const generateStyle = (componentTheme, props) => {
253
253
  label: 'contextView__arrow',
254
254
  ...arrowBaseStyles,
255
255
  display: 'block',
256
- borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`,
256
+ borderWidth: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} + ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderWidth})`,
257
257
  borderColor: arrowBackGroundVariants[background],
258
258
  ...arrowPlacementVariant.main,
259
259
  ...getArrowCorrections(placement, componentTheme),
260
260
  '&::after': {
261
- borderWidth: componentTheme?.arrowSize,
261
+ borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize,
262
262
  borderColor: arrowBackGroundVariants[background],
263
263
  ...arrowPlacementVariant.__after,
264
264
  ...arrowBaseStyles
package/es/ContextView/theme.js CHANGED
@@ -28,12 +28,14 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
+ var _theme$borders, _theme$colors, _theme$colors2, _theme$colors3;
32
+
31
33
  const componentVariables = {
32
34
  arrowSize: '0.5rem',
33
- arrowBorderWidth: theme?.borders?.widthSmall,
34
- arrowBackgroundColor: theme?.colors?.white,
35
- arrowBorderColor: theme?.colors?.tiara,
36
- arrowBackgroundColorInverse: theme?.colors?.licorice,
35
+ arrowBorderWidth: theme === null || theme === void 0 ? void 0 : (_theme$borders = theme.borders) === null || _theme$borders === void 0 ? void 0 : _theme$borders.widthSmall,
36
+ arrowBackgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.white,
37
+ arrowBorderColor: theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.tiara,
38
+ arrowBackgroundColorInverse: theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.licorice,
37
39
  arrowBorderColorInverse: 'transparent'
38
40
  };
39
41
  return { ...componentVariables
package/es/View/index.js CHANGED
@@ -81,11 +81,15 @@ let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateSty
81
81
  }
82
82
 
83
83
  componentDidMount() {
84
- this.props.makeStyles?.();
84
+ var _this$props$makeStyle, _this$props;
85
+
86
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
85
87
  }
86
88
 
87
89
  componentDidUpdate() {
88
- this.props.makeStyles?.(); // Not calling getComputedStyle can save hundreds of ms in tests and production
90
+ var _this$props$makeStyle2, _this$props2;
91
+
92
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2); // Not calling getComputedStyle can save hundreds of ms in tests and production
89
93
 
90
94
  if (process.env.NODE_ENV === 'development' && !this.spanMarginVerified) {
91
95
  // We have to verify margins in the first 'componentDidUpdate',
@@ -122,36 +126,36 @@ let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateSty
122
126
  }
123
127
 
124
128
  render() {
125
- const _this$props = this.props,
126
- children = _this$props.children,
127
- textAlign = _this$props.textAlign,
128
- background = _this$props.background,
129
- display = _this$props.display,
130
- withVisualDebug = _this$props.withVisualDebug,
131
- width = _this$props.width,
132
- height = _this$props.height,
133
- minWidth = _this$props.minWidth,
134
- minHeight = _this$props.minHeight,
135
- maxWidth = _this$props.maxWidth,
136
- maxHeight = _this$props.maxHeight,
137
- overflowX = _this$props.overflowX,
138
- overflowY = _this$props.overflowY,
139
- stacking = _this$props.stacking,
140
- shadow = _this$props.shadow,
141
- position = _this$props.position,
142
- focusPosition = _this$props.focusPosition,
143
- focusColor = _this$props.focusColor,
144
- shouldAnimateFocus = _this$props.shouldAnimateFocus,
145
- borderColor = _this$props.borderColor,
146
- className = _this$props.className,
147
- styles = _this$props.styles,
148
- makeStyles = _this$props.makeStyles,
149
- props = _objectWithoutProperties(_this$props, _excluded);
129
+ const _this$props3 = this.props,
130
+ children = _this$props3.children,
131
+ textAlign = _this$props3.textAlign,
132
+ background = _this$props3.background,
133
+ display = _this$props3.display,
134
+ withVisualDebug = _this$props3.withVisualDebug,
135
+ width = _this$props3.width,
136
+ height = _this$props3.height,
137
+ minWidth = _this$props3.minWidth,
138
+ minHeight = _this$props3.minHeight,
139
+ maxWidth = _this$props3.maxWidth,
140
+ maxHeight = _this$props3.maxHeight,
141
+ overflowX = _this$props3.overflowX,
142
+ overflowY = _this$props3.overflowY,
143
+ stacking = _this$props3.stacking,
144
+ shadow = _this$props3.shadow,
145
+ position = _this$props3.position,
146
+ focusPosition = _this$props3.focusPosition,
147
+ focusColor = _this$props3.focusColor,
148
+ shouldAnimateFocus = _this$props3.shouldAnimateFocus,
149
+ borderColor = _this$props3.borderColor,
150
+ className = _this$props3.className,
151
+ styles = _this$props3.styles,
152
+ makeStyles = _this$props3.makeStyles,
153
+ props = _objectWithoutProperties(_this$props3, _excluded);
150
154
 
151
155
  const ElementType = getElementType(View, this.props);
152
156
  return jsx(ElementType, Object.assign({}, passthroughProps(props), {
153
157
  className: className,
154
- css: [styles?.view, styles?.inlineStyles],
158
+ css: [styles === null || styles === void 0 ? void 0 : styles.view, styles === null || styles === void 0 ? void 0 : styles.inlineStyles],
155
159
  ref: this.handleElementRef
156
160
  }), children);
157
161
  }
package/es/View/theme.js CHANGED
@@ -50,42 +50,42 @@ const generateComponentTheme = theme => {
50
50
  }
51
51
  };
52
52
  const componentVariables = {
53
- fontFamily: typography?.fontFamily,
54
- color: colors?.textDarkest,
55
- colorPrimaryInverse: colors?.textLightest,
56
- borderColorPrimary: colors?.borderMedium,
57
- borderColorSecondary: colors?.borderDark,
58
- borderColorSuccess: colors?.borderSuccess,
59
- borderColorBrand: colors?.borderBrand,
60
- borderColorInfo: colors?.borderInfo,
61
- borderColorAlert: colors?.borderAlert,
62
- borderColorWarning: colors?.borderWarning,
63
- borderColorDanger: colors?.borderDanger,
53
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
54
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
55
+ colorPrimaryInverse: colors === null || colors === void 0 ? void 0 : colors.textLightest,
56
+ borderColorPrimary: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
57
+ borderColorSecondary: colors === null || colors === void 0 ? void 0 : colors.borderDark,
58
+ borderColorSuccess: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
59
+ borderColorBrand: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
60
+ borderColorInfo: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
61
+ borderColorAlert: colors === null || colors === void 0 ? void 0 : colors.borderAlert,
62
+ borderColorWarning: colors === null || colors === void 0 ? void 0 : colors.borderWarning,
63
+ borderColorDanger: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
64
64
  borderColorTransparent: 'transparent',
65
- debugOutlineColor: colors?.borderDebug,
66
- backgroundPrimary: colors?.backgroundLightest,
67
- backgroundSecondary: colors?.backgroundLight,
68
- backgroundPrimaryInverse: colors?.backgroundDarkest,
69
- backgroundBrand: colors?.backgroundBrand,
70
- backgroundInfo: colors?.backgroundInfo,
71
- backgroundAlert: colors?.backgroundAlert,
72
- backgroundSuccess: colors?.backgroundSuccess,
73
- backgroundDanger: colors?.backgroundDanger,
74
- backgroundWarning: colors?.backgroundWarning,
65
+ debugOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDebug,
66
+ backgroundPrimary: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
67
+ backgroundSecondary: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
68
+ backgroundPrimaryInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
69
+ backgroundBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
70
+ backgroundInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
71
+ backgroundAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
72
+ backgroundSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
73
+ backgroundDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
74
+ backgroundWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
75
75
  arrowSize: '0.5rem',
76
- focusOutlineStyle: borders?.style,
77
- focusOutlineWidth: borders?.widthMedium,
76
+ focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
77
+ focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
78
78
  focusOutlineOffset: '0.3125rem',
79
79
  focusOutlineInset: '0rem',
80
80
  // do not use unitless zero (for CSS calc())
81
- focusColorInfo: colors?.borderInfo,
82
- focusColorDanger: colors?.borderDanger,
83
- focusColorSuccess: colors?.borderSuccess,
84
- focusColorInverse: colors?.borderLightest,
85
- xSmallMaxWidth: breakpoints?.xSmall,
86
- smallMaxWidth: breakpoints?.small,
87
- mediumMaxWidth: breakpoints?.medium,
88
- largeMaxWidth: breakpoints?.large,
81
+ focusColorInfo: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
82
+ focusColorDanger: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
83
+ focusColorSuccess: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
84
+ focusColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
85
+ xSmallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
86
+ smallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small,
87
+ mediumMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
88
+ largeMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.large,
89
89
  ...makeThemeVars('margin', spacing),
90
90
  ...makeThemeVars('padding', spacing),
91
91
  ...makeThemeVars('shadow', shadows),
package/lib/ContextView/index.js CHANGED
@@ -45,34 +45,38 @@ let ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
45
45
  }
46
46
 
47
47
  componentDidMount() {
48
- this.props.makeStyles?.();
48
+ var _this$props$makeStyle, _this$props;
49
+
50
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
49
51
  }
50
52
 
51
53
  componentDidUpdate() {
52
- this.props.makeStyles?.();
54
+ var _this$props$makeStyle2, _this$props2;
55
+
56
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
53
57
  }
54
58
 
55
59
  render() {
56
- const _this$props = this.props,
57
- as = _this$props.as,
58
- background = _this$props.background,
59
- children = _this$props.children,
60
- debug = _this$props.debug,
61
- height = _this$props.height,
62
- width = _this$props.width,
63
- maxHeight = _this$props.maxHeight,
64
- maxWidth = _this$props.maxWidth,
65
- minHeight = _this$props.minHeight,
66
- minWidth = _this$props.minWidth,
67
- margin = _this$props.margin,
68
- padding = _this$props.padding,
69
- shadow = _this$props.shadow,
70
- stacking = _this$props.stacking,
71
- style = _this$props.style,
72
- textAlign = _this$props.textAlign,
73
- styles = _this$props.styles;
60
+ const _this$props3 = this.props,
61
+ as = _this$props3.as,
62
+ background = _this$props3.background,
63
+ children = _this$props3.children,
64
+ debug = _this$props3.debug,
65
+ height = _this$props3.height,
66
+ width = _this$props3.width,
67
+ maxHeight = _this$props3.maxHeight,
68
+ maxWidth = _this$props3.maxWidth,
69
+ minHeight = _this$props3.minHeight,
70
+ minWidth = _this$props3.minWidth,
71
+ margin = _this$props3.margin,
72
+ padding = _this$props3.padding,
73
+ shadow = _this$props3.shadow,
74
+ stacking = _this$props3.stacking,
75
+ style = _this$props3.style,
76
+ textAlign = _this$props3.textAlign,
77
+ styles = _this$props3.styles;
74
78
  return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _omitProps.omitProps)(this.props, ContextView.allowedProps), {
75
- css: styles?.contextView,
79
+ css: styles === null || styles === void 0 ? void 0 : styles.contextView,
76
80
  style: style,
77
81
  borderWidth: "none",
78
82
  display: "inline-block",
@@ -82,7 +86,7 @@ let ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
82
86
  margin: margin,
83
87
  stacking: stacking
84
88
  }), (0, _emotion.jsx)(_View.View, {
85
- css: styles?.contextView__content,
89
+ css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
86
90
  display: "block",
87
91
  borderRadius: "medium",
88
92
  borderWidth: "small",
@@ -99,7 +103,7 @@ let ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
99
103
  shadow: shadow,
100
104
  textAlign: textAlign
101
105
  }, (0, _emotion.jsx)("span", {
102
- css: styles?.contextView__arrow
106
+ css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
103
107
  }), children));
104
108
  }
105
109
 
package/lib/ContextView/styles.js CHANGED
@@ -38,27 +38,27 @@ const topPlacements = ['top', 'top start', 'top end', 'top center'];
38
38
  const getPlacementStyle = (placement, theme) => {
39
39
  if (endPlacements.includes(placement)) {
40
40
  return {
41
- paddingInlineStart: theme?.arrowSize,
41
+ paddingInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
42
42
  paddingInlineEnd: '0'
43
43
  };
44
44
  }
45
45
 
46
46
  if (startPlacements.includes(placement)) {
47
47
  return {
48
- paddingInlineEnd: theme?.arrowSize,
48
+ paddingInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
49
49
  paddingInlineStart: '0'
50
50
  };
51
51
  }
52
52
 
53
53
  if (bottomPlacements.includes(placement)) {
54
54
  return {
55
- paddingTop: theme?.arrowSize
55
+ paddingTop: theme === null || theme === void 0 ? void 0 : theme.arrowSize
56
56
  };
57
57
  }
58
58
 
59
59
  if (topPlacements.includes(placement)) {
60
60
  return {
61
- paddingBottom: theme?.arrowSize
61
+ paddingBottom: theme === null || theme === void 0 ? void 0 : theme.arrowSize
62
62
  };
63
63
  }
64
64
 
@@ -83,27 +83,27 @@ const getArrowCorrections = (placement, theme) => {
83
83
 
84
84
  if (start.includes(placement)) {
85
85
  return {
86
- insetInlineStart: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
86
+ insetInlineStart: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
87
87
  insetInlineEnd: 'auto'
88
88
  };
89
89
  }
90
90
 
91
91
  if (end.includes(placement)) {
92
92
  return {
93
- insetInlineStart: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
93
+ insetInlineStart: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
94
94
  insetInlineEnd: 'auto'
95
95
  };
96
96
  }
97
97
 
98
98
  if (top.includes(placement)) {
99
99
  return {
100
- top: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
100
+ top: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
101
101
  };
102
102
  }
103
103
 
104
104
  if (bottom.includes(placement)) {
105
105
  return {
106
- top: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
106
+ top: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
107
107
  };
108
108
  }
109
109
 
@@ -120,24 +120,24 @@ const getArrowPlacementVariant = (placement, background, theme) => {
120
120
  top: '50%',
121
121
  insetInlineStart: '100%',
122
122
  insetInlineEnd: 'auto',
123
- marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
123
+ marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
124
124
  borderInlineEndWidth: '0',
125
125
  borderInlineEndColor: 'transparent',
126
- borderInlineStartColor: isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor,
126
+ borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
127
127
  borderTopColor: 'transparent',
128
128
  borderBottomColor: 'transparent',
129
- borderInlineStartWidth: theme?.arrowSize
129
+ borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
130
130
  },
131
131
  __after: {
132
- insetInlineEnd: theme?.arrowBorderWidth,
132
+ insetInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
133
133
  insetInlineStart: 'auto',
134
- marginTop: `calc(-1 * ${theme?.arrowSize})`,
134
+ marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
135
135
  borderInlineEndWidth: '0',
136
136
  borderInlineEndColor: 'transparent',
137
137
  borderTopColor: 'transparent',
138
138
  borderBottomColor: 'transparent',
139
- borderInlineStartWidth: theme?.arrowSize,
140
- borderInlineStartColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
139
+ borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
140
+ borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
141
141
  }
142
142
  };
143
143
  }
@@ -148,24 +148,24 @@ const getArrowPlacementVariant = (placement, background, theme) => {
148
148
  top: '50%',
149
149
  insetInlineEnd: '100%',
150
150
  insetInlineStart: 'auto',
151
- marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
151
+ marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
152
152
  borderInlineStartWidth: '0',
153
153
  borderInlineStartColor: 'transparent',
154
- borderInlineEndColor: isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor,
154
+ borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
155
155
  borderTopColor: 'transparent',
156
156
  borderBottomColor: 'transparent',
157
- borderInlineEndWidth: theme?.arrowSize
157
+ borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
158
158
  },
159
159
  __after: {
160
- insetInlineStart: theme?.arrowBorderWidth,
160
+ insetInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
161
161
  insetInlineEnd: 'auto',
162
- marginTop: `calc(-1 * ${theme?.arrowSize})`,
162
+ marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
163
163
  borderInlineStartWidth: '0',
164
164
  borderInlineStartColor: 'transparent',
165
165
  borderTopColor: 'transparent',
166
166
  borderBottomColor: 'transparent',
167
- borderInlineEndWidth: theme?.arrowSize,
168
- borderInlineEndColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
167
+ borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
168
+ borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
169
169
  }
170
170
  };
171
171
  }
@@ -174,7 +174,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
174
174
  return {
175
175
  main: {
176
176
  top: '100%',
177
- marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
177
+ marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
178
178
  marginInlineEnd: '0',
179
179
  borderBottomWidth: '0',
180
180
  borderBottomColor: 'transparent',
@@ -182,14 +182,14 @@ const getArrowPlacementVariant = (placement, background, theme) => {
182
182
  borderInlineEndColor: 'transparent'
183
183
  },
184
184
  __after: {
185
- bottom: theme?.arrowBorderWidth,
186
- marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
185
+ bottom: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
186
+ marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
187
187
  marginInlineEnd: '0',
188
188
  borderBottomWidth: '0',
189
189
  borderBottomColor: 'transparent',
190
190
  borderInlineStartColor: 'transparent',
191
191
  borderInlineEndColor: 'transparent',
192
- borderTopColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
192
+ borderTopColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
193
193
  }
194
194
  };
195
195
  }
@@ -197,7 +197,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
197
197
  return {
198
198
  main: {
199
199
  bottom: '100%',
200
- marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
200
+ marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
201
201
  marginInlineEnd: '0',
202
202
  borderTopWidth: '0',
203
203
  borderTopColor: 'transparent',
@@ -205,14 +205,14 @@ const getArrowPlacementVariant = (placement, background, theme) => {
205
205
  borderInlineEndColor: 'transparent'
206
206
  },
207
207
  __after: {
208
- top: theme?.arrowBorderWidth,
209
- marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
208
+ top: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
209
+ marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
210
210
  marginInlineEnd: '0',
211
211
  borderTopWidth: '0',
212
212
  borderTopColor: 'transparent',
213
213
  borderInlineStartColor: 'transparent',
214
214
  borderInlineEndColor: 'transparent',
215
- borderBottomColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
215
+ borderBottomColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
216
216
  }
217
217
  };
218
218
  };
@@ -242,15 +242,15 @@ const generateStyle = (componentTheme, props) => {
242
242
  borderStyle: 'solid'
243
243
  };
244
244
  const arrowBackGroundVariants = {
245
- default: componentTheme?.arrowBorderColor,
246
- inverse: componentTheme?.arrowBorderColorInverse
245
+ default: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
246
+ inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
247
247
  };
248
248
  const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme);
249
249
  return {
250
250
  contextView: {
251
251
  label: 'contextView',
252
252
  boxSizing: 'border-box',
253
- minHeight: `calc(${componentTheme?.arrowSize} * 2)`,
253
+ minHeight: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} * 2)`,
254
254
  ...getPlacementStyle(placement, componentTheme)
255
255
  },
256
256
  contextView__content: {
@@ -261,12 +261,12 @@ const generateStyle = (componentTheme, props) => {
261
261
  label: 'contextView__arrow',
262
262
  ...arrowBaseStyles,
263
263
  display: 'block',
264
- borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`,
264
+ borderWidth: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} + ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderWidth})`,
265
265
  borderColor: arrowBackGroundVariants[background],
266
266
  ...arrowPlacementVariant.main,
267
267
  ...getArrowCorrections(placement, componentTheme),
268
268
  '&::after': {
269
- borderWidth: componentTheme?.arrowSize,
269
+ borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize,
270
270
  borderColor: arrowBackGroundVariants[background],
271
271
  ...arrowPlacementVariant.__after,
272
272
  ...arrowBaseStyles
package/lib/ContextView/theme.js CHANGED
@@ -35,12 +35,14 @@ exports.default = void 0;
35
35
  * @return {Object} The final theme object with the overrides and component variables
36
36
  */
37
37
  const generateComponentTheme = theme => {
38
+ var _theme$borders, _theme$colors, _theme$colors2, _theme$colors3;
39
+
38
40
  const componentVariables = {
39
41
  arrowSize: '0.5rem',
40
- arrowBorderWidth: theme?.borders?.widthSmall,
41
- arrowBackgroundColor: theme?.colors?.white,
42
- arrowBorderColor: theme?.colors?.tiara,
43
- arrowBackgroundColorInverse: theme?.colors?.licorice,
42
+ arrowBorderWidth: theme === null || theme === void 0 ? void 0 : (_theme$borders = theme.borders) === null || _theme$borders === void 0 ? void 0 : _theme$borders.widthSmall,
43
+ arrowBackgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.white,
44
+ arrowBorderColor: theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.tiara,
45
+ arrowBackgroundColorInverse: theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.licorice,
44
46
  arrowBorderColorInverse: 'transparent'
45
47
  };
46
48
  return { ...componentVariables
package/lib/View/index.js CHANGED
@@ -80,11 +80,15 @@ let View = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsume
80
80
  }
81
81
 
82
82
  componentDidMount() {
83
- this.props.makeStyles?.();
83
+ var _this$props$makeStyle, _this$props;
84
+
85
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
84
86
  }
85
87
 
86
88
  componentDidUpdate() {
87
- this.props.makeStyles?.(); // Not calling getComputedStyle can save hundreds of ms in tests and production
89
+ var _this$props$makeStyle2, _this$props2;
90
+
91
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2); // Not calling getComputedStyle can save hundreds of ms in tests and production
88
92
 
89
93
  if (process.env.NODE_ENV === 'development' && !this.spanMarginVerified) {
90
94
  // We have to verify margins in the first 'componentDidUpdate',
@@ -121,35 +125,35 @@ let View = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsume
121
125
  }
122
126
 
123
127
  render() {
124
- const _this$props = this.props,
125
- children = _this$props.children,
126
- textAlign = _this$props.textAlign,
127
- background = _this$props.background,
128
- display = _this$props.display,
129
- withVisualDebug = _this$props.withVisualDebug,
130
- width = _this$props.width,
131
- height = _this$props.height,
132
- minWidth = _this$props.minWidth,
133
- minHeight = _this$props.minHeight,
134
- maxWidth = _this$props.maxWidth,
135
- maxHeight = _this$props.maxHeight,
136
- overflowX = _this$props.overflowX,
137
- overflowY = _this$props.overflowY,
138
- stacking = _this$props.stacking,
139
- shadow = _this$props.shadow,
140
- position = _this$props.position,
141
- focusPosition = _this$props.focusPosition,
142
- focusColor = _this$props.focusColor,
143
- shouldAnimateFocus = _this$props.shouldAnimateFocus,
144
- borderColor = _this$props.borderColor,
145
- className = _this$props.className,
146
- styles = _this$props.styles,
147
- makeStyles = _this$props.makeStyles,
148
- props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
128
+ const _this$props3 = this.props,
129
+ children = _this$props3.children,
130
+ textAlign = _this$props3.textAlign,
131
+ background = _this$props3.background,
132
+ display = _this$props3.display,
133
+ withVisualDebug = _this$props3.withVisualDebug,
134
+ width = _this$props3.width,
135
+ height = _this$props3.height,
136
+ minWidth = _this$props3.minWidth,
137
+ minHeight = _this$props3.minHeight,
138
+ maxWidth = _this$props3.maxWidth,
139
+ maxHeight = _this$props3.maxHeight,
140
+ overflowX = _this$props3.overflowX,
141
+ overflowY = _this$props3.overflowY,
142
+ stacking = _this$props3.stacking,
143
+ shadow = _this$props3.shadow,
144
+ position = _this$props3.position,
145
+ focusPosition = _this$props3.focusPosition,
146
+ focusColor = _this$props3.focusColor,
147
+ shouldAnimateFocus = _this$props3.shouldAnimateFocus,
148
+ borderColor = _this$props3.borderColor,
149
+ className = _this$props3.className,
150
+ styles = _this$props3.styles,
151
+ makeStyles = _this$props3.makeStyles,
152
+ props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
149
153
  const ElementType = (0, _getElementType.getElementType)(View, this.props);
150
154
  return (0, _emotion.jsx)(ElementType, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
151
155
  className: className,
152
- css: [styles?.view, styles?.inlineStyles],
156
+ css: [styles === null || styles === void 0 ? void 0 : styles.view, styles === null || styles === void 0 ? void 0 : styles.inlineStyles],
153
157
  ref: this.handleElementRef
154
158
  }), children);
155
159
  }
package/lib/View/theme.js CHANGED
@@ -58,42 +58,42 @@ const generateComponentTheme = theme => {
58
58
  }
59
59
  };
60
60
  const componentVariables = {
61
- fontFamily: typography?.fontFamily,
62
- color: colors?.textDarkest,
63
- colorPrimaryInverse: colors?.textLightest,
64
- borderColorPrimary: colors?.borderMedium,
65
- borderColorSecondary: colors?.borderDark,
66
- borderColorSuccess: colors?.borderSuccess,
67
- borderColorBrand: colors?.borderBrand,
68
- borderColorInfo: colors?.borderInfo,
69
- borderColorAlert: colors?.borderAlert,
70
- borderColorWarning: colors?.borderWarning,
71
- borderColorDanger: colors?.borderDanger,
61
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
62
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
63
+ colorPrimaryInverse: colors === null || colors === void 0 ? void 0 : colors.textLightest,
64
+ borderColorPrimary: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
65
+ borderColorSecondary: colors === null || colors === void 0 ? void 0 : colors.borderDark,
66
+ borderColorSuccess: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
67
+ borderColorBrand: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
68
+ borderColorInfo: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
69
+ borderColorAlert: colors === null || colors === void 0 ? void 0 : colors.borderAlert,
70
+ borderColorWarning: colors === null || colors === void 0 ? void 0 : colors.borderWarning,
71
+ borderColorDanger: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
72
72
  borderColorTransparent: 'transparent',
73
- debugOutlineColor: colors?.borderDebug,
74
- backgroundPrimary: colors?.backgroundLightest,
75
- backgroundSecondary: colors?.backgroundLight,
76
- backgroundPrimaryInverse: colors?.backgroundDarkest,
77
- backgroundBrand: colors?.backgroundBrand,
78
- backgroundInfo: colors?.backgroundInfo,
79
- backgroundAlert: colors?.backgroundAlert,
80
- backgroundSuccess: colors?.backgroundSuccess,
81
- backgroundDanger: colors?.backgroundDanger,
82
- backgroundWarning: colors?.backgroundWarning,
73
+ debugOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDebug,
74
+ backgroundPrimary: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
75
+ backgroundSecondary: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
76
+ backgroundPrimaryInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
77
+ backgroundBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
78
+ backgroundInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
79
+ backgroundAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
80
+ backgroundSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
81
+ backgroundDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
82
+ backgroundWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
83
83
  arrowSize: '0.5rem',
84
- focusOutlineStyle: borders?.style,
85
- focusOutlineWidth: borders?.widthMedium,
84
+ focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
85
+ focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
86
86
  focusOutlineOffset: '0.3125rem',
87
87
  focusOutlineInset: '0rem',
88
88
  // do not use unitless zero (for CSS calc())
89
- focusColorInfo: colors?.borderInfo,
90
- focusColorDanger: colors?.borderDanger,
91
- focusColorSuccess: colors?.borderSuccess,
92
- focusColorInverse: colors?.borderLightest,
93
- xSmallMaxWidth: breakpoints?.xSmall,
94
- smallMaxWidth: breakpoints?.small,
95
- mediumMaxWidth: breakpoints?.medium,
96
- largeMaxWidth: breakpoints?.large,
89
+ focusColorInfo: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
90
+ focusColorDanger: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
91
+ focusColorSuccess: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
92
+ focusColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
93
+ xSmallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
94
+ smallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small,
95
+ mediumMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
96
+ largeMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.large,
97
97
  ...(0, _emotion.makeThemeVars)('margin', spacing),
98
98
  ...(0, _emotion.makeThemeVars)('padding', spacing),
99
99
  ...(0, _emotion.makeThemeVars)('shadow', shadows),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-view",
3
- "version": "8.18.0",
3
+ "version": "8.18.1-snapshot.12+ca14b3dc8",
4
4
  "description": "A component for basic styles including spacing, sizing, borders, display, positioning, and focus states.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,21 +24,21 @@
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-color-utils": "8.18.0",
31
- "@instructure/ui-dom-utils": "8.18.0",
32
- "@instructure/ui-i18n": "8.18.0",
33
- "@instructure/ui-position": "8.18.0",
34
- "@instructure/ui-prop-types": "8.18.0",
35
- "@instructure/ui-react-utils": "8.18.0",
27
+ "@instructure/console": "8.18.1-snapshot.12+ca14b3dc8",
28
+ "@instructure/emotion": "8.18.1-snapshot.12+ca14b3dc8",
29
+ "@instructure/shared-types": "8.18.1-snapshot.12+ca14b3dc8",
30
+ "@instructure/ui-color-utils": "8.18.1-snapshot.12+ca14b3dc8",
31
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.12+ca14b3dc8",
32
+ "@instructure/ui-i18n": "8.18.1-snapshot.12+ca14b3dc8",
33
+ "@instructure/ui-position": "8.18.1-snapshot.12+ca14b3dc8",
34
+ "@instructure/ui-prop-types": "8.18.1-snapshot.12+ca14b3dc8",
35
+ "@instructure/ui-react-utils": "8.18.1-snapshot.12+ca14b3dc8",
36
36
  "prop-types": "^15"
37
37
  },
38
38
  "devDependencies": {
39
- "@instructure/ui-babel-preset": "8.18.0",
40
- "@instructure/ui-test-utils": "8.18.0",
41
- "@instructure/ui-themes": "8.18.0"
39
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.12+ca14b3dc8",
40
+ "@instructure/ui-test-utils": "8.18.1-snapshot.12+ca14b3dc8",
41
+ "@instructure/ui-themes": "8.18.1-snapshot.12+ca14b3dc8"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": ">=16.8 <=17"
@@ -46,5 +46,6 @@
46
46
  "publishConfig": {
47
47
  "access": "public"
48
48
  },
49
- "sideEffects": false
49
+ "sideEffects": false,
50
+ "gitHead": "ca14b3dc8f0315daef7b86aa05f711e6d6684c58"
50
51
  }