carbon-react 109.5.0 → 109.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/__internal__/form-field/form-field.component.d.ts +59 -0
- package/esm/__internal__/form-field/form-field.component.js +202 -57
- package/esm/__internal__/form-field/form-field.style.d.ts +7 -0
- package/esm/__internal__/form-field/form-field.style.js +6 -12
- package/esm/__internal__/form-field/index.d.ts +2 -5
- package/esm/__internal__/label/label.component.d.ts +2 -4
- package/esm/__internal__/label/label.component.js +0 -3
- package/esm/components/button-toggle-group/button-toggle-group.component.js +9 -10
- package/esm/components/button-toggle-group/button-toggle-group.d.ts +3 -1
- package/esm/components/switch/switch.component.js +0 -3
- package/esm/components/switch/switch.d.ts +0 -2
- package/esm/components/tabs/tab/tab.d.ts +3 -3
- package/lib/__internal__/form-field/form-field.component.d.ts +59 -0
- package/lib/__internal__/form-field/form-field.component.js +201 -57
- package/lib/__internal__/form-field/form-field.style.d.ts +7 -0
- package/lib/__internal__/form-field/form-field.style.js +9 -13
- package/lib/__internal__/form-field/index.d.ts +2 -5
- package/lib/__internal__/label/label.component.d.ts +2 -4
- package/lib/__internal__/label/label.component.js +0 -3
- package/lib/components/button-toggle-group/button-toggle-group.component.js +9 -10
- package/lib/components/button-toggle-group/button-toggle-group.d.ts +3 -1
- package/lib/components/switch/switch.component.js +0 -3
- package/lib/components/switch/switch.d.ts +0 -2
- package/lib/components/tabs/tab/tab.d.ts +3 -3
- package/package.json +1 -1
- package/esm/__internal__/form-field/form-field.d.ts +0 -66
- package/lib/__internal__/form-field/form-field.d.ts +0 -66
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _invariant = _interopRequireDefault(require("invariant"));
|
|
13
13
|
|
|
14
14
|
var _utils = require("../../style/utils");
|
|
15
15
|
|
|
@@ -33,8 +33,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
|
|
|
33
33
|
|
|
34
34
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
35
35
|
|
|
36
|
-
const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
|
|
37
|
-
|
|
38
36
|
const FormField = ({
|
|
39
37
|
children,
|
|
40
38
|
disabled,
|
|
@@ -45,7 +43,6 @@ const FormField = ({
|
|
|
45
43
|
info,
|
|
46
44
|
tooltipId,
|
|
47
45
|
fieldHelpId,
|
|
48
|
-
helpTabIndex,
|
|
49
46
|
label,
|
|
50
47
|
labelId,
|
|
51
48
|
labelAlign,
|
|
@@ -63,7 +60,16 @@ const FormField = ({
|
|
|
63
60
|
validationIconId,
|
|
64
61
|
...rest
|
|
65
62
|
}) => {
|
|
66
|
-
const
|
|
63
|
+
const invalidValidationProp = (0, _react.useMemo)(() => {
|
|
64
|
+
const validationProps = {
|
|
65
|
+
error: !!error,
|
|
66
|
+
warning: !!warning,
|
|
67
|
+
info: !!info
|
|
68
|
+
};
|
|
69
|
+
if (!disabled) return undefined;
|
|
70
|
+
return Object.keys(validationProps).find(propName => validationProps[propName]);
|
|
71
|
+
}, [error, warning, info, disabled]);
|
|
72
|
+
!(invalidValidationProp === undefined) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field") : (0, _invariant.default)(false) : void 0;
|
|
67
73
|
const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
|
|
68
74
|
let inlineLabel = labelInline;
|
|
69
75
|
|
|
@@ -71,13 +77,16 @@ const FormField = ({
|
|
|
71
77
|
inlineLabel = largeScreen;
|
|
72
78
|
}
|
|
73
79
|
|
|
80
|
+
const {
|
|
81
|
+
setError,
|
|
82
|
+
setWarning,
|
|
83
|
+
setInfo
|
|
84
|
+
} = (0, _react.useContext)(_tab.TabContext);
|
|
74
85
|
(0, _react.useEffect)(() => {
|
|
75
|
-
if (
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
}, [id, context, error, warning, info]);
|
|
86
|
+
if (setError) setError(id, !!error);
|
|
87
|
+
if (setWarning) setWarning(id, !!warning);
|
|
88
|
+
if (setInfo) setInfo(id, !!info);
|
|
89
|
+
}, [id, setError, setWarning, setInfo, error, warning, info]);
|
|
81
90
|
const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
|
|
82
91
|
const fieldHelp = fieldHelpContent ? /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
|
|
83
92
|
labelInline: inlineLabel,
|
|
@@ -95,7 +104,6 @@ const FormField = ({
|
|
|
95
104
|
info: !rest.validationRedesignOptIn && info,
|
|
96
105
|
help: labelHelp,
|
|
97
106
|
tooltipId: tooltipId,
|
|
98
|
-
helpTabIndex: helpTabIndex,
|
|
99
107
|
htmlFor: id,
|
|
100
108
|
helpIcon: labelHelpIcon,
|
|
101
109
|
inline: inlineLabel,
|
|
@@ -109,53 +117,189 @@ const FormField = ({
|
|
|
109
117
|
}, label), fieldHelpInline && fieldHelp, !reverse && children), !fieldHelpInline && fieldHelp);
|
|
110
118
|
};
|
|
111
119
|
|
|
112
|
-
const errorPropType = (props, propName, componentName, ...rest) => {
|
|
113
|
-
if (props[propName] && props.disabled) {
|
|
114
|
-
return new Error(`Prop \`${propName}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field");
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
return _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string])(props, propName, componentName, ...rest);
|
|
118
|
-
};
|
|
119
|
-
|
|
120
120
|
FormField.propTypes = {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
disabled: _propTypes.default.bool,
|
|
125
|
-
"data-component": _propTypes.default.string,
|
|
126
|
-
"data-role": _propTypes.default.string,
|
|
121
|
+
"adaptiveLabelBreakpoint": _propTypes.default.number,
|
|
122
|
+
"children": _propTypes.default.node,
|
|
123
|
+
"data-component": _propTypes.default.string.isRequired,
|
|
127
124
|
"data-element": _propTypes.default.string,
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
error:
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
label: _propTypes.default.node,
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
labelInline: _propTypes.default.bool,
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
125
|
+
"data-role": _propTypes.default.string,
|
|
126
|
+
"disabled": _propTypes.default.bool,
|
|
127
|
+
"error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
|
|
128
|
+
"fieldHelp": _propTypes.default.node,
|
|
129
|
+
"fieldHelpId": _propTypes.default.string,
|
|
130
|
+
"fieldHelpInline": _propTypes.default.bool,
|
|
131
|
+
"id": _propTypes.default.string.isRequired,
|
|
132
|
+
"info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
|
|
133
|
+
"isOptional": _propTypes.default.bool,
|
|
134
|
+
"isRequired": _propTypes.default.bool,
|
|
135
|
+
"label": _propTypes.default.node,
|
|
136
|
+
"labelAlign": _propTypes.default.oneOf(["left", "right"]),
|
|
137
|
+
"labelHelp": _propTypes.default.node,
|
|
138
|
+
"labelHelpIcon": _propTypes.default.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
|
|
139
|
+
"labelId": _propTypes.default.string,
|
|
140
|
+
"labelInline": _propTypes.default.bool,
|
|
141
|
+
"labelSpacing": _propTypes.default.oneOf([1, 2]),
|
|
142
|
+
"labelWidth": _propTypes.default.number,
|
|
143
|
+
"m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
144
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
145
|
+
"description": _propTypes.default.string,
|
|
146
|
+
"toString": _propTypes.default.func.isRequired,
|
|
147
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
148
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
149
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
150
|
+
"description": _propTypes.default.string,
|
|
151
|
+
"toString": _propTypes.default.func.isRequired,
|
|
152
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
153
|
+
}), _propTypes.default.string]),
|
|
154
|
+
"margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
155
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
156
|
+
"description": _propTypes.default.string,
|
|
157
|
+
"toString": _propTypes.default.func.isRequired,
|
|
158
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
159
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
160
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
161
|
+
"description": _propTypes.default.string,
|
|
162
|
+
"toString": _propTypes.default.func.isRequired,
|
|
163
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
164
|
+
}), _propTypes.default.string]),
|
|
165
|
+
"marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
166
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
167
|
+
"description": _propTypes.default.string,
|
|
168
|
+
"toString": _propTypes.default.func.isRequired,
|
|
169
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
170
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
171
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
172
|
+
"description": _propTypes.default.string,
|
|
173
|
+
"toString": _propTypes.default.func.isRequired,
|
|
174
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
175
|
+
}), _propTypes.default.string]),
|
|
176
|
+
"marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
177
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
178
|
+
"description": _propTypes.default.string,
|
|
179
|
+
"toString": _propTypes.default.func.isRequired,
|
|
180
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
181
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
182
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
183
|
+
"description": _propTypes.default.string,
|
|
184
|
+
"toString": _propTypes.default.func.isRequired,
|
|
185
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
186
|
+
}), _propTypes.default.string]),
|
|
187
|
+
"marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
188
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
189
|
+
"description": _propTypes.default.string,
|
|
190
|
+
"toString": _propTypes.default.func.isRequired,
|
|
191
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
192
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
193
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
194
|
+
"description": _propTypes.default.string,
|
|
195
|
+
"toString": _propTypes.default.func.isRequired,
|
|
196
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
197
|
+
}), _propTypes.default.string]),
|
|
198
|
+
"marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
199
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
200
|
+
"description": _propTypes.default.string,
|
|
201
|
+
"toString": _propTypes.default.func.isRequired,
|
|
202
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
203
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
204
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
205
|
+
"description": _propTypes.default.string,
|
|
206
|
+
"toString": _propTypes.default.func.isRequired,
|
|
207
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
208
|
+
}), _propTypes.default.string]),
|
|
209
|
+
"marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
210
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
211
|
+
"description": _propTypes.default.string,
|
|
212
|
+
"toString": _propTypes.default.func.isRequired,
|
|
213
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
214
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
215
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
216
|
+
"description": _propTypes.default.string,
|
|
217
|
+
"toString": _propTypes.default.func.isRequired,
|
|
218
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
219
|
+
}), _propTypes.default.string]),
|
|
220
|
+
"marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
221
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
222
|
+
"description": _propTypes.default.string,
|
|
223
|
+
"toString": _propTypes.default.func.isRequired,
|
|
224
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
225
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
226
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
227
|
+
"description": _propTypes.default.string,
|
|
228
|
+
"toString": _propTypes.default.func.isRequired,
|
|
229
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
230
|
+
}), _propTypes.default.string]),
|
|
231
|
+
"mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
232
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
233
|
+
"description": _propTypes.default.string,
|
|
234
|
+
"toString": _propTypes.default.func.isRequired,
|
|
235
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
236
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
237
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
238
|
+
"description": _propTypes.default.string,
|
|
239
|
+
"toString": _propTypes.default.func.isRequired,
|
|
240
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
241
|
+
}), _propTypes.default.string]),
|
|
242
|
+
"ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
243
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
244
|
+
"description": _propTypes.default.string,
|
|
245
|
+
"toString": _propTypes.default.func.isRequired,
|
|
246
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
247
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
248
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
249
|
+
"description": _propTypes.default.string,
|
|
250
|
+
"toString": _propTypes.default.func.isRequired,
|
|
251
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
252
|
+
}), _propTypes.default.string]),
|
|
253
|
+
"mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
254
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
255
|
+
"description": _propTypes.default.string,
|
|
256
|
+
"toString": _propTypes.default.func.isRequired,
|
|
257
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
258
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
259
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
260
|
+
"description": _propTypes.default.string,
|
|
261
|
+
"toString": _propTypes.default.func.isRequired,
|
|
262
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
263
|
+
}), _propTypes.default.string]),
|
|
264
|
+
"mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
265
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
266
|
+
"description": _propTypes.default.string,
|
|
267
|
+
"toString": _propTypes.default.func.isRequired,
|
|
268
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
269
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
270
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
271
|
+
"description": _propTypes.default.string,
|
|
272
|
+
"toString": _propTypes.default.func.isRequired,
|
|
273
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
274
|
+
}), _propTypes.default.string]),
|
|
275
|
+
"mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
276
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
277
|
+
"description": _propTypes.default.string,
|
|
278
|
+
"toString": _propTypes.default.func.isRequired,
|
|
279
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
280
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
281
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
282
|
+
"description": _propTypes.default.string,
|
|
283
|
+
"toString": _propTypes.default.func.isRequired,
|
|
284
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
285
|
+
}), _propTypes.default.string]),
|
|
286
|
+
"my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
|
|
287
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
288
|
+
"description": _propTypes.default.string,
|
|
289
|
+
"toString": _propTypes.default.func.isRequired,
|
|
290
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
291
|
+
}), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
|
|
292
|
+
"__@toStringTag": _propTypes.default.string.isRequired,
|
|
293
|
+
"description": _propTypes.default.string,
|
|
294
|
+
"toString": _propTypes.default.func.isRequired,
|
|
295
|
+
"valueOf": _propTypes.default.func.isRequired
|
|
296
|
+
}), _propTypes.default.string]),
|
|
297
|
+
"reverse": _propTypes.default.bool,
|
|
298
|
+
"tooltipId": _propTypes.default.string,
|
|
299
|
+
"useValidationIcon": _propTypes.default.bool,
|
|
300
|
+
"validationIconId": _propTypes.default.string,
|
|
301
|
+
"warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
|
|
159
302
|
};
|
|
303
|
+
FormField.displayName = "FormField";
|
|
160
304
|
var _default = FormField;
|
|
161
305
|
exports.default = _default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
declare const FormFieldStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export interface FieldLineStyleProps {
|
|
3
|
+
inline?: boolean;
|
|
4
|
+
}
|
|
5
|
+
declare const FieldLineStyle: import("styled-components").StyledComponent<"div", any, FieldLineStyleProps, never>;
|
|
6
|
+
export { FieldLineStyle };
|
|
7
|
+
export default FormFieldStyle;
|
|
@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.FieldLineStyle = void 0;
|
|
7
7
|
|
|
8
|
-
var _styledComponents =
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
|
|
10
10
|
var _styledSystem = require("styled-system");
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _themes = require("../../style/themes");
|
|
13
13
|
|
|
14
|
-
function
|
|
14
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
15
|
+
|
|
16
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
17
|
|
|
16
18
|
const FormFieldStyle = _styledComponents.default.div`
|
|
17
19
|
& + & {
|
|
@@ -23,20 +25,14 @@ const FormFieldStyle = _styledComponents.default.div`
|
|
|
23
25
|
}
|
|
24
26
|
`;
|
|
25
27
|
FormFieldStyle.defaultProps = {
|
|
26
|
-
theme:
|
|
28
|
+
theme: _themes.baseTheme
|
|
27
29
|
};
|
|
28
30
|
const FieldLineStyle = _styledComponents.default.div`
|
|
29
31
|
${({
|
|
30
32
|
inline
|
|
31
|
-
}) =>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
display: flex;
|
|
35
|
-
`;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
return "display: block;";
|
|
39
|
-
}}
|
|
33
|
+
}) => (0, _styledComponents.css)`
|
|
34
|
+
display: ${inline ? "flex" : "block"};
|
|
35
|
+
`}
|
|
40
36
|
`;
|
|
41
37
|
exports.FieldLineStyle = FieldLineStyle;
|
|
42
38
|
var _default = FormFieldStyle;
|
|
@@ -9,8 +9,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
|
|
|
9
9
|
help?: React.ReactNode;
|
|
10
10
|
/** Icon type */
|
|
11
11
|
helpIcon?: IconType;
|
|
12
|
-
/** Overrides the default tabindex of the Help component */
|
|
13
|
-
helpTabIndex?: number | string;
|
|
14
12
|
/** A string that represents the ID of another form element */
|
|
15
13
|
htmlFor?: string;
|
|
16
14
|
/** The unique id of the label element */
|
|
@@ -22,6 +20,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
|
|
|
22
20
|
/** Id of the validation icon */
|
|
23
21
|
validationIconId?: string;
|
|
24
22
|
}
|
|
25
|
-
export declare const Label: ({ align, children, disabled, error, help, helpIcon,
|
|
26
|
-
declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon,
|
|
23
|
+
export declare const Label: ({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element;
|
|
24
|
+
declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element>;
|
|
27
25
|
export default _default;
|
|
@@ -51,7 +51,6 @@ const Label = ({
|
|
|
51
51
|
error,
|
|
52
52
|
help,
|
|
53
53
|
helpIcon,
|
|
54
|
-
helpTabIndex,
|
|
55
54
|
htmlFor,
|
|
56
55
|
info,
|
|
57
56
|
inline,
|
|
@@ -117,7 +116,6 @@ const Label = ({
|
|
|
117
116
|
|
|
118
117
|
return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, wrapperProps, /*#__PURE__*/_react.default.createElement(_help.default, {
|
|
119
118
|
tooltipId: tooltipId,
|
|
120
|
-
tabIndex: Number(helpTabIndex),
|
|
121
119
|
type: helpIcon,
|
|
122
120
|
isFocused: isFocused
|
|
123
121
|
}, help));
|
|
@@ -149,7 +147,6 @@ Label.propTypes = {
|
|
|
149
147
|
"error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
|
|
150
148
|
"help": _propTypes.default.node,
|
|
151
149
|
"helpIcon": _propTypes.default.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
|
|
152
|
-
"helpTabIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
153
150
|
"htmlFor": _propTypes.default.string,
|
|
154
151
|
"info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
|
|
155
152
|
"inline": _propTypes.default.bool,
|
|
@@ -39,7 +39,7 @@ const ButtonToggleGroup = ({
|
|
|
39
39
|
error,
|
|
40
40
|
warning,
|
|
41
41
|
info,
|
|
42
|
-
validationOnLabel,
|
|
42
|
+
validationOnLabel = false,
|
|
43
43
|
label,
|
|
44
44
|
labelHelp,
|
|
45
45
|
labelSpacing,
|
|
@@ -52,7 +52,7 @@ const ButtonToggleGroup = ({
|
|
|
52
52
|
onChange,
|
|
53
53
|
onBlur,
|
|
54
54
|
value,
|
|
55
|
-
"data-component": dataComponent,
|
|
55
|
+
"data-component": dataComponent = "button-toggle-group",
|
|
56
56
|
"data-element": dataElement,
|
|
57
57
|
"data-role": dataRole,
|
|
58
58
|
helpAriaLabel,
|
|
@@ -105,10 +105,13 @@ ButtonToggleGroup.propTypes = { ...marginPropTypes,
|
|
|
105
105
|
/** Identifier used for testing purposes, applied to the root element of the component. */
|
|
106
106
|
"data-role": _propTypes.default.string,
|
|
107
107
|
|
|
108
|
+
/** Unique id for the root element of the component */
|
|
109
|
+
id: _propTypes.default.string.isRequired,
|
|
110
|
+
|
|
108
111
|
/** Specifies the name prop to be applied to each button in the group */
|
|
109
112
|
name: _propTypes.default.string.isRequired,
|
|
110
113
|
|
|
111
|
-
/**
|
|
114
|
+
/** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
|
|
112
115
|
children: (props, propName, componentName) => {
|
|
113
116
|
let error;
|
|
114
117
|
const prop = props[propName];
|
|
@@ -171,22 +174,18 @@ ButtonToggleGroup.propTypes = { ...marginPropTypes,
|
|
|
171
174
|
/** The alignment for the text in the label. */
|
|
172
175
|
labelAlign: _propTypes.default.string,
|
|
173
176
|
|
|
174
|
-
/** callback to handle change event */
|
|
175
|
-
onChange: _propTypes.default.func,
|
|
176
|
-
|
|
177
177
|
/** Callback fired when each RadioButton is blurred */
|
|
178
178
|
onBlur: _propTypes.default.func,
|
|
179
179
|
|
|
180
|
+
/** callback to handle change event */
|
|
181
|
+
onChange: _propTypes.default.func,
|
|
182
|
+
|
|
180
183
|
/** The value of the Button Toggle Group */
|
|
181
184
|
value: _propTypes.default.string,
|
|
182
185
|
|
|
183
186
|
/** Aria label for rendered help component */
|
|
184
187
|
helpAriaLabel: _propTypes.default.string
|
|
185
188
|
};
|
|
186
|
-
ButtonToggleGroup.defaultProps = {
|
|
187
|
-
validationOnLabel: false,
|
|
188
|
-
"data-component": "button-toggle-group"
|
|
189
|
-
};
|
|
190
189
|
ButtonToggleGroup.displayName = "ButtonToggleGroup";
|
|
191
190
|
var _default = ButtonToggleGroup;
|
|
192
191
|
exports.default = _default;
|
|
@@ -17,9 +17,11 @@ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps {
|
|
|
17
17
|
"data-element"?: string;
|
|
18
18
|
/** Identifier used for testing purposes, applied to the root element of the component. */
|
|
19
19
|
"data-role"?: string;
|
|
20
|
+
/** Unique id for the root element of the component */
|
|
21
|
+
id: string;
|
|
20
22
|
/** Specifies the name prop to be applied to each button in the group */
|
|
21
23
|
name: string;
|
|
22
|
-
/**
|
|
24
|
+
/** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
|
|
23
25
|
children?: ButtonToggle | ButtonToggle[];
|
|
24
26
|
/** When true, validation icon will be placed on label instead of being placed on the input */
|
|
25
27
|
validationOnLabel?: boolean;
|
|
@@ -207,9 +207,6 @@ Switch.propTypes = {
|
|
|
207
207
|
/** When true, validation icon will be placed on label instead of being placed by the input */
|
|
208
208
|
validationOnLabel: _propTypes.default.bool,
|
|
209
209
|
|
|
210
|
-
/** Override tab index on the validation and help icon */
|
|
211
|
-
helpTabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
212
|
-
|
|
213
210
|
/** Triggers loading animation */
|
|
214
211
|
loading: _propTypes.default.bool,
|
|
215
212
|
|
|
@@ -15,8 +15,6 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
|
|
|
15
15
|
adaptiveLabelBreakpoint?: number;
|
|
16
16
|
/** Set the default value of the Switch if component is meant to be used as uncontrolled */
|
|
17
17
|
defaultChecked?: boolean;
|
|
18
|
-
/** Overrides the default tabindex of the Help component */
|
|
19
|
-
helpTabIndex?: number | string;
|
|
20
18
|
/** Text alignment of the label */
|
|
21
19
|
labelAlign?: LabelAlign;
|
|
22
20
|
/** When true label is inline */
|
|
@@ -2,9 +2,9 @@ import * as React from "react";
|
|
|
2
2
|
import { PaddingProps } from "styled-system";
|
|
3
3
|
|
|
4
4
|
export interface TabContextProps {
|
|
5
|
-
setError
|
|
6
|
-
setWarning
|
|
7
|
-
setInfo
|
|
5
|
+
setError?: (childId: string, hasError: boolean) => void;
|
|
6
|
+
setWarning?: (childId: string, hasWarning: boolean) => void;
|
|
7
|
+
setInfo?: (childId: string, hasInfo: boolean) => void;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export interface TabProps extends PaddingProps {
|
package/package.json
CHANGED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { MarginProps } from "styled-system";
|
|
3
|
-
import { ValidationProps } from "../validations";
|
|
4
|
-
|
|
5
|
-
export interface CommonFormFieldPropTypes extends MarginProps, ValidationProps {
|
|
6
|
-
/** If true, the component will be disabled */
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
/** Help content to be displayed under an input */
|
|
9
|
-
fieldHelp?: React.ReactNode;
|
|
10
|
-
/** The unique id of the Help component tooltip, used for accessibility */
|
|
11
|
-
tooltipId?: string;
|
|
12
|
-
/** The unique id of the FieldHelp component */
|
|
13
|
-
fieldHelpId?: string;
|
|
14
|
-
/** Overrides the default tabindex of the Help component */
|
|
15
|
-
helpTabIndex?: number | string;
|
|
16
|
-
/** Label content */
|
|
17
|
-
label?: React.ReactNode;
|
|
18
|
-
/** Text alignment of the label */
|
|
19
|
-
labelAlign?: "left" | "right";
|
|
20
|
-
/** A message that the Help component will display */
|
|
21
|
-
labelHelp?: React.ReactNode;
|
|
22
|
-
/** Help Icon type */
|
|
23
|
-
labelHelpIcon?: string;
|
|
24
|
-
/** The unique id of the label element */
|
|
25
|
-
labelId?: string;
|
|
26
|
-
/** When true label is inline */
|
|
27
|
-
labelInline?: boolean;
|
|
28
|
-
/** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
|
|
29
|
-
labelSpacing?: 1 | 2;
|
|
30
|
-
/** Label width */
|
|
31
|
-
labelWidth?: number;
|
|
32
|
-
/** If true the label switches position with the input */
|
|
33
|
-
reverse?: boolean;
|
|
34
|
-
/** Id of the validation icon */
|
|
35
|
-
validationIconId?: string;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export interface FormFieldPropTypes extends CommonFormFieldPropTypes {
|
|
39
|
-
/** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
|
|
40
|
-
adaptiveLabelBreakpoint?: number;
|
|
41
|
-
/** Content to be rendered inside the FormField */
|
|
42
|
-
children?: React.ReactNode;
|
|
43
|
-
/**
|
|
44
|
-
* If true, the FieldHelp will be displayed inline
|
|
45
|
-
* To be used with labelInline prop set to true
|
|
46
|
-
*/
|
|
47
|
-
fieldHelpInline?: boolean;
|
|
48
|
-
/** Id of the element a label should be bound to */
|
|
49
|
-
id: string;
|
|
50
|
-
/** [Legacy] Flag to configure component as optional in Form */
|
|
51
|
-
isOptional?: boolean;
|
|
52
|
-
/** Flag to configure component as mandatory */
|
|
53
|
-
isRequired?: boolean;
|
|
54
|
-
/** Whether to show the validation icon */
|
|
55
|
-
useValidationIcon?: boolean;
|
|
56
|
-
/** Identifier used for testing purposes, applied to the root element of the component. */
|
|
57
|
-
"data-component"?: string;
|
|
58
|
-
/** Identifier used for testing purposes, applied to the root element of the component. */
|
|
59
|
-
"data-element"?: string;
|
|
60
|
-
/** Identifier used for testing purposes, applied to the root element of the component. */
|
|
61
|
-
"data-role"?: string;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
declare function FormField(props: FormFieldPropTypes): JSX.Element;
|
|
65
|
-
|
|
66
|
-
export default FormField;
|