@instructure/ui-view 11.7.3-snapshot-7 → 11.7.3-snapshot-26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/ContextView/v1/index.js +53 -51
  3. package/es/ContextView/v1/styles.js +44 -39
  4. package/es/ContextView/v1/theme.js +4 -5
  5. package/es/ContextView/v2/index.js +54 -52
  6. package/es/ContextView/v2/styles.js +45 -40
  7. package/es/View/v1/index.js +84 -69
  8. package/es/View/v1/styles.js +38 -32
  9. package/es/View/v1/theme.js +41 -40
  10. package/es/View/v2/index.js +84 -69
  11. package/es/View/v2/styles.js +38 -32
  12. package/lib/ContextView/v1/index.js +53 -51
  13. package/lib/ContextView/v1/styles.js +44 -39
  14. package/lib/ContextView/v1/theme.js +4 -5
  15. package/lib/ContextView/v2/index.js +54 -52
  16. package/lib/ContextView/v2/styles.js +45 -40
  17. package/lib/View/v1/index.js +84 -69
  18. package/lib/View/v1/styles.js +38 -32
  19. package/lib/View/v1/theme.js +41 -40
  20. package/lib/View/v2/index.js +84 -69
  21. package/lib/View/v2/styles.js +38 -32
  22. package/package.json +13 -13
  23. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-view
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/ContextView/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _ContextView;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -36,49 +36,62 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
36
36
  category: components
37
37
  ---
38
38
  **/
39
- let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ContextView = class ContextView extends Component {
40
- constructor(...args) {
41
- super(...args);
42
- this.ref = null;
43
- this.handleRef = el => {
44
- const elementRef = this.props.elementRef;
45
- this.ref = el;
46
- if (typeof elementRef === 'function') {
47
- elementRef(el);
48
- }
49
- };
50
- }
39
+ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ContextView extends Component {
40
+ static displayName = "ContextView";
41
+ static componentId = 'ContextView';
42
+ static allowedProps = allowedProps;
43
+ static defaultProps = {
44
+ as: 'span',
45
+ elementRef: () => {},
46
+ debug: false,
47
+ width: 'auto',
48
+ height: 'auto',
49
+ children: null,
50
+ textAlign: 'start',
51
+ background: 'default',
52
+ shadow: 'resting',
53
+ placement: 'center end'
54
+ };
51
55
  componentDidMount() {
52
- var _this$props$makeStyle, _this$props;
53
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
56
+ this.props.makeStyles?.();
54
57
  }
55
58
  componentDidUpdate() {
56
- var _this$props$makeStyle2, _this$props2;
57
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
59
+ this.props.makeStyles?.();
58
60
  }
61
+ ref = null;
62
+ handleRef = el => {
63
+ const {
64
+ elementRef
65
+ } = this.props;
66
+ this.ref = el;
67
+ if (typeof elementRef === 'function') {
68
+ elementRef(el);
69
+ }
70
+ };
59
71
  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,
78
- borderColor = _this$props3.borderColor;
72
+ const {
73
+ as,
74
+ background,
75
+ children,
76
+ debug,
77
+ height,
78
+ width,
79
+ maxHeight,
80
+ maxWidth,
81
+ minHeight,
82
+ minWidth,
83
+ margin,
84
+ padding,
85
+ shadow,
86
+ stacking,
87
+ style,
88
+ textAlign,
89
+ styles,
90
+ borderColor
91
+ } = this.props;
79
92
  return _jsx(View, {
80
93
  ...omitProps(this.props, ContextView.allowedProps),
81
- css: styles === null || styles === void 0 ? void 0 : styles.contextView,
94
+ css: styles?.contextView,
82
95
  style: style,
83
96
  borderWidth: "none",
84
97
  display: "inline-block",
@@ -88,7 +101,7 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
88
101
  margin: margin,
89
102
  stacking: stacking,
90
103
  children: _jsxs(View, {
91
- css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
104
+ css: styles?.contextView__content,
92
105
  display: "block",
93
106
  borderRadius: "medium",
94
107
  borderWidth: "small",
@@ -105,22 +118,11 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
105
118
  shadow: shadow,
106
119
  textAlign: textAlign,
107
120
  children: [_jsx("span", {
108
- css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
121
+ css: styles?.contextView__arrow
109
122
  }), children]
110
123
  })
111
124
  });
112
125
  }
113
- }, _ContextView.displayName = "ContextView", _ContextView.componentId = 'ContextView', _ContextView.allowedProps = allowedProps, _ContextView.defaultProps = {
114
- as: 'span',
115
- elementRef: () => {},
116
- debug: false,
117
- width: 'auto',
118
- height: 'auto',
119
- children: null,
120
- textAlign: 'start',
121
- background: 'default',
122
- shadow: 'resting',
123
- placement: 'center end'
124
- }, _ContextView)) || _class);
126
+ }) || _class);
125
127
  export default ContextView;
126
128
  export { ContextView };
package/es/ContextView/v1/styles.js CHANGED
@@ -1,3 +1,4 @@
1
+ import "core-js/modules/es.array.includes.js";
1
2
  /*
2
3
  * The MIT License (MIT)
3
4
  *
@@ -30,24 +31,24 @@ const topPlacements = ['top', 'top start', 'top end', 'top stretch', 'top center
30
31
  const getPlacementStyle = (placement, theme) => {
31
32
  if (endPlacements.includes(placement)) {
32
33
  return {
33
- paddingInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
34
+ paddingInlineStart: theme?.arrowSize,
34
35
  paddingInlineEnd: '0'
35
36
  };
36
37
  }
37
38
  if (startPlacements.includes(placement)) {
38
39
  return {
39
- paddingInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
40
+ paddingInlineEnd: theme?.arrowSize,
40
41
  paddingInlineStart: '0'
41
42
  };
42
43
  }
43
44
  if (bottomPlacements.includes(placement)) {
44
45
  return {
45
- paddingTop: theme === null || theme === void 0 ? void 0 : theme.arrowSize
46
+ paddingTop: theme?.arrowSize
46
47
  };
47
48
  }
48
49
  if (topPlacements.includes(placement)) {
49
50
  return {
50
- paddingBottom: theme === null || theme === void 0 ? void 0 : theme.arrowSize
51
+ paddingBottom: theme?.arrowSize
51
52
  };
52
53
  }
53
54
  return {
@@ -68,24 +69,24 @@ const getArrowCorrections = (placement, theme) => {
68
69
  }
69
70
  if (start.includes(placement)) {
70
71
  return {
71
- insetInlineStart: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
72
+ insetInlineStart: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
72
73
  insetInlineEnd: 'auto'
73
74
  };
74
75
  }
75
76
  if (end.includes(placement)) {
76
77
  return {
77
- insetInlineStart: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
78
+ insetInlineStart: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`,
78
79
  insetInlineEnd: 'auto'
79
80
  };
80
81
  }
81
82
  if (top.includes(placement)) {
82
83
  return {
83
- top: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
84
+ top: `calc((${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
84
85
  };
85
86
  }
86
87
  if (bottom.includes(placement)) {
87
88
  return {
88
- top: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
89
+ top: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
89
90
  };
90
91
  }
91
92
  return {};
@@ -93,31 +94,33 @@ const getArrowCorrections = (placement, theme) => {
93
94
  const getArrowPlacementVariant = (placement, background, theme, props) => {
94
95
  const transformedPlacement = mirrorPlacement(placement, ' ');
95
96
  const isInversed = background === 'inverse';
96
- const borderColor = props.borderColor;
97
+ const {
98
+ borderColor
99
+ } = props;
97
100
  if (endPlacements.includes(transformedPlacement)) {
98
101
  return {
99
102
  main: {
100
103
  top: '50%',
101
104
  insetInlineStart: '100%',
102
105
  insetInlineEnd: 'auto',
103
- marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
106
+ marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
104
107
  borderInlineEndWidth: '0',
105
108
  borderInlineEndColor: 'transparent',
106
- borderInlineStartColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
109
+ borderInlineStartColor: borderColor || (isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor),
107
110
  borderTopColor: 'transparent',
108
111
  borderBottomColor: 'transparent',
109
- borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
112
+ borderInlineStartWidth: theme?.arrowSize
110
113
  },
111
114
  __after: {
112
- insetInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
115
+ insetInlineEnd: theme?.arrowBorderWidth,
113
116
  insetInlineStart: 'auto',
114
- marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
117
+ marginTop: `calc(-1 * ${theme?.arrowSize})`,
115
118
  borderInlineEndWidth: '0',
116
119
  borderInlineEndColor: 'transparent',
117
120
  borderTopColor: 'transparent',
118
121
  borderBottomColor: 'transparent',
119
- borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
120
- borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
122
+ borderInlineStartWidth: theme?.arrowSize,
123
+ borderInlineStartColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
121
124
  }
122
125
  };
123
126
  }
@@ -127,24 +130,24 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
127
130
  top: '50%',
128
131
  insetInlineEnd: '100%',
129
132
  insetInlineStart: 'auto',
130
- marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
133
+ marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
131
134
  borderInlineStartWidth: '0',
132
135
  borderInlineStartColor: 'transparent',
133
- borderInlineEndColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
136
+ borderInlineEndColor: borderColor || (isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor),
134
137
  borderTopColor: 'transparent',
135
138
  borderBottomColor: 'transparent',
136
- borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
139
+ borderInlineEndWidth: theme?.arrowSize
137
140
  },
138
141
  __after: {
139
- insetInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
142
+ insetInlineStart: theme?.arrowBorderWidth,
140
143
  insetInlineEnd: 'auto',
141
- marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
144
+ marginTop: `calc(-1 * ${theme?.arrowSize})`,
142
145
  borderInlineStartWidth: '0',
143
146
  borderInlineStartColor: 'transparent',
144
147
  borderTopColor: 'transparent',
145
148
  borderBottomColor: 'transparent',
146
- borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
147
- borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
149
+ borderInlineEndWidth: theme?.arrowSize,
150
+ borderInlineEndColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
148
151
  }
149
152
  };
150
153
  }
@@ -152,7 +155,7 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
152
155
  return {
153
156
  main: {
154
157
  top: '100%',
155
- marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
158
+ marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
156
159
  marginInlineEnd: '0',
157
160
  borderBottomWidth: '0',
158
161
  borderBottomColor: 'transparent',
@@ -160,21 +163,21 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
160
163
  borderInlineEndColor: 'transparent'
161
164
  },
162
165
  __after: {
163
- bottom: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
164
- marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
166
+ bottom: theme?.arrowBorderWidth,
167
+ marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
165
168
  marginInlineEnd: '0',
166
169
  borderBottomWidth: '0',
167
170
  borderBottomColor: 'transparent',
168
171
  borderInlineStartColor: 'transparent',
169
172
  borderInlineEndColor: 'transparent',
170
- borderTopColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
173
+ borderTopColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
171
174
  }
172
175
  };
173
176
  }
174
177
  return {
175
178
  main: {
176
179
  bottom: '100%',
177
- marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
180
+ marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
178
181
  marginInlineEnd: '0',
179
182
  borderTopWidth: '0',
180
183
  borderTopColor: 'transparent',
@@ -182,14 +185,14 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
182
185
  borderInlineEndColor: 'transparent'
183
186
  },
184
187
  __after: {
185
- top: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
186
- marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
188
+ top: theme?.arrowBorderWidth,
189
+ marginInlineStart: `calc(-1 * ${theme?.arrowSize})`,
187
190
  marginInlineEnd: '0',
188
191
  borderTopWidth: '0',
189
192
  borderTopColor: 'transparent',
190
193
  borderInlineStartColor: 'transparent',
191
194
  borderInlineEndColor: 'transparent',
192
- borderBottomColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
195
+ borderBottomColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
193
196
  }
194
197
  };
195
198
  };
@@ -205,9 +208,11 @@ const getArrowPlacementVariant = (placement, background, theme, props) => {
205
208
  * @return {Object} The final style object, which will be used in the component
206
209
  */
207
210
  const generateStyle = (componentTheme, props) => {
208
- const placement = props.placement,
209
- background = props.background,
210
- borderColor = props.borderColor;
211
+ const {
212
+ placement,
213
+ background,
214
+ borderColor
215
+ } = props;
211
216
  const arrowBaseStyles = {
212
217
  content: '""',
213
218
  height: '0',
@@ -219,15 +224,15 @@ const generateStyle = (componentTheme, props) => {
219
224
  borderStyle: 'solid'
220
225
  };
221
226
  const arrowBackGroundVariants = {
222
- default: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
223
- inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
227
+ default: componentTheme?.arrowBorderColor,
228
+ inverse: componentTheme?.arrowBorderColorInverse
224
229
  };
225
230
  const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme, props);
226
231
  return {
227
232
  contextView: {
228
233
  label: 'contextView',
229
234
  boxSizing: 'border-box',
230
- minHeight: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} * 2)`,
235
+ minHeight: `calc(${componentTheme?.arrowSize} * 2)`,
231
236
  ...getPlacementStyle(placement, componentTheme)
232
237
  },
233
238
  contextView__content: {
@@ -238,12 +243,12 @@ const generateStyle = (componentTheme, props) => {
238
243
  label: 'contextView__arrow',
239
244
  ...arrowBaseStyles,
240
245
  display: 'block',
241
- borderWidth: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} + ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderWidth})`,
246
+ borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`,
242
247
  borderColor: borderColor || arrowBackGroundVariants[background],
243
248
  ...arrowPlacementVariant.main,
244
249
  ...getArrowCorrections(placement, componentTheme),
245
250
  '&::after': {
246
- borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize,
251
+ borderWidth: componentTheme?.arrowSize,
247
252
  borderColor: arrowBackGroundVariants[background],
248
253
  ...arrowPlacementVariant.__after,
249
254
  ...arrowBaseStyles
package/es/ContextView/v1/theme.js CHANGED
@@ -28,13 +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$colors$contras, _theme$colors2, _theme$colors2$contra, _theme$colors3, _theme$colors3$contra;
32
31
  const componentVariables = {
33
32
  arrowSize: '0.5rem',
34
- arrowBorderWidth: theme === null || theme === void 0 ? void 0 : (_theme$borders = theme.borders) === null || _theme$borders === void 0 ? void 0 : _theme$borders.widthSmall,
35
- arrowBackgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : (_theme$colors$contras = _theme$colors.contrasts) === null || _theme$colors$contras === void 0 ? void 0 : _theme$colors$contras.white1010,
36
- arrowBorderColor: theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : (_theme$colors2$contra = _theme$colors2.contrasts) === null || _theme$colors2$contra === void 0 ? void 0 : _theme$colors2$contra.grey1424,
37
- arrowBackgroundColorInverse: theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : (_theme$colors3$contra = _theme$colors3.contrasts) === null || _theme$colors3$contra === void 0 ? void 0 : _theme$colors3$contra.grey125125,
33
+ arrowBorderWidth: theme?.borders?.widthSmall,
34
+ arrowBackgroundColor: theme?.colors?.contrasts?.white1010,
35
+ arrowBorderColor: theme?.colors?.contrasts?.grey1424,
36
+ arrowBackgroundColorInverse: theme?.colors?.contrasts?.grey125125,
38
37
  arrowBorderColorInverse: 'transparent'
39
38
  };
40
39
  return {
package/es/ContextView/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _ContextView;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -35,49 +35,62 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
35
35
  category: components
36
36
  ---
37
37
  **/
38
- let ContextView = (_dec = withStyle(generateStyle), _dec(_class = (_ContextView = class ContextView extends Component {
39
- constructor(...args) {
40
- super(...args);
41
- this.ref = null;
42
- this.handleRef = el => {
43
- const elementRef = this.props.elementRef;
44
- this.ref = el;
45
- if (typeof elementRef === 'function') {
46
- elementRef(el);
47
- }
48
- };
49
- }
38
+ let ContextView = (_dec = withStyle(generateStyle), _dec(_class = class ContextView extends Component {
39
+ static displayName = "ContextView";
40
+ static componentId = 'ContextView';
41
+ static allowedProps = allowedProps;
42
+ static defaultProps = {
43
+ as: 'span',
44
+ elementRef: () => {},
45
+ debug: false,
46
+ width: 'auto',
47
+ height: 'auto',
48
+ children: null,
49
+ textAlign: 'start',
50
+ background: 'default',
51
+ shadow: 'above',
52
+ placement: 'center end'
53
+ };
50
54
  componentDidMount() {
51
- var _this$props$makeStyle, _this$props;
52
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
55
+ this.props.makeStyles?.();
53
56
  }
54
57
  componentDidUpdate() {
55
- var _this$props$makeStyle2, _this$props2;
56
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
58
+ this.props.makeStyles?.();
57
59
  }
60
+ ref = null;
61
+ handleRef = el => {
62
+ const {
63
+ elementRef
64
+ } = this.props;
65
+ this.ref = el;
66
+ if (typeof elementRef === 'function') {
67
+ elementRef(el);
68
+ }
69
+ };
58
70
  render() {
59
- const _this$props3 = this.props,
60
- as = _this$props3.as,
61
- background = _this$props3.background,
62
- children = _this$props3.children,
63
- debug = _this$props3.debug,
64
- height = _this$props3.height,
65
- width = _this$props3.width,
66
- maxHeight = _this$props3.maxHeight,
67
- maxWidth = _this$props3.maxWidth,
68
- minHeight = _this$props3.minHeight,
69
- minWidth = _this$props3.minWidth,
70
- margin = _this$props3.margin,
71
- padding = _this$props3.padding,
72
- shadow = _this$props3.shadow,
73
- stacking = _this$props3.stacking,
74
- style = _this$props3.style,
75
- textAlign = _this$props3.textAlign,
76
- styles = _this$props3.styles,
77
- borderColor = _this$props3.borderColor;
71
+ const {
72
+ as,
73
+ background,
74
+ children,
75
+ debug,
76
+ height,
77
+ width,
78
+ maxHeight,
79
+ maxWidth,
80
+ minHeight,
81
+ minWidth,
82
+ margin,
83
+ padding,
84
+ shadow,
85
+ stacking,
86
+ style,
87
+ textAlign,
88
+ styles,
89
+ borderColor
90
+ } = this.props;
78
91
  return _jsx(View, {
79
92
  ...omitProps(this.props, ContextView.allowedProps),
80
- css: styles === null || styles === void 0 ? void 0 : styles.contextView,
93
+ css: styles?.contextView,
81
94
  style: style,
82
95
  borderWidth: "none",
83
96
  display: "inline-block",
@@ -87,9 +100,9 @@ let ContextView = (_dec = withStyle(generateStyle), _dec(_class = (_ContextView
87
100
  margin: margin,
88
101
  stacking: stacking,
89
102
  children: _jsxs(View, {
90
- css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
103
+ css: styles?.contextView__content,
91
104
  display: "block",
92
- borderRadius: styles === null || styles === void 0 ? void 0 : styles.borderRadius,
105
+ borderRadius: styles?.borderRadius,
93
106
  borderWidth: "small",
94
107
  borderColor: borderColor || (background === 'default' ? 'primary' : 'transparent'),
95
108
  background: background === 'default' ? 'primary' : 'primary-inverse',
@@ -104,22 +117,11 @@ let ContextView = (_dec = withStyle(generateStyle), _dec(_class = (_ContextView
104
117
  shadow: shadow,
105
118
  textAlign: textAlign,
106
119
  children: [_jsx("span", {
107
- css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
120
+ css: styles?.contextView__arrow
108
121
  }), children]
109
122
  })
110
123
  });
111
124
  }
112
- }, _ContextView.displayName = "ContextView", _ContextView.componentId = 'ContextView', _ContextView.allowedProps = allowedProps, _ContextView.defaultProps = {
113
- as: 'span',
114
- elementRef: () => {},
115
- debug: false,
116
- width: 'auto',
117
- height: 'auto',
118
- children: null,
119
- textAlign: 'start',
120
- background: 'default',
121
- shadow: 'above',
122
- placement: 'center end'
123
- }, _ContextView)) || _class);
125
+ }) || _class);
124
126
  export default ContextView;
125
127
  export { ContextView };