carbon-react 110.3.0 → 110.4.0

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 (32) hide show
  1. package/esm/__internal__/radio-button-mapper/index.d.ts +2 -0
  2. package/esm/__internal__/radio-button-mapper/index.js +1 -0
  3. package/esm/__internal__/radio-button-mapper/radio-button-mapper.d.ts +21 -0
  4. package/esm/__internal__/utils/helpers/tags/index.d.ts +1 -0
  5. package/esm/components/button-toggle/button-toggle.component.d.ts +3 -3
  6. package/esm/components/button-toggle/button-toggle.component.js +21 -20
  7. package/esm/components/button-toggle/button-toggle.style.d.ts +1 -1
  8. package/esm/components/button-toggle-group/button-toggle-group.component.d.ts +45 -0
  9. package/esm/components/button-toggle-group/button-toggle-group.component.js +187 -92
  10. package/esm/components/button-toggle-group/button-toggle-group.style.d.ts +4 -0
  11. package/esm/components/button-toggle-group/button-toggle-group.style.js +2 -2
  12. package/esm/components/button-toggle-group/index.d.ts +2 -1
  13. package/lib/__internal__/radio-button-mapper/index.d.ts +2 -0
  14. package/lib/{components/button-toggle-group/documentation → __internal__/radio-button-mapper}/index.js +2 -2
  15. package/lib/__internal__/radio-button-mapper/package.json +6 -0
  16. package/lib/__internal__/radio-button-mapper/radio-button-mapper.d.ts +21 -0
  17. package/lib/__internal__/utils/helpers/tags/index.d.ts +1 -0
  18. package/lib/components/button-toggle/button-toggle.component.d.ts +3 -3
  19. package/lib/components/button-toggle/button-toggle.component.js +22 -20
  20. package/lib/components/button-toggle/button-toggle.style.d.ts +1 -1
  21. package/lib/components/button-toggle-group/button-toggle-group.component.d.ts +45 -0
  22. package/lib/components/button-toggle-group/button-toggle-group.component.js +190 -93
  23. package/lib/components/button-toggle-group/button-toggle-group.style.d.ts +4 -0
  24. package/lib/components/button-toggle-group/button-toggle-group.style.js +2 -2
  25. package/lib/components/button-toggle-group/index.d.ts +2 -1
  26. package/package.json +1 -1
  27. package/esm/components/button-toggle-group/__definition__.js +0 -38
  28. package/esm/components/button-toggle-group/button-toggle-group.d.ts +0 -58
  29. package/esm/components/button-toggle-group/documentation/index.js +0 -1
  30. package/lib/components/button-toggle-group/__definition__.js +0 -50
  31. package/lib/components/button-toggle-group/button-toggle-group.d.ts +0 -58
  32. package/lib/components/button-toggle-group/documentation/package.json +0 -6
package/lib/components/button-toggle/button-toggle.style.d.ts CHANGED
@@ -2,7 +2,7 @@ import { IconType } from "../icon";
2
2
  export declare type ButtonToggleIconSizes = "small" | "large";
3
3
  declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
4
  export interface StyledButtonToggleLabelProps {
5
- /** buttonIcon to render. */
5
+ /** The icon to be rendered inside of the button */
6
6
  buttonIcon?: IconType;
7
7
  /** Sets the size of the buttonIcon (eg. large) */
8
8
  buttonIconSize?: ButtonToggleIconSizes;
package/lib/components/button-toggle-group/button-toggle-group.component.d.ts ADDED
@@ -0,0 +1,45 @@
1
+ import React from "react";
2
+ import { MarginProps } from "styled-system";
3
+ import { ValidationProps } from "../../__internal__/validations";
4
+ import { TagProps } from "../../__internal__/utils/helpers/tags";
5
+ export interface ButtonToggleGroupProps extends ValidationProps, MarginProps, TagProps {
6
+ /** Unique id for the root element of the component */
7
+ id: string;
8
+ /** Specifies the name prop to be applied to each button in the group */
9
+ name: string;
10
+ /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
11
+ children?: React.ReactNode;
12
+ /** When true, validation icon will be placed on label instead of being placed on the input */
13
+ validationOnLabel?: boolean;
14
+ /** Text for the label. */
15
+ label?: string;
16
+ /** Text for the labels help tooltip. */
17
+ labelHelp?: React.ReactNode;
18
+ /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
19
+ labelSpacing?: 1 | 2;
20
+ /** The percentage width of the ButtonToggleGroup. */
21
+ inputWidth?: number | string;
22
+ /** The text for the field help. */
23
+ fieldHelp?: string;
24
+ /** Sets the field help to inline. */
25
+ fieldHelpInline?: boolean;
26
+ /** Sets the label to be inline. */
27
+ labelInline?: boolean;
28
+ /** The percentage width of the label. */
29
+ labelWidth?: number;
30
+ /** The alignment for the text in the label. */
31
+ labelAlign?: "left" | "right";
32
+ /** Callback triggered by blur event on the input. */
33
+ onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
34
+ /** Callback triggered by change event on the input. */
35
+ onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
36
+ /** The value of the Button Toggle Group */
37
+ value?: string;
38
+ /** Aria label for rendered help component */
39
+ helpAriaLabel?: string;
40
+ }
41
+ declare const ButtonToggleGroup: {
42
+ ({ children, name, error, warning, info, validationOnLabel, label, labelHelp, labelSpacing, inputWidth, fieldHelp, fieldHelpInline, labelInline, labelWidth, labelAlign, onChange, onBlur, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, ...props }: ButtonToggleGroupProps): JSX.Element;
43
+ displayName: string;
44
+ };
45
+ export default ButtonToggleGroup;
package/lib/components/button-toggle-group/button-toggle-group.component.js CHANGED
@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
- var _react = _interopRequireDefault(require("react"));
8
+ 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 _formField = _interopRequireDefault(require("../../__internal__/form-field"));
15
15
 
@@ -17,7 +17,7 @@ var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group.s
17
17
 
18
18
  var _buttonToggle = _interopRequireDefault(require("../button-toggle"));
19
19
 
20
- var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
20
+ var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper"));
21
21
 
22
22
  var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.component"));
23
23
 
@@ -29,9 +29,11 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
29
29
 
30
30
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
31
31
 
32
- 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); }
32
+ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
33
+
34
+ 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; }
33
35
 
34
- const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
36
+ 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
37
 
36
38
  const ButtonToggleGroup = ({
37
39
  children,
@@ -64,6 +66,14 @@ const ButtonToggleGroup = ({
64
66
  warning,
65
67
  info
66
68
  };
69
+ const hasCorrectItemStructure = (0, _react.useMemo)(() => {
70
+ const incorrectChild = _react.default.Children.toArray(children).find(child => {
71
+ return ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== _buttonToggle.default.displayName;
72
+ });
73
+
74
+ return !incorrectChild;
75
+ }, [children]);
76
+ !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `\`ButtonToggleGroup\` only accepts children of type \`${_buttonToggle.default.displayName}\``) : (0, _invariant.default)(false) : void 0;
67
77
  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
68
78
  helpAriaLabel: helpAriaLabel
69
79
  }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
@@ -94,97 +104,184 @@ const ButtonToggleGroup = ({
94
104
  }))))));
95
105
  };
96
106
 
97
- ButtonToggleGroup.propTypes = { ...marginPropTypes,
98
-
99
- /** Identifier used for testing purposes, applied to the root element of the component. */
107
+ ButtonToggleGroup.propTypes = {
108
+ "children": _propTypes.default.node,
100
109
  "data-component": _propTypes.default.string,
101
-
102
- /** Identifier used for testing purposes, applied to the root element of the component. */
103
110
  "data-element": _propTypes.default.string,
104
-
105
- /** Identifier used for testing purposes, applied to the root element of the component. */
106
111
  "data-role": _propTypes.default.string,
107
-
108
- /** Unique id for the root element of the component */
109
- id: _propTypes.default.string.isRequired,
110
-
111
- /** Specifies the name prop to be applied to each button in the group */
112
- name: _propTypes.default.string.isRequired,
113
-
114
- /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
115
- children: (props, propName, componentName) => {
116
- let error;
117
- const prop = props[propName];
118
-
119
- _react.default.Children.forEach(prop, child => {
120
- if (!child) {
121
- return;
122
- }
123
-
124
- if (_buttonToggle.default.displayName !== child.type.displayName) {
125
- error = new Error(`\`${componentName}\` only accepts children of type \`${_buttonToggle.default.displayName}\`.`);
126
- }
127
- });
128
-
129
- return error;
130
- },
131
-
132
- /** Indicate that error has occurred
133
- Pass string to display icon, tooltip and red border
134
- Pass true boolean to only display red border */
135
- error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
136
-
137
- /** Indicate that warning has occurred
138
- Pass string to display icon, tooltip and orange border
139
- Pass true boolean to only display orange border */
140
- warning: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
141
-
142
- /** Indicate additional information
143
- Pass string to display icon, tooltip and blue border
144
- Pass true boolean to only display blue border */
145
- info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
146
-
147
- /** When true, validation icon will be placed on label instead of being placed on the input */
148
- validationOnLabel: _propTypes.default.bool,
149
-
150
- /** Text for the label. */
151
- label: _propTypes.default.string,
152
-
153
- /** Text for the labels help tooltip. */
154
- labelHelp: _propTypes.default.node,
155
-
156
- /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
157
- labelSpacing: _propTypes.default.oneOf([1, 2]),
158
-
159
- /** The percentage width of the ButtonToggleGroup. */
160
- inputWidth: _propTypes.default.number,
161
-
162
- /** The text for the field help. */
163
- fieldHelp: _propTypes.default.string,
164
-
165
- /** Sets the field help to inline. */
166
- fieldHelpInline: _propTypes.default.bool,
167
-
168
- /** Sets the label to be inline. */
169
- labelInline: _propTypes.default.bool,
170
-
171
- /** The percentage width of the label. */
172
- labelWidth: _propTypes.default.number,
173
-
174
- /** The alignment for the text in the label. */
175
- labelAlign: _propTypes.default.string,
176
-
177
- /** Callback fired when each RadioButton is blurred */
178
- onBlur: _propTypes.default.func,
179
-
180
- /** callback to handle change event */
181
- onChange: _propTypes.default.func,
182
-
183
- /** The value of the Button Toggle Group */
184
- value: _propTypes.default.string,
185
-
186
- /** Aria label for rendered help component */
187
- helpAriaLabel: _propTypes.default.string
112
+ "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
113
+ "fieldHelp": _propTypes.default.string,
114
+ "fieldHelpInline": _propTypes.default.bool,
115
+ "helpAriaLabel": _propTypes.default.string,
116
+ "id": _propTypes.default.string.isRequired,
117
+ "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
118
+ "inputWidth": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
119
+ "label": _propTypes.default.string,
120
+ "labelAlign": _propTypes.default.oneOf(["left", "right"]),
121
+ "labelHelp": _propTypes.default.node,
122
+ "labelInline": _propTypes.default.bool,
123
+ "labelSpacing": _propTypes.default.oneOf([1, 2]),
124
+ "labelWidth": _propTypes.default.number,
125
+ "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
126
+ "__@toStringTag": _propTypes.default.string.isRequired,
127
+ "description": _propTypes.default.string,
128
+ "toString": _propTypes.default.func.isRequired,
129
+ "valueOf": _propTypes.default.func.isRequired
130
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
131
+ "__@toStringTag": _propTypes.default.string.isRequired,
132
+ "description": _propTypes.default.string,
133
+ "toString": _propTypes.default.func.isRequired,
134
+ "valueOf": _propTypes.default.func.isRequired
135
+ }), _propTypes.default.string]),
136
+ "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
137
+ "__@toStringTag": _propTypes.default.string.isRequired,
138
+ "description": _propTypes.default.string,
139
+ "toString": _propTypes.default.func.isRequired,
140
+ "valueOf": _propTypes.default.func.isRequired
141
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
142
+ "__@toStringTag": _propTypes.default.string.isRequired,
143
+ "description": _propTypes.default.string,
144
+ "toString": _propTypes.default.func.isRequired,
145
+ "valueOf": _propTypes.default.func.isRequired
146
+ }), _propTypes.default.string]),
147
+ "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
148
+ "__@toStringTag": _propTypes.default.string.isRequired,
149
+ "description": _propTypes.default.string,
150
+ "toString": _propTypes.default.func.isRequired,
151
+ "valueOf": _propTypes.default.func.isRequired
152
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
153
+ "__@toStringTag": _propTypes.default.string.isRequired,
154
+ "description": _propTypes.default.string,
155
+ "toString": _propTypes.default.func.isRequired,
156
+ "valueOf": _propTypes.default.func.isRequired
157
+ }), _propTypes.default.string]),
158
+ "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
159
+ "__@toStringTag": _propTypes.default.string.isRequired,
160
+ "description": _propTypes.default.string,
161
+ "toString": _propTypes.default.func.isRequired,
162
+ "valueOf": _propTypes.default.func.isRequired
163
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
164
+ "__@toStringTag": _propTypes.default.string.isRequired,
165
+ "description": _propTypes.default.string,
166
+ "toString": _propTypes.default.func.isRequired,
167
+ "valueOf": _propTypes.default.func.isRequired
168
+ }), _propTypes.default.string]),
169
+ "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
170
+ "__@toStringTag": _propTypes.default.string.isRequired,
171
+ "description": _propTypes.default.string,
172
+ "toString": _propTypes.default.func.isRequired,
173
+ "valueOf": _propTypes.default.func.isRequired
174
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
175
+ "__@toStringTag": _propTypes.default.string.isRequired,
176
+ "description": _propTypes.default.string,
177
+ "toString": _propTypes.default.func.isRequired,
178
+ "valueOf": _propTypes.default.func.isRequired
179
+ }), _propTypes.default.string]),
180
+ "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
181
+ "__@toStringTag": _propTypes.default.string.isRequired,
182
+ "description": _propTypes.default.string,
183
+ "toString": _propTypes.default.func.isRequired,
184
+ "valueOf": _propTypes.default.func.isRequired
185
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
186
+ "__@toStringTag": _propTypes.default.string.isRequired,
187
+ "description": _propTypes.default.string,
188
+ "toString": _propTypes.default.func.isRequired,
189
+ "valueOf": _propTypes.default.func.isRequired
190
+ }), _propTypes.default.string]),
191
+ "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
192
+ "__@toStringTag": _propTypes.default.string.isRequired,
193
+ "description": _propTypes.default.string,
194
+ "toString": _propTypes.default.func.isRequired,
195
+ "valueOf": _propTypes.default.func.isRequired
196
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
197
+ "__@toStringTag": _propTypes.default.string.isRequired,
198
+ "description": _propTypes.default.string,
199
+ "toString": _propTypes.default.func.isRequired,
200
+ "valueOf": _propTypes.default.func.isRequired
201
+ }), _propTypes.default.string]),
202
+ "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
203
+ "__@toStringTag": _propTypes.default.string.isRequired,
204
+ "description": _propTypes.default.string,
205
+ "toString": _propTypes.default.func.isRequired,
206
+ "valueOf": _propTypes.default.func.isRequired
207
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
208
+ "__@toStringTag": _propTypes.default.string.isRequired,
209
+ "description": _propTypes.default.string,
210
+ "toString": _propTypes.default.func.isRequired,
211
+ "valueOf": _propTypes.default.func.isRequired
212
+ }), _propTypes.default.string]),
213
+ "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
214
+ "__@toStringTag": _propTypes.default.string.isRequired,
215
+ "description": _propTypes.default.string,
216
+ "toString": _propTypes.default.func.isRequired,
217
+ "valueOf": _propTypes.default.func.isRequired
218
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
219
+ "__@toStringTag": _propTypes.default.string.isRequired,
220
+ "description": _propTypes.default.string,
221
+ "toString": _propTypes.default.func.isRequired,
222
+ "valueOf": _propTypes.default.func.isRequired
223
+ }), _propTypes.default.string]),
224
+ "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
225
+ "__@toStringTag": _propTypes.default.string.isRequired,
226
+ "description": _propTypes.default.string,
227
+ "toString": _propTypes.default.func.isRequired,
228
+ "valueOf": _propTypes.default.func.isRequired
229
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
230
+ "__@toStringTag": _propTypes.default.string.isRequired,
231
+ "description": _propTypes.default.string,
232
+ "toString": _propTypes.default.func.isRequired,
233
+ "valueOf": _propTypes.default.func.isRequired
234
+ }), _propTypes.default.string]),
235
+ "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
236
+ "__@toStringTag": _propTypes.default.string.isRequired,
237
+ "description": _propTypes.default.string,
238
+ "toString": _propTypes.default.func.isRequired,
239
+ "valueOf": _propTypes.default.func.isRequired
240
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
241
+ "__@toStringTag": _propTypes.default.string.isRequired,
242
+ "description": _propTypes.default.string,
243
+ "toString": _propTypes.default.func.isRequired,
244
+ "valueOf": _propTypes.default.func.isRequired
245
+ }), _propTypes.default.string]),
246
+ "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
247
+ "__@toStringTag": _propTypes.default.string.isRequired,
248
+ "description": _propTypes.default.string,
249
+ "toString": _propTypes.default.func.isRequired,
250
+ "valueOf": _propTypes.default.func.isRequired
251
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
252
+ "__@toStringTag": _propTypes.default.string.isRequired,
253
+ "description": _propTypes.default.string,
254
+ "toString": _propTypes.default.func.isRequired,
255
+ "valueOf": _propTypes.default.func.isRequired
256
+ }), _propTypes.default.string]),
257
+ "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
258
+ "__@toStringTag": _propTypes.default.string.isRequired,
259
+ "description": _propTypes.default.string,
260
+ "toString": _propTypes.default.func.isRequired,
261
+ "valueOf": _propTypes.default.func.isRequired
262
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
263
+ "__@toStringTag": _propTypes.default.string.isRequired,
264
+ "description": _propTypes.default.string,
265
+ "toString": _propTypes.default.func.isRequired,
266
+ "valueOf": _propTypes.default.func.isRequired
267
+ }), _propTypes.default.string]),
268
+ "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
269
+ "__@toStringTag": _propTypes.default.string.isRequired,
270
+ "description": _propTypes.default.string,
271
+ "toString": _propTypes.default.func.isRequired,
272
+ "valueOf": _propTypes.default.func.isRequired
273
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
274
+ "__@toStringTag": _propTypes.default.string.isRequired,
275
+ "description": _propTypes.default.string,
276
+ "toString": _propTypes.default.func.isRequired,
277
+ "valueOf": _propTypes.default.func.isRequired
278
+ }), _propTypes.default.string]),
279
+ "name": _propTypes.default.string.isRequired,
280
+ "onBlur": _propTypes.default.func,
281
+ "onChange": _propTypes.default.func,
282
+ "validationOnLabel": _propTypes.default.bool,
283
+ "value": _propTypes.default.string,
284
+ "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
188
285
  };
189
286
  ButtonToggleGroup.displayName = "ButtonToggleGroup";
190
287
  var _default = ButtonToggleGroup;
package/lib/components/button-toggle-group/button-toggle-group.style.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { ButtonToggleGroupProps } from ".";
2
+ import { ValidationProps } from "../../__internal__/validations";
3
+ declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, ValidationProps & Pick<ButtonToggleGroupProps, "inputWidth">, never>;
4
+ export default StyledButtonToggleGroup;
package/lib/components/button-toggle-group/button-toggle-group.style.js CHANGED
@@ -17,7 +17,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
17
17
 
18
18
  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; }
19
19
 
20
- const ButtonToggleGroupStyle = _styledComponents.default.div`
20
+ const StyledButtonToggleGroup = _styledComponents.default.div`
21
21
  display: flex;
22
22
 
23
23
  ${({
@@ -50,5 +50,5 @@ const ButtonToggleGroupStyle = _styledComponents.default.div`
50
50
  margin-left: 4px;
51
51
  }
52
52
  `;
53
- var _default = ButtonToggleGroupStyle;
53
+ var _default = StyledButtonToggleGroup;
54
54
  exports.default = _default;
package/lib/components/button-toggle-group/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export { default } from "./button-toggle-group";
1
+ export { default } from "./button-toggle-group.component";
2
+ export type { ButtonToggleGroupProps } from "./button-toggle-group.component";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "110.3.0",
3
+ "version": "110.4.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {
package/esm/components/button-toggle-group/__definition__.js DELETED
@@ -1,38 +0,0 @@
1
- import ButtonToggleGroup from "./button-toggle-group.component";
2
- import Definition from "./../../../demo/utils/definition";
3
- const definition = new Definition("button-toggle-group", ButtonToggleGroup, {
4
- description: "Adds support for validation, warning and info messages on a group of Button Toggles.",
5
- designerNotes: `
6
- * Similar to [Button Toggle](/components/button-toggle), but use this component when you need your button toggles to act like a single form component, with field help and validation.
7
- * Unlike [Button Toggle](/components/button-toggle), this component doesn't require one option to be auto-selected.
8
- `,
9
- relatedComponentsNotes: `
10
- * Don't need validation on your options? [Try Button Toggle](/components/button-toggle).
11
- `,
12
- type: "form",
13
- propValues: {
14
- children: `<ButtonToggle name={ 'grouped' } id={ 'foo' } value={ 'foo' }>
15
- Foo
16
- </ButtonToggle>
17
- <ButtonToggle name={ 'grouped' } id={ 'bar' } value={ 'bar' }>
18
- Bar
19
- </ButtonToggle>
20
- <ButtonToggle name={ 'grouped' } id={ 'baz' } value={ 'baz' }>
21
- Baz
22
- </ButtonToggle>`,
23
- value: ""
24
- },
25
- propTypes: {
26
- children: "Node",
27
- className: "String",
28
- value: "String"
29
- },
30
- requiredProps: ["children"],
31
- propDescriptions: {
32
- value: "The value associated with the button toggle group.",
33
- children: "The children to render for the button toggle group."
34
- },
35
- hiddenProps: ["children", "value"]
36
- });
37
- definition.isAnInput();
38
- export default definition;
package/esm/components/button-toggle-group/button-toggle-group.d.ts DELETED
@@ -1,58 +0,0 @@
1
- import * as React from "react";
2
- import { MarginProps } from "styled-system";
3
-
4
- import { ButtonToggleProps } from "../button-toggle";
5
- import { ValidationProps } from "../../__internal__/validations";
6
-
7
- type ButtonToggle =
8
- | React.ReactElement<ButtonToggleProps>
9
- | boolean
10
- | null
11
- | undefined;
12
-
13
- export interface ButtonToggleGroupProps extends ValidationProps, MarginProps {
14
- /** Identifier used for testing purposes, applied to the root element of the component. */
15
- "data-component"?: string;
16
- /** Identifier used for testing purposes, applied to the root element of the component. */
17
- "data-element"?: string;
18
- /** Identifier used for testing purposes, applied to the root element of the component. */
19
- "data-role"?: string;
20
- /** Unique id for the root element of the component */
21
- id: string;
22
- /** Specifies the name prop to be applied to each button in the group */
23
- name: string;
24
- /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
25
- children?: ButtonToggle | ButtonToggle[];
26
- /** When true, validation icon will be placed on label instead of being placed on the input */
27
- validationOnLabel?: boolean;
28
- /** Text for the label. */
29
- label?: string;
30
- /** Text for the labels help tooltip. */
31
- labelHelp?: React.ReactNode;
32
- /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
33
- labelSpacing?: 1 | 2;
34
- /** The percentage width of the ButtonToggleGroup. */
35
- inputWidth?: number;
36
- /** The text for the field help. */
37
- fieldHelp?: string;
38
- /** Sets the field help to inline. */
39
- fieldHelpInline?: boolean;
40
- /** Sets the label to be inline. */
41
- labelInline?: boolean;
42
- /** The percentage width of the label. */
43
- labelWidth?: number;
44
- /** The alignment for the text in the label. */
45
- labelAlign?: string;
46
- /** Callback triggered by blur event on the input. */
47
- onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
48
- /** Callback triggered by change event on the input. */
49
- onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
50
- /** The value of the Button Toggle Group */
51
- value?: string;
52
- /** Aria label for rendered help component */
53
- helpAriaLabel?: string;
54
- }
55
-
56
- declare function ButtonToggleGroup(props: ButtonToggleGroupProps): JSX.Element;
57
-
58
- export default ButtonToggleGroup;
package/esm/components/button-toggle-group/documentation/index.js DELETED
@@ -1 +0,0 @@
1
- export { default } from "./notes.md";
package/lib/components/button-toggle-group/__definition__.js DELETED
@@ -1,50 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _buttonToggleGroup = _interopRequireDefault(require("./button-toggle-group.component"));
9
-
10
- var _definition = _interopRequireDefault(require("./../../../demo/utils/definition"));
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- const definition = new _definition.default("button-toggle-group", _buttonToggleGroup.default, {
15
- description: "Adds support for validation, warning and info messages on a group of Button Toggles.",
16
- designerNotes: `
17
- * Similar to [Button Toggle](/components/button-toggle), but use this component when you need your button toggles to act like a single form component, with field help and validation.
18
- * Unlike [Button Toggle](/components/button-toggle), this component doesn't require one option to be auto-selected.
19
- `,
20
- relatedComponentsNotes: `
21
- * Don't need validation on your options? [Try Button Toggle](/components/button-toggle).
22
- `,
23
- type: "form",
24
- propValues: {
25
- children: `<ButtonToggle name={ 'grouped' } id={ 'foo' } value={ 'foo' }>
26
- Foo
27
- </ButtonToggle>
28
- <ButtonToggle name={ 'grouped' } id={ 'bar' } value={ 'bar' }>
29
- Bar
30
- </ButtonToggle>
31
- <ButtonToggle name={ 'grouped' } id={ 'baz' } value={ 'baz' }>
32
- Baz
33
- </ButtonToggle>`,
34
- value: ""
35
- },
36
- propTypes: {
37
- children: "Node",
38
- className: "String",
39
- value: "String"
40
- },
41
- requiredProps: ["children"],
42
- propDescriptions: {
43
- value: "The value associated with the button toggle group.",
44
- children: "The children to render for the button toggle group."
45
- },
46
- hiddenProps: ["children", "value"]
47
- });
48
- definition.isAnInput();
49
- var _default = definition;
50
- exports.default = _default;
package/lib/components/button-toggle-group/button-toggle-group.d.ts DELETED
@@ -1,58 +0,0 @@
1
- import * as React from "react";
2
- import { MarginProps } from "styled-system";
3
-
4
- import { ButtonToggleProps } from "../button-toggle";
5
- import { ValidationProps } from "../../__internal__/validations";
6
-
7
- type ButtonToggle =
8
- | React.ReactElement<ButtonToggleProps>
9
- | boolean
10
- | null
11
- | undefined;
12
-
13
- export interface ButtonToggleGroupProps extends ValidationProps, MarginProps {
14
- /** Identifier used for testing purposes, applied to the root element of the component. */
15
- "data-component"?: string;
16
- /** Identifier used for testing purposes, applied to the root element of the component. */
17
- "data-element"?: string;
18
- /** Identifier used for testing purposes, applied to the root element of the component. */
19
- "data-role"?: string;
20
- /** Unique id for the root element of the component */
21
- id: string;
22
- /** Specifies the name prop to be applied to each button in the group */
23
- name: string;
24
- /** Togglable buttons to be rendered. Only accepts children of type ButtonToggle */
25
- children?: ButtonToggle | ButtonToggle[];
26
- /** When true, validation icon will be placed on label instead of being placed on the input */
27
- validationOnLabel?: boolean;
28
- /** Text for the label. */
29
- label?: string;
30
- /** Text for the labels help tooltip. */
31
- labelHelp?: React.ReactNode;
32
- /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
33
- labelSpacing?: 1 | 2;
34
- /** The percentage width of the ButtonToggleGroup. */
35
- inputWidth?: number;
36
- /** The text for the field help. */
37
- fieldHelp?: string;
38
- /** Sets the field help to inline. */
39
- fieldHelpInline?: boolean;
40
- /** Sets the label to be inline. */
41
- labelInline?: boolean;
42
- /** The percentage width of the label. */
43
- labelWidth?: number;
44
- /** The alignment for the text in the label. */
45
- labelAlign?: string;
46
- /** Callback triggered by blur event on the input. */
47
- onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
48
- /** Callback triggered by change event on the input. */
49
- onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
50
- /** The value of the Button Toggle Group */
51
- value?: string;
52
- /** Aria label for rendered help component */
53
- helpAriaLabel?: string;
54
- }
55
-
56
- declare function ButtonToggleGroup(props: ButtonToggleGroupProps): JSX.Element;
57
-
58
- export default ButtonToggleGroup;
package/lib/components/button-toggle-group/documentation/package.json DELETED
@@ -1,6 +0,0 @@
1
- {
2
- "sideEffects": false,
3
- "module": "../../../../esm/components/button-toggle-group/documentation/index.js",
4
- "main": "./index.js",
5
- "types": "./index.d.ts"
6
- }