@carbon/react 1.13.0-rc.0 → 1.14.0-rc.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.
- package/es/components/Accordion/Accordion.Skeleton.js +12 -4
- package/es/components/Accordion/Accordion.js +9 -2
- package/es/components/FileUploader/Filename.js +3 -1
- package/es/components/FluidTextArea/FluidTextArea.js +130 -0
- package/es/components/FluidTextInput/FluidTextInput.js +13 -4
- package/es/components/Notification/Notification.js +6 -2
- package/es/components/ProgressIndicator/ProgressIndicator.js +128 -154
- package/es/components/RadioTile/RadioTile.js +2 -11
- package/es/components/TextArea/TextArea.js +14 -5
- package/es/components/TextInput/PasswordInput.js +7 -6
- package/es/components/Toggle/Toggle.js +1 -1
- package/es/index.js +2 -2
- package/lib/components/Accordion/Accordion.Skeleton.js +12 -4
- package/lib/components/Accordion/Accordion.js +9 -2
- package/lib/components/FileUploader/Filename.js +3 -1
- package/lib/components/FluidTextArea/FluidTextArea.js +140 -0
- package/lib/components/FluidTextInput/FluidTextInput.js +12 -3
- package/lib/components/Notification/Notification.js +6 -2
- package/lib/components/ProgressIndicator/ProgressIndicator.js +126 -152
- package/lib/components/RadioTile/RadioTile.js +2 -11
- package/lib/components/TextArea/TextArea.js +13 -4
- package/lib/components/TextInput/PasswordInput.js +7 -6
- package/lib/components/Toggle/Toggle.js +1 -1
- package/lib/index.js +47 -46
- package/package.json +9 -8
- package/es/components/ProgressIndicator/index.js +0 -15
- package/es/components/ProgressIndicator/next/ProgressIndicator.js +0 -117
- package/lib/components/ProgressIndicator/index.js +0 -39
- package/lib/components/ProgressIndicator/next/ProgressIndicator.js +0 -127
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
+
var cx = require('classnames');
|
|
13
14
|
var PropTypes = require('prop-types');
|
|
14
15
|
var React = require('react');
|
|
15
|
-
var cx = require('classnames');
|
|
16
16
|
var iconsReact = require('@carbon/icons-react');
|
|
17
17
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
18
18
|
var match = require('../../internal/keyboard/match.js');
|
|
@@ -20,12 +20,12 @@ var keys = require('../../internal/keyboard/keys.js');
|
|
|
20
20
|
|
|
21
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
22
|
|
|
23
|
+
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
23
24
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
24
25
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
25
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
26
26
|
|
|
27
|
-
var _excluded = ["
|
|
28
|
-
_excluded2 = ["className", "
|
|
27
|
+
var _excluded = ["children", "className", "currentIndex", "onChange", "spaceEqually", "vertical"],
|
|
28
|
+
_excluded2 = ["label", "description", "className", "current", "complete", "invalid", "secondaryLabel", "disabled", "onClick", "translateWithId"];
|
|
29
29
|
var defaultTranslations = {
|
|
30
30
|
'carbon.progress-step.complete': 'Complete',
|
|
31
31
|
'carbon.progress-step.incomplete': 'Incomplete',
|
|
@@ -37,23 +37,124 @@ function translateWithId(messageId) {
|
|
|
37
37
|
return defaultTranslations[messageId];
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
function
|
|
41
|
-
var
|
|
42
|
-
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
disabled = _ref.disabled,
|
|
51
|
-
onClick = _ref.onClick,
|
|
52
|
-
t = _ref.translateWithId,
|
|
40
|
+
function ProgressIndicator(_ref) {
|
|
41
|
+
var _cx;
|
|
42
|
+
|
|
43
|
+
var children = _ref.children,
|
|
44
|
+
customClassName = _ref.className,
|
|
45
|
+
_ref$currentIndex = _ref.currentIndex,
|
|
46
|
+
controlledIndex = _ref$currentIndex === void 0 ? 0 : _ref$currentIndex,
|
|
47
|
+
onChange = _ref.onChange,
|
|
48
|
+
spaceEqually = _ref.spaceEqually,
|
|
49
|
+
vertical = _ref.vertical,
|
|
53
50
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
54
51
|
|
|
55
52
|
var prefix = usePrefix.usePrefix();
|
|
56
|
-
|
|
53
|
+
|
|
54
|
+
var _useState = React.useState(controlledIndex),
|
|
55
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
56
|
+
currentIndex = _useState2[0],
|
|
57
|
+
setCurrentIndex = _useState2[1];
|
|
58
|
+
|
|
59
|
+
var _useState3 = React.useState(controlledIndex),
|
|
60
|
+
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
|
61
|
+
prevControlledIndex = _useState4[0],
|
|
62
|
+
setPrevControlledIndex = _useState4[1];
|
|
63
|
+
|
|
64
|
+
var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--progress"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--progress--vertical"), vertical), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, customClassName), _cx));
|
|
65
|
+
|
|
66
|
+
if (controlledIndex !== prevControlledIndex) {
|
|
67
|
+
setCurrentIndex(controlledIndex);
|
|
68
|
+
setPrevControlledIndex(controlledIndex);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
|
|
72
|
+
className: className
|
|
73
|
+
}, rest), React__default["default"].Children.map(children, function (child, index) {
|
|
74
|
+
// only setup click handlers if onChange event is passed
|
|
75
|
+
var onClick = onChange ? function () {
|
|
76
|
+
return onChange(index);
|
|
77
|
+
} : undefined;
|
|
78
|
+
|
|
79
|
+
if (index === currentIndex) {
|
|
80
|
+
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
81
|
+
complete: child.props.complete,
|
|
82
|
+
current: child.props.complete ? false : true,
|
|
83
|
+
index: index,
|
|
84
|
+
onClick: onClick
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
if (index < currentIndex) {
|
|
89
|
+
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
90
|
+
complete: true,
|
|
91
|
+
index: index,
|
|
92
|
+
onClick: onClick
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
if (index > currentIndex) {
|
|
97
|
+
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
98
|
+
complete: child.props.complete || false,
|
|
99
|
+
index: index,
|
|
100
|
+
onClick: onClick
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
return null;
|
|
105
|
+
}));
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
ProgressIndicator.propTypes = {
|
|
109
|
+
/**
|
|
110
|
+
* Provide `<ProgressStep>` components to be rendered in the
|
|
111
|
+
* `<ProgressIndicator>`
|
|
112
|
+
*/
|
|
113
|
+
children: PropTypes__default["default"].node,
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Provide an optional className to be applied to the containing node
|
|
117
|
+
*/
|
|
118
|
+
className: PropTypes__default["default"].string,
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Optionally specify the current step array index
|
|
122
|
+
*/
|
|
123
|
+
currentIndex: PropTypes__default["default"].number,
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
|
|
127
|
+
*/
|
|
128
|
+
onChange: PropTypes__default["default"].func,
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* Specify whether the progress steps should be split equally in size in the div
|
|
132
|
+
*/
|
|
133
|
+
spaceEqually: PropTypes__default["default"].bool,
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Determines whether or not the ProgressIndicator should be rendered vertically.
|
|
137
|
+
*/
|
|
138
|
+
vertical: PropTypes__default["default"].bool
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
function ProgressStep(_ref2) {
|
|
142
|
+
var _cx2;
|
|
143
|
+
|
|
144
|
+
var label = _ref2.label,
|
|
145
|
+
description = _ref2.description,
|
|
146
|
+
className = _ref2.className,
|
|
147
|
+
current = _ref2.current,
|
|
148
|
+
complete = _ref2.complete,
|
|
149
|
+
invalid = _ref2.invalid,
|
|
150
|
+
secondaryLabel = _ref2.secondaryLabel,
|
|
151
|
+
disabled = _ref2.disabled,
|
|
152
|
+
onClick = _ref2.onClick,
|
|
153
|
+
t = _ref2.translateWithId,
|
|
154
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
|
|
155
|
+
|
|
156
|
+
var prefix = usePrefix.usePrefix();
|
|
157
|
+
var classes = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step--current"), current), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step--complete"), complete), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step--incomplete"), !complete && !current), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, className, className), _cx2));
|
|
57
158
|
|
|
58
159
|
var handleKeyDown = function handleKeyDown(e) {
|
|
59
160
|
if (match.matches(e, [keys.Enter, keys.Space])) {
|
|
@@ -62,12 +163,12 @@ function ProgressStep(_ref) {
|
|
|
62
163
|
}; // eslint-disable-next-line react/prop-types
|
|
63
164
|
|
|
64
165
|
|
|
65
|
-
var SVGIcon = function SVGIcon(
|
|
66
|
-
var complete =
|
|
67
|
-
current =
|
|
68
|
-
description =
|
|
69
|
-
invalid =
|
|
70
|
-
prefix =
|
|
166
|
+
var SVGIcon = function SVGIcon(_ref3) {
|
|
167
|
+
var complete = _ref3.complete,
|
|
168
|
+
current = _ref3.current,
|
|
169
|
+
description = _ref3.description,
|
|
170
|
+
invalid = _ref3.invalid,
|
|
171
|
+
prefix = _ref3.prefix;
|
|
71
172
|
|
|
72
173
|
if (invalid) {
|
|
73
174
|
return /*#__PURE__*/React__default["default"].createElement(iconsReact.Warning, {
|
|
@@ -129,6 +230,7 @@ function ProgressStep(_ref) {
|
|
|
129
230
|
className: "".concat(prefix, "--progress-line")
|
|
130
231
|
})));
|
|
131
232
|
}
|
|
233
|
+
|
|
132
234
|
ProgressStep.propTypes = {
|
|
133
235
|
/**
|
|
134
236
|
* Provide an optional className to be applied to the containing `<li>` node
|
|
@@ -199,134 +301,6 @@ ProgressStep.propTypes = {
|
|
|
199
301
|
ProgressStep.defaultProps = {
|
|
200
302
|
translateWithId: translateWithId
|
|
201
303
|
};
|
|
202
|
-
var ProgressIndicator = /*#__PURE__*/function (_Component) {
|
|
203
|
-
_rollupPluginBabelHelpers.inherits(ProgressIndicator, _Component);
|
|
204
|
-
|
|
205
|
-
var _super = _rollupPluginBabelHelpers.createSuper(ProgressIndicator);
|
|
206
|
-
|
|
207
|
-
function ProgressIndicator() {
|
|
208
|
-
var _this;
|
|
209
|
-
|
|
210
|
-
_rollupPluginBabelHelpers.classCallCheck(this, ProgressIndicator);
|
|
211
|
-
|
|
212
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
213
|
-
args[_key] = arguments[_key];
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
217
|
-
|
|
218
|
-
_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {});
|
|
219
|
-
|
|
220
|
-
_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "renderSteps", function () {
|
|
221
|
-
var onChange = _this.props.onChange;
|
|
222
|
-
return React__default["default"].Children.map(_this.props.children, function (child, index) {
|
|
223
|
-
// only setup click handlers if onChange event is passed
|
|
224
|
-
var onClick = onChange ? function () {
|
|
225
|
-
return onChange(index);
|
|
226
|
-
} : undefined;
|
|
227
|
-
|
|
228
|
-
if (index === _this.state.currentIndex) {
|
|
229
|
-
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
230
|
-
current: true,
|
|
231
|
-
index: index,
|
|
232
|
-
onClick: onClick
|
|
233
|
-
});
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
if (index < _this.state.currentIndex) {
|
|
237
|
-
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
238
|
-
complete: true,
|
|
239
|
-
index: index,
|
|
240
|
-
onClick: onClick
|
|
241
|
-
});
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
if (index > _this.state.currentIndex) {
|
|
245
|
-
return /*#__PURE__*/React__default["default"].cloneElement(child, {
|
|
246
|
-
complete: child.props.complete || false,
|
|
247
|
-
index: index,
|
|
248
|
-
onClick: onClick
|
|
249
|
-
});
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
return null;
|
|
253
|
-
});
|
|
254
|
-
});
|
|
255
|
-
|
|
256
|
-
return _this;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
_rollupPluginBabelHelpers.createClass(ProgressIndicator, [{
|
|
260
|
-
key: "render",
|
|
261
|
-
value: function render() {
|
|
262
|
-
var _classnames3;
|
|
263
|
-
|
|
264
|
-
var _this$props = this.props,
|
|
265
|
-
className = _this$props.className;
|
|
266
|
-
_this$props.currentIndex;
|
|
267
|
-
var vertical = _this$props.vertical,
|
|
268
|
-
spaceEqually = _this$props.spaceEqually,
|
|
269
|
-
other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded2);
|
|
270
|
-
|
|
271
|
-
var prefix = this.context;
|
|
272
|
-
var classes = cx__default["default"]((_classnames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classnames3, "".concat(prefix, "--progress"), true), _rollupPluginBabelHelpers.defineProperty(_classnames3, "".concat(prefix, "--progress--vertical"), vertical), _rollupPluginBabelHelpers.defineProperty(_classnames3, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _rollupPluginBabelHelpers.defineProperty(_classnames3, className, className), _classnames3));
|
|
273
|
-
return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
|
|
274
|
-
className: classes
|
|
275
|
-
}, other), this.renderSteps());
|
|
276
|
-
}
|
|
277
|
-
}], [{
|
|
278
|
-
key: "getDerivedStateFromProps",
|
|
279
|
-
value: function getDerivedStateFromProps(_ref3, state) {
|
|
280
|
-
var currentIndex = _ref3.currentIndex;
|
|
281
|
-
var prevCurrentIndex = state.prevCurrentIndex;
|
|
282
|
-
return prevCurrentIndex === currentIndex ? null : {
|
|
283
|
-
currentIndex: currentIndex,
|
|
284
|
-
prevCurrentIndex: currentIndex
|
|
285
|
-
};
|
|
286
|
-
}
|
|
287
|
-
}]);
|
|
288
|
-
|
|
289
|
-
return ProgressIndicator;
|
|
290
|
-
}(React.Component);
|
|
291
|
-
|
|
292
|
-
_rollupPluginBabelHelpers.defineProperty(ProgressIndicator, "propTypes", {
|
|
293
|
-
/**
|
|
294
|
-
* Provide `<ProgressStep>` components to be rendered in the
|
|
295
|
-
* `<ProgressIndicator>`
|
|
296
|
-
*/
|
|
297
|
-
children: PropTypes__default["default"].node,
|
|
298
|
-
|
|
299
|
-
/**
|
|
300
|
-
* Provide an optional className to be applied to the containing node
|
|
301
|
-
*/
|
|
302
|
-
className: PropTypes__default["default"].string,
|
|
303
|
-
|
|
304
|
-
/**
|
|
305
|
-
* Optionally specify the current step array index
|
|
306
|
-
*/
|
|
307
|
-
currentIndex: PropTypes__default["default"].number,
|
|
308
|
-
|
|
309
|
-
/**
|
|
310
|
-
* Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
|
|
311
|
-
*/
|
|
312
|
-
onChange: PropTypes__default["default"].func,
|
|
313
|
-
|
|
314
|
-
/**
|
|
315
|
-
* Specify whether the progress steps should be split equally in size in the div
|
|
316
|
-
*/
|
|
317
|
-
spaceEqually: PropTypes__default["default"].bool,
|
|
318
|
-
|
|
319
|
-
/**
|
|
320
|
-
* Determines whether or not the ProgressIndicator should be rendered vertically.
|
|
321
|
-
*/
|
|
322
|
-
vertical: PropTypes__default["default"].bool
|
|
323
|
-
});
|
|
324
|
-
|
|
325
|
-
_rollupPluginBabelHelpers.defineProperty(ProgressIndicator, "contextType", usePrefix.PrefixContext);
|
|
326
|
-
|
|
327
|
-
_rollupPluginBabelHelpers.defineProperty(ProgressIndicator, "defaultProps", {
|
|
328
|
-
currentIndex: 0
|
|
329
|
-
});
|
|
330
304
|
|
|
331
305
|
exports.ProgressIndicator = ProgressIndicator;
|
|
332
306
|
exports.ProgressStep = ProgressStep;
|
|
@@ -15,7 +15,6 @@ var cx = require('classnames');
|
|
|
15
15
|
var PropTypes = require('prop-types');
|
|
16
16
|
var React = require('react');
|
|
17
17
|
var useId = require('../../internal/useId.js');
|
|
18
|
-
var index = require('../FeatureFlags/index.js');
|
|
19
18
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
20
19
|
var deprecate = require('../../prop-types/deprecate.js');
|
|
21
20
|
var match = require('../../internal/keyboard/match.js');
|
|
@@ -48,10 +47,7 @@ function RadioTile(_ref) {
|
|
|
48
47
|
|
|
49
48
|
var prefix = usePrefix.usePrefix();
|
|
50
49
|
var inputId = useId.useFallbackId(id);
|
|
51
|
-
var enabled = index.useFeatureFlag('enable-v11-release');
|
|
52
50
|
var className = cx__default["default"](customClassName, "".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tile--is-selected"), checked), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tile--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tile--disabled"), disabled), _cx));
|
|
53
|
-
var inputProps = enabled ? {} : rest;
|
|
54
|
-
var labelProps = enabled ? rest : {};
|
|
55
51
|
|
|
56
52
|
function handleOnChange(evt) {
|
|
57
53
|
onChange(value, name, evt);
|
|
@@ -64,7 +60,7 @@ function RadioTile(_ref) {
|
|
|
64
60
|
}
|
|
65
61
|
}
|
|
66
62
|
|
|
67
|
-
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input",
|
|
63
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
68
64
|
checked: checked,
|
|
69
65
|
className: "".concat(prefix, "--tile-input"),
|
|
70
66
|
disabled: disabled,
|
|
@@ -75,7 +71,7 @@ function RadioTile(_ref) {
|
|
|
75
71
|
tabIndex: !disabled ? tabIndex : null,
|
|
76
72
|
type: "radio",
|
|
77
73
|
value: value
|
|
78
|
-
})
|
|
74
|
+
}), /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
79
75
|
htmlFor: inputId,
|
|
80
76
|
className: className
|
|
81
77
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
@@ -101,11 +97,6 @@ RadioTile.propTypes = {
|
|
|
101
97
|
*/
|
|
102
98
|
className: PropTypes__default["default"].string,
|
|
103
99
|
|
|
104
|
-
/**
|
|
105
|
-
* `true` if the `<input>` should be checked at initialization.
|
|
106
|
-
*/
|
|
107
|
-
defaultChecked: PropTypes__default["default"].bool,
|
|
108
|
-
|
|
109
100
|
/**
|
|
110
101
|
* Specify whether the RadioTile should be disabled
|
|
111
102
|
*/
|
|
@@ -16,6 +16,7 @@ var cx = require('classnames');
|
|
|
16
16
|
var iconsReact = require('@carbon/icons-react');
|
|
17
17
|
var index = require('../FeatureFlags/index.js');
|
|
18
18
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
19
|
+
var FormContext = require('../FluidForm/FormContext.js');
|
|
19
20
|
|
|
20
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
22
|
|
|
@@ -43,6 +44,10 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
|
|
|
43
44
|
other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
44
45
|
|
|
45
46
|
var prefix = usePrefix.usePrefix();
|
|
47
|
+
|
|
48
|
+
var _useContext = React.useContext(FormContext.FormContext),
|
|
49
|
+
isFluid = _useContext.isFluid;
|
|
50
|
+
|
|
46
51
|
var enabled = index.useFeatureFlag('enable-v11-release');
|
|
47
52
|
var defaultValue = other.defaultValue,
|
|
48
53
|
value = other.value,
|
|
@@ -76,7 +81,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
|
|
|
76
81
|
textareaProps.maxLength = maxCount;
|
|
77
82
|
}
|
|
78
83
|
|
|
79
|
-
var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
|
|
84
|
+
var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
|
|
80
85
|
var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
81
86
|
htmlFor: id,
|
|
82
87
|
className: labelClasses
|
|
@@ -94,7 +99,9 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
|
|
|
94
99
|
role: "alert",
|
|
95
100
|
className: "".concat(prefix, "--form-requirement"),
|
|
96
101
|
id: errorId
|
|
97
|
-
}, invalidText
|
|
102
|
+
}, invalidText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
|
|
103
|
+
className: "".concat(prefix, "--text-area__invalid-icon")
|
|
104
|
+
})) : null;
|
|
98
105
|
var textareaClasses = cx__default["default"]("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _classNames4));
|
|
99
106
|
var input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
|
|
100
107
|
placeholder: placeholder || null,
|
|
@@ -110,9 +117,11 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
|
|
|
110
117
|
}, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
111
118
|
className: "".concat(prefix, "--text-area__wrapper"),
|
|
112
119
|
"data-invalid": invalid || null
|
|
113
|
-
}, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
|
|
120
|
+
}, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
|
|
114
121
|
className: "".concat(prefix, "--text-area__invalid-icon")
|
|
115
|
-
}), input
|
|
122
|
+
}), input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
|
|
123
|
+
className: "".concat(prefix, "--text-area__divider")
|
|
124
|
+
}), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
|
|
116
125
|
});
|
|
117
126
|
TextArea.displayName = 'TextArea';
|
|
118
127
|
TextArea.propTypes = {
|
|
@@ -98,6 +98,9 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
|
|
|
98
98
|
warnText: warnText
|
|
99
99
|
});
|
|
100
100
|
|
|
101
|
+
var _useContext = React.useContext(FormContext.FormContext),
|
|
102
|
+
isFluid = _useContext.isFluid;
|
|
103
|
+
|
|
101
104
|
var handleTogglePasswordVisibility = function handleTogglePasswordVisibility(event) {
|
|
102
105
|
setInputType(inputType === 'password' ? 'text' : 'password');
|
|
103
106
|
onTogglePasswordVisibility && onTogglePasswordVisibility(event);
|
|
@@ -123,7 +126,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
|
|
|
123
126
|
ref: ref
|
|
124
127
|
}, rest);
|
|
125
128
|
|
|
126
|
-
var inputWrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _classNames2));
|
|
129
|
+
var inputWrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input--fluid"), isFluid), _classNames2));
|
|
127
130
|
var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
|
|
128
131
|
var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
|
|
129
132
|
var fieldOuterWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-outer-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
|
|
@@ -152,7 +155,9 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
|
|
|
152
155
|
}), {
|
|
153
156
|
disabled: disabled,
|
|
154
157
|
"data-toggle-password-visibility": inputType === 'password'
|
|
155
|
-
})), /*#__PURE__*/React__default["default"].createElement("
|
|
158
|
+
})), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
|
|
159
|
+
className: "".concat(prefix, "--text-input__divider")
|
|
160
|
+
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
156
161
|
type: "button",
|
|
157
162
|
className: passwordVisibilityToggleClasses,
|
|
158
163
|
disabled: disabled,
|
|
@@ -160,10 +165,6 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
|
|
|
160
165
|
}, !disabled && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
161
166
|
className: "".concat(prefix, "--assistive-text")
|
|
162
167
|
}, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
|
|
163
|
-
|
|
164
|
-
var _useContext = React.useContext(FormContext.FormContext),
|
|
165
|
-
isFluid = _useContext.isFluid;
|
|
166
|
-
|
|
167
168
|
React.useEffect(function () {
|
|
168
169
|
setInputType(type);
|
|
169
170
|
}, [type]);
|
|
@@ -66,7 +66,7 @@ function Toggle(_ref) {
|
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
var isSm = size === 'sm';
|
|
69
|
-
var sideLabel =
|
|
69
|
+
var sideLabel = checked ? labelB : labelA;
|
|
70
70
|
var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
|
|
71
71
|
var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
|
|
72
72
|
var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
|