@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.
Files changed (29) hide show
  1. package/es/components/Accordion/Accordion.Skeleton.js +12 -4
  2. package/es/components/Accordion/Accordion.js +9 -2
  3. package/es/components/FileUploader/Filename.js +3 -1
  4. package/es/components/FluidTextArea/FluidTextArea.js +130 -0
  5. package/es/components/FluidTextInput/FluidTextInput.js +13 -4
  6. package/es/components/Notification/Notification.js +6 -2
  7. package/es/components/ProgressIndicator/ProgressIndicator.js +128 -154
  8. package/es/components/RadioTile/RadioTile.js +2 -11
  9. package/es/components/TextArea/TextArea.js +14 -5
  10. package/es/components/TextInput/PasswordInput.js +7 -6
  11. package/es/components/Toggle/Toggle.js +1 -1
  12. package/es/index.js +2 -2
  13. package/lib/components/Accordion/Accordion.Skeleton.js +12 -4
  14. package/lib/components/Accordion/Accordion.js +9 -2
  15. package/lib/components/FileUploader/Filename.js +3 -1
  16. package/lib/components/FluidTextArea/FluidTextArea.js +140 -0
  17. package/lib/components/FluidTextInput/FluidTextInput.js +12 -3
  18. package/lib/components/Notification/Notification.js +6 -2
  19. package/lib/components/ProgressIndicator/ProgressIndicator.js +126 -152
  20. package/lib/components/RadioTile/RadioTile.js +2 -11
  21. package/lib/components/TextArea/TextArea.js +13 -4
  22. package/lib/components/TextInput/PasswordInput.js +7 -6
  23. package/lib/components/Toggle/Toggle.js +1 -1
  24. package/lib/index.js +47 -46
  25. package/package.json +9 -8
  26. package/es/components/ProgressIndicator/index.js +0 -15
  27. package/es/components/ProgressIndicator/next/ProgressIndicator.js +0 -117
  28. package/lib/components/ProgressIndicator/index.js +0 -39
  29. 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 = ["label", "description", "className", "current", "complete", "invalid", "secondaryLabel", "disabled", "onClick", "translateWithId"],
28
- _excluded2 = ["className", "currentIndex", "vertical", "spaceEqually"];
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 ProgressStep(_ref) {
41
- var _classnames;
42
-
43
- var label = _ref.label,
44
- description = _ref.description,
45
- className = _ref.className,
46
- current = _ref.current,
47
- complete = _ref.complete,
48
- invalid = _ref.invalid,
49
- secondaryLabel = _ref.secondaryLabel,
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
- var classes = cx__default["default"]((_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step"), true), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--current"), current), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--complete"), complete), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--incomplete"), !complete && !current), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classnames, className, className), _classnames));
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(_ref2) {
66
- var complete = _ref2.complete,
67
- current = _ref2.current,
68
- description = _ref2.description,
69
- invalid = _ref2.invalid,
70
- prefix = _ref2.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", _rollupPluginBabelHelpers["extends"]({}, inputProps, {
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
- })), /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({}, labelProps, {
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) : null;
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), invalid ? error : helper);
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("button", {
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 = hideLabel ? labelText : checked ? labelB : labelA;
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));