@instructure/ui-modal 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.
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.
@@ -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.18.0",
3
+ "version": "8.18.1-snapshot.12+ca14b3dc8",
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,34 +24,35 @@
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-buttons": "8.18.0",
31
- "@instructure/ui-dialog": "8.18.0",
32
- "@instructure/ui-motion": "8.18.0",
33
- "@instructure/ui-overlays": "8.18.0",
34
- "@instructure/ui-portal": "8.18.0",
35
- "@instructure/ui-prop-types": "8.18.0",
36
- "@instructure/ui-react-utils": "8.18.0",
37
- "@instructure/ui-testable": "8.18.0",
38
- "@instructure/ui-utils": "8.18.0",
39
- "@instructure/ui-view": "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-buttons": "8.18.1-snapshot.12+ca14b3dc8",
31
+ "@instructure/ui-dialog": "8.18.1-snapshot.12+ca14b3dc8",
32
+ "@instructure/ui-motion": "8.18.1-snapshot.12+ca14b3dc8",
33
+ "@instructure/ui-overlays": "8.18.1-snapshot.12+ca14b3dc8",
34
+ "@instructure/ui-portal": "8.18.1-snapshot.12+ca14b3dc8",
35
+ "@instructure/ui-prop-types": "8.18.1-snapshot.12+ca14b3dc8",
36
+ "@instructure/ui-react-utils": "8.18.1-snapshot.12+ca14b3dc8",
37
+ "@instructure/ui-testable": "8.18.1-snapshot.12+ca14b3dc8",
38
+ "@instructure/ui-utils": "8.18.1-snapshot.12+ca14b3dc8",
39
+ "@instructure/ui-view": "8.18.1-snapshot.12+ca14b3dc8",
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.18.0",
47
- "@instructure/ui-color-utils": "8.18.0",
48
- "@instructure/ui-position": "8.18.0",
49
- "@instructure/ui-test-locator": "8.18.0",
50
- "@instructure/ui-test-utils": "8.18.0",
51
- "@instructure/ui-themes": "8.18.0"
46
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.12+ca14b3dc8",
47
+ "@instructure/ui-color-utils": "8.18.1-snapshot.12+ca14b3dc8",
48
+ "@instructure/ui-position": "8.18.1-snapshot.12+ca14b3dc8",
49
+ "@instructure/ui-test-locator": "8.18.1-snapshot.12+ca14b3dc8",
50
+ "@instructure/ui-test-utils": "8.18.1-snapshot.12+ca14b3dc8",
51
+ "@instructure/ui-themes": "8.18.1-snapshot.12+ca14b3dc8"
52
52
  },
53
53
  "publishConfig": {
54
54
  "access": "public"
55
55
  },
56
- "sideEffects": false
56
+ "sideEffects": false,
57
+ "gitHead": "ca14b3dc8f0315daef7b86aa05f711e6d6684c58"
57
58
  }