@instructure/ui-modal 8.17.1-snapshot.82 → 8.18.1-snapshot.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
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
+ # [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-modal
9
+
6
10
  # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
7
11
 
8
12
  ### Bug Fixes
@@ -67,6 +67,8 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
67
67
  }
68
68
 
69
69
  render() {
70
+ var _this$props$styles;
71
+
70
72
  const _this$props = this.props,
71
73
  as = _this$props.as,
72
74
  elementRef = _this$props.elementRef,
@@ -84,7 +86,7 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
84
86
  height: isFit ? '100%' : void 0,
85
87
  elementRef: this.handleRef,
86
88
  as: as,
87
- css: this.props.styles?.modalBody,
89
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
88
90
  padding: padding,
89
91
  tabIndex: -1 // prevent FF from focusing view when scrollable
90
92
 
@@ -30,7 +30,7 @@
30
30
  const generateComponentTheme = theme => {
31
31
  const colors = theme.colors;
32
32
  return {
33
- inverseBackground: colors?.backgroundBrandSecondary
33
+ inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary
34
34
  };
35
35
  };
36
36
 
@@ -61,12 +61,14 @@ let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
61
61
  }
62
62
 
63
63
  render() {
64
+ var _this$props$styles;
65
+
64
66
  const _this$props = this.props,
65
67
  children = _this$props.children,
66
68
  rest = _objectWithoutProperties(_this$props, _excluded);
67
69
 
68
70
  return jsx("div", Object.assign({
69
- css: this.props.styles?.modalFooter
71
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
70
72
  }, passthroughProps(rest), {
71
73
  ref: this.handleRef
72
74
  }), children);
@@ -32,13 +32,13 @@ const generateComponentTheme = theme => {
32
32
  spacing = theme.spacing,
33
33
  borders = theme.borders;
34
34
  const componentVariables = {
35
- background: colors?.backgroundLight,
36
- borderColor: colors?.borderMedium,
37
- borderWidth: borders?.widthSmall,
38
- borderRadius: borders?.radiusMedium,
39
- padding: spacing?.small,
40
- inverseBackground: colors?.backgroundDarkest,
41
- inverseBorderColor: colors?.borderDarkest
35
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
36
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
37
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
38
+ borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
39
+ padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
40
+ inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
41
+ inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest
42
42
  };
43
43
  return { ...componentVariables
44
44
  };
@@ -78,12 +78,14 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
78
78
  }
79
79
 
80
80
  render() {
81
+ var _this$props$styles;
82
+
81
83
  const _this$props = this.props,
82
84
  children = _this$props.children,
83
85
  rest = _objectWithoutProperties(_this$props, _excluded);
84
86
 
85
87
  return jsx("div", Object.assign({
86
- css: this.props.styles?.modalHeader
88
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
87
89
  }, passthroughProps(rest), {
88
90
  ref: this.handleRef
89
91
  }), children);
@@ -31,12 +31,12 @@ const generateComponentTheme = theme => {
31
31
  const colors = theme.colors,
32
32
  spacing = theme.spacing;
33
33
  const componentVariables = {
34
- background: colors?.backgroundLightest,
35
- borderColor: colors?.borderMedium,
36
- padding: spacing?.medium,
37
- paddingCompact: spacing?.small,
38
- inverseBackground: colors?.backgroundDarkest,
39
- inverseBorderColor: colors?.backgroundDarkest
34
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
35
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
36
+ padding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
37
+ paddingCompact: spacing === null || spacing === void 0 ? void 0 : spacing.small,
38
+ inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
39
+ inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest
40
40
  };
41
41
  return { ...componentVariables
42
42
  };
package/es/Modal/index.js CHANGED
@@ -162,7 +162,7 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
162
162
  shouldReturnFocus: shouldReturnFocus,
163
163
  liveRegion: liveRegion,
164
164
  onDismiss: onDismiss,
165
- css: styles?.modal,
165
+ css: styles === null || styles === void 0 ? void 0 : styles.modal,
166
166
  ref: this.contentRef // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
167
167
 
168
168
  }), this.renderChildren());
@@ -177,6 +177,8 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
177
177
  }
178
178
 
179
179
  render() {
180
+ var _this$props$styles;
181
+
180
182
  const _this$props3 = this.props,
181
183
  open = _this$props3.open,
182
184
  onOpen = _this$props3.onOpen,
@@ -214,7 +216,7 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
214
216
  onExiting: onExiting,
215
217
  onExited: createChainedFunction(this.handleTransitionExited, onExited)
216
218
  }, constrain === 'parent' ? jsx("span", {
217
- css: this.props.styles?.constrainContext
219
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext
218
220
  }, this.renderDialog(passthroughProps)) : this.renderDialog(passthroughProps)));
219
221
  }
220
222
 
package/es/Modal/theme.js CHANGED
@@ -35,19 +35,19 @@ const generateComponentTheme = theme => {
35
35
  shadows = theme.shadows,
36
36
  stacking = theme.stacking;
37
37
  const componentVariables = {
38
- fontFamily: typography?.fontFamily,
39
- textColor: colors?.textDarkest,
40
- background: colors?.backgroundLightest,
41
- borderColor: colors?.borderMedium,
42
- borderRadius: borders?.radiusMedium,
43
- inverseBackground: colors?.backgroundBrandSecondary,
44
- inverseTextColor: colors?.textLightest,
45
- autoMinWidth: breakpoints?.xSmall,
46
- smallMaxWidth: breakpoints?.small,
47
- mediumMaxWidth: breakpoints?.medium,
48
- largeMaxWidth: breakpoints?.large,
49
- boxShadow: shadows?.depth3,
50
- zIndex: stacking?.topmost
38
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
39
+ textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
40
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
41
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
42
+ borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
43
+ inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
44
+ inverseTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
45
+ autoMinWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
46
+ smallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small,
47
+ mediumMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
48
+ largeMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.large,
49
+ boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3,
50
+ zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost
51
51
  };
52
52
  return { ...componentVariables
53
53
  };
@@ -59,6 +59,8 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
59
59
  }
60
60
 
61
61
  render() {
62
+ var _this$props$styles;
63
+
62
64
  const _this$props = this.props,
63
65
  as = _this$props.as,
64
66
  elementRef = _this$props.elementRef,
@@ -77,7 +79,7 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
77
79
  height: isFit ? '100%' : void 0,
78
80
  elementRef: this.handleRef,
79
81
  as: as,
80
- css: this.props.styles?.modalBody,
82
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
81
83
  padding: padding,
82
84
  tabIndex: -1 // prevent FF from focusing view when scrollable
83
85
 
@@ -37,7 +37,7 @@ exports.default = void 0;
37
37
  const generateComponentTheme = theme => {
38
38
  const colors = theme.colors;
39
39
  return {
40
- inverseBackground: colors?.backgroundBrandSecondary
40
+ inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary
41
41
  };
42
42
  };
43
43
 
@@ -52,11 +52,13 @@ let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
52
52
  }
53
53
 
54
54
  render() {
55
+ var _this$props$styles;
56
+
55
57
  const _this$props = this.props,
56
58
  children = _this$props.children,
57
59
  rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
58
60
  return (0, _emotion.jsx)("div", Object.assign({
59
- css: this.props.styles?.modalFooter
61
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
60
62
  }, (0, _passthroughProps.passthroughProps)(rest), {
61
63
  ref: this.handleRef
62
64
  }), children);
@@ -39,13 +39,13 @@ const generateComponentTheme = theme => {
39
39
  spacing = theme.spacing,
40
40
  borders = theme.borders;
41
41
  const componentVariables = {
42
- background: colors?.backgroundLight,
43
- borderColor: colors?.borderMedium,
44
- borderWidth: borders?.widthSmall,
45
- borderRadius: borders?.radiusMedium,
46
- padding: spacing?.small,
47
- inverseBackground: colors?.backgroundDarkest,
48
- inverseBorderColor: colors?.borderDarkest
42
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
43
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
44
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
45
+ borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
46
+ padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
47
+ inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
48
+ inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest
49
49
  };
50
50
  return { ...componentVariables
51
51
  };
@@ -76,11 +76,13 @@ let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
76
76
  }
77
77
 
78
78
  render() {
79
+ var _this$props$styles;
80
+
79
81
  const _this$props = this.props,
80
82
  children = _this$props.children,
81
83
  rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
82
84
  return (0, _emotion.jsx)("div", Object.assign({
83
- css: this.props.styles?.modalHeader
85
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
84
86
  }, (0, _passthroughProps.passthroughProps)(rest), {
85
87
  ref: this.handleRef
86
88
  }), children);
@@ -38,12 +38,12 @@ const generateComponentTheme = theme => {
38
38
  const colors = theme.colors,
39
39
  spacing = theme.spacing;
40
40
  const componentVariables = {
41
- background: colors?.backgroundLightest,
42
- borderColor: colors?.borderMedium,
43
- padding: spacing?.medium,
44
- paddingCompact: spacing?.small,
45
- inverseBackground: colors?.backgroundDarkest,
46
- inverseBorderColor: colors?.backgroundDarkest
41
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
42
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
43
+ padding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
44
+ paddingCompact: spacing === null || spacing === void 0 ? void 0 : spacing.small,
45
+ inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
46
+ inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest
47
47
  };
48
48
  return { ...componentVariables
49
49
  };
@@ -186,7 +186,7 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
186
186
  shouldReturnFocus: shouldReturnFocus,
187
187
  liveRegion: liveRegion,
188
188
  onDismiss: onDismiss,
189
- css: styles?.modal,
189
+ css: styles === null || styles === void 0 ? void 0 : styles.modal,
190
190
  ref: this.contentRef // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
191
191
 
192
192
  }), this.renderChildren());
@@ -201,6 +201,8 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
201
201
  }
202
202
 
203
203
  render() {
204
+ var _this$props$styles;
205
+
204
206
  const _this$props3 = this.props,
205
207
  open = _this$props3.open,
206
208
  onOpen = _this$props3.onOpen,
@@ -237,7 +239,7 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
237
239
  onExiting: onExiting,
238
240
  onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionExited, onExited)
239
241
  }, constrain === 'parent' ? (0, _emotion.jsx)("span", {
240
- css: this.props.styles?.constrainContext
242
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext
241
243
  }, this.renderDialog(passthroughProps)) : this.renderDialog(passthroughProps)));
242
244
  }
243
245
 
@@ -42,19 +42,19 @@ const generateComponentTheme = theme => {
42
42
  shadows = theme.shadows,
43
43
  stacking = theme.stacking;
44
44
  const componentVariables = {
45
- fontFamily: typography?.fontFamily,
46
- textColor: colors?.textDarkest,
47
- background: colors?.backgroundLightest,
48
- borderColor: colors?.borderMedium,
49
- borderRadius: borders?.radiusMedium,
50
- inverseBackground: colors?.backgroundBrandSecondary,
51
- inverseTextColor: colors?.textLightest,
52
- autoMinWidth: breakpoints?.xSmall,
53
- smallMaxWidth: breakpoints?.small,
54
- mediumMaxWidth: breakpoints?.medium,
55
- largeMaxWidth: breakpoints?.large,
56
- boxShadow: shadows?.depth3,
57
- zIndex: stacking?.topmost
45
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
46
+ textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
47
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
48
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
49
+ borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
50
+ inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
51
+ inverseTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
52
+ autoMinWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
53
+ smallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small,
54
+ mediumMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
55
+ largeMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.large,
56
+ boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3,
57
+ zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost
58
58
  };
59
59
  return { ...componentVariables
60
60
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-modal",
3
- "version": "8.17.1-snapshot.82+96244a097",
3
+ "version": "8.18.1-snapshot.1+669aa5892",
4
4
  "description": "A component for displaying content in a dialog overlay",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,35 +24,35 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.17.1-snapshot.82+96244a097",
28
- "@instructure/emotion": "8.17.1-snapshot.82+96244a097",
29
- "@instructure/shared-types": "8.17.1-snapshot.82+96244a097",
30
- "@instructure/ui-buttons": "8.17.1-snapshot.82+96244a097",
31
- "@instructure/ui-dialog": "8.17.1-snapshot.82+96244a097",
32
- "@instructure/ui-motion": "8.17.1-snapshot.82+96244a097",
33
- "@instructure/ui-overlays": "8.17.1-snapshot.82+96244a097",
34
- "@instructure/ui-portal": "8.17.1-snapshot.82+96244a097",
35
- "@instructure/ui-prop-types": "8.17.1-snapshot.82+96244a097",
36
- "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
37
- "@instructure/ui-testable": "8.17.1-snapshot.82+96244a097",
38
- "@instructure/ui-utils": "8.17.1-snapshot.82+96244a097",
39
- "@instructure/ui-view": "8.17.1-snapshot.82+96244a097",
27
+ "@instructure/console": "8.18.1-snapshot.1+669aa5892",
28
+ "@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
29
+ "@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
30
+ "@instructure/ui-buttons": "8.18.1-snapshot.1+669aa5892",
31
+ "@instructure/ui-dialog": "8.18.1-snapshot.1+669aa5892",
32
+ "@instructure/ui-motion": "8.18.1-snapshot.1+669aa5892",
33
+ "@instructure/ui-overlays": "8.18.1-snapshot.1+669aa5892",
34
+ "@instructure/ui-portal": "8.18.1-snapshot.1+669aa5892",
35
+ "@instructure/ui-prop-types": "8.18.1-snapshot.1+669aa5892",
36
+ "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
37
+ "@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
38
+ "@instructure/ui-utils": "8.18.1-snapshot.1+669aa5892",
39
+ "@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
40
40
  "prop-types": "^15"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": ">=16.8 <=17"
44
44
  },
45
45
  "devDependencies": {
46
- "@instructure/ui-babel-preset": "8.17.1-snapshot.82+96244a097",
47
- "@instructure/ui-color-utils": "8.17.1-snapshot.82+96244a097",
48
- "@instructure/ui-position": "8.17.1-snapshot.82+96244a097",
49
- "@instructure/ui-test-locator": "8.17.1-snapshot.82+96244a097",
50
- "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097",
51
- "@instructure/ui-themes": "8.17.1-snapshot.82+96244a097"
46
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
47
+ "@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
48
+ "@instructure/ui-position": "8.18.1-snapshot.1+669aa5892",
49
+ "@instructure/ui-test-locator": "8.18.1-snapshot.1+669aa5892",
50
+ "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
51
+ "@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
52
52
  },
53
53
  "publishConfig": {
54
54
  "access": "public"
55
55
  },
56
56
  "sideEffects": false,
57
- "gitHead": "96244a097dffef5f10bbe7979c580581c787083e"
57
+ "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
58
58
  }