@carbon/react 1.13.0 → 1.14.0

package/es/components/RadioTile/RadioTile.js

@@ -11,7 +11,6 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { useFallbackId } from '../../internal/useId.js';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -38,10 +37,7 @@ function RadioTile(_ref) {
 
   var prefix = usePrefix();
   var inputId = useFallbackId(id);
-  var enabled = useFeatureFlag('enable-v11-release');
   var className = cx(customClassName, "".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tile--is-selected"), checked), _defineProperty(_cx, "".concat(prefix, "--tile--light"), light), _defineProperty(_cx, "".concat(prefix, "--tile--disabled"), disabled), _cx));
-  var inputProps = enabled ? {} : rest;
-  var labelProps = enabled ? rest : {};
 
   function handleOnChange(evt) {
     onChange(value, name, evt);
@@ -54,7 +50,7 @@ function RadioTile(_ref) {
     }
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", _extends({}, inputProps, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", {
     checked: checked,
     className: "".concat(prefix, "--tile-input"),
     disabled: disabled,
@@ -65,7 +61,7 @@ function RadioTile(_ref) {
     tabIndex: !disabled ? tabIndex : null,
     type: "radio",
     value: value
-  })), /*#__PURE__*/React__default.createElement("label", _extends({}, labelProps, {
+  }), /*#__PURE__*/React__default.createElement("label", _extends({}, rest, {
     htmlFor: inputId,
     className: className
   }), /*#__PURE__*/React__default.createElement("span", {
@@ -91,11 +87,6 @@ RadioTile.propTypes = {
    */
   className: PropTypes.string,
 
-  /**
-   * `true` if the `<input>` should be checked at initialization.
-   */
-  defaultChecked: PropTypes.bool,
-
   /**
    * Specify whether the RadioTile should be disabled
    */

package/es/components/TextArea/TextArea.js

@@ -7,11 +7,12 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState } from 'react';
+import React__default, { useContext, useState } from 'react';
 import cx from 'classnames';
 import { WarningFilled } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
 var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount"];
 var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, ref) {
@@ -33,6 +34,10 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var enabled = useFeatureFlag('enable-v11-release');
   var defaultValue = other.defaultValue,
       value = other.value,
@@ -66,7 +71,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     textareaProps.maxLength = maxCount;
   }
 
-  var labelClasses = cx("".concat(prefix, "--label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
+  var labelClasses = cx("".concat(prefix, "--label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
   var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
     className: labelClasses
@@ -84,7 +89,9 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     role: "alert",
     className: "".concat(prefix, "--form-requirement"),
     id: errorId
-  }, invalidText) : null;
+  }, invalidText, isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+    className: "".concat(prefix, "--text-area__invalid-icon")
+  })) : null;
   var textareaClasses = cx("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _classNames4));
   var input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder || null,
@@ -100,9 +107,11 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
   }, label, counter), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--text-area__wrapper"),
     "data-invalid": invalid || null
-  }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+  }, invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
-  }), input), invalid ? error : helper);
+  }), input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--text-area__divider")
+  }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
 });
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {

package/es/components/TextInput/PasswordInput.js

@@ -69,6 +69,9 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
     warnText: warnText
   });
 
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var handleTogglePasswordVisibility = function handleTogglePasswordVisibility(event) {
     setInputType(inputType === 'password' ? 'text' : 'password');
     onTogglePasswordVisibility && onTogglePasswordVisibility(event);
@@ -94,7 +97,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
     ref: ref
   }, rest);
 
-  var inputWrapperClasses = cx("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _classNames2));
+  var inputWrapperClasses = cx("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _defineProperty(_classNames2, "".concat(prefix, "--text-input--fluid"), isFluid), _classNames2));
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
   var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), disabled), _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
   var fieldOuterWrapperClasses = cx("".concat(prefix, "--text-input__field-outer-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
@@ -123,7 +126,9 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
   }), {
     disabled: disabled,
     "data-toggle-password-visibility": inputType === 'password'
-  })), /*#__PURE__*/React__default.createElement("button", {
+  })), isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--text-input__divider")
+  }), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
@@ -131,10 +136,6 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
   }, !disabled && /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--assistive-text")
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
   useEffect(function () {
     setInputType(type);
   }, [type]);

package/es/components/TextInput/TextInput.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext } from 'react';
+import React__default, { useState, useContext } from 'react';
 import cx from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import PasswordInput from './PasswordInput.js';
@@ -18,9 +18,9 @@ import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-var _excluded = ["className", "disabled", "helperText", "hideLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "placeholder", "readOnly", "size", "type", "warn", "warnText"];
+var _excluded = ["className", "disabled", "helperText", "hideLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "placeholder", "readOnly", "size", "type", "warn", "warnText", "enableCounter", "maxCount"];
 var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref, ref) {
-  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7;
+  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
 
   var className = _ref.className,
       _ref$disabled = _ref.disabled,
@@ -49,10 +49,21 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
       _ref$warn = _ref.warn,
       warn = _ref$warn === void 0 ? false : _ref$warn,
       warnText = _ref.warnText,
+      _ref$enableCounter = _ref.enableCounter,
+      enableCounter = _ref$enableCounter === void 0 ? false : _ref$enableCounter,
+      maxCount = _ref.maxCount,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
   var enabled = useFeatureFlag('enable-v11-release');
+  var defaultValue = rest.defaultValue,
+      value = rest.value;
+
+  var _useState = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) || 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      textCount = _useState2[0],
+      setTextCount = _useState2[1];
+
   var normalizedProps = useNormalizedInputProps({
     id: id,
     readOnly: readOnly,
@@ -69,6 +80,10 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
     id: id,
     onChange: function onChange(evt) {
       if (!normalizedProps.disabled) {
+        var _evt$target$value;
+
+        setTextCount((_evt$target$value = evt.target.value) === null || _evt$target$value === void 0 ? void 0 : _evt$target$value.length);
+
         _onChange(evt);
       }
     },
@@ -86,16 +101,27 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
     readOnly: readOnly
   }, 'aria-describedby', helperText && normalizedProps.helperId), rest);
 
+  if (enableCounter) {
+    sharedTextInputProps.maxLength = maxCount;
+  }
+
   var inputWrapperClasses = cx([enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")], "".concat(prefix, "--text-input-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--readonly"), readOnly), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _classNames2));
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), normalizedProps.disabled), _defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
   var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled), _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
   var fieldOuterWrapperClasses = cx("".concat(prefix, "--text-input__field-outer-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
   var fieldWrapperClasses = cx("".concat(prefix, "--text-input__field-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
   var iconClasses = cx((_classNames7 = {}, _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _defineProperty(_classNames7, "".concat(prefix, "--text-input__readonly-icon"), readOnly), _classNames7));
+  var counterClasses = cx("".concat(prefix, "--label"), (_classNames8 = {}, _defineProperty(_classNames8, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_classNames8, "".concat(prefix, "--text-input__label-counter"), true), _classNames8));
+  var counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement("div", {
+    className: counterClasses
+  }, "".concat(textCount, "/").concat(maxCount)) : null;
   var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
+  var labelWrapper = /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--text-input__label-wrapper")
+  }, label, counter);
   var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
@@ -113,9 +139,9 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
 
   return /*#__PURE__*/React__default.createElement("div", {
     className: inputWrapperClasses
-  }, !inline ? label : /*#__PURE__*/React__default.createElement("div", {
+  }, !inline ? labelWrapper : /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--text-input__label-helper-wrapper")
-  }, label, !isFluid && helper), /*#__PURE__*/React__default.createElement("div", {
+  }, labelWrapper, !isFluid && helper), /*#__PURE__*/React__default.createElement("div", {
     className: fieldOuterWrapperClasses
   }, /*#__PURE__*/React__default.createElement("div", {
     className: fieldWrapperClasses,
@@ -145,6 +171,11 @@ TextInput.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes.bool,
+
   /**
    * Provide text that is used alongside the control label for additional help
    */
@@ -187,6 +218,11 @@ TextInput.propTypes = {
    */
   light: PropTypes.bool,
 
+  /**
+   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes.number,
+
   /**
    * Optionally provide an `onChange` handler that is called whenever `<input>`
    * is updated

package/es/index.js

@@ -47,12 +47,9 @@ export { default as OverflowMenuItem } from './components/OverflowMenuItem/index
 export { default as Pagination } from './components/Pagination/index.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
-export { ProgressIndicator } from './components/ProgressIndicator/index.js';
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
 export { default as RadioButtonGroup } from './components/RadioButtonGroup/RadioButtonGroup.js';
 export { default as Search } from './components/Search/index.js';
-export { default as SearchFilterButton } from './components/SearchFilterButton/SearchFilterButton.js';
-export { default as SearchLayoutButton } from './components/SearchLayoutButton/SearchLayoutButton.js';
 export { default as ExpandableSearch } from './components/ExpandableSearch/ExpandableSearch.js';
 export { default as SecondaryButton } from './components/SecondaryButton/SecondaryButton.js';
 export { default as SelectSkeleton } from './components/Select/Select.Skeleton.js';
@@ -125,6 +122,7 @@ export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
 export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
 export { default as unstable_useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
+export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
 export { default as unstable_MenuDivider } from './components/Menu/MenuDivider.js';
 export { default as unstable_MenuGroup } from './components/Menu/MenuGroup.js';
 export { default as unstable_MenuItem } from './components/Menu/MenuItem.js';
@@ -172,7 +170,7 @@ export { ActionableNotification, InlineNotification, NotificationActionButton, N
 export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
-export { ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
+export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { IconTab, TabList, TabPanel, TabPanels } from './components/Tabs/next/Tabs.js';
 export { default as Content } from './components/UIShell/Content.js';

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -25,17 +25,20 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3;
 
-var _excluded = ["align", "open", "count", "className"];
+var _excluded = ["align", "className", "count", "isFlush", "open"];
 
 function AccordionSkeleton(_ref) {
+  var _cx;
+
   var align = _ref.align,
-      open = _ref.open,
-      count = _ref.count,
       className = _ref.className,
+      count = _ref.count,
+      isFlush = _ref.isFlush,
+      open = _ref.open,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--accordion"), "".concat(prefix, "--skeleton"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--accordion--").concat(align), align));
+  var classes = cx__default["default"]("".concat(prefix, "--accordion"), "".concat(prefix, "--skeleton"), className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(align), align), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--flush"), isFlush && align !== 'start'), _cx));
   var numSkeletonItems = open ? count - 1 : count;
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     className: classes
@@ -80,6 +83,11 @@ AccordionSkeleton.propTypes = {
    */
   count: PropTypes__default["default"].number,
 
+  /**
+   * Specify whether an individual AccordionItem should be flush, default is false
+   */
+  isFlush: PropTypes__default["default"].bool,
+
   /**
    * `false` to not display the first item opened
    */

package/lib/components/Accordion/Accordion.js

@@ -41,7 +41,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["align", "children", "className", "disabled", "size"];
+var _excluded = ["align", "children", "className", "disabled", "isFlush", "size"];
 
 function Accordion(_ref) {
   var _cx;
@@ -52,12 +52,14 @@ function Accordion(_ref) {
       customClassName = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$isFlush = _ref.isFlush,
+      isFlush = _ref$isFlush === void 0 ? false : _ref$isFlush,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'md' : _ref$size,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--accordion"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(align), align), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(size), size), _cx));
+  var className = cx__default["default"]("".concat(prefix, "--accordion"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(align), align), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--accordion--flush"), isFlush && align !== 'start'), _cx));
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), disabled ? React__default["default"].Children.toArray(children).map(function (child) {
@@ -88,6 +90,11 @@ Accordion.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
+  /**
+   * Specify whether Accordion text should be flush, default is false, does not work with align="start"
+   */
+  isFlush: PropTypes__default["default"].bool,
+
   /**
    * Specify the size of the Accordion. Currently supports the following:
    */

package/lib/components/FileUploader/Filename.js

@@ -54,7 +54,9 @@ function Filename(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, _rollupPluginBabelHelpers["extends"]({
         "aria-label": iconDescription,
         className: "".concat(prefix, "--file-complete")
-      }, rest), iconDescription && /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));
+      }, rest, {
+        tabIndex: null
+      }), iconDescription && /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));
 
     default:
       return null;

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -0,0 +1,140 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var TextArea = require('../TextArea/TextArea.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+
+function FluidTextArea(_ref) {
+  var className = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--text-area--fluid"), className);
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(TextArea["default"], _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other)));
+}
+
+FluidTextArea.propTypes = {
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * `<textarea>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the `cols` attribute for the underlying `<textarea>` node
+   */
+  cols: PropTypes__default["default"].number,
+
+  /**
+   * Optionally provide the default value of the `<textarea>`
+   */
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes__default["default"].bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a unique identifier for the control
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes__default["default"].number,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+   * is updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<textarea>` is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify the placeholder attribute for the `<textarea>`
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Specify the rows attribute for the `<textarea>`
+   */
+  rows: PropTypes__default["default"].number,
+
+  /**
+   * Provide the current value of the `<textarea>`
+   */
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+
+exports["default"] = FluidTextArea;

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 require('../TextInput/index.js');
+var PasswordInput = require('../TextInput/PasswordInput.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var TextInput = require('../TextInput/TextInput.js');
@@ -24,19 +25,22 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className"];
+var _excluded = ["className", "isPassword"];
 
 function FluidTextInput(_ref) {
   var className = _ref.className,
+      isPassword = _ref.isPassword,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"]("".concat(prefix, "--text-input--fluid"), className);
+  var classNames = cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input--fluid"), !isPassword));
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {
       isFluid: true
     }
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput["default"], _rollupPluginBabelHelpers["extends"]({
+  }, isPassword ? /*#__PURE__*/React__default["default"].createElement(PasswordInput["default"], _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other)) : /*#__PURE__*/React__default["default"].createElement(TextInput["default"], _rollupPluginBabelHelpers["extends"]({
     className: classNames
   }, other)));
 }
@@ -72,6 +76,11 @@ FluidTextInput.propTypes = {
    */
   invalidText: PropTypes__default["default"].node,
 
+  /**
+   * Specify whether the control is a password input
+   */
+  isPassword: PropTypes__default["default"].bool,
+
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control

package/lib/components/Notification/Notification.js

@@ -18,6 +18,7 @@ var Button = require('../Button/Button.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useId = require('../../internal/useId.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -516,6 +517,7 @@ function ActionableNotification(_ref6) {
       setIsOpen = _useState6[1];
 
   var prefix = usePrefix.usePrefix();
+  var id = useId.useId('actionable-notification');
   var containerClassName = cx__default["default"](className, (_cx6 = {}, _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification"), true), _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification--toast"), !inline), _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification--low-contrast"), lowContrast), _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification--").concat(kind), kind), _rollupPluginBabelHelpers.defineProperty(_cx6, "".concat(prefix, "--actionable-notification--hide-close-button"), hideCloseButton), _cx6));
   var ref = React.useRef(null);
   useIsomorphicEffect["default"](function () {
@@ -544,7 +546,8 @@ function ActionableNotification(_ref6) {
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
     role: role,
-    className: containerClassName
+    className: containerClassName,
+    "aria-labelledby": title ? id : undefined
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--actionable-notification__details")
   }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
@@ -556,7 +559,8 @@ function ActionableNotification(_ref6) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--actionable-notification__content")
   }, title && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--actionable-notification__title")
+    className: "".concat(prefix, "--actionable-notification__title"),
+    id: id
   }, title), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--actionable-notification__subtitle")
   }, subtitle), children))), /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {

package/lib/components/NumberInput/NumberInput.js

@@ -197,7 +197,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     disabled: disabled,
     onClick: function onClick(event) {
       var state = {
-        value: clamp(max, min, value - step),
+        value: clamp(max, min, parseInt(value) - step),
         direction: 'down'
       };
       setValue(state.value);
@@ -223,7 +223,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     disabled: disabled,
     onClick: function onClick(event) {
       var state = {
-        value: clamp(max, min, value + step),
+        value: clamp(max, min, parseInt(value) + step),
         direction: 'up'
       };
       setValue(state.value);