@instructure/ui-form-field 8.10.1 → 8.10.2-snapshot.22
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 +27 -0
- package/es/FormField/index.js +14 -1
- package/es/FormField/props.js +3 -2
- package/es/FormFieldGroup/index.js +18 -5
- package/es/FormFieldGroup/props.js +3 -2
- package/es/FormFieldLabel/index.js +11 -1
- package/es/FormFieldLayout/index.js +14 -5
- package/es/FormFieldLayout/props.js +3 -2
- package/es/FormFieldMessage/index.js +14 -2
- package/es/FormFieldMessages/index.js +12 -1
- package/lib/FormField/index.js +14 -1
- package/lib/FormField/props.js +3 -2
- package/lib/FormFieldGroup/index.js +18 -5
- package/lib/FormFieldGroup/props.js +3 -2
- package/lib/FormFieldLabel/index.js +11 -1
- package/lib/FormFieldLayout/index.js +14 -5
- package/lib/FormFieldLayout/props.js +3 -2
- package/lib/FormFieldMessage/index.js +14 -2
- package/lib/FormFieldMessages/index.js +12 -1
- package/package.json +16 -15
- package/src/FormField/index.tsx +8 -0
- package/src/FormField/props.ts +5 -2
- package/src/FormFieldGroup/index.tsx +8 -0
- package/src/FormFieldGroup/props.ts +5 -2
- package/src/FormFieldLabel/index.tsx +8 -0
- package/src/FormFieldLayout/index.tsx +8 -0
- package/src/FormFieldLayout/props.ts +5 -2
- package/src/FormFieldMessage/index.tsx +12 -2
- package/src/FormFieldMessages/index.tsx +7 -0
- package/types/FormField/index.d.ts +4 -0
- package/types/FormField/index.d.ts.map +1 -1
- package/types/FormField/props.d.ts +1 -0
- package/types/FormField/props.d.ts.map +1 -1
- package/types/FormFieldGroup/index.d.ts +4 -0
- package/types/FormFieldGroup/index.d.ts.map +1 -1
- package/types/FormFieldGroup/props.d.ts +1 -0
- package/types/FormFieldGroup/props.d.ts.map +1 -1
- package/types/FormFieldLabel/index.d.ts +2 -0
- package/types/FormFieldLabel/index.d.ts.map +1 -1
- package/types/FormFieldLayout/index.d.ts +4 -0
- package/types/FormFieldLayout/index.d.ts.map +1 -1
- package/types/FormFieldLayout/props.d.ts +1 -0
- package/types/FormFieldLayout/props.d.ts.map +1 -1
- package/types/FormFieldMessage/index.d.ts +2 -0
- package/types/FormFieldMessage/index.d.ts.map +1 -1
- package/types/FormFieldMessages/index.d.ts +2 -0
- package/types/FormFieldMessages/index.d.ts.map +1 -1
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.
|
package/es/FormField/index.js
CHANGED
|
@@ -32,11 +32,24 @@ category: components
|
|
|
32
32
|
---
|
|
33
33
|
**/
|
|
34
34
|
class FormField extends Component {
|
|
35
|
+
constructor(...args) {
|
|
36
|
+
super(...args);
|
|
37
|
+
this.ref = null;
|
|
38
|
+
|
|
39
|
+
this.handleRef = el => {
|
|
40
|
+
var _this$props$elementRe, _this$props;
|
|
41
|
+
|
|
42
|
+
this.ref = el;
|
|
43
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
|
|
35
47
|
render() {
|
|
36
48
|
return /*#__PURE__*/React.createElement(FormFieldLayout, Object.assign({}, omitProps(this.props, FormField.allowedProps), pickProps(this.props, FormFieldLayout.allowedProps), {
|
|
37
49
|
vAlign: this.props.vAlign,
|
|
38
50
|
as: "label",
|
|
39
|
-
htmlFor: this.props.id
|
|
51
|
+
htmlFor: this.props.id,
|
|
52
|
+
elementRef: this.handleRef
|
|
40
53
|
}));
|
|
41
54
|
}
|
|
42
55
|
|
package/es/FormField/props.js
CHANGED
|
@@ -45,7 +45,8 @@ const propTypes = {
|
|
|
45
45
|
labelAlign: PropTypes.oneOf(['start', 'end']),
|
|
46
46
|
vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
|
|
47
47
|
width: PropTypes.string,
|
|
48
|
-
inputContainerRef: PropTypes.func
|
|
48
|
+
inputContainerRef: PropTypes.func,
|
|
49
|
+
elementRef: PropTypes.func
|
|
49
50
|
};
|
|
50
|
-
const allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef'];
|
|
51
|
+
const allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef', 'elementRef'];
|
|
51
52
|
export { propTypes, allowedProps };
|
|
@@ -43,6 +43,18 @@ category: components
|
|
|
43
43
|
---
|
|
44
44
|
**/
|
|
45
45
|
let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class FormFieldGroup extends Component {
|
|
46
|
+
constructor(...args) {
|
|
47
|
+
super(...args);
|
|
48
|
+
this.ref = null;
|
|
49
|
+
|
|
50
|
+
this.handleRef = el => {
|
|
51
|
+
var _this$props$elementRe, _this$props;
|
|
52
|
+
|
|
53
|
+
this.ref = el;
|
|
54
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
|
|
46
58
|
componentDidMount() {
|
|
47
59
|
this.props.makeStyles(this.makeStylesVariables);
|
|
48
60
|
}
|
|
@@ -90,17 +102,18 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
90
102
|
}
|
|
91
103
|
|
|
92
104
|
render() {
|
|
93
|
-
const _this$
|
|
94
|
-
styles = _this$
|
|
95
|
-
makeStyles = _this$
|
|
96
|
-
props = _objectWithoutProperties(_this$
|
|
105
|
+
const _this$props2 = this.props,
|
|
106
|
+
styles = _this$props2.styles,
|
|
107
|
+
makeStyles = _this$props2.makeStyles,
|
|
108
|
+
props = _objectWithoutProperties(_this$props2, _excluded);
|
|
97
109
|
|
|
98
110
|
return jsx(FormFieldLayout, Object.assign({}, omitProps(props, FormFieldGroup.allowedProps), pickProps(props, FormFieldLayout.allowedProps), {
|
|
99
111
|
vAlign: props.vAlign,
|
|
100
112
|
layout: props.layout === 'inline' ? 'inline' : 'stacked',
|
|
101
113
|
label: props.description,
|
|
102
114
|
"aria-disabled": props.disabled ? 'true' : null,
|
|
103
|
-
"aria-invalid": this.invalid ? 'true' : null
|
|
115
|
+
"aria-invalid": this.invalid ? 'true' : null,
|
|
116
|
+
elementRef: this.handleRef
|
|
104
117
|
}), this.renderFields());
|
|
105
118
|
}
|
|
106
119
|
|
|
@@ -49,7 +49,8 @@ const propTypes = {
|
|
|
49
49
|
rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
|
|
50
50
|
colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
|
|
51
51
|
vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
|
|
52
|
-
startAt: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null])
|
|
52
|
+
startAt: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null]),
|
|
53
|
+
elementRef: PropTypes.func
|
|
53
54
|
};
|
|
54
|
-
const allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt'];
|
|
55
|
+
const allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt', 'elementRef'];
|
|
55
56
|
export { propTypes, allowedProps };
|
|
@@ -49,6 +49,15 @@ example: true
|
|
|
49
49
|
|
|
50
50
|
**/
|
|
51
51
|
let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class FormFieldLabel extends Component {
|
|
52
|
+
constructor(...args) {
|
|
53
|
+
super(...args);
|
|
54
|
+
this.ref = null;
|
|
55
|
+
|
|
56
|
+
this.handleRef = el => {
|
|
57
|
+
this.ref = el;
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
|
|
52
61
|
componentDidMount() {
|
|
53
62
|
this.props.makeStyles();
|
|
54
63
|
}
|
|
@@ -63,7 +72,8 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
63
72
|
styles = _this$props.styles,
|
|
64
73
|
children = _this$props.children;
|
|
65
74
|
return jsx(ElementType, Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
|
|
66
|
-
css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel
|
|
75
|
+
css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
|
|
76
|
+
ref: this.handleRef
|
|
67
77
|
}), children);
|
|
68
78
|
}
|
|
69
79
|
|
|
@@ -49,6 +49,14 @@ parent: FormField
|
|
|
49
49
|
let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = class FormFieldLayout extends Component {
|
|
50
50
|
constructor(props) {
|
|
51
51
|
super(props);
|
|
52
|
+
this.ref = null;
|
|
53
|
+
|
|
54
|
+
this.handleRef = el => {
|
|
55
|
+
var _this$props$elementRe, _this$props;
|
|
56
|
+
|
|
57
|
+
this.ref = el;
|
|
58
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
59
|
+
};
|
|
52
60
|
|
|
53
61
|
this.handleInputContainerRef = node => {
|
|
54
62
|
if (this.props.inputContainerRef) {
|
|
@@ -125,10 +133,10 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
|
|
|
125
133
|
render() {
|
|
126
134
|
const ElementType = this.elementType;
|
|
127
135
|
|
|
128
|
-
const _this$
|
|
129
|
-
makeStyles = _this$
|
|
130
|
-
styles = _this$
|
|
131
|
-
props = _objectWithoutProperties(_this$
|
|
136
|
+
const _this$props2 = this.props,
|
|
137
|
+
makeStyles = _this$props2.makeStyles,
|
|
138
|
+
styles = _this$props2.styles,
|
|
139
|
+
props = _objectWithoutProperties(_this$props2, _excluded);
|
|
132
140
|
|
|
133
141
|
const width = props.width,
|
|
134
142
|
layout = props.layout,
|
|
@@ -138,7 +146,8 @@ let FormFieldLayout = (_dec = withStyle(generateStyle, null), _dec(_class = (_te
|
|
|
138
146
|
style: {
|
|
139
147
|
width
|
|
140
148
|
},
|
|
141
|
-
"aria-describedby": this.hasMessages ? this._messagesId : null
|
|
149
|
+
"aria-describedby": this.hasMessages ? this._messagesId : null,
|
|
150
|
+
ref: this.handleRef
|
|
142
151
|
}), this.elementType === 'fieldset' && this.renderLegend(), jsx(Grid, Object.assign({
|
|
143
152
|
rowSpacing: "small",
|
|
144
153
|
colSpacing: "small",
|
|
@@ -53,7 +53,8 @@ const propTypes = {
|
|
|
53
53
|
layout: PropTypes.oneOf(['stacked', 'inline']),
|
|
54
54
|
labelAlign: PropTypes.oneOf(['start', 'end']),
|
|
55
55
|
width: PropTypes.string,
|
|
56
|
-
inputContainerRef: PropTypes.func
|
|
56
|
+
inputContainerRef: PropTypes.func,
|
|
57
|
+
elementRef: PropTypes.func
|
|
57
58
|
};
|
|
58
|
-
const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef'];
|
|
59
|
+
const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef'];
|
|
59
60
|
export { propTypes, allowedProps };
|
|
@@ -48,6 +48,15 @@ example: true
|
|
|
48
48
|
```
|
|
49
49
|
**/
|
|
50
50
|
let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class FormFieldMessage extends Component {
|
|
51
|
+
constructor(...args) {
|
|
52
|
+
super(...args);
|
|
53
|
+
this.ref = null;
|
|
54
|
+
|
|
55
|
+
this.handleRef = el => {
|
|
56
|
+
this.ref = el;
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
|
|
51
60
|
componentDidMount() {
|
|
52
61
|
this.props.makeStyles();
|
|
53
62
|
}
|
|
@@ -61,8 +70,11 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
|
|
|
61
70
|
children = _this$props.children,
|
|
62
71
|
styles = _this$props.styles;
|
|
63
72
|
return this.props.variant !== 'screenreader-only' ? jsx("span", {
|
|
64
|
-
css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage
|
|
65
|
-
|
|
73
|
+
css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
|
|
74
|
+
ref: this.handleRef
|
|
75
|
+
}, children) : jsx(ScreenReaderContent, {
|
|
76
|
+
elementRef: this.handleRef
|
|
77
|
+
}, children);
|
|
66
78
|
}
|
|
67
79
|
|
|
68
80
|
}, _class2.displayName = "FormFieldMessage", _class2.componentId = 'FormFieldMessage', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
@@ -52,6 +52,15 @@ example: true
|
|
|
52
52
|
```
|
|
53
53
|
**/
|
|
54
54
|
let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class FormFieldMessages extends Component {
|
|
55
|
+
constructor(...args) {
|
|
56
|
+
super(...args);
|
|
57
|
+
this.ref = null;
|
|
58
|
+
|
|
59
|
+
this.handleRef = el => {
|
|
60
|
+
this.ref = el;
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
|
|
55
64
|
componentDidMount() {
|
|
56
65
|
this.props.makeStyles();
|
|
57
66
|
}
|
|
@@ -66,7 +75,9 @@ let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme)
|
|
|
66
75
|
styles = _this$props.styles;
|
|
67
76
|
return messages && messages.length > 0 ? jsx("span", Object.assign({
|
|
68
77
|
css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
|
|
69
|
-
}, omitProps(this.props, FormFieldMessages.allowedProps)
|
|
78
|
+
}, omitProps(this.props, FormFieldMessages.allowedProps), {
|
|
79
|
+
ref: this.handleRef
|
|
80
|
+
}), messages.map((msg, i) => {
|
|
70
81
|
return jsx("span", {
|
|
71
82
|
key: `error${i}`,
|
|
72
83
|
css: styles === null || styles === void 0 ? void 0 : styles.message
|
package/lib/FormField/index.js
CHANGED
|
@@ -47,11 +47,24 @@ category: components
|
|
|
47
47
|
---
|
|
48
48
|
**/
|
|
49
49
|
class FormField extends _react.Component {
|
|
50
|
+
constructor(...args) {
|
|
51
|
+
super(...args);
|
|
52
|
+
this.ref = null;
|
|
53
|
+
|
|
54
|
+
this.handleRef = el => {
|
|
55
|
+
var _this$props$elementRe, _this$props;
|
|
56
|
+
|
|
57
|
+
this.ref = el;
|
|
58
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
|
|
50
62
|
render() {
|
|
51
63
|
return /*#__PURE__*/_react.default.createElement(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(this.props, FormField.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldLayout.FormFieldLayout.allowedProps), {
|
|
52
64
|
vAlign: this.props.vAlign,
|
|
53
65
|
as: "label",
|
|
54
|
-
htmlFor: this.props.id
|
|
66
|
+
htmlFor: this.props.id,
|
|
67
|
+
elementRef: this.handleRef
|
|
55
68
|
}));
|
|
56
69
|
}
|
|
57
70
|
|
package/lib/FormField/props.js
CHANGED
|
@@ -56,8 +56,9 @@ const propTypes = {
|
|
|
56
56
|
labelAlign: _propTypes.default.oneOf(['start', 'end']),
|
|
57
57
|
vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
|
|
58
58
|
width: _propTypes.default.string,
|
|
59
|
-
inputContainerRef: _propTypes.default.func
|
|
59
|
+
inputContainerRef: _propTypes.default.func,
|
|
60
|
+
elementRef: _propTypes.default.func
|
|
60
61
|
};
|
|
61
62
|
exports.propTypes = propTypes;
|
|
62
|
-
const allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef'];
|
|
63
|
+
const allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef', 'elementRef'];
|
|
63
64
|
exports.allowedProps = allowedProps;
|
|
@@ -37,6 +37,18 @@ category: components
|
|
|
37
37
|
---
|
|
38
38
|
**/
|
|
39
39
|
let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class FormFieldGroup extends _react.Component {
|
|
40
|
+
constructor(...args) {
|
|
41
|
+
super(...args);
|
|
42
|
+
this.ref = null;
|
|
43
|
+
|
|
44
|
+
this.handleRef = el => {
|
|
45
|
+
var _this$props$elementRe, _this$props;
|
|
46
|
+
|
|
47
|
+
this.ref = el;
|
|
48
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
|
|
40
52
|
componentDidMount() {
|
|
41
53
|
this.props.makeStyles(this.makeStylesVariables);
|
|
42
54
|
}
|
|
@@ -84,16 +96,17 @@ let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
84
96
|
}
|
|
85
97
|
|
|
86
98
|
render() {
|
|
87
|
-
const _this$
|
|
88
|
-
styles = _this$
|
|
89
|
-
makeStyles = _this$
|
|
90
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
99
|
+
const _this$props2 = this.props,
|
|
100
|
+
styles = _this$props2.styles,
|
|
101
|
+
makeStyles = _this$props2.makeStyles,
|
|
102
|
+
props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
|
|
91
103
|
return (0, _emotion.jsx)(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(props, FormFieldGroup.allowedProps), (0, _pickProps.pickProps)(props, _FormFieldLayout.FormFieldLayout.allowedProps), {
|
|
92
104
|
vAlign: props.vAlign,
|
|
93
105
|
layout: props.layout === 'inline' ? 'inline' : 'stacked',
|
|
94
106
|
label: props.description,
|
|
95
107
|
"aria-disabled": props.disabled ? 'true' : null,
|
|
96
|
-
"aria-invalid": this.invalid ? 'true' : null
|
|
108
|
+
"aria-invalid": this.invalid ? 'true' : null,
|
|
109
|
+
elementRef: this.handleRef
|
|
97
110
|
}), this.renderFields());
|
|
98
111
|
}
|
|
99
112
|
|
|
@@ -60,8 +60,9 @@ const propTypes = {
|
|
|
60
60
|
rowSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
|
|
61
61
|
colSpacing: _propTypes.default.oneOf(['none', 'small', 'medium', 'large']),
|
|
62
62
|
vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
|
|
63
|
-
startAt: _propTypes.default.oneOf(['small', 'medium', 'large', 'x-large', null])
|
|
63
|
+
startAt: _propTypes.default.oneOf(['small', 'medium', 'large', 'x-large', null]),
|
|
64
|
+
elementRef: _propTypes.default.func
|
|
64
65
|
};
|
|
65
66
|
exports.propTypes = propTypes;
|
|
66
|
-
const allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt'];
|
|
67
|
+
const allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt', 'elementRef'];
|
|
67
68
|
exports.allowedProps = allowedProps;
|
|
@@ -40,6 +40,15 @@ example: true
|
|
|
40
40
|
|
|
41
41
|
**/
|
|
42
42
|
let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class FormFieldLabel extends _react.Component {
|
|
43
|
+
constructor(...args) {
|
|
44
|
+
super(...args);
|
|
45
|
+
this.ref = null;
|
|
46
|
+
|
|
47
|
+
this.handleRef = el => {
|
|
48
|
+
this.ref = el;
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
|
|
43
52
|
componentDidMount() {
|
|
44
53
|
this.props.makeStyles();
|
|
45
54
|
}
|
|
@@ -54,7 +63,8 @@ let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
54
63
|
styles = _this$props.styles,
|
|
55
64
|
children = _this$props.children;
|
|
56
65
|
return (0, _emotion.jsx)(ElementType, Object.assign({}, (0, _omitProps.omitProps)(this.props, FormFieldLabel.allowedProps), {
|
|
57
|
-
css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel
|
|
66
|
+
css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
|
|
67
|
+
ref: this.handleRef
|
|
58
68
|
}), children);
|
|
59
69
|
}
|
|
60
70
|
|
|
@@ -49,6 +49,14 @@ parent: FormField
|
|
|
49
49
|
let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = class FormFieldLayout extends _react.Component {
|
|
50
50
|
constructor(props) {
|
|
51
51
|
super(props);
|
|
52
|
+
this.ref = null;
|
|
53
|
+
|
|
54
|
+
this.handleRef = el => {
|
|
55
|
+
var _this$props$elementRe, _this$props;
|
|
56
|
+
|
|
57
|
+
this.ref = el;
|
|
58
|
+
(_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
|
|
59
|
+
};
|
|
52
60
|
|
|
53
61
|
this.handleInputContainerRef = node => {
|
|
54
62
|
if (this.props.inputContainerRef) {
|
|
@@ -124,10 +132,10 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
|
|
|
124
132
|
|
|
125
133
|
render() {
|
|
126
134
|
const ElementType = this.elementType;
|
|
127
|
-
const _this$
|
|
128
|
-
makeStyles = _this$
|
|
129
|
-
styles = _this$
|
|
130
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
135
|
+
const _this$props2 = this.props,
|
|
136
|
+
makeStyles = _this$props2.makeStyles,
|
|
137
|
+
styles = _this$props2.styles,
|
|
138
|
+
props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
|
|
131
139
|
const width = props.width,
|
|
132
140
|
layout = props.layout,
|
|
133
141
|
children = props.children;
|
|
@@ -136,7 +144,8 @@ let FormFieldLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
|
|
|
136
144
|
style: {
|
|
137
145
|
width
|
|
138
146
|
},
|
|
139
|
-
"aria-describedby": this.hasMessages ? this._messagesId : null
|
|
147
|
+
"aria-describedby": this.hasMessages ? this._messagesId : null,
|
|
148
|
+
ref: this.handleRef
|
|
140
149
|
}), this.elementType === 'fieldset' && this.renderLegend(), (0, _emotion.jsx)(_Grid.Grid, Object.assign({
|
|
141
150
|
rowSpacing: "small",
|
|
142
151
|
colSpacing: "small",
|
|
@@ -64,8 +64,9 @@ const propTypes = {
|
|
|
64
64
|
layout: _propTypes.default.oneOf(['stacked', 'inline']),
|
|
65
65
|
labelAlign: _propTypes.default.oneOf(['start', 'end']),
|
|
66
66
|
width: _propTypes.default.string,
|
|
67
|
-
inputContainerRef: _propTypes.default.func
|
|
67
|
+
inputContainerRef: _propTypes.default.func,
|
|
68
|
+
elementRef: _propTypes.default.func
|
|
68
69
|
};
|
|
69
70
|
exports.propTypes = propTypes;
|
|
70
|
-
const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef'];
|
|
71
|
+
const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef'];
|
|
71
72
|
exports.allowedProps = allowedProps;
|
|
@@ -37,6 +37,15 @@ example: true
|
|
|
37
37
|
```
|
|
38
38
|
**/
|
|
39
39
|
let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class FormFieldMessage extends _react.Component {
|
|
40
|
+
constructor(...args) {
|
|
41
|
+
super(...args);
|
|
42
|
+
this.ref = null;
|
|
43
|
+
|
|
44
|
+
this.handleRef = el => {
|
|
45
|
+
this.ref = el;
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
|
|
40
49
|
componentDidMount() {
|
|
41
50
|
this.props.makeStyles();
|
|
42
51
|
}
|
|
@@ -50,8 +59,11 @@ let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
|
|
|
50
59
|
children = _this$props.children,
|
|
51
60
|
styles = _this$props.styles;
|
|
52
61
|
return this.props.variant !== 'screenreader-only' ? (0, _emotion.jsx)("span", {
|
|
53
|
-
css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage
|
|
54
|
-
|
|
62
|
+
css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
|
|
63
|
+
ref: this.handleRef
|
|
64
|
+
}, children) : (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, {
|
|
65
|
+
elementRef: this.handleRef
|
|
66
|
+
}, children);
|
|
55
67
|
}
|
|
56
68
|
|
|
57
69
|
}, _class2.displayName = "FormFieldMessage", _class2.componentId = 'FormFieldMessage', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
@@ -42,6 +42,15 @@ example: true
|
|
|
42
42
|
```
|
|
43
43
|
**/
|
|
44
44
|
let FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class FormFieldMessages extends _react.Component {
|
|
45
|
+
constructor(...args) {
|
|
46
|
+
super(...args);
|
|
47
|
+
this.ref = null;
|
|
48
|
+
|
|
49
|
+
this.handleRef = el => {
|
|
50
|
+
this.ref = el;
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
|
|
45
54
|
componentDidMount() {
|
|
46
55
|
this.props.makeStyles();
|
|
47
56
|
}
|
|
@@ -56,7 +65,9 @@ let FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
|
|
|
56
65
|
styles = _this$props.styles;
|
|
57
66
|
return messages && messages.length > 0 ? (0, _emotion.jsx)("span", Object.assign({
|
|
58
67
|
css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
|
|
59
|
-
}, (0, _omitProps.omitProps)(this.props, FormFieldMessages.allowedProps)
|
|
68
|
+
}, (0, _omitProps.omitProps)(this.props, FormFieldMessages.allowedProps), {
|
|
69
|
+
ref: this.handleRef
|
|
70
|
+
}), messages.map((msg, i) => {
|
|
60
71
|
return (0, _emotion.jsx)("span", {
|
|
61
72
|
key: `error${i}`,
|
|
62
73
|
css: styles === null || styles === void 0 ? void 0 : styles.message
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-form-field",
|
|
3
|
-
"version": "8.10.
|
|
3
|
+
"version": "8.10.2-snapshot.22+b84160eff",
|
|
4
4
|
"description": "Form layout components.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -24,22 +24,22 @@
|
|
|
24
24
|
},
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@instructure/ui-babel-preset": "8.10.
|
|
28
|
-
"@instructure/ui-test-utils": "8.10.
|
|
29
|
-
"@instructure/ui-themes": "8.10.
|
|
27
|
+
"@instructure/ui-babel-preset": "8.10.2-snapshot.22+b84160eff",
|
|
28
|
+
"@instructure/ui-test-utils": "8.10.2-snapshot.22+b84160eff",
|
|
29
|
+
"@instructure/ui-themes": "8.10.2-snapshot.22+b84160eff"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@babel/runtime": "^7.13.10",
|
|
33
|
-
"@instructure/console": "8.10.
|
|
34
|
-
"@instructure/emotion": "8.10.
|
|
35
|
-
"@instructure/shared-types": "8.10.
|
|
36
|
-
"@instructure/ui-a11y-content": "8.10.
|
|
37
|
-
"@instructure/ui-a11y-utils": "8.10.
|
|
38
|
-
"@instructure/ui-grid": "8.10.
|
|
39
|
-
"@instructure/ui-icons": "8.10.
|
|
40
|
-
"@instructure/ui-react-utils": "8.10.
|
|
41
|
-
"@instructure/ui-utils": "8.10.
|
|
42
|
-
"@instructure/uid": "8.10.
|
|
33
|
+
"@instructure/console": "8.10.2-snapshot.22+b84160eff",
|
|
34
|
+
"@instructure/emotion": "8.10.2-snapshot.22+b84160eff",
|
|
35
|
+
"@instructure/shared-types": "8.10.2-snapshot.22+b84160eff",
|
|
36
|
+
"@instructure/ui-a11y-content": "8.10.2-snapshot.22+b84160eff",
|
|
37
|
+
"@instructure/ui-a11y-utils": "8.10.2-snapshot.22+b84160eff",
|
|
38
|
+
"@instructure/ui-grid": "8.10.2-snapshot.22+b84160eff",
|
|
39
|
+
"@instructure/ui-icons": "8.10.2-snapshot.22+b84160eff",
|
|
40
|
+
"@instructure/ui-react-utils": "8.10.2-snapshot.22+b84160eff",
|
|
41
|
+
"@instructure/ui-utils": "8.10.2-snapshot.22+b84160eff",
|
|
42
|
+
"@instructure/uid": "8.10.2-snapshot.22+b84160eff",
|
|
43
43
|
"prop-types": "^15"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
@@ -47,5 +47,6 @@
|
|
|
47
47
|
},
|
|
48
48
|
"publishConfig": {
|
|
49
49
|
"access": "public"
|
|
50
|
-
}
|
|
50
|
+
},
|
|
51
|
+
"gitHead": "b84160effefb01aeb94b754f0b7a64f8dad1b7f2"
|
|
51
52
|
}
|
package/src/FormField/index.tsx
CHANGED
|
@@ -49,6 +49,13 @@ class FormField extends Component<FormFieldProps> {
|
|
|
49
49
|
children: null
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
ref: Element | null = null
|
|
53
|
+
|
|
54
|
+
handleRef = (el: Element | null) => {
|
|
55
|
+
this.ref = el
|
|
56
|
+
this.props.elementRef?.(el)
|
|
57
|
+
}
|
|
58
|
+
|
|
52
59
|
render() {
|
|
53
60
|
return (
|
|
54
61
|
<FormFieldLayout
|
|
@@ -58,6 +65,7 @@ class FormField extends Component<FormFieldProps> {
|
|
|
58
65
|
vAlign={this.props.vAlign}
|
|
59
66
|
as="label"
|
|
60
67
|
htmlFor={this.props.id}
|
|
68
|
+
elementRef={this.handleRef}
|
|
61
69
|
/>
|
|
62
70
|
)
|
|
63
71
|
}
|
package/src/FormField/props.ts
CHANGED
|
@@ -42,6 +42,7 @@ type FormFieldOwnProps = {
|
|
|
42
42
|
vAlign?: 'top' | 'middle' | 'bottom'
|
|
43
43
|
width?: string
|
|
44
44
|
inputContainerRef?: (...args: any[]) => any
|
|
45
|
+
elementRef?: (element: Element | null) => void
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
type PropKeys = keyof FormFieldOwnProps
|
|
@@ -70,7 +71,8 @@ const propTypes: PropValidators<PropKeys> = {
|
|
|
70
71
|
labelAlign: PropTypes.oneOf(['start', 'end']),
|
|
71
72
|
vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
|
|
72
73
|
width: PropTypes.string,
|
|
73
|
-
inputContainerRef: PropTypes.func
|
|
74
|
+
inputContainerRef: PropTypes.func,
|
|
75
|
+
elementRef: PropTypes.func
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
const allowedProps: AllowedPropKeys = [
|
|
@@ -84,7 +86,8 @@ const allowedProps: AllowedPropKeys = [
|
|
|
84
86
|
'labelAlign',
|
|
85
87
|
'vAlign',
|
|
86
88
|
'width',
|
|
87
|
-
'inputContainerRef'
|
|
89
|
+
'inputContainerRef',
|
|
90
|
+
'elementRef'
|
|
88
91
|
]
|
|
89
92
|
|
|
90
93
|
export type { FormFieldProps }
|
|
@@ -57,6 +57,13 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
|
|
|
57
57
|
vAlign: 'middle'
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
+
ref: Element | null = null
|
|
61
|
+
|
|
62
|
+
handleRef = (el: Element | null) => {
|
|
63
|
+
this.ref = el
|
|
64
|
+
this.props.elementRef?.(el)
|
|
65
|
+
}
|
|
66
|
+
|
|
60
67
|
componentDidMount() {
|
|
61
68
|
// @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
69
|
this.props.makeStyles(this.makeStylesVariables)
|
|
@@ -134,6 +141,7 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
|
|
|
134
141
|
label={props.description}
|
|
135
142
|
aria-disabled={props.disabled ? 'true' : null}
|
|
136
143
|
aria-invalid={this.invalid ? 'true' : null}
|
|
144
|
+
elementRef={this.handleRef}
|
|
137
145
|
>
|
|
138
146
|
{this.renderFields()}
|
|
139
147
|
</FormFieldLayout>
|
|
@@ -46,6 +46,7 @@ type FormFieldGroupOwnProps = {
|
|
|
46
46
|
colSpacing?: 'none' | 'small' | 'medium' | 'large'
|
|
47
47
|
vAlign?: 'top' | 'middle' | 'bottom'
|
|
48
48
|
startAt?: any // TODO: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null])
|
|
49
|
+
elementRef?: (element: Element | null) => void
|
|
49
50
|
}
|
|
50
51
|
|
|
51
52
|
type FormFieldGroupStyleProps = {
|
|
@@ -84,7 +85,8 @@ const propTypes: PropValidators<PropKeys> = {
|
|
|
84
85
|
rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
|
|
85
86
|
colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
|
|
86
87
|
vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
|
|
87
|
-
startAt: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null])
|
|
88
|
+
startAt: PropTypes.oneOf(['small', 'medium', 'large', 'x-large', null]),
|
|
89
|
+
elementRef: PropTypes.func
|
|
88
90
|
}
|
|
89
91
|
|
|
90
92
|
const allowedProps: AllowedPropKeys = [
|
|
@@ -98,7 +100,8 @@ const allowedProps: AllowedPropKeys = [
|
|
|
98
100
|
'rowSpacing',
|
|
99
101
|
'colSpacing',
|
|
100
102
|
'vAlign',
|
|
101
|
-
'startAt'
|
|
103
|
+
'startAt',
|
|
104
|
+
'elementRef'
|
|
102
105
|
]
|
|
103
106
|
|
|
104
107
|
export type {
|
|
@@ -60,6 +60,12 @@ class FormFieldLabel extends Component<FormFieldLabelProps> {
|
|
|
60
60
|
as: 'span'
|
|
61
61
|
} as const
|
|
62
62
|
|
|
63
|
+
ref: Element | null = null
|
|
64
|
+
|
|
65
|
+
handleRef = (el: Element | null) => {
|
|
66
|
+
this.ref = el
|
|
67
|
+
}
|
|
68
|
+
|
|
63
69
|
componentDidMount() {
|
|
64
70
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
65
71
|
this.props.makeStyles()
|
|
@@ -78,8 +84,10 @@ class FormFieldLabel extends Component<FormFieldLabelProps> {
|
|
|
78
84
|
|
|
79
85
|
return (
|
|
80
86
|
<ElementType
|
|
87
|
+
// @ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
|
|
81
88
|
{...omitProps(this.props, FormFieldLabel.allowedProps)}
|
|
82
89
|
css={styles?.formFieldLabel}
|
|
90
|
+
ref={this.handleRef}
|
|
83
91
|
>
|
|
84
92
|
{children}
|
|
85
93
|
</ElementType>
|
|
@@ -81,6 +81,13 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
|
|
|
81
81
|
)
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
+
ref: Element | null = null
|
|
85
|
+
|
|
86
|
+
handleRef = (el: Element | null) => {
|
|
87
|
+
this.ref = el
|
|
88
|
+
this.props.elementRef?.(el)
|
|
89
|
+
}
|
|
90
|
+
|
|
84
91
|
componentDidMount() {
|
|
85
92
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
86
93
|
this.props.makeStyles()
|
|
@@ -185,6 +192,7 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
|
|
|
185
192
|
style={{ width }}
|
|
186
193
|
// @ts-expect-error ts-migrate(2339) FIXME: Property '_messagesId' does not exist on type 'For... Remove this comment to see the full error message
|
|
187
194
|
aria-describedby={this.hasMessages ? this._messagesId : null}
|
|
195
|
+
ref={this.handleRef}
|
|
188
196
|
>
|
|
189
197
|
{this.elementType === 'fieldset' && this.renderLegend()}
|
|
190
198
|
<Grid
|
|
@@ -42,6 +42,7 @@ type FormFieldLayoutOwnProps = {
|
|
|
42
42
|
labelAlign?: 'start' | 'end'
|
|
43
43
|
width?: string
|
|
44
44
|
inputContainerRef?: (...args: any[]) => any
|
|
45
|
+
elementRef?: (element: Element | null) => void
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
type PropKeys = keyof FormFieldLayoutOwnProps
|
|
@@ -79,7 +80,8 @@ const propTypes: PropValidators<PropKeys> = {
|
|
|
79
80
|
layout: PropTypes.oneOf(['stacked', 'inline']),
|
|
80
81
|
labelAlign: PropTypes.oneOf(['start', 'end']),
|
|
81
82
|
width: PropTypes.string,
|
|
82
|
-
inputContainerRef: PropTypes.func
|
|
83
|
+
inputContainerRef: PropTypes.func,
|
|
84
|
+
elementRef: PropTypes.func
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
const allowedProps: AllowedPropKeys = [
|
|
@@ -93,7 +95,8 @@ const allowedProps: AllowedPropKeys = [
|
|
|
93
95
|
'layout',
|
|
94
96
|
'labelAlign',
|
|
95
97
|
'width',
|
|
96
|
-
'inputContainerRef'
|
|
98
|
+
'inputContainerRef',
|
|
99
|
+
'elementRef'
|
|
97
100
|
]
|
|
98
101
|
|
|
99
102
|
export type { FormFieldLayoutProps, FormFieldLayoutStyle }
|
|
@@ -61,6 +61,12 @@ class FormFieldMessage extends Component<FormFieldMessageProps> {
|
|
|
61
61
|
children: null
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
ref: Element | null = null
|
|
65
|
+
|
|
66
|
+
handleRef = (el: Element | null) => {
|
|
67
|
+
this.ref = el
|
|
68
|
+
}
|
|
69
|
+
|
|
64
70
|
componentDidMount() {
|
|
65
71
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
66
72
|
this.props.makeStyles()
|
|
@@ -76,9 +82,13 @@ class FormFieldMessage extends Component<FormFieldMessageProps> {
|
|
|
76
82
|
const { children, styles } = this.props
|
|
77
83
|
|
|
78
84
|
return this.props.variant !== 'screenreader-only' ? (
|
|
79
|
-
<span css={styles?.formFieldMessage}
|
|
85
|
+
<span css={styles?.formFieldMessage} ref={this.handleRef}>
|
|
86
|
+
{children}
|
|
87
|
+
</span>
|
|
80
88
|
) : (
|
|
81
|
-
<ScreenReaderContent
|
|
89
|
+
<ScreenReaderContent elementRef={this.handleRef}>
|
|
90
|
+
{children}
|
|
91
|
+
</ScreenReaderContent>
|
|
82
92
|
)
|
|
83
93
|
}
|
|
84
94
|
}
|
|
@@ -63,6 +63,12 @@ class FormFieldMessages extends Component<FormFieldMessagesProps> {
|
|
|
63
63
|
static allowedProps = allowedProps
|
|
64
64
|
static defaultProps = {}
|
|
65
65
|
|
|
66
|
+
ref: Element | null = null
|
|
67
|
+
|
|
68
|
+
handleRef = (el: Element | null) => {
|
|
69
|
+
this.ref = el
|
|
70
|
+
}
|
|
71
|
+
|
|
66
72
|
componentDidMount() {
|
|
67
73
|
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
68
74
|
this.props.makeStyles()
|
|
@@ -81,6 +87,7 @@ class FormFieldMessages extends Component<FormFieldMessagesProps> {
|
|
|
81
87
|
<span
|
|
82
88
|
css={styles?.formFieldMessages}
|
|
83
89
|
{...omitProps(this.props, FormFieldMessages.allowedProps)}
|
|
90
|
+
ref={this.handleRef}
|
|
84
91
|
>
|
|
85
92
|
{messages.map((msg, i) => {
|
|
86
93
|
return (
|
|
@@ -19,6 +19,7 @@ declare class FormField extends Component<FormFieldProps> {
|
|
|
19
19
|
vAlign?: "middle" | "bottom" | "top" | undefined;
|
|
20
20
|
width?: string | undefined;
|
|
21
21
|
inputContainerRef?: ((...args: any[]) => any) | undefined;
|
|
22
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
22
23
|
}>;
|
|
23
24
|
static allowedProps: readonly (keyof {
|
|
24
25
|
label: React.ReactNode;
|
|
@@ -32,6 +33,7 @@ declare class FormField extends Component<FormFieldProps> {
|
|
|
32
33
|
vAlign?: "middle" | "bottom" | "top" | undefined;
|
|
33
34
|
width?: string | undefined;
|
|
34
35
|
inputContainerRef?: ((...args: any[]) => any) | undefined;
|
|
36
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
35
37
|
})[];
|
|
36
38
|
static defaultProps: {
|
|
37
39
|
inline: boolean;
|
|
@@ -40,6 +42,8 @@ declare class FormField extends Component<FormFieldProps> {
|
|
|
40
42
|
vAlign: string;
|
|
41
43
|
children: null;
|
|
42
44
|
};
|
|
45
|
+
ref: Element | null;
|
|
46
|
+
handleRef: (el: Element | null) => void;
|
|
43
47
|
render(): JSX.Element;
|
|
44
48
|
}
|
|
45
49
|
export default FormField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormField/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,cAAM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,MAAM,CAAC,SAAS
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormField/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,cAAM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAc;IAEzC,MAAM,CAAC,SAAS;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;MAMlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,MAAM;CAaP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}
|
|
@@ -13,6 +13,7 @@ declare type FormFieldOwnProps = {
|
|
|
13
13
|
vAlign?: 'top' | 'middle' | 'bottom';
|
|
14
14
|
width?: string;
|
|
15
15
|
inputContainerRef?: (...args: any[]) => any;
|
|
16
|
+
elementRef?: (element: Element | null) => void;
|
|
16
17
|
};
|
|
17
18
|
declare type PropKeys = keyof FormFieldOwnProps;
|
|
18
19
|
declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/FormField/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,aAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC5B,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/FormField/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,aAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC5B,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC3C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,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,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAsBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAanB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -21,6 +21,7 @@ declare class FormFieldGroup extends Component<FormFieldGroupProps> {
|
|
|
21
21
|
colSpacing?: "small" | "none" | "medium" | "large" | undefined;
|
|
22
22
|
vAlign?: "middle" | "bottom" | "top" | undefined;
|
|
23
23
|
startAt?: any;
|
|
24
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
24
25
|
}>;
|
|
25
26
|
static allowedProps: readonly (keyof {
|
|
26
27
|
description: import("react").ReactNode;
|
|
@@ -34,6 +35,7 @@ declare class FormFieldGroup extends Component<FormFieldGroupProps> {
|
|
|
34
35
|
colSpacing?: "small" | "none" | "medium" | "large" | undefined;
|
|
35
36
|
vAlign?: "middle" | "bottom" | "top" | undefined;
|
|
36
37
|
startAt?: any;
|
|
38
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
37
39
|
})[];
|
|
38
40
|
static defaultProps: {
|
|
39
41
|
children: null;
|
|
@@ -43,6 +45,8 @@ declare class FormFieldGroup extends Component<FormFieldGroupProps> {
|
|
|
43
45
|
colSpacing: string;
|
|
44
46
|
vAlign: string;
|
|
45
47
|
};
|
|
48
|
+
ref: Element | null;
|
|
49
|
+
handleRef: (el: Element | null) => void;
|
|
46
50
|
componentDidMount(): void;
|
|
47
51
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
48
52
|
get makeStylesVariables(): FormFieldGroupStyleProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldGroup/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAI3C,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAQrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAE5E;;;;GAIG;AACH,cACM,cAAe,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACzD,MAAM,CAAC,QAAQ,CAAC,WAAW,oBAAmB;IAE9C,MAAM,CAAC,SAAS
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldGroup/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAI3C,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAQrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAE5E;;;;GAIG;AACH,cACM,cAAe,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACzD,MAAM,CAAC,QAAQ,CAAC,WAAW,oBAAmB;IAE9C,MAAM,CAAC,SAAS;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;MAOlB;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,IAAI,mBAAmB,IAAI,wBAAwB,CAElD;IAED,IAAI,OAAO,YAOV;IAED,aAAa;IAcb,cAAc;IAgBd,YAAY;IAUZ,MAAM;CAmBP;AAED,eAAe,cAAc,CAAA;AAC7B,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -14,6 +14,7 @@ declare type FormFieldGroupOwnProps = {
|
|
|
14
14
|
colSpacing?: 'none' | 'small' | 'medium' | 'large';
|
|
15
15
|
vAlign?: 'top' | 'middle' | 'bottom';
|
|
16
16
|
startAt?: any;
|
|
17
|
+
elementRef?: (element: Element | null) => void;
|
|
17
18
|
};
|
|
18
19
|
declare type FormFieldGroupStyleProps = {
|
|
19
20
|
invalid: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/FormFieldGroup/props.ts"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,aAAK,sBAAsB,GAAG;IAC5B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,OAAO,CAAC,EAAE,GAAG,CAAA;
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/FormFieldGroup/props.ts"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,aAAK,sBAAsB,GAAG;IAC5B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,OAAO,CAAC,EAAE,GAAG,CAAA;IACb,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,sBAAsB,CAAA;AAE5C,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,mBAAmB,GAAG,sBAAsB,GAC/C,cAAc,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAA;AAE1D,aAAK,mBAAmB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAA;AAE3D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAyBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAanB,CAAA;AAED,YAAY,EACV,mBAAmB,EACnB,wBAAwB,EACxB,mBAAmB,EACpB,CAAA;AACD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -31,6 +31,8 @@ declare class FormFieldLabel extends Component<FormFieldLabelProps> {
|
|
|
31
31
|
static defaultProps: {
|
|
32
32
|
readonly as: "span";
|
|
33
33
|
};
|
|
34
|
+
ref: Element | null;
|
|
35
|
+
handleRef: (el: Element | null) => void;
|
|
34
36
|
componentDidMount(): void;
|
|
35
37
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
36
38
|
render(): jsx.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldLabel/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD;;;;;;;;;;;;;;;GAeG;AACH,cACM,cAAe,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACzD,MAAM,CAAC,QAAQ,CAAC,WAAW,oBAAmB;IAE9C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;MAET;IAEV,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldLabel/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD;;;;;;;;;;;;;;;GAeG;AACH,cACM,cAAe,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACzD,MAAM,CAAC,QAAQ,CAAC,WAAW,oBAAmB;IAE9C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;MAET;IAEV,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;CAgBP;AAED,eAAe,cAAc,CAAA;AAC7B,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -21,6 +21,7 @@ declare class FormFieldLayout extends Component<FormFieldLayoutProps> {
|
|
|
21
21
|
labelAlign?: "end" | "start" | undefined;
|
|
22
22
|
width?: string | undefined;
|
|
23
23
|
inputContainerRef?: ((...args: any[]) => any) | undefined;
|
|
24
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
24
25
|
}>;
|
|
25
26
|
static allowedProps: readonly (keyof {
|
|
26
27
|
label: import("react").ReactNode;
|
|
@@ -34,6 +35,7 @@ declare class FormFieldLayout extends Component<FormFieldLayoutProps> {
|
|
|
34
35
|
labelAlign?: "end" | "start" | undefined;
|
|
35
36
|
width?: string | undefined;
|
|
36
37
|
inputContainerRef?: ((...args: any[]) => any) | undefined;
|
|
38
|
+
elementRef?: ((element: Element | null) => void) | undefined;
|
|
37
39
|
})[];
|
|
38
40
|
static defaultProps: {
|
|
39
41
|
readonly children: null;
|
|
@@ -43,6 +45,8 @@ declare class FormFieldLayout extends Component<FormFieldLayoutProps> {
|
|
|
43
45
|
readonly labelAlign: "end";
|
|
44
46
|
};
|
|
45
47
|
constructor(props: any);
|
|
48
|
+
ref: Element | null;
|
|
49
|
+
handleRef: (el: Element | null) => void;
|
|
46
50
|
componentDidMount(): void;
|
|
47
51
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
48
52
|
get hasVisibleLabel(): boolean | "" | 0 | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldLayout/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAajC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAQrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;GAIG;AACH,cACM,eAAgB,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IAC3D,MAAM,CAAC,QAAQ,CAAC,WAAW,qBAAoB;IAE/C,MAAM,CAAC,SAAS
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldLayout/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAajC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAQrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;GAIG;AACH,cACM,eAAgB,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IAC3D,MAAM,CAAC,QAAQ,CAAC,WAAW,qBAAoB;IAE/C,MAAM,CAAC,SAAS;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;MAMT;gBAGE,KAAK,KAAA;IAejB,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,IAAI,eAAe,wCAElB;IAED,IAAI,WAAW,wBAEd;IAED,IAAI,WAAW,wEAEd;IAED,IAAI,uBAAuB,wBAG1B;IAGD,uBAAuB,sBAItB;IAED,WAAW;IAsBX,YAAY;IAaZ,qBAAqB;IAkBrB,MAAM;CAyCP;AAED,eAAe,eAAe,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -14,6 +14,7 @@ declare type FormFieldLayoutOwnProps = {
|
|
|
14
14
|
labelAlign?: 'start' | 'end';
|
|
15
15
|
width?: string;
|
|
16
16
|
inputContainerRef?: (...args: any[]) => any;
|
|
17
|
+
elementRef?: (element: Element | null) => void;
|
|
17
18
|
};
|
|
18
19
|
declare type PropKeys = keyof FormFieldLayoutOwnProps;
|
|
19
20
|
declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/FormFieldLayout/props.ts"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,aAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/FormFieldLayout/props.ts"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,aAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC3C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,uBAAuB,CAAA;AAE7C,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,oBAAoB,GAAG,uBAAuB,GACjD,cAAc,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAA;AAE5C,aAAK,oBAAoB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAE7D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA4BvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAanB,CAAA;AAED,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -31,6 +31,8 @@ declare class FormFieldMessage extends Component<FormFieldMessageProps> {
|
|
|
31
31
|
variant: string;
|
|
32
32
|
children: null;
|
|
33
33
|
};
|
|
34
|
+
ref: Element | null;
|
|
35
|
+
handleRef: (el: Element | null) => void;
|
|
34
36
|
componentDidMount(): void;
|
|
35
37
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
36
38
|
render(): jsx.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldMessage/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEpD;;;;;;;;;;;;;;GAcG;AACH,cACM,gBAAiB,SAAQ,SAAS,CAAC,qBAAqB,CAAC;IAC7D,MAAM,CAAC,QAAQ,CAAC,WAAW,sBAAqB;IAEhD,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/FormFieldMessage/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEpD;;;;;;;;;;;;;;GAcG;AACH,cACM,gBAAiB,SAAQ,SAAS,CAAC,qBAAqB,CAAC;IAC7D,MAAM,CAAC,QAAQ,CAAC,WAAW,sBAAqB;IAEhD,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,gBAAgB,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
|
|
@@ -25,6 +25,8 @@ declare class FormFieldMessages extends Component<FormFieldMessagesProps> {
|
|
|
25
25
|
static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<"messages">;
|
|
26
26
|
static allowedProps: readonly "messages"[];
|
|
27
27
|
static defaultProps: {};
|
|
28
|
+
ref: Element | null;
|
|
29
|
+
handleRef: (el: Element | null) => void;
|
|
28
30
|
componentDidMount(): void;
|
|
29
31
|
componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
|
|
30
32
|
render(): jsx.JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldMessages/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAQrD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD;;;;;;;;;;;;;;;;;GAiBG;AACH,cACM,iBAAkB,SAAQ,SAAS,CAAC,sBAAsB,CAAC;IAC/D,MAAM,CAAC,QAAQ,CAAC,WAAW,uBAAsB;IAEjD,MAAM,CAAC,SAAS,oFAAY;IAC5B,MAAM,CAAC,YAAY,wBAAe;IAClC,MAAM,CAAC,YAAY,KAAK;IAExB,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldMessages/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAQrD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD;;;;;;;;;;;;;;;;;GAiBG;AACH,cACM,iBAAkB,SAAQ,SAAS,CAAC,sBAAsB,CAAC;IAC/D,MAAM,CAAC,QAAQ,CAAC,WAAW,uBAAsB;IAEjD,MAAM,CAAC,SAAS,oFAAY;IAC5B,MAAM,CAAC,YAAY,wBAAe;IAClC,MAAM,CAAC,YAAY,KAAK;IAExB,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;CAmBP;AAED,eAAe,iBAAiB,CAAA;AAChC,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
|