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

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/TextArea/TextArea.js

@@ -113,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")
@@ -234,7 +237,6 @@ TextArea.defaultProps = {
   onClick: function onClick() {},
   placeholder: '',
   rows: 4,
-  cols: 50,
   invalid: false,
   invalidText: '',
   helperText: '',

package/es/index.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/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/TextArea/TextArea.js

@@ -123,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")
@@ -244,7 +247,6 @@ TextArea.defaultProps = {
   onClick: function onClick() {},
   placeholder: '',
   rows: 4,
-  cols: 50,
   invalid: false,
   invalidText: '',
   helperText: '',

package/lib/index.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');
@@ -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.1",
+  "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.1",
+    "@carbon/styles": "^1.17.0-rc.2",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -135,5 +135,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "01475a0713de3b5243b747ffe7036f652ae5c22f"
+  "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';