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.
Files changed (27) hide show
  1. package/esm/__internal__/form-field/form-field.component.d.ts +59 -0
  2. package/esm/__internal__/form-field/form-field.component.js +202 -57
  3. package/esm/__internal__/form-field/form-field.style.d.ts +7 -0
  4. package/esm/__internal__/form-field/form-field.style.js +6 -12
  5. package/esm/__internal__/form-field/index.d.ts +2 -5
  6. package/esm/__internal__/label/label.component.d.ts +2 -4
  7. package/esm/__internal__/label/label.component.js +0 -3
  8. package/esm/components/button-toggle-group/button-toggle-group.component.js +9 -10
  9. package/esm/components/button-toggle-group/button-toggle-group.d.ts +3 -1
  10. package/esm/components/switch/switch.component.js +0 -3
  11. package/esm/components/switch/switch.d.ts +0 -2
  12. package/esm/components/tabs/tab/tab.d.ts +3 -3
  13. package/lib/__internal__/form-field/form-field.component.d.ts +59 -0
  14. package/lib/__internal__/form-field/form-field.component.js +201 -57
  15. package/lib/__internal__/form-field/form-field.style.d.ts +7 -0
  16. package/lib/__internal__/form-field/form-field.style.js +9 -13
  17. package/lib/__internal__/form-field/index.d.ts +2 -5
  18. package/lib/__internal__/label/label.component.d.ts +2 -4
  19. package/lib/__internal__/label/label.component.js +0 -3
  20. package/lib/components/button-toggle-group/button-toggle-group.component.js +9 -10
  21. package/lib/components/button-toggle-group/button-toggle-group.d.ts +3 -1
  22. package/lib/components/switch/switch.component.js +0 -3
  23. package/lib/components/switch/switch.d.ts +0 -2
  24. package/lib/components/tabs/tab/tab.d.ts +3 -3
  25. package/package.json +1 -1
  26. package/esm/__internal__/form-field/form-field.d.ts +0 -66
  27. 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 _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
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 context = (0, _react.useContext)(_tab.TabContext);
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 (context && context.setError && context.setWarning && context.setInfo) {
76
- context.setError(id, !!error);
77
- context.setWarning(id, !!warning);
78
- context.setInfo(id, !!info);
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
- /** Styled system margin props */
122
- ...marginPropTypes,
123
- children: _propTypes.default.node,
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
- fieldHelp: _propTypes.default.node,
129
- fieldHelpInline: _propTypes.default.bool,
130
- error: errorPropType,
131
- warning: errorPropType,
132
- info: errorPropType,
133
- tooltipId: _propTypes.default.string,
134
- fieldHelpId: _propTypes.default.string,
135
- helpTabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
136
- id: _propTypes.default.string.isRequired,
137
- isOptional: _propTypes.default.bool,
138
- label: _propTypes.default.node,
139
- labelId: _propTypes.default.string,
140
- labelAlign: _propTypes.default.oneOf(["left", "right"]),
141
- labelHelp: _propTypes.default.node,
142
- labelHelpIcon: _propTypes.default.string,
143
- labelInline: _propTypes.default.bool,
144
-
145
- /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
146
- labelSpacing: _propTypes.default.oneOf([1, 2]),
147
- labelWidth: _propTypes.default.number,
148
- reverse: _propTypes.default.bool,
149
- useValidationIcon: _propTypes.default.bool,
150
-
151
- /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
152
- adaptiveLabelBreakpoint: _propTypes.default.number,
153
-
154
- /** Flag to configure component as mandatory */
155
- isRequired: _propTypes.default.bool,
156
-
157
- /** Id of the validation icon */
158
- validationIconId: _propTypes.default.string
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 = _interopRequireDefault(require("styled-components"));
8
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
10
10
  var _styledSystem = require("styled-system");
11
11
 
12
- var _base = _interopRequireDefault(require("../../style/themes/base"));
12
+ var _themes = require("../../style/themes");
13
13
 
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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: _base.default
28
+ theme: _themes.baseTheme
27
29
  };
28
30
  const FieldLineStyle = _styledComponents.default.div`
29
31
  ${({
30
32
  inline
31
- }) => {
32
- if (inline) {
33
- return `
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;
@@ -1,5 +1,2 @@
1
- export {
2
- default,
3
- CommonFormFieldPropTypes,
4
- FormFieldPropTypes,
5
- } from "./form-field";
1
+ export { default } from "./form-field.component";
2
+ export type { FormFieldProps } from "./form-field.component";
@@ -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, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element;
26
- declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element>;
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
- /** Children to be rendered (ButtonToggle). */
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
- /** Children to be rendered (ButtonToggle). */
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: (childId: string, hasError: boolean) => void;
6
- setWarning: (childId: string, hasWarning: boolean) => void;
7
- setInfo: (childId: string, hasInfo: boolean) => void;
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,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "109.5.0",
3
+ "version": "109.5.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {
@@ -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;