@carbon/react 1.17.0-rc.0 → 1.17.0-rc.2

package/es/components/ComposedModal/ComposedModal.js

@@ -19,7 +19,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 var _ModalBody$propTypes, _ComposedModal$propTy;
 
 var _excluded = ["className", "children", "hasForm", "hasScrollingContent"],
-    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
+    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "isFullWidth", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
 var ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
   var _cx;
 
@@ -53,6 +53,7 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
       customClassName = _ref2.className,
       containerClassName = _ref2.containerClassName,
       danger = _ref2.danger,
+      isFullWidth = _ref2.isFullWidth,
       onClose = _ref2.onClose,
       onKeyDown = _ref2.onKeyDown,
       open = _ref2.open,
@@ -129,7 +130,7 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
   }
 
   var modalClass = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--modal"), true), _defineProperty(_cx2, 'is-visible', isOpen), _defineProperty(_cx2, customClassName, customClassName), _defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
-  var containerClass = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
+  var containerClass = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_cx3, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
 
   var generatedAriaLabel;
   var childrenWithProps = React__default.Children.toArray(children).map(function (child) {
@@ -216,7 +217,7 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
     className: "".concat(prefix, "--visually-hidden")
   }, "Focus sentinel")));
 });
-ComposedModal.propTypes = (_ComposedModal$propTy = {}, _defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes.string), _defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes.string), _defineProperty(_ComposedModal$propTy, "children", PropTypes.node), _defineProperty(_ComposedModal$propTy, "className", PropTypes.string), _defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes.string), _defineProperty(_ComposedModal$propTy, "danger", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "onClose", PropTypes.func), _defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes.func), _defineProperty(_ComposedModal$propTy, "open", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_ComposedModal$propTy, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+ComposedModal.propTypes = (_ComposedModal$propTy = {}, _defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes.string), _defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes.string), _defineProperty(_ComposedModal$propTy, "children", PropTypes.node), _defineProperty(_ComposedModal$propTy, "className", PropTypes.string), _defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes.string), _defineProperty(_ComposedModal$propTy, "danger", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "isFullWidth", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "onClose", PropTypes.func), _defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes.func), _defineProperty(_ComposedModal$propTy, "open", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_ComposedModal$propTy, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
 ComposedModal.defaultProps = {
   onKeyDown: function onKeyDown() {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'

package/es/components/DatePicker/DatePicker.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, typeof as _typeof, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useEffect } from 'react';
+import React__default, { useContext, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import flatpickr from 'flatpickr';
 import l10n from '../../node_modules/flatpickr/dist/l10n/index.js';
@@ -18,10 +18,12 @@ import carbonFlatpickrRangePlugin from './plugins/rangePlugin.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useSavedCallback } from '../../internal/useSavedCallback.js';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import { FormContext } from '../FluidForm/FormContext.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ArrowDown } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
+var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "invalid", "invalidText", "warn", "warnText", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
 
 l10n.en.weekdays.shorthand.forEach(function (_day, index) {
   var currentDay = l10n.en.weekdays.shorthand;
@@ -161,6 +163,10 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
       disable = _ref.disable,
       enable = _ref.enable,
       inline = _ref.inline,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
       _ref$light = _ref.light,
       light = _ref$light === void 0 ? false : _ref$light,
       _ref$locale = _ref.locale,
@@ -176,6 +182,10 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var startInputField = useRef(null);
   var endInputField = useRef(null);
   var calendarRef = useRef(null);
@@ -388,12 +398,36 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
       startInputField.current.value = value;
     }
   }, [value, prefix]);
+  var fluidError;
+
+  if (isFluid) {
+    if (invalid) {
+      fluidError = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
+        className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--invalid")
+      }), /*#__PURE__*/React__default.createElement("hr", {
+        className: "".concat(prefix, "--date-picker__divider")
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "".concat(prefix, "--form-requirement")
+      }, invalidText));
+    }
+
+    if (warn && !invalid) {
+      fluidError = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+        className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--warn")
+      }), /*#__PURE__*/React__default.createElement("hr", {
+        className: "".concat(prefix, "--date-picker__divider")
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "".concat(prefix, "--form-requirement")
+      }, warnText));
+    }
+  }
+
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses,
     ref: ref
   }, rest), /*#__PURE__*/React__default.createElement("div", {
     className: datePickerClasses
-  }, childrenWithProps));
+  }, childrenWithProps), fluidError);
 });
 DatePicker.propTypes = {
   /**
@@ -451,6 +485,16 @@ DatePicker.propTypes = {
    */
   inline: PropTypes.bool,
 
+  /**
+   * Specify whether or not the control is invalid (Fluid only)
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in error state (Fluid Only)
+   */
+  invalidText: PropTypes.node,
+
   /**
    * `true` to use the light version.
    */
@@ -556,7 +600,17 @@ DatePicker.propTypes = {
    * The value of the date value provided to flatpickr, could
    * be a date, a date number, a date string, an array of dates.
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])), PropTypes.object, PropTypes.number])
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])), PropTypes.object, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state (Fluid only)
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state (Fluid only)
+   */
+  warnText: PropTypes.node
 };
 var DatePicker$1 = DatePicker;
 

package/es/components/DatePickerInput/DatePickerInput.js

@@ -9,12 +9,13 @@ import { objectWithoutProperties as _objectWithoutProperties, defineProperty as
 import { WarningFilled, WarningAltFilled, Calendar } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
 var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"];
 var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
-  var _cx, _cx2, _cx4;
+  var _cx, _cx2, _cx4, _cx5;
 
   var datePickerType = props.datePickerType,
       _props$disabled = props.disabled,
@@ -42,6 +43,10 @@ var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePicker
       rest = _objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix();
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var datePickerInputProps = {
     id: id,
     onChange: function onChange(event) {
@@ -61,8 +66,8 @@ var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePicker
   var wrapperClasses = cx("".concat(prefix, "--date-picker-input__wrapper"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--warn"), warn), _cx));
   var labelClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _cx2));
   var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var inputClasses = cx("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _cx4));
-  var containerClasses = cx("".concat(prefix, "--date-picker-container"), _defineProperty({}, "".concat(prefix, "--date-picker--nolabel"), !labelText));
+  var inputClasses = cx("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--warn"), warn), _cx4));
+  var containerClasses = cx("".concat(prefix, "--date-picker-container"), (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--date-picker--nolabel"), !labelText), _defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--invalid"), isFluid && invalid), _defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--warn"), isFluid && warn), _cx5));
   var input = invalid ? /*#__PURE__*/React__default.createElement("input", _extends({}, rest, datePickerInputProps, {
     disabled: disabled,
     ref: ref,
@@ -80,15 +85,21 @@ var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePicker
     className: labelClasses
   }, labelText), /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
-  }, input, /*#__PURE__*/React__default.createElement(DatePickerIcon, {
+  }, input, isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
+    datePickerType: datePickerType
+  }), /*#__PURE__*/React__default.createElement(DatePickerIcon, {
     datePickerType: datePickerType,
     invalid: invalid,
     warn: warn
-  })), invalid && /*#__PURE__*/React__default.createElement("div", {
+  })), invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--date-picker__divider")
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--form-requirement")
-  }, invalidText), warn && /*#__PURE__*/React__default.createElement("div", {
+  }, invalidText)), warn && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--date-picker__divider")
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--form-requirement")
-  }, warnText), helperText && /*#__PURE__*/React__default.createElement("div", {
+  }, warnText)), helperText && /*#__PURE__*/React__default.createElement("div", {
     className: helperTextClasses
   }, helperText));
 });
@@ -196,8 +207,13 @@ function DatePickerIcon(_ref) {
       warn = _ref.warn;
   var prefix = usePrefix();
 
+  var _useContext2 = useContext(FormContext),
+      isFluid = _useContext2.isFluid;
+
   if (datePickerType === 'simple' && !invalid && !warn) {
-    return null;
+    if (!isFluid) {
+      return null;
+    }
   }
 
   if (invalid) {

package/es/components/FluidDatePicker/FluidDatePicker.js

@@ -0,0 +1,76 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import DatePicker from '../DatePicker/DatePicker.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className", "children", "invalid", "invalidText", "warn", "warnText"];
+var FluidDatePicker = /*#__PURE__*/React__default.forwardRef(function FluidDatePicker(_ref, ref) {
+  var _classnames;
+
+  var className = _ref.className,
+      children = _ref.children,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx(className, (_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid"), true), _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--invalid"), invalid), _defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--warn"), warn), _classnames));
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(DatePicker, _extends({
+    invalid: invalid,
+    invalidText: invalidText,
+    warn: warn,
+    warnText: warnText,
+    className: classNames,
+    ref: ref
+  }, other), children));
+});
+FluidDatePicker.propTypes = {
+  /**
+   * The child node(s)
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether or not the control is invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in error state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+var FluidDatePicker$1 = FluidDatePicker;
+
+export { FluidDatePicker$1 as default };

package/es/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import DatePickerInput from '../DatePickerInput/DatePickerInput.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var FluidDatePickerInput = /*#__PURE__*/React__default.forwardRef(function FluidDatePickerInput(_ref, ref) {
+  var other = _extends({}, _ref);
+
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(DatePickerInput, _extends({
+    ref: ref
+  }, other)));
+});
+var FluidDatePickerInput$1 = FluidDatePickerInput;
+
+export { FluidDatePickerInput$1 as default };

package/es/components/Modal/Modal.js

@@ -20,10 +20,10 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Modal$propTypes;
 
-var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
+var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside", "isFullWidth"];
 var getInstanceId = setupGetInstanceId();
 var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
-  var _classNames;
+  var _classNames, _classNames2;
 
   var children = _ref.children,
       className = _ref.className,
@@ -48,6 +48,7 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       hasScrollingContent = _ref.hasScrollingContent,
       closeButtonLabel = _ref.closeButtonLabel,
       preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
+      isFullWidth = _ref.isFullWidth,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -105,7 +106,7 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
 
   var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   var modalClasses = cx("".concat(prefix, "--modal"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _defineProperty(_classNames, 'is-visible', open), _defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _defineProperty(_classNames, className, className), _classNames));
-  var containerClasses = cx("".concat(prefix, "--modal-container"), _defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
+  var containerClasses = cx("".concat(prefix, "--modal-container"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_classNames2, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _classNames2));
   var contentClasses = cx("".concat(prefix, "--modal-content"), _defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
   var footerClasses = cx("".concat(prefix, "--modal-footer"), _defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
   var modalButton = /*#__PURE__*/React__default.createElement("button", {
@@ -240,7 +241,7 @@ Modal.propTypes = (_Modal$propTypes = {
    * Should go hand in hand with the danger prop.
    */
   alert: PropTypes.bool
-}, _defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_Modal$propTypes, "children", PropTypes.node), _defineProperty(_Modal$propTypes, "className", PropTypes.string), _defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "danger", PropTypes.bool), _defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes.bool), _defineProperty(_Modal$propTypes, "id", PropTypes.string), _defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "modalHeading", PropTypes.node), _defineProperty(_Modal$propTypes, "modalLabel", PropTypes.node), _defineProperty(_Modal$propTypes, "onKeyDown", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestClose", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "open", PropTypes.bool), _defineProperty(_Modal$propTypes, "passiveModal", PropTypes.bool), _defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
+}, _defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_Modal$propTypes, "children", PropTypes.node), _defineProperty(_Modal$propTypes, "className", PropTypes.string), _defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "danger", PropTypes.bool), _defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes.bool), _defineProperty(_Modal$propTypes, "id", PropTypes.string), _defineProperty(_Modal$propTypes, "isFullWidth", PropTypes.bool), _defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "modalHeading", PropTypes.node), _defineProperty(_Modal$propTypes, "modalLabel", PropTypes.node), _defineProperty(_Modal$propTypes, "onKeyDown", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestClose", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "open", PropTypes.bool), _defineProperty(_Modal$propTypes, "passiveModal", PropTypes.bool), _defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
   if (props.secondaryButtons) {
     if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
       return new Error("".concat(propName, " needs to be an array of two button config objects"));

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -53,13 +53,19 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButt
   function getRadioButtons() {
     var mappedChildren = React__default.Children.map(children, function (radioButton) {
       var value = radioButton.props.value;
-      return /*#__PURE__*/React__default.cloneElement(radioButton, {
+      var newProps = {
         name: name,
         key: value,
         value: value,
         onChange: handleOnChange,
         checked: value === selected
-      });
+      };
+
+      if (!selected && radioButton.props.checked) {
+        newProps.checked = true;
+      }
+
+      return /*#__PURE__*/React__default.cloneElement(radioButton, newProps);
     });
     return mappedChildren;
   }

package/es/components/TextArea/TextArea.js

@@ -7,7 +7,7 @@
 
 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, { useContext, useState } from 'react';
+import React__default, { useContext, useState, useEffect } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled } from '@carbon/icons-react';
@@ -49,6 +49,11 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      ariaAnnouncement = _useState4[0],
+      setAriaAnnouncement = _useState4[1];
+
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -72,6 +77,15 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     textareaProps.maxLength = maxCount;
   }
 
+  useEffect(function () {
+    var lastTen = maxCount - 10;
+
+    if (textCount >= lastTen) {
+      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
+    } else {
+      setAriaAnnouncement('');
+    }
+  }, [textCount, maxCount]);
   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,
@@ -99,7 +113,10 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     className: textareaClasses,
     "aria-invalid": invalid || null,
     "aria-describedby": invalid ? errorId : null,
-    disabled: other.disabled
+    disabled: other.disabled,
+    style: other.cols ? {} : {
+      width: "100%"
+    }
   }));
   return /*#__PURE__*/React__default.createElement("div", {
     className: enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
@@ -110,7 +127,10 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
-  }), input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }), input, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--text-area__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: "".concat(prefix, "--text-area__divider")
   }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
 });
@@ -217,7 +237,6 @@ TextArea.defaultProps = {
   onClick: function onClick() {},
   placeholder: '',
   rows: 4,
-  cols: 50,
   invalid: false,
   invalidText: '',
   helperText: '',

package/es/index.js

@@ -18,6 +18,7 @@ export { ClassPrefix } from './components/ClassPrefix/index.js';
 export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
 export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
 export { default as ComboBox } from './components/ComboBox/ComboBox.js';
+import './components/ContainedList/index.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
@@ -95,7 +96,6 @@ export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.j
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
-import './components/ContainedList/index.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { Heading, Section } from './components/Heading/index.js';
 export { IconButton } from './components/IconButton/index.js';
@@ -109,6 +109,7 @@ export { DefinitionTooltip } from './components/Tooltip/next/DefinitionTooltip.j
 export { GlobalTheme, Theme, useTheme } from './components/Theme/index.js';
 export { usePrefix } from './internal/usePrefix.js';
 export { default as AspectRatio } from './components/AspectRatio/AspectRatio.js';
+export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
@@ -121,7 +122,6 @@ export { default as SideNavFooter } from './components/UIShell/SideNavFooter.js'
 export { default as SideNavIcon } from './components/UIShell/SideNavIcon.js';
 export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
 export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
-export { default as unstable_ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as unstable_useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
 export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
@@ -135,10 +135,10 @@ export { default as unstable_MenuSelectableItem } from './components/Menu/MenuSe
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
+export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
 export { default as TreeView } from './components/TreeView/TreeView.js';
-export { default as unstable_ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as unstable_Menu } from './components/Menu/Menu.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.js';
@@ -201,6 +201,8 @@ export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem
 export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
 export { default as unstable__FluidComboBox } from './components/FluidComboBox/FluidComboBox.js';
 export { default as unstable__FluidComboBoxSkeleton } from './components/FluidComboBox/FluidComboBox.Skeleton.js';
+export { default as unstable__FluidDatePicker } from './components/FluidDatePicker/FluidDatePicker.js';
+export { default as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput/FluidDatePickerInput.js';
 export { default as unstable__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
 export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
 export { default as unstable__FluidMultiSelect } from './components/FluidMultiSelect/FluidMultiSelect.js';

package/lib/components/ComposedModal/ComposedModal.js

@@ -29,7 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _ModalBody$propTypes, _ComposedModal$propTy;
 
 var _excluded = ["className", "children", "hasForm", "hasScrollingContent"],
-    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
+    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "isFullWidth", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
 var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody(_ref, ref) {
   var _cx;
 
@@ -63,6 +63,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
       customClassName = _ref2.className,
       containerClassName = _ref2.containerClassName,
       danger = _ref2.danger,
+      isFullWidth = _ref2.isFullWidth,
       onClose = _ref2.onClose,
       onKeyDown = _ref2.onKeyDown,
       open = _ref2.open,
@@ -139,7 +140,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
   }
 
   var modalClass = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--modal"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, 'is-visible', isOpen), _rollupPluginBabelHelpers.defineProperty(_cx2, customClassName, customClassName), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
-  var containerClass = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
+  var containerClass = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _rollupPluginBabelHelpers.defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
 
   var generatedAriaLabel;
   var childrenWithProps = React__default["default"].Children.toArray(children).map(function (child) {
@@ -226,7 +227,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     className: "".concat(prefix, "--visually-hidden")
   }, "Focus sentinel")));
 });
-ComposedModal.propTypes = (_ComposedModal$propTy = {}, _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+ComposedModal.propTypes = (_ComposedModal$propTy = {}, _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "isFullWidth", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
 ComposedModal.defaultProps = {
   onKeyDown: function onKeyDown() {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'

package/lib/components/DatePicker/DatePicker.js

@@ -22,6 +22,8 @@ var rangePlugin = require('./plugins/rangePlugin.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useSavedCallback = require('../../internal/useSavedCallback.js');
+var iconsReact = require('@carbon/icons-react');
+var FormContext = require('../FluidForm/FormContext.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -32,7 +34,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
 
-var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
+var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "invalid", "invalidText", "warn", "warnText", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
 
 index["default"].en.weekdays.shorthand.forEach(function (_day, index$1) {
   var currentDay = index["default"].en.weekdays.shorthand;
@@ -172,6 +174,10 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
       disable = _ref.disable,
       enable = _ref.enable,
       inline = _ref.inline,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
       _ref$light = _ref.light,
       light = _ref$light === void 0 ? false : _ref$light,
       _ref$locale = _ref.locale,
@@ -187,6 +193,10 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
+
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var startInputField = React.useRef(null);
   var endInputField = React.useRef(null);
   var calendarRef = React.useRef(null);
@@ -399,12 +409,36 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
       startInputField.current.value = value;
     }
   }, [value, prefix]);
+  var fluidError;
+
+  if (isFluid) {
+    if (invalid) {
+      fluidError = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+        className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--invalid")
+      }), /*#__PURE__*/React__default["default"].createElement("hr", {
+        className: "".concat(prefix, "--date-picker__divider")
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "".concat(prefix, "--form-requirement")
+      }, invalidText));
+    }
+
+    if (warn && !invalid) {
+      fluidError = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+        className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--warn")
+      }), /*#__PURE__*/React__default["default"].createElement("hr", {
+        className: "".concat(prefix, "--date-picker__divider")
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "".concat(prefix, "--form-requirement")
+      }, warnText));
+    }
+  }
+
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses,
     ref: ref
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     className: datePickerClasses
-  }, childrenWithProps));
+  }, childrenWithProps), fluidError);
 });
 DatePicker.propTypes = {
   /**
@@ -462,6 +496,16 @@ DatePicker.propTypes = {
    */
   inline: PropTypes__default["default"].bool,
 
+  /**
+   * Specify whether or not the control is invalid (Fluid only)
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in error state (Fluid Only)
+   */
+  invalidText: PropTypes__default["default"].node,
+
   /**
    * `true` to use the light version.
    */
@@ -567,7 +611,17 @@ DatePicker.propTypes = {
    * The value of the date value provided to flatpickr, could
    * be a date, a date number, a date string, an array of dates.
    */
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object])), PropTypes__default["default"].object, PropTypes__default["default"].number])
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object])), PropTypes__default["default"].object, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the control is currently in warning state (Fluid only)
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state (Fluid only)
+   */
+  warnText: PropTypes__default["default"].node
 };
 var DatePicker$1 = DatePicker;
 

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -15,6 +15,7 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 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 }; }
 
@@ -24,7 +25,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"];
 var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function DatePickerInput(props, ref) {
-  var _cx, _cx2, _cx4;
+  var _cx, _cx2, _cx4, _cx5;
 
   var datePickerType = props.datePickerType,
       _props$disabled = props.disabled,
@@ -52,6 +53,10 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
+
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var datePickerInputProps = {
     id: id,
     onChange: function onChange(event) {
@@ -71,8 +76,8 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--date-picker-input__wrapper"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--warn"), warn), _cx));
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _cx2));
   var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var inputClasses = cx__default["default"]("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _cx4));
-  var containerClasses = cx__default["default"]("".concat(prefix, "--date-picker-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--date-picker--nolabel"), !labelText));
+  var inputClasses = cx__default["default"]("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--warn"), warn), _cx4));
+  var containerClasses = cx__default["default"]("".concat(prefix, "--date-picker-container"), (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--date-picker--nolabel"), !labelText), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--date-picker--fluid--warn"), isFluid && warn), _cx5));
   var input = invalid ? /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, datePickerInputProps, {
     disabled: disabled,
     ref: ref,
@@ -90,15 +95,21 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
     className: labelClasses
   }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
-  }, input, /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
+  }, input, isFluid && /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
+    datePickerType: datePickerType
+  }), /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
     datePickerType: datePickerType,
     invalid: invalid,
     warn: warn
-  })), invalid && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+    className: "".concat(prefix, "--date-picker__divider")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--form-requirement")
-  }, invalidText), warn && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, invalidText)), warn && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+    className: "".concat(prefix, "--date-picker__divider")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--form-requirement")
-  }, warnText), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, warnText)), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
     className: helperTextClasses
   }, helperText));
 });
@@ -206,8 +217,13 @@ function DatePickerIcon(_ref) {
       warn = _ref.warn;
   var prefix = usePrefix.usePrefix();
 
+  var _useContext2 = React.useContext(FormContext.FormContext),
+      isFluid = _useContext2.isFluid;
+
   if (datePickerType === 'simple' && !invalid && !warn) {
-    return null;
+    if (!isFluid) {
+      return null;
+    }
   }
 
   if (invalid) {

package/lib/components/FluidDatePicker/FluidDatePicker.js

@@ -0,0 +1,86 @@
+/**
+ * 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 DatePicker = require('../DatePicker/DatePicker.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", "children", "invalid", "invalidText", "warn", "warnText"];
+var FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePicker(_ref, ref) {
+  var _classnames;
+
+  var className = _ref.className,
+      children = _ref.children,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"](className, (_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid"), true), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--date-picker--fluid--warn"), warn), _classnames));
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(DatePicker["default"], _rollupPluginBabelHelpers["extends"]({
+    invalid: invalid,
+    invalidText: invalidText,
+    warn: warn,
+    warnText: warnText,
+    className: classNames,
+    ref: ref
+  }, other), children));
+});
+FluidDatePicker.propTypes = {
+  /**
+   * The child node(s)
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether or not the control is invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in error state
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
+};
+var FluidDatePicker$1 = FluidDatePicker;
+
+exports["default"] = FluidDatePicker$1;

package/lib/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -0,0 +1,34 @@
+/**
+ * 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 React = require('react');
+var DatePickerInput = require('../DatePickerInput/DatePickerInput.js');
+var FormContext = require('../FluidForm/FormContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FluidDatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePickerInput(_ref, ref) {
+  var other = _rollupPluginBabelHelpers["extends"]({}, _ref);
+
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(DatePickerInput["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, other)));
+});
+var FluidDatePickerInput$1 = FluidDatePickerInput;
+
+exports["default"] = FluidDatePickerInput$1;

package/lib/components/Modal/Modal.js

@@ -30,10 +30,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Modal$propTypes;
 
-var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
+var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside", "isFullWidth"];
 var getInstanceId = setupGetInstanceId["default"]();
 var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_ref, ref) {
-  var _classNames;
+  var _classNames, _classNames2;
 
   var children = _ref.children,
       className = _ref.className,
@@ -58,6 +58,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_re
       hasScrollingContent = _ref.hasScrollingContent,
       closeButtonLabel = _ref.closeButtonLabel,
       preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
+      isFullWidth = _ref.isFullWidth,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -115,7 +116,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_re
 
   var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   var modalClasses = cx__default["default"]("".concat(prefix, "--modal"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _rollupPluginBabelHelpers.defineProperty(_classNames, 'is-visible', open), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
-  var containerClasses = cx__default["default"]("".concat(prefix, "--modal-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
+  var containerClasses = cx__default["default"]("".concat(prefix, "--modal-container"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--modal-container--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _classNames2));
   var contentClasses = cx__default["default"]("".concat(prefix, "--modal-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
   var footerClasses = cx__default["default"]("".concat(prefix, "--modal-footer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
   var modalButton = /*#__PURE__*/React__default["default"].createElement("button", {
@@ -250,7 +251,7 @@ Modal.propTypes = (_Modal$propTypes = {
    * Should go hand in hand with the danger prop.
    */
   alert: PropTypes__default["default"].bool
-}, _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalHeading", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalLabel", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "passiveModal", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
+}, _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "isFullWidth", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalHeading", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalLabel", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "passiveModal", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
   if (props.secondaryButtons) {
     if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
       return new Error("".concat(propName, " needs to be an array of two button config objects"));

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -63,13 +63,19 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
   function getRadioButtons() {
     var mappedChildren = React__default["default"].Children.map(children, function (radioButton) {
       var value = radioButton.props.value;
-      return /*#__PURE__*/React__default["default"].cloneElement(radioButton, {
+      var newProps = {
         name: name,
         key: value,
         value: value,
         onChange: handleOnChange,
         checked: value === selected
-      });
+      };
+
+      if (!selected && radioButton.props.checked) {
+        newProps.checked = true;
+      }
+
+      return /*#__PURE__*/React__default["default"].cloneElement(radioButton, newProps);
     });
     return mappedChildren;
   }

package/lib/components/TextArea/TextArea.js

@@ -59,6 +59,11 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
+  var _useState3 = React.useState(''),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      ariaAnnouncement = _useState4[0],
+      setAriaAnnouncement = _useState4[1];
+
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -82,6 +87,15 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     textareaProps.maxLength = maxCount;
   }
 
+  React.useEffect(function () {
+    var lastTen = maxCount - 10;
+
+    if (textCount >= lastTen) {
+      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
+    } else {
+      setAriaAnnouncement('');
+    }
+  }, [textCount, maxCount]);
   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));
   var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
@@ -109,7 +123,10 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     className: textareaClasses,
     "aria-invalid": invalid || null,
     "aria-describedby": invalid ? errorId : null,
-    disabled: other.disabled
+    disabled: other.disabled,
+    style: other.cols ? {} : {
+      width: "100%"
+    }
   }));
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
@@ -120,7 +137,10 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
-  }), input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+  }), input, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--text-area__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--text-area__divider")
   }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
 });
@@ -227,7 +247,6 @@ TextArea.defaultProps = {
   onClick: function onClick() {},
   placeholder: '',
   rows: 4,
-  cols: 50,
   invalid: false,
   invalidText: '',
   helperText: '',

package/lib/index.js

@@ -22,6 +22,7 @@ var index$9 = require('./components/ClassPrefix/index.js');
 var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
 var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
 var ComboBox = require('./components/ComboBox/ComboBox.js');
+require('./components/ContainedList/index.js');
 var index = require('./components/ContentSwitcher/index.js');
 var Copy = require('./components/Copy/Copy.js');
 var CopyButton = require('./components/CopyButton/CopyButton.js');
@@ -99,7 +100,6 @@ var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
 var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
 var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
-require('./components/ContainedList/index.js');
 var index$d = require('./components/FeatureFlags/index.js');
 var index$e = require('./components/Heading/index.js');
 var index$f = require('./components/IconButton/index.js');
@@ -113,6 +113,7 @@ var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js'
 var index$k = require('./components/Theme/index.js');
 var usePrefix = require('./internal/usePrefix.js');
 var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
+var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
 var Row = require('./components/Grid/Row.js');
 var Column = require('./components/Grid/Column.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
@@ -125,7 +126,6 @@ var SideNavFooter = require('./components/UIShell/SideNavFooter.js');
 var SideNavIcon = require('./components/UIShell/SideNavIcon.js');
 var SideNavItem = require('./components/UIShell/SideNavItem.js');
 var SideNavLinkText = require('./components/UIShell/SideNavLinkText.js');
-var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
 var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
 var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
 var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
@@ -139,10 +139,10 @@ var MenuSelectableItem = require('./components/Menu/MenuSelectableItem.js');
 var PageSelector = require('./components/Pagination/experimental/PageSelector.js');
 var Pagination$1 = require('./components/Pagination/experimental/Pagination.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
+var ContainedList = require('./components/ContainedList/ContainedList.js');
 var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
 var TextInput = require('./components/TextInput/TextInput.js');
 var TreeView = require('./components/TreeView/TreeView.js');
-var ContainedList = require('./components/ContainedList/ContainedList.js');
 var Menu = require('./components/Menu/Menu.js');
 var Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
 var BreadcrumbItem = require('./components/Breadcrumb/BreadcrumbItem.js');
@@ -205,6 +205,8 @@ var SideNavMenuItem = require('./components/UIShell/SideNavMenuItem.js');
 var SideNavSwitcher = require('./components/UIShell/SideNavSwitcher.js');
 var FluidComboBox = require('./components/FluidComboBox/FluidComboBox.js');
 var FluidComboBox_Skeleton = require('./components/FluidComboBox/FluidComboBox.Skeleton.js');
+var FluidDatePicker = require('./components/FluidDatePicker/FluidDatePicker.js');
+var FluidDatePickerInput = require('./components/FluidDatePickerInput/FluidDatePickerInput.js');
 var FluidDropdown = require('./components/FluidDropdown/FluidDropdown.js');
 var FluidDropdown_Skeleton = require('./components/FluidDropdown/FluidDropdown.Skeleton.js');
 var FluidMultiSelect = require('./components/FluidMultiSelect/FluidMultiSelect.js');
@@ -338,6 +340,7 @@ exports.Theme = index$k.Theme;
 exports.useTheme = index$k.useTheme;
 exports.usePrefix = usePrefix.usePrefix;
 exports.AspectRatio = AspectRatio["default"];
+exports.ContainedListItem = ContainedListItem["default"];
 exports.Row = Row["default"];
 exports.Column = Column["default"];
 exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
@@ -350,7 +353,6 @@ exports.SideNavFooter = SideNavFooter["default"];
 exports.SideNavIcon = SideNavIcon["default"];
 exports.SideNavItem = SideNavItem["default"];
 exports.SideNavLinkText = SideNavLinkText["default"];
-exports.unstable_ContainedListItem = ContainedListItem["default"];
 exports.unstable_useContextMenu = useContextMenu["default"];
 exports.unstable__FluidTextArea = FluidTextArea["default"];
 exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
@@ -364,10 +366,10 @@ exports.unstable_MenuSelectableItem = MenuSelectableItem["default"];
 exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination$1["default"];
 exports.ProgressBar = ProgressBar["default"];
+exports.ContainedList = ContainedList["default"];
 exports.MultiSelect = MultiSelect["default"];
 exports.TextInput = TextInput["default"];
 exports.TreeView = TreeView["default"];
-exports.unstable_ContainedList = ContainedList["default"];
 exports.unstable_Menu = Menu["default"];
 exports.Breadcrumb = Breadcrumb["default"];
 exports.BreadcrumbItem = BreadcrumbItem["default"];
@@ -441,6 +443,8 @@ exports.SideNavMenuItem = SideNavMenuItem["default"];
 exports.SideNavSwitcher = SideNavSwitcher["default"];
 exports.unstable__FluidComboBox = FluidComboBox["default"];
 exports.unstable__FluidComboBoxSkeleton = FluidComboBox_Skeleton["default"];
+exports.unstable__FluidDatePicker = FluidDatePicker["default"];
+exports.unstable__FluidDatePickerInput = FluidDatePickerInput["default"];
 exports.unstable__FluidDropdown = FluidDropdown["default"];
 exports.unstable__FluidDropdownSkeleton = FluidDropdown_Skeleton["default"];
 exports.unstable__FluidMultiSelect = FluidMultiSelect["default"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.9.0",
     "@carbon/icons-react": "^11.10.0",
     "@carbon/layout": "^11.7.0",
-    "@carbon/styles": "^1.17.0-rc.0",
+    "@carbon/styles": "^1.17.0-rc.2",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -73,7 +73,7 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@carbon/test-utils": "^10.26.0",
-    "@carbon/themes": "^11.11.0",
+    "@carbon/themes": "^11.11.1-rc.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
@@ -135,5 +135,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "707f5b292f95f7146576a1995350f47582a3b39b"
+  "gitHead": "a6650fd95565a79d30bef8ba0e0c4ed011d25931"
 }

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker';

package/scss/components/fluid-date-picker/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/fluid-date-picker';