@carbon/react 1.17.0-rc.1 → 1.17.0

package/es/components/StructuredList/StructuredList.js

@@ -5,21 +5,22 @@
  * 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 React__default from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush", "border"],
+var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush"],
     _excluded2 = ["children", "className"],
     _excluded3 = ["children", "className"],
-    _excluded4 = ["onKeyDown", "tabIndex", "children", "className", "head", "label"],
-    _excluded5 = ["className", "value", "name", "title", "id"],
+    _excluded4 = ["onKeyDown", "children", "className", "head"],
+    _excluded5 = ["className", "name", "title", "id"],
     _excluded6 = ["children", "className", "head", "noWrap"];
-var getInstanceId = setupGetInstanceId();
+var GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
+var GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListWrapper(props) {
   var _classNames;
 
@@ -28,18 +29,27 @@ function StructuredListWrapper(props) {
       className = props.className,
       ariaLabel = props.ariaLabel,
       isCondensed = props.isCondensed,
-      isFlush = props.isFlush;
-      props.border;
-      var other = _objectWithoutProperties(props, _excluded);
+      isFlush = props.isFlush,
+      other = _objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix();
   var classes = cx("".concat(prefix, "--structured-list"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--structured-list--selection"), selection), _defineProperty(_classNames, "".concat(prefix, "--structured-list--condensed"), isCondensed), _defineProperty(_classNames, "".concat(prefix, "--structured-list--flush"), isFlush), _classNames));
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+
+  var _React$useState = React__default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedRow = _React$useState2[0],
+      setSelectedRow = _React$useState2[1];
+
+  return /*#__PURE__*/React__default.createElement(GridSelectedRowStateContext.Provider, {
+    value: selectedRow
+  }, /*#__PURE__*/React__default.createElement(GridSelectedRowDispatchContext.Provider, {
+    value: setSelectedRow
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
     role: "table",
     className: classes
   }, other, {
     "aria-label": ariaLabel
-  }), children);
+  }), children)));
 }
 StructuredListWrapper.propTypes = {
   /**
@@ -47,11 +57,6 @@ StructuredListWrapper.propTypes = {
    */
   ariaLabel: PropTypes.string,
 
-  /**
-   * Specify whether a border should be added to your StructuredListWrapper
-   */
-  border: deprecate(PropTypes.bool, "\nThe prop `border` will be removed in the next major version of Carbon."),
-
   /**
    * Provide the contents of your StructuredListWrapper
    */
@@ -79,9 +84,9 @@ StructuredListWrapper.propTypes = {
 };
 StructuredListWrapper.defaultProps = {
   selection: false,
-  ariaLabel: 'Structured list section',
   isCondensed: false,
-  isFlush: false
+  isFlush: false,
+  ariaLabel: 'Structured list section'
 };
 function StructuredListHead(props) {
   var children = props.children,
@@ -138,29 +143,51 @@ StructuredListBody.propTypes = {
 StructuredListBody.defaultProps = {
   onKeyDown: function onKeyDown() {}
 };
+var GridRowContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListRow(props) {
+  var _classNames2;
+
   var onKeyDown = props.onKeyDown,
-      tabIndex = props.tabIndex,
       children = props.children,
       className = props.className,
       head = props.head,
-      label = props.label,
       other = _objectWithoutProperties(props, _excluded4);
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasFocusWithin = _useState2[0],
+      setHasFocusWithin = _useState2[1];
+
+  var id = useId('grid-input');
+  var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
   var prefix = usePrefix();
-  var classes = cx("".concat(prefix, "--structured-list-row"), className, _defineProperty({}, "".concat(prefix, "--structured-list-row--header-row"), head));
-  return label ?
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-  React__default.createElement("label", _extends({}, other, {
-    tabIndex: tabIndex,
-    className: classes,
-    onKeyDown: onKeyDown
-  }), children) : /*#__PURE__*/React__default.createElement("div", _extends({
+  var value = {
+    id: id
+  };
+  var classes = cx("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _classNames2));
+  return head ? /*#__PURE__*/React__default.createElement("div", _extends({
     role: "row"
   }, other, {
     className: classes
-  }), children);
+  }), children) :
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+  React__default.createElement("div", _extends({}, other, {
+    role: "row",
+    className: classes,
+    onClick: function onClick() {
+      return setSelectedRow(id);
+    },
+    onFocus: function onFocus() {
+      setHasFocusWithin(true);
+    },
+    onBlur: function onBlur() {
+      setHasFocusWithin(false);
+    },
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React__default.createElement(GridRowContext.Provider, {
+    value: value
+  }, children));
 }
 StructuredListRow.propTypes = {
   /**
@@ -181,42 +208,44 @@ StructuredListRow.propTypes = {
   /**
    * Specify whether a `<label>` should be used
    */
-  label: PropTypes.bool,
+  label: deprecate(PropTypes.bool, "\nThe `label` prop is no longer needed and will be removed in the next major version of Carbon."),
 
   /**
    * Provide a handler that is invoked on the key down event for the control,
-   * if `<label>` is in use
-   */
-  onKeyDown: PropTypes.func,
-
-  /**
-   * Specify the tab index of the container node, if `<label>` is in use
    */
-  tabIndex: PropTypes.number
+  onKeyDown: PropTypes.func
 };
 StructuredListRow.defaultProps = {
   head: false,
-  label: false,
-  tabIndex: 0,
   onKeyDown: function onKeyDown() {}
 };
 function StructuredListInput(props) {
+  var _row$id;
+
+  var defaultId = useId('structureListInput');
+
   var className = props.className,
-      value = props.value,
-      name = props.name,
+      _props$name = props.name,
+      name = _props$name === void 0 ? "structured-list-input-".concat(defaultId) : _props$name,
       title = props.title,
       id = props.id,
       other = _objectWithoutProperties(props, _excluded5);
 
   var prefix = usePrefix();
-  var classes = cx("".concat(prefix, "--structured-list-input"), className);
-  var instanceId = id || getInstanceId();
+  var classes = cx("".concat(prefix, "--structured-list-input"), "".concat(prefix, "--visually-hidden"), className);
+  var row = React__default.useContext(GridRowContext);
+  var selectedRow = React__default.useContext(GridSelectedRowStateContext);
+  var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
   return /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
     type: "radio",
-    tabIndex: -1,
-    id: instanceId,
+    tabIndex: 0,
+    checked: row && row.id === selectedRow,
+    value: (_row$id = row === null || row === void 0 ? void 0 : row.id) !== null && _row$id !== void 0 ? _row$id : '',
+    onChange: function onChange(event) {
+      setSelectedRow(event.target.value);
+    },
+    id: id !== null && id !== void 0 ? id : defaultId,
     className: classes,
-    value: value,
     name: name,
     title: title
   }));
@@ -230,7 +259,7 @@ StructuredListInput.propTypes = {
   /**
    * Specify whether the underlying input should be checked by default
    */
-  defaultChecked: PropTypes.bool,
+  defaultChecked: deprecate(PropTypes.bool, "\nThe prop `defaultChecked` is no longer needed and will be removed in the next major version of Carbon."),
 
   /**
    * Specify a custom `id` for the input
@@ -245,7 +274,7 @@ StructuredListInput.propTypes = {
   /**
    * Provide an optional hook that is called each time the input is updated
    */
-  onChange: PropTypes.func,
+  onChange: deprecate(PropTypes.func, "\nThe prop `onChange` will be removed in the next major version of Carbon."),
 
   /**
    * Provide a `title` for the input
@@ -255,11 +284,9 @@ StructuredListInput.propTypes = {
   /**
    * Specify the value of the input
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, "\nThe prop `value` will be removed in the next major version of Carbon.")
 };
 StructuredListInput.defaultProps = {
-  onChange: function onChange() {},
-  value: 'value',
   title: 'title'
 };
 function StructuredListCell(props) {
@@ -273,9 +300,17 @@ function StructuredListCell(props) {
 
   var prefix = usePrefix();
   var classes = cx(className, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--structured-list-th"), head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-td"), !head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-content--nowrap"), noWrap), _classNames3));
+
+  if (head) {
+    return /*#__PURE__*/React__default.createElement("span", _extends({
+      className: classes,
+      role: "columnheader"
+    }, other), children);
+  }
+
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classes,
-    role: head ? 'columnheader' : 'cell'
+    role: "cell"
   }, other), children);
 }
 StructuredListCell.propTypes = {

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

@@ -66,7 +66,6 @@ export { default as SelectItem } from './components/SelectItem/SelectItem.js';
 export { default as SelectItemGroup } from './components/SelectItemGroup/SelectItemGroup.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as Slider } from './components/Slider/index.js';
-export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/index.js';
 export { default as Tab } from './components/Tab/index.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { IconTab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
@@ -123,6 +122,7 @@ 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_useContextMenu } from './components/ContextMenu/useContextMenu.js';
+export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
 export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
 export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
 export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
@@ -176,6 +176,7 @@ export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
+export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
 export { default as Content } from './components/UIShell/Content.js';
@@ -201,6 +202,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/es/internal/FloatingMenu.js

@@ -480,4 +480,6 @@ _defineProperty(FloatingMenu, "defaultProps", {
   updateOrientation: null
 });
 
-export { DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP, FloatingMenu as default };
+var FloatingMenu$1 = FloatingMenu;
+
+export { DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP, FloatingMenu$1 as default };

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);
@@ -293,6 +303,10 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
     calendarRef.current = calendar;
 
     function handleArrowDown(event) {
+      if (match.match(event, keys.Escape)) {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (match.match(event, keys.ArrowDown)) {
         var calendarContainer = calendar.calendarContainer,
             fpSelectedDateElem = calendar.selectedDateElem,
@@ -304,6 +318,10 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
     }
 
     function handleOnChange() {
+      if (datePickerType == 'single') {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (start.value !== '') {
         return;
       }
@@ -375,7 +393,7 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
   }, [maxDate]);
   React.useEffect(function () {
     if (calendarRef.current && disable) {
-      calendarRef.current.set('disbale', disable);
+      calendarRef.current.set('disable', disable);
     }
   }, [disable]);
   React.useEffect(function () {
@@ -399,12 +417,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 +504,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 +619,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.Skeleton.js

@@ -0,0 +1,77 @@
+/**
+ * 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 usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+var iconsReact = require('@carbon/icons-react');
+
+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", "datePickerType"];
+
+function FluidDatePickerSkeleton(_ref) {
+  var className = _ref.className,
+      _ref$datePickerType = _ref.datePickerType,
+      datePickerType = _ref$datePickerType === void 0 ? 'single' : _ref$datePickerType,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"](className, "".concat(prefix, "--form-item ").concat(prefix, "--date-picker--fluid__skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--date-picker--fluid__skeleton--range"), datePickerType === 'range'));
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  }), datePickerType !== 'simple' && /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    role: "img",
+    "aria-hidden": "true"
+  })), datePickerType === 'range' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  }), /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    role: "img",
+    "aria-hidden": "true"
+  }))));
+}
+
+FluidDatePickerSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify which variant of the DatePicker the skeleton should mimic
+   */
+  datePickerType: PropTypes__default["default"].oneOf(['simple', 'single', 'range'])
+};
+
+exports["default"] = FluidDatePickerSkeleton;