@instructure/ui-view 8.17.1-snapshot.21 → 8.17.1-snapshot.35

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/es/ContextView/index.js +23 -27
  2. package/es/ContextView/styles.js +35 -35
  3. package/es/ContextView/theme.js +4 -6
  4. package/es/View/index.js +28 -32
  5. package/es/View/theme.js +31 -31
  6. package/lib/ContextView/index.js +23 -27
  7. package/lib/ContextView/styles.js +35 -35
  8. package/lib/ContextView/theme.js +4 -6
  9. package/lib/View/index.js +28 -32
  10. package/lib/View/theme.js +31 -31
  11. package/package.json +14 -14
  12. package/tsconfig.build.tsbuildinfo +1 -1
package/es/ContextView/index.js CHANGED
@@ -55,38 +55,34 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
55
55
  }
56
56
 
57
57
  componentDidMount() {
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);
58
+ this.props.makeStyles?.();
61
59
  }
62
60
 
63
61
  componentDidUpdate() {
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);
62
+ this.props.makeStyles?.();
67
63
  }
68
64
 
69
65
  render() {
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;
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;
88
84
  return jsx(View, Object.assign({}, omitProps(this.props, ContextView.allowedProps), {
89
- css: styles === null || styles === void 0 ? void 0 : styles.contextView,
85
+ css: styles?.contextView,
90
86
  style: style,
91
87
  borderWidth: "none",
92
88
  display: "inline-block",
@@ -96,7 +92,7 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
96
92
  margin: margin,
97
93
  stacking: stacking
98
94
  }), jsx(View, {
99
- css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
95
+ css: styles?.contextView__content,
100
96
  display: "block",
101
97
  borderRadius: "medium",
102
98
  borderWidth: "small",
@@ -113,7 +109,7 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
113
109
  shadow: shadow,
114
110
  textAlign: textAlign
115
111
  }, jsx("span", {
116
- css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
112
+ css: styles?.contextView__arrow
117
113
  }), children));
118
114
  }
119
115
 
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 === null || theme === void 0 ? void 0 : theme.arrowSize,
33
+ paddingInlineStart: theme?.arrowSize,
34
34
  paddingInlineEnd: '0'
35
35
  };
36
36
  }
37
37
 
38
38
  if (startPlacements.includes(placement)) {
39
39
  return {
40
- paddingInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
40
+ paddingInlineEnd: theme?.arrowSize,
41
41
  paddingInlineStart: '0'
42
42
  };
43
43
  }
44
44
 
45
45
  if (bottomPlacements.includes(placement)) {
46
46
  return {
47
- paddingTop: theme === null || theme === void 0 ? void 0 : theme.arrowSize
47
+ paddingTop: theme?.arrowSize
48
48
  };
49
49
  }
50
50
 
51
51
  if (topPlacements.includes(placement)) {
52
52
  return {
53
- paddingBottom: theme === null || theme === void 0 ? void 0 : theme.arrowSize
53
+ paddingBottom: 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 === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
78
+ insetInlineStart: `calc((${theme?.arrowSize} + ${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 === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
85
+ insetInlineStart: `calc(100% - (${theme?.arrowSize} + ${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 === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
92
+ top: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
93
93
  };
94
94
  }
95
95
 
96
96
  if (bottom.includes(placement)) {
97
97
  return {
98
- top: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
98
+ top: `calc(100% - (${theme?.arrowSize} + ${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 === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
115
+ marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
116
116
  borderInlineEndWidth: '0',
117
117
  borderInlineEndColor: 'transparent',
118
- borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
118
+ borderInlineStartColor: isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor,
119
119
  borderTopColor: 'transparent',
120
120
  borderBottomColor: 'transparent',
121
- borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
121
+ borderInlineStartWidth: theme?.arrowSize
122
122
  },
123
123
  __after: {
124
- insetInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
124
+ insetInlineEnd: theme?.arrowBorderWidth,
125
125
  insetInlineStart: 'auto',
126
- marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
126
+ marginTop: `calc(-1 * ${theme?.arrowSize})`,
127
127
  borderInlineEndWidth: '0',
128
128
  borderInlineEndColor: 'transparent',
129
129
  borderTopColor: 'transparent',
130
130
  borderBottomColor: 'transparent',
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
131
+ borderInlineStartWidth: theme?.arrowSize,
132
+ borderInlineStartColor: isInversed ? theme?.arrowBackgroundColorInverse : 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 === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
143
+ marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
144
144
  borderInlineStartWidth: '0',
145
145
  borderInlineStartColor: 'transparent',
146
- borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
146
+ borderInlineEndColor: isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor,
147
147
  borderTopColor: 'transparent',
148
148
  borderBottomColor: 'transparent',
149
- borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
149
+ borderInlineEndWidth: theme?.arrowSize
150
150
  },
151
151
  __after: {
152
- insetInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
152
+ insetInlineStart: theme?.arrowBorderWidth,
153
153
  insetInlineEnd: 'auto',
154
- marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
154
+ marginTop: `calc(-1 * ${theme?.arrowSize})`,
155
155
  borderInlineStartWidth: '0',
156
156
  borderInlineStartColor: 'transparent',
157
157
  borderTopColor: 'transparent',
158
158
  borderBottomColor: 'transparent',
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
159
+ borderInlineEndWidth: theme?.arrowSize,
160
+ borderInlineEndColor: isInversed ? theme?.arrowBackgroundColorInverse : 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 === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
169
+ marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${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 === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
178
- marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
177
+ bottom: theme?.arrowBorderWidth,
178
+ marginInlineStart: `calc(-1 * ${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 === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
184
+ borderTopColor: isInversed ? theme?.arrowBackgroundColorInverse : 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 === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
192
+ marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${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 === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
201
- marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
200
+ top: theme?.arrowBorderWidth,
201
+ marginInlineStart: `calc(-1 * ${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 === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
207
+ borderBottomColor: isInversed ? theme?.arrowBackgroundColorInverse : 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 === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
238
- inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
237
+ default: componentTheme?.arrowBorderColor,
238
+ inverse: 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 === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} * 2)`,
245
+ minHeight: `calc(${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 === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} + ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderWidth})`,
256
+ borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`,
257
257
  borderColor: arrowBackGroundVariants[background],
258
258
  ...arrowPlacementVariant.main,
259
259
  ...getArrowCorrections(placement, componentTheme),
260
260
  '&::after': {
261
- borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize,
261
+ borderWidth: componentTheme?.arrowSize,
262
262
  borderColor: arrowBackGroundVariants[background],
263
263
  ...arrowPlacementVariant.__after,
264
264
  ...arrowBaseStyles
package/es/ContextView/theme.js CHANGED
@@ -28,14 +28,12 @@
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
-
33
31
  const componentVariables = {
34
32
  arrowSize: '0.5rem',
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,
33
+ arrowBorderWidth: theme?.borders?.widthSmall,
34
+ arrowBackgroundColor: theme?.colors?.white,
35
+ arrowBorderColor: theme?.colors?.tiara,
36
+ arrowBackgroundColorInverse: theme?.colors?.licorice,
39
37
  arrowBorderColorInverse: 'transparent'
40
38
  };
41
39
  return { ...componentVariables
package/es/View/index.js CHANGED
@@ -81,15 +81,11 @@ let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateSty
81
81
  }
82
82
 
83
83
  componentDidMount() {
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);
84
+ this.props.makeStyles?.();
87
85
  }
88
86
 
89
87
  componentDidUpdate() {
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
88
+ this.props.makeStyles?.(); // Not calling getComputedStyle can save hundreds of ms in tests and production
93
89
 
94
90
  if (process.env.NODE_ENV === 'development' && !this.spanMarginVerified) {
95
91
  // We have to verify margins in the first 'componentDidUpdate',
@@ -126,36 +122,36 @@ let View = (_dec = textDirectionContextConsumer(), _dec2 = withStyle(generateSty
126
122
  }
127
123
 
128
124
  render() {
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);
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);
154
150
 
155
151
  const ElementType = getElementType(View, this.props);
156
152
  return jsx(ElementType, Object.assign({}, passthroughProps(props), {
157
153
  className: className,
158
- css: [styles === null || styles === void 0 ? void 0 : styles.view, styles === null || styles === void 0 ? void 0 : styles.inlineStyles],
154
+ css: [styles?.view, styles?.inlineStyles],
159
155
  ref: this.handleElementRef
160
156
  }), children);
161
157
  }
package/es/View/theme.js CHANGED
@@ -50,42 +50,42 @@ const generateComponentTheme = theme => {
50
50
  }
51
51
  };
52
52
  const componentVariables = {
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,
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,
64
64
  borderColorTransparent: 'transparent',
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,
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,
75
75
  arrowSize: '0.5rem',
76
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
77
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
76
+ focusOutlineStyle: borders?.style,
77
+ focusOutlineWidth: borders?.widthMedium,
78
78
  focusOutlineOffset: '0.3125rem',
79
79
  focusOutlineInset: '0rem',
80
80
  // do not use unitless zero (for CSS calc())
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,
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,
89
89
  ...makeThemeVars('margin', spacing),
90
90
  ...makeThemeVars('padding', spacing),
91
91
  ...makeThemeVars('shadow', shadows),
package/lib/ContextView/index.js CHANGED
@@ -45,38 +45,34 @@ let ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
45
45
  }
46
46
 
47
47
  componentDidMount() {
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);
48
+ this.props.makeStyles?.();
51
49
  }
52
50
 
53
51
  componentDidUpdate() {
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);
52
+ this.props.makeStyles?.();
57
53
  }
58
54
 
59
55
  render() {
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;
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;
78
74
  return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _omitProps.omitProps)(this.props, ContextView.allowedProps), {
79
- css: styles === null || styles === void 0 ? void 0 : styles.contextView,
75
+ css: styles?.contextView,
80
76
  style: style,
81
77
  borderWidth: "none",
82
78
  display: "inline-block",
@@ -86,7 +82,7 @@ let ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
86
82
  margin: margin,
87
83
  stacking: stacking
88
84
  }), (0, _emotion.jsx)(_View.View, {
89
- css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
85
+ css: styles?.contextView__content,
90
86
  display: "block",
91
87
  borderRadius: "medium",
92
88
  borderWidth: "small",
@@ -103,7 +99,7 @@ let ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
103
99
  shadow: shadow,
104
100
  textAlign: textAlign
105
101
  }, (0, _emotion.jsx)("span", {
106
- css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
102
+ css: styles?.contextView__arrow
107
103
  }), children));
108
104
  }
109
105