@instructure/ui-modal 8.10.1-snapshot.9 → 8.10.3-snapshot.10
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 +8 -0
- package/es/Modal/ModalBody/index.js +21 -9
- package/es/Modal/ModalFooter/index.js +12 -1
- package/es/Modal/ModalHeader/index.js +8 -1
- package/es/Modal/index.js +7 -1
- package/lib/Modal/ModalBody/index.js +21 -9
- package/lib/Modal/ModalFooter/index.js +12 -1
- package/lib/Modal/ModalHeader/index.js +8 -1
- package/lib/Modal/index.js +7 -1
- package/package.json +21 -21
- package/src/Modal/ModalBody/index.tsx +8 -1
- package/src/Modal/ModalBody/props.ts +1 -1
- package/src/Modal/ModalFooter/index.tsx +11 -1
- package/src/Modal/ModalHeader/index.tsx +11 -1
- package/src/Modal/index.tsx +7 -0
- package/types/Modal/ModalBody/index.d.ts +16 -2
- package/types/Modal/ModalBody/index.d.ts.map +1 -1
- package/types/Modal/ModalBody/props.d.ts +1 -1
- package/types/Modal/ModalBody/props.d.ts.map +1 -1
- package/types/Modal/ModalFooter/index.d.ts +2 -0
- package/types/Modal/ModalFooter/index.d.ts.map +1 -1
- package/types/Modal/ModalHeader/index.d.ts +2 -0
- package/types/Modal/ModalHeader/index.d.ts.map +1 -1
- package/types/Modal/ModalLocator.d.ts +304 -304
- package/types/Modal/index.d.ts +3 -1
- package/types/Modal/index.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-modal
|
|
9
|
+
|
|
10
|
+
## [8.10.1](https://github.com/instructure/instructure-ui/compare/v8.10.0...v8.10.1) (2021-10-01)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @instructure/ui-modal
|
|
13
|
+
|
|
6
14
|
# [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @instructure/ui-modal
|
|
@@ -44,6 +44,18 @@ id: Modal.Body
|
|
|
44
44
|
---
|
|
45
45
|
**/
|
|
46
46
|
let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ModalBody extends Component {
|
|
47
|
+
constructor(...args) {
|
|
48
|
+
super(...args);
|
|
49
|
+
this.ref = null;
|
|
50
|
+
|
|
51
|
+
this.handleRef = el => {
|
|
52
|
+
var _this$props$elementRe, _this$props;
|
|
53
|
+
|
|
54
|
+
this.ref = el;
|
|
55
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
|
|
47
59
|
componentDidMount() {
|
|
48
60
|
this.props.makeStyles();
|
|
49
61
|
}
|
|
@@ -55,14 +67,14 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
|
|
|
55
67
|
render() {
|
|
56
68
|
var _this$props$styles;
|
|
57
69
|
|
|
58
|
-
const _this$
|
|
59
|
-
as = _this$
|
|
60
|
-
elementRef = _this$
|
|
61
|
-
overflow = _this$
|
|
62
|
-
variant = _this$
|
|
63
|
-
padding = _this$
|
|
64
|
-
children = _this$
|
|
65
|
-
rest = _objectWithoutProperties(_this$
|
|
70
|
+
const _this$props2 = this.props,
|
|
71
|
+
as = _this$props2.as,
|
|
72
|
+
elementRef = _this$props2.elementRef,
|
|
73
|
+
overflow = _this$props2.overflow,
|
|
74
|
+
variant = _this$props2.variant,
|
|
75
|
+
padding = _this$props2.padding,
|
|
76
|
+
children = _this$props2.children,
|
|
77
|
+
rest = _objectWithoutProperties(_this$props2, _excluded);
|
|
66
78
|
|
|
67
79
|
const passthroughProps = View.omitViewProps(omitProps(rest, ModalBody.allowedProps), ModalBody);
|
|
68
80
|
const isFit = overflow === 'fit';
|
|
@@ -70,7 +82,7 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
|
|
|
70
82
|
display: "block",
|
|
71
83
|
width: isFit ? '100%' : void 0,
|
|
72
84
|
height: isFit ? '100%' : void 0,
|
|
73
|
-
elementRef:
|
|
85
|
+
elementRef: this.handleRef,
|
|
74
86
|
as: as,
|
|
75
87
|
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
|
|
76
88
|
padding: padding,
|
|
@@ -43,6 +43,15 @@ id: Modal.Footer
|
|
|
43
43
|
---
|
|
44
44
|
**/
|
|
45
45
|
let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ModalFooter extends Component {
|
|
46
|
+
constructor(...args) {
|
|
47
|
+
super(...args);
|
|
48
|
+
this.ref = null;
|
|
49
|
+
|
|
50
|
+
this.handleRef = el => {
|
|
51
|
+
this.ref = el;
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
|
|
46
55
|
componentDidMount() {
|
|
47
56
|
this.props.makeStyles();
|
|
48
57
|
}
|
|
@@ -60,7 +69,9 @@ let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
60
69
|
|
|
61
70
|
return jsx("div", Object.assign({
|
|
62
71
|
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
|
|
63
|
-
}, passthroughProps(rest)
|
|
72
|
+
}, passthroughProps(rest), {
|
|
73
|
+
ref: this.handleRef
|
|
74
|
+
}), children);
|
|
64
75
|
}
|
|
65
76
|
|
|
66
77
|
}, _class2.displayName = "ModalFooter", _class2.componentId = 'Modal.Footer', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
@@ -46,6 +46,11 @@ id: Modal.Header
|
|
|
46
46
|
let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class ModalHeader extends Component {
|
|
47
47
|
constructor(...args) {
|
|
48
48
|
super(...args);
|
|
49
|
+
this.ref = null;
|
|
50
|
+
|
|
51
|
+
this.handleRef = el => {
|
|
52
|
+
this.ref = el;
|
|
53
|
+
};
|
|
49
54
|
|
|
50
55
|
this.makeStyleProps = () => {
|
|
51
56
|
return {
|
|
@@ -80,7 +85,9 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
80
85
|
|
|
81
86
|
return jsx("div", Object.assign({
|
|
82
87
|
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
|
|
83
|
-
}, passthroughProps(rest)
|
|
88
|
+
}, passthroughProps(rest), {
|
|
89
|
+
ref: this.handleRef
|
|
90
|
+
}), children);
|
|
84
91
|
}
|
|
85
92
|
|
|
86
93
|
}, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
package/es/Modal/index.js
CHANGED
|
@@ -54,6 +54,11 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
|
|
|
54
54
|
constructor(props) {
|
|
55
55
|
super(props);
|
|
56
56
|
this._DOMNode = null;
|
|
57
|
+
this.ref = null;
|
|
58
|
+
|
|
59
|
+
this.handleRef = el => {
|
|
60
|
+
this.ref = el;
|
|
61
|
+
};
|
|
57
62
|
|
|
58
63
|
this.handlePortalOpen = DOMNode => {
|
|
59
64
|
this.DOMNode = DOMNode;
|
|
@@ -197,7 +202,8 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
|
|
|
197
202
|
insertAt: insertAt,
|
|
198
203
|
open: portalIsOpen,
|
|
199
204
|
onOpen: createChainedFunction(this.handlePortalOpen, onOpen),
|
|
200
|
-
onClose: onClose
|
|
205
|
+
onClose: onClose,
|
|
206
|
+
elementRef: this.handleRef
|
|
201
207
|
}, portalIsOpen && jsx(Transition, {
|
|
202
208
|
in: open,
|
|
203
209
|
transitionOnMount: true,
|
|
@@ -36,6 +36,18 @@ id: Modal.Body
|
|
|
36
36
|
---
|
|
37
37
|
**/
|
|
38
38
|
let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class ModalBody extends _react.Component {
|
|
39
|
+
constructor(...args) {
|
|
40
|
+
super(...args);
|
|
41
|
+
this.ref = null;
|
|
42
|
+
|
|
43
|
+
this.handleRef = el => {
|
|
44
|
+
var _this$props$elementRe, _this$props;
|
|
45
|
+
|
|
46
|
+
this.ref = el;
|
|
47
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
|
|
39
51
|
componentDidMount() {
|
|
40
52
|
this.props.makeStyles();
|
|
41
53
|
}
|
|
@@ -47,14 +59,14 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
|
47
59
|
render() {
|
|
48
60
|
var _this$props$styles;
|
|
49
61
|
|
|
50
|
-
const _this$
|
|
51
|
-
as = _this$
|
|
52
|
-
elementRef = _this$
|
|
53
|
-
overflow = _this$
|
|
54
|
-
variant = _this$
|
|
55
|
-
padding = _this$
|
|
56
|
-
children = _this$
|
|
57
|
-
rest = (0, _objectWithoutProperties2.default)(_this$
|
|
62
|
+
const _this$props2 = this.props,
|
|
63
|
+
as = _this$props2.as,
|
|
64
|
+
elementRef = _this$props2.elementRef,
|
|
65
|
+
overflow = _this$props2.overflow,
|
|
66
|
+
variant = _this$props2.variant,
|
|
67
|
+
padding = _this$props2.padding,
|
|
68
|
+
children = _this$props2.children,
|
|
69
|
+
rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
|
|
58
70
|
|
|
59
71
|
const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
|
|
60
72
|
|
|
@@ -63,7 +75,7 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
|
63
75
|
display: "block",
|
|
64
76
|
width: isFit ? '100%' : void 0,
|
|
65
77
|
height: isFit ? '100%' : void 0,
|
|
66
|
-
elementRef:
|
|
78
|
+
elementRef: this.handleRef,
|
|
67
79
|
as: as,
|
|
68
80
|
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
|
|
69
81
|
padding: padding,
|
|
@@ -34,6 +34,15 @@ id: Modal.Footer
|
|
|
34
34
|
---
|
|
35
35
|
**/
|
|
36
36
|
let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class ModalFooter extends _react.Component {
|
|
37
|
+
constructor(...args) {
|
|
38
|
+
super(...args);
|
|
39
|
+
this.ref = null;
|
|
40
|
+
|
|
41
|
+
this.handleRef = el => {
|
|
42
|
+
this.ref = el;
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
37
46
|
componentDidMount() {
|
|
38
47
|
this.props.makeStyles();
|
|
39
48
|
}
|
|
@@ -50,7 +59,9 @@ let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
|
|
|
50
59
|
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
51
60
|
return (0, _emotion.jsx)("div", Object.assign({
|
|
52
61
|
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
|
|
53
|
-
}, (0, _passthroughProps.passthroughProps)(rest)
|
|
62
|
+
}, (0, _passthroughProps.passthroughProps)(rest), {
|
|
63
|
+
ref: this.handleRef
|
|
64
|
+
}), children);
|
|
54
65
|
}
|
|
55
66
|
|
|
56
67
|
}, _class2.displayName = "ModalFooter", _class2.componentId = 'Modal.Footer', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
@@ -42,6 +42,11 @@ id: Modal.Header
|
|
|
42
42
|
let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class ModalHeader extends _react.Component {
|
|
43
43
|
constructor(...args) {
|
|
44
44
|
super(...args);
|
|
45
|
+
this.ref = null;
|
|
46
|
+
|
|
47
|
+
this.handleRef = el => {
|
|
48
|
+
this.ref = el;
|
|
49
|
+
};
|
|
45
50
|
|
|
46
51
|
this.makeStyleProps = () => {
|
|
47
52
|
return {
|
|
@@ -76,7 +81,9 @@ let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
|
|
|
76
81
|
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
77
82
|
return (0, _emotion.jsx)("div", Object.assign({
|
|
78
83
|
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
|
|
79
|
-
}, (0, _passthroughProps.passthroughProps)(rest)
|
|
84
|
+
}, (0, _passthroughProps.passthroughProps)(rest), {
|
|
85
|
+
ref: this.handleRef
|
|
86
|
+
}), children);
|
|
80
87
|
}
|
|
81
88
|
|
|
82
89
|
}, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
package/lib/Modal/index.js
CHANGED
|
@@ -75,6 +75,11 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
|
|
|
75
75
|
constructor(props) {
|
|
76
76
|
super(props);
|
|
77
77
|
this._DOMNode = null;
|
|
78
|
+
this.ref = null;
|
|
79
|
+
|
|
80
|
+
this.handleRef = el => {
|
|
81
|
+
this.ref = el;
|
|
82
|
+
};
|
|
78
83
|
|
|
79
84
|
this.handlePortalOpen = DOMNode => {
|
|
80
85
|
this.DOMNode = DOMNode;
|
|
@@ -217,7 +222,8 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
|
|
|
217
222
|
insertAt: insertAt,
|
|
218
223
|
open: portalIsOpen,
|
|
219
224
|
onOpen: (0, _createChainedFunction.createChainedFunction)(this.handlePortalOpen, onOpen),
|
|
220
|
-
onClose: onClose
|
|
225
|
+
onClose: onClose,
|
|
226
|
+
elementRef: this.handleRef
|
|
221
227
|
}, portalIsOpen && (0, _emotion.jsx)(_Transition.Transition, {
|
|
222
228
|
in: open,
|
|
223
229
|
transitionOnMount: true,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-modal",
|
|
3
|
-
"version": "8.10.
|
|
3
|
+
"version": "8.10.3-snapshot.10+cca148595",
|
|
4
4
|
"description": "A component for displaying content in a dialog overlay",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -25,35 +25,35 @@
|
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@babel/runtime": "^7.13.10",
|
|
28
|
-
"@instructure/console": "8.10.
|
|
29
|
-
"@instructure/emotion": "8.10.
|
|
30
|
-
"@instructure/shared-types": "8.10.
|
|
31
|
-
"@instructure/ui-buttons": "8.10.
|
|
32
|
-
"@instructure/ui-dialog": "8.10.
|
|
33
|
-
"@instructure/ui-motion": "8.10.
|
|
34
|
-
"@instructure/ui-overlays": "8.10.
|
|
35
|
-
"@instructure/ui-portal": "8.10.
|
|
36
|
-
"@instructure/ui-prop-types": "8.10.
|
|
37
|
-
"@instructure/ui-react-utils": "8.10.
|
|
38
|
-
"@instructure/ui-testable": "8.10.
|
|
39
|
-
"@instructure/ui-utils": "8.10.
|
|
40
|
-
"@instructure/ui-view": "8.10.
|
|
28
|
+
"@instructure/console": "8.10.3-snapshot.10+cca148595",
|
|
29
|
+
"@instructure/emotion": "8.10.3-snapshot.10+cca148595",
|
|
30
|
+
"@instructure/shared-types": "8.10.3-snapshot.10+cca148595",
|
|
31
|
+
"@instructure/ui-buttons": "8.10.3-snapshot.10+cca148595",
|
|
32
|
+
"@instructure/ui-dialog": "8.10.3-snapshot.10+cca148595",
|
|
33
|
+
"@instructure/ui-motion": "8.10.3-snapshot.10+cca148595",
|
|
34
|
+
"@instructure/ui-overlays": "8.10.3-snapshot.10+cca148595",
|
|
35
|
+
"@instructure/ui-portal": "8.10.3-snapshot.10+cca148595",
|
|
36
|
+
"@instructure/ui-prop-types": "8.10.3-snapshot.10+cca148595",
|
|
37
|
+
"@instructure/ui-react-utils": "8.10.3-snapshot.10+cca148595",
|
|
38
|
+
"@instructure/ui-testable": "8.10.3-snapshot.10+cca148595",
|
|
39
|
+
"@instructure/ui-utils": "8.10.3-snapshot.10+cca148595",
|
|
40
|
+
"@instructure/ui-view": "8.10.3-snapshot.10+cca148595",
|
|
41
41
|
"prop-types": "^15"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": ">=16.8 <=17"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@instructure/ui-babel-preset": "8.10.
|
|
48
|
-
"@instructure/ui-color-utils": "8.10.
|
|
49
|
-
"@instructure/ui-position": "8.10.
|
|
50
|
-
"@instructure/ui-test-locator": "8.10.
|
|
51
|
-
"@instructure/ui-test-utils": "8.10.
|
|
52
|
-
"@instructure/ui-themes": "8.10.
|
|
47
|
+
"@instructure/ui-babel-preset": "8.10.3-snapshot.10+cca148595",
|
|
48
|
+
"@instructure/ui-color-utils": "8.10.3-snapshot.10+cca148595",
|
|
49
|
+
"@instructure/ui-position": "8.10.3-snapshot.10+cca148595",
|
|
50
|
+
"@instructure/ui-test-locator": "8.10.3-snapshot.10+cca148595",
|
|
51
|
+
"@instructure/ui-test-utils": "8.10.3-snapshot.10+cca148595",
|
|
52
|
+
"@instructure/ui-themes": "8.10.3-snapshot.10+cca148595"
|
|
53
53
|
},
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
57
|
"sideEffects": false,
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "cca1485957b780165ac6b283afc28f4bba1eda06"
|
|
59
59
|
}
|
|
@@ -56,6 +56,13 @@ class ModalBody extends Component<ModalBodyProps> {
|
|
|
56
56
|
children: null
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
ref: Element | null = null
|
|
60
|
+
|
|
61
|
+
handleRef = (el: Element | null) => {
|
|
62
|
+
this.ref = el
|
|
63
|
+
this.props.elementRef?.(el)
|
|
64
|
+
}
|
|
65
|
+
|
|
59
66
|
componentDidMount() {
|
|
60
67
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
61
68
|
this.props.makeStyles()
|
|
@@ -90,7 +97,7 @@ class ModalBody extends Component<ModalBodyProps> {
|
|
|
90
97
|
display="block"
|
|
91
98
|
width={isFit ? '100%' : undefined}
|
|
92
99
|
height={isFit ? '100%' : undefined}
|
|
93
|
-
elementRef={
|
|
100
|
+
elementRef={this.handleRef}
|
|
94
101
|
as={as}
|
|
95
102
|
css={this.props.styles?.modalBody}
|
|
96
103
|
padding={padding}
|
|
@@ -41,7 +41,7 @@ import type {
|
|
|
41
41
|
type ModalBodyOwnProps = {
|
|
42
42
|
children?: React.ReactNode
|
|
43
43
|
padding?: Spacing
|
|
44
|
-
elementRef?: (
|
|
44
|
+
elementRef?: (element: Element | null) => void
|
|
45
45
|
as?: AsElementType
|
|
46
46
|
variant?: 'default' | 'inverse'
|
|
47
47
|
overflow?: 'scroll' | 'fit'
|
|
@@ -52,6 +52,12 @@ class ModalFooter extends Component<ModalFooterProps> {
|
|
|
52
52
|
children: null
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
ref: Element | null = null
|
|
56
|
+
|
|
57
|
+
handleRef = (el: Element | null) => {
|
|
58
|
+
this.ref = el
|
|
59
|
+
}
|
|
60
|
+
|
|
55
61
|
componentDidMount() {
|
|
56
62
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
57
63
|
this.props.makeStyles()
|
|
@@ -67,7 +73,11 @@ class ModalFooter extends Component<ModalFooterProps> {
|
|
|
67
73
|
const { children, ...rest } = this.props
|
|
68
74
|
|
|
69
75
|
return (
|
|
70
|
-
<div
|
|
76
|
+
<div
|
|
77
|
+
css={this.props.styles?.modalFooter}
|
|
78
|
+
{...passthroughProps(rest)}
|
|
79
|
+
ref={this.handleRef}
|
|
80
|
+
>
|
|
71
81
|
{children}
|
|
72
82
|
</div>
|
|
73
83
|
)
|
|
@@ -57,6 +57,12 @@ class ModalHeader extends Component<ModalHeaderProps> {
|
|
|
57
57
|
variant: 'default'
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
+
ref: Element | null = null
|
|
61
|
+
|
|
62
|
+
handleRef = (el: Element | null) => {
|
|
63
|
+
this.ref = el
|
|
64
|
+
}
|
|
65
|
+
|
|
60
66
|
componentDidMount() {
|
|
61
67
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
62
68
|
this.props.makeStyles(this.makeStyleProps())
|
|
@@ -88,7 +94,11 @@ class ModalHeader extends Component<ModalHeaderProps> {
|
|
|
88
94
|
const { children, ...rest } = this.props
|
|
89
95
|
|
|
90
96
|
return (
|
|
91
|
-
<div
|
|
97
|
+
<div
|
|
98
|
+
css={this.props.styles?.modalHeader}
|
|
99
|
+
{...passthroughProps(rest)}
|
|
100
|
+
ref={this.handleRef}
|
|
101
|
+
>
|
|
92
102
|
{children}
|
|
93
103
|
</div>
|
|
94
104
|
)
|
package/src/Modal/index.tsx
CHANGED
|
@@ -107,6 +107,12 @@ class Modal extends Component<ModalProps> {
|
|
|
107
107
|
|
|
108
108
|
_DOMNode: PortalNode = null
|
|
109
109
|
|
|
110
|
+
ref?: Element | null = null
|
|
111
|
+
|
|
112
|
+
handleRef = (el?: Element | null) => {
|
|
113
|
+
this.ref = el
|
|
114
|
+
}
|
|
115
|
+
|
|
110
116
|
componentDidMount() {
|
|
111
117
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
112
118
|
this.props.makeStyles()
|
|
@@ -261,6 +267,7 @@ class Modal extends Component<ModalProps> {
|
|
|
261
267
|
open={portalIsOpen}
|
|
262
268
|
onOpen={createChainedFunction(this.handlePortalOpen, onOpen)}
|
|
263
269
|
onClose={onClose}
|
|
270
|
+
elementRef={this.handleRef}
|
|
264
271
|
>
|
|
265
272
|
{portalIsOpen && (
|
|
266
273
|
<Transition
|
|
@@ -13,7 +13,13 @@ declare class ModalBody extends Component<ModalBodyProps> {
|
|
|
13
13
|
static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
|
|
14
14
|
children?: import("react").ReactNode;
|
|
15
15
|
padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
|
|
16
|
-
elementRef?: ((
|
|
16
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
17
|
+
/**
|
|
18
|
+
---
|
|
19
|
+
parent: Modal
|
|
20
|
+
id: Modal.Body
|
|
21
|
+
---
|
|
22
|
+
**/
|
|
17
23
|
as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
|
|
18
24
|
variant?: "default" | "inverse" | undefined;
|
|
19
25
|
overflow?: "scroll" | "fit" | undefined;
|
|
@@ -21,7 +27,13 @@ declare class ModalBody extends Component<ModalBodyProps> {
|
|
|
21
27
|
static allowedProps: readonly (keyof {
|
|
22
28
|
children?: import("react").ReactNode;
|
|
23
29
|
padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
|
|
24
|
-
elementRef?: ((
|
|
30
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
31
|
+
/**
|
|
32
|
+
---
|
|
33
|
+
parent: Modal
|
|
34
|
+
id: Modal.Body
|
|
35
|
+
---
|
|
36
|
+
**/
|
|
25
37
|
as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
|
|
26
38
|
variant?: "default" | "inverse" | undefined;
|
|
27
39
|
overflow?: "scroll" | "fit" | undefined;
|
|
@@ -32,6 +44,8 @@ declare class ModalBody extends Component<ModalBodyProps> {
|
|
|
32
44
|
variant: string;
|
|
33
45
|
children: null;
|
|
34
46
|
};
|
|
47
|
+
ref: Element | null;
|
|
48
|
+
handleRef: (el: Element | null) => void;
|
|
35
49
|
componentDidMount(): void;
|
|
36
50
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
37
51
|
render(): jsx.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalBody/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;GAKG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,SAAS
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalBody/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;GAKG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,SAAS;;;;QAXlB;;;;;WAKG;;;;OAM2B;IAC5B,MAAM,CAAC,YAAY;;;;QAZrB;;;;;WAKG;;;;SAOiC;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;CAiCP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}
|
|
@@ -4,7 +4,7 @@ import type { AsElementType, PropValidators, ModalBodyTheme } from '@instructure
|
|
|
4
4
|
declare type ModalBodyOwnProps = {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
padding?: Spacing;
|
|
7
|
-
elementRef?: (
|
|
7
|
+
elementRef?: (element: Element | null) => void;
|
|
8
8
|
as?: AsElementType;
|
|
9
9
|
variant?: 'default' | 'inverse';
|
|
10
10
|
overflow?: 'scroll' | 'fit';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalBody/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,cAAc,EACf,MAAM,2BAA2B,CAAA;AAElC,aAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalBody/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,cAAc,EACf,MAAM,2BAA2B,CAAA;AAElC,aAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAC5B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,GACrC,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAEjD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAOvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAOnB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -22,6 +22,8 @@ declare class ModalFooter extends Component<ModalFooterProps> {
|
|
|
22
22
|
variant: string;
|
|
23
23
|
children: null;
|
|
24
24
|
};
|
|
25
|
+
ref: Element | null;
|
|
26
|
+
handleRef: (el: Element | null) => void;
|
|
25
27
|
componentDidMount(): void;
|
|
26
28
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
27
29
|
render(): jsx.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalFooter/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;;GAKG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalFooter/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;;GAKG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;CAaP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -22,6 +22,8 @@ declare class ModalHeader extends Component<ModalHeaderProps> {
|
|
|
22
22
|
children: null;
|
|
23
23
|
variant: string;
|
|
24
24
|
};
|
|
25
|
+
ref: Element | null;
|
|
26
|
+
handleRef: (el: Element | null) => void;
|
|
25
27
|
componentDidMount(): void;
|
|
26
28
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
27
29
|
makeStyleProps: () => ModalHeaderStyleProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQxC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEtE;;;;;GAKG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,cAAc,QAAO,qBAAqB,CAIzC;IAED,IAAI,eAAe,YAQlB;IAED,MAAM;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQxC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEtE;;;;;GAKG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,cAAc,QAAO,qBAAqB,CAIzC;IAED,IAAI,eAAe,YAQlB;IAED,MAAM;CAaP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
|