@carbon/react 1.17.0 → 1.18.0-rc.0

package/lib/components/DataTable/TableToolbarAction.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var index = require('../OverflowMenuItem/index.js');
+var OverflowMenuItem = require('../OverflowMenuItem/OverflowMenuItem.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,7 +24,7 @@ var TableToolbarAction = /*#__PURE__*/React__default["default"].forwardRef(funct
   var children = _ref.children,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement(OverflowMenuItem["default"], _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     itemText: children
   }, rest));
@@ -35,6 +35,5 @@ TableToolbarAction.propTypes = {
   className: PropTypes__default["default"].string,
   onClick: PropTypes__default["default"].func.isRequired
 };
-var TableToolbarAction$1 = TableToolbarAction;
 
-exports["default"] = TableToolbarAction$1;
+exports["default"] = TableToolbarAction;

package/lib/components/DataTable/TableToolbarContent.js

@@ -18,6 +18,5 @@ var TableToolbarContent = wrapComponent["default"]({
     return "".concat(prefix, "--toolbar-content");
   }
 });
-var TableToolbarContent$1 = TableToolbarContent;
 
-exports["default"] = TableToolbarContent$1;
+exports["default"] = TableToolbarContent;

package/lib/components/DataTable/TableToolbarMenu.js

@@ -66,6 +66,5 @@ TableToolbarMenu.propTypes = {
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
-var TableToolbarMenu$1 = TableToolbarMenu;
 
-exports["default"] = TableToolbarMenu$1;
+exports["default"] = TableToolbarMenu;

package/lib/components/DataTable/TableToolbarSearch.js

@@ -14,6 +14,7 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var Search = require('../Search/Search.js');
+require('../Search/Search.Skeleton.js');
 var instanceId = require('./tools/instanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
@@ -246,6 +247,5 @@ TableToolbarSearch.defaultProps = {
   persistent: false,
   onClear: function onClear() {}
 };
-var TableToolbarSearch$1 = TableToolbarSearch;
 
-exports["default"] = TableToolbarSearch$1;
+exports["default"] = TableToolbarSearch;

package/lib/components/DataTable/index.js

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DataTable$1 = require('./DataTable.js');
+var DataTable = require('./DataTable.js');
 var Table = require('./Table.js');
 var TableActionList = require('./TableActionList.js');
 var TableBatchAction = require('./TableBatchAction.js');
@@ -31,29 +31,29 @@ var TableToolbarContent = require('./TableToolbarContent.js');
 var TableToolbarSearch = require('./TableToolbarSearch.js');
 var TableToolbarMenu = require('./TableToolbarMenu.js');
 
-DataTable$1["default"].Table = Table["default"];
-DataTable$1["default"].TableActionList = TableActionList["default"];
-DataTable$1["default"].TableBatchAction = TableBatchAction["default"];
-DataTable$1["default"].TableBatchActions = TableBatchActions["default"];
-DataTable$1["default"].TableBody = TableBody["default"];
-DataTable$1["default"].TableCell = TableCell["default"];
-DataTable$1["default"].TableContainer = TableContainer["default"];
-DataTable$1["default"].TableExpandHeader = TableExpandHeader["default"];
-DataTable$1["default"].TableExpandRow = TableExpandRow["default"];
-DataTable$1["default"].TableExpandedRow = TableExpandedRow["default"];
-DataTable$1["default"].TableHead = TableHead["default"];
-DataTable$1["default"].TableHeader = TableHeader["default"];
-DataTable$1["default"].TableRow = TableRow["default"];
-DataTable$1["default"].TableSelectAll = TableSelectAll["default"];
-DataTable$1["default"].TableSelectRow = TableSelectRow["default"];
-DataTable$1["default"].TableToolbar = TableToolbar["default"];
-DataTable$1["default"].TableToolbarAction = TableToolbarAction["default"];
-DataTable$1["default"].TableToolbarContent = TableToolbarContent["default"];
-DataTable$1["default"].TableToolbarSearch = TableToolbarSearch["default"];
-DataTable$1["default"].TableToolbarMenu = TableToolbarMenu["default"];
-var DataTable = DataTable$1["default"];
+DataTable["default"].Table = Table.Table;
+DataTable["default"].TableActionList = TableActionList["default"];
+DataTable["default"].TableBatchAction = TableBatchAction["default"];
+DataTable["default"].TableBatchActions = TableBatchActions["default"];
+DataTable["default"].TableBody = TableBody["default"];
+DataTable["default"].TableCell = TableCell["default"];
+DataTable["default"].TableContainer = TableContainer["default"];
+DataTable["default"].TableExpandHeader = TableExpandHeader["default"];
+DataTable["default"].TableExpandRow = TableExpandRow["default"];
+DataTable["default"].TableExpandedRow = TableExpandedRow["default"];
+DataTable["default"].TableHead = TableHead["default"];
+DataTable["default"].TableHeader = TableHeader["default"];
+DataTable["default"].TableRow = TableRow["default"];
+DataTable["default"].TableSelectAll = TableSelectAll["default"];
+DataTable["default"].TableSelectRow = TableSelectRow["default"];
+DataTable["default"].TableToolbar = TableToolbar["default"];
+DataTable["default"].TableToolbarAction = TableToolbarAction["default"];
+DataTable["default"].TableToolbarContent = TableToolbarContent["default"];
+DataTable["default"].TableToolbarSearch = TableToolbarSearch["default"];
+DataTable["default"].TableToolbarMenu = TableToolbarMenu["default"];
 
-exports.Table = Table["default"];
+exports["default"] = DataTable["default"];
+exports.Table = Table.Table;
 exports.TableActionList = TableActionList["default"];
 exports.TableBatchAction = TableBatchAction["default"];
 exports.TableBatchActions = TableBatchActions["default"];
@@ -73,4 +73,3 @@ exports.TableToolbarAction = TableToolbarAction["default"];
 exports.TableToolbarContent = TableToolbarContent["default"];
 exports.TableToolbarSearch = TableToolbarSearch["default"];
 exports.TableToolbarMenu = TableToolbarMenu["default"];
-exports["default"] = DataTable;

package/lib/components/DataTable/state/getDerivedStateFromProps.js

@@ -54,6 +54,4 @@ var getDerivedStateFromProps = function getDerivedStateFromProps(props, prevStat
   return state;
 };
 
-var getDerivedStateFromProps$1 = getDerivedStateFromProps;
-
-exports["default"] = getDerivedStateFromProps$1;
+exports["default"] = getDerivedStateFromProps;

package/lib/components/DataTable/tools/denormalize.js

@@ -42,6 +42,4 @@ var denormalize = function denormalize(rowIds, rowsById, cellsById) {
   });
 };
 
-var denormalize$1 = denormalize;
-
-exports["default"] = denormalize$1;
+exports["default"] = denormalize;

package/lib/components/DataTable/tools/instanceId.js

@@ -20,6 +20,4 @@ var setupGetInstanceId = function setupGetInstanceId() {
   };
 };
 
-var setupGetInstanceId$1 = setupGetInstanceId;
-
-exports["default"] = setupGetInstanceId$1;
+exports["default"] = setupGetInstanceId;

package/lib/components/DataTable/tools/normalize.js

@@ -77,6 +77,4 @@ var normalize = function normalize(rows, headers) {
   };
 };
 
-var normalize$1 = normalize;
-
-exports["default"] = normalize$1;
+exports["default"] = normalize;

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -138,6 +138,5 @@ DataTableSkeleton.defaultProps = {
   showHeader: true,
   showToolbar: true
 };
-var DataTableSkeleton$1 = DataTableSkeleton;
 
-exports["default"] = DataTableSkeleton$1;
+exports["default"] = DataTableSkeleton;

package/lib/components/DatePicker/DatePicker.Skeleton.js

@@ -74,6 +74,5 @@ DatePickerSkeleton.propTypes = {
    */
   range: PropTypes__default["default"].bool
 };
-var DatePickerSkeleton$1 = DatePickerSkeleton;
 
-exports["default"] = DatePickerSkeleton$1;
+exports["default"] = DatePickerSkeleton;

package/lib/components/DatePicker/DatePicker.js

@@ -20,12 +20,13 @@ var appendToPlugin = require('./plugins/appendToPlugin.js');
 var fixEventsPlugin = require('./plugins/fixEventsPlugin.js');
 var rangePlugin = require('./plugins/rangePlugin.js');
 var deprecate = require('../../prop-types/deprecate.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useSavedCallback = require('../../internal/useSavedCallback.js');
-var iconsReact = require('@carbon/icons-react');
+require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
+var iconsReact = require('@carbon/icons-react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,7 +35,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", "invalid", "invalidText", "warn", "warnText", "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", "readOnly", "short", "value"];
 
 index["default"].en.weekdays.shorthand.forEach(function (_day, index$1) {
   var currentDay = index["default"].en.weekdays.shorthand;
@@ -95,13 +96,15 @@ var carbonFlatpickrMonthSelectPlugin = function carbonFlatpickrMonthSelectPlugin
     };
 
     var updateCurrentMonth = function updateCurrentMonth() {
-      var monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
-      fp.yearElements.forEach(function (elem) {
-        var currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
-        Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), function (monthElement) {
-          monthElement.textContent = monthStr;
+      if (fp.monthElements) {
+        var monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
+        fp.yearElements.forEach(function (elem) {
+          var currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
+          Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), function (monthElement) {
+            monthElement.textContent = monthStr;
+          });
         });
-      });
+      }
     };
 
     var register = function register() {
@@ -187,6 +190,8 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
       onChange = _ref.onChange,
       onClose = _ref.onClose,
       onOpen = _ref.onOpen,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       _ref$short = _ref.short,
       short = _ref$short === void 0 ? false : _ref$short,
       value = _ref.value,
@@ -209,26 +214,30 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
     if (index === 0 && child.type === React__default["default"].createElement(DatePickerInput["default"], child.props).type) {
       return /*#__PURE__*/React__default["default"].cloneElement(child, {
         datePickerType: datePickerType,
-        ref: startInputField
+        ref: startInputField,
+        readOnly: readOnly
       });
     }
 
     if (index === 1 && child.type === React__default["default"].createElement(DatePickerInput["default"], child.props).type) {
       return /*#__PURE__*/React__default["default"].cloneElement(child, {
         datePickerType: datePickerType,
-        ref: endInputField
+        ref: endInputField,
+        readOnly: readOnly
       });
     }
 
     if (index === 0) {
       return /*#__PURE__*/React__default["default"].cloneElement(child, {
-        ref: startInputField
+        ref: startInputField,
+        readOnly: readOnly
       });
     }
 
     if (index === 1) {
       return /*#__PURE__*/React__default["default"].cloneElement(child, {
-        ref: endInputField
+        ref: endInputField,
+        readOnly: readOnly
       });
     }
   });
@@ -245,6 +254,14 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
 
     var onHook = function onHook(_electedDates, _dateStr, instance, prefix) {
       updateClassNames(instance, prefix);
+
+      if (startInputField !== null && startInputField !== void 0 && startInputField.current) {
+        startInputField.current.readOnly = readOnly;
+      }
+
+      if (endInputField !== null && endInputField !== void 0 && endInputField.current) {
+        endInputField.current.readOnly = readOnly;
+      }
     }; // Logic to determine if `enable` or `disable` will be passed down. If neither
     // is provided, we return the default empty disabled array, allowing all dates.
 
@@ -292,8 +309,8 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
     }), fixEventsPlugin["default"]({
       inputFrom: startInputField.current,
       inputTo: endInputField.current
-    })]), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "clickOpens", true), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "nextArrow", rightArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "prevArrow", leftArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onChange", function onChange() {
-      if (savedOnChange) {
+    })]), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "clickOpens", !readOnly), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "noCalendar", readOnly), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "nextArrow", rightArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "prevArrow", leftArrowHTML), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onChange", function onChange() {
+      if (savedOnChange && !readOnly) {
         savedOnChange.apply(void 0, arguments);
       }
     }), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onClose", savedOnClose), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onReady", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onMonthChange", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onYearChange", onHook), _rollupPluginBabelHelpers.defineProperty(_flatpickr, "onOpen", function onOpen() {
@@ -340,13 +357,16 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
 
     if (start) {
       start.addEventListener('keydown', handleArrowDown);
-      start.addEventListener('change', handleOnChange); // Flatpickr's calendar dialog is not rendered in a landmark causing an
-      // error with IBM Equal Access Accessibility Checker so we add an aria
-      // role to the container div.
+      start.addEventListener('change', handleOnChange);
 
-      calendar.calendarContainer.setAttribute('role', 'application'); // IBM EAAC requires an aria-label on a role='region'
+      if (calendar && calendar.calendarContainer) {
+        // Flatpickr's calendar dialog is not rendered in a landmark causing an
+        // error with IBM Equal Access Accessibility Checker so we add an aria
+        // role to the container div.
+        calendar.calendarContainer.setAttribute('role', 'application'); // IBM EAAC requires an aria-label on a role='region'
 
-      calendar.calendarContainer.setAttribute('aria-label', 'calendar-container');
+        calendar.calendarContainer.setAttribute('aria-label', 'calendar-container');
+      }
     }
 
     if (end) {
@@ -372,42 +392,56 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
         end.removeEventListener('change', handleOnChange);
       }
     };
-  }, [savedOnChange, savedOnClose, savedOnOpen]); //eslint-disable-line react-hooks/exhaustive-deps
+  }, [savedOnChange, savedOnClose, savedOnOpen, readOnly]); //eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(function () {
-    if (calendarRef.current) {
+    var _calendarRef$current;
+
+    if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current = calendarRef.current) !== null && _calendarRef$current !== void 0 && _calendarRef$current.set) {
       calendarRef.current.set({
         dateFormat: dateFormat
       });
     }
   }, [dateFormat]);
   React.useEffect(function () {
-    if (calendarRef.current) {
+    var _calendarRef$current2;
+
+    if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current2 = calendarRef.current) !== null && _calendarRef$current2 !== void 0 && _calendarRef$current2.set) {
       calendarRef.current.set('minDate', minDate);
     }
   }, [minDate]);
   React.useEffect(function () {
-    if (calendarRef.current) {
+    var _calendarRef$current3;
+
+    if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current3 = calendarRef.current) !== null && _calendarRef$current3 !== void 0 && _calendarRef$current3.set) {
       calendarRef.current.set('maxDate', maxDate);
     }
   }, [maxDate]);
   React.useEffect(function () {
-    if (calendarRef.current && disable) {
+    var _calendarRef$current4;
+
+    if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current4 = calendarRef.current) !== null && _calendarRef$current4 !== void 0 && _calendarRef$current4.set && disable) {
       calendarRef.current.set('disable', disable);
     }
   }, [disable]);
   React.useEffect(function () {
-    if (calendarRef.current && enable) {
+    var _calendarRef$current5;
+
+    if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current5 = calendarRef.current) !== null && _calendarRef$current5 !== void 0 && _calendarRef$current5.set && enable) {
       calendarRef.current.set('enable', enable);
     }
   }, [enable]);
   React.useEffect(function () {
-    if (calendarRef.current && inline) {
+    var _calendarRef$current6;
+
+    if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current6 = calendarRef.current) !== null && _calendarRef$current6 !== void 0 && _calendarRef$current6.set && inline) {
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
   React.useEffect(function () {
-    if (calendarRef.current) {
+    var _calendarRef$current7;
+
+    if (calendarRef !== null && calendarRef !== void 0 && (_calendarRef$current7 = calendarRef.current) !== null && _calendarRef$current7 !== void 0 && _calendarRef$current7.set) {
       if (value !== undefined) {
         calendarRef.current.setDate(value);
       }
@@ -610,6 +644,13 @@ DatePicker.propTypes = {
    */
   onOpen: PropTypes__default["default"].func,
 
+  /**
+   * whether the DatePicker is to be readOnly
+   * if boolean applies to all inputs
+   * if array applies to each input in order
+   */
+  readOnly: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].array]),
+
   /**
    * `true` to use the short version.
    */
@@ -631,6 +672,5 @@ DatePicker.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var DatePicker$1 = DatePicker;
 
-exports["default"] = DatePicker$1;
+exports["default"] = DatePicker;

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -9,8 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var match = require('../../../internal/keyboard/match.js');
 var keys = require('../../../internal/keyboard/keys.js');
+var match = require('../../../internal/keyboard/match.js');
 
 /**
  * @param {object} config Plugin configuration.

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');
+require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -74,20 +75,22 @@ var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function
     type: type
   };
   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 labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--readonly"), rest.readOnly), _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), _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,
-    "data-invalid": true,
-    className: inputClasses
-  })) : /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, datePickerInputProps, {
-    disabled: disabled,
+
+  var inputProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), datePickerInputProps), {}, {
     className: inputClasses,
+    disabled: disabled,
     ref: ref
-  }));
+  });
+
+  if (invalid) {
+    inputProps['data-invalid'] = true;
+  }
+
+  var input = /*#__PURE__*/React__default["default"].createElement("input", inputProps);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: containerClasses
   }, labelText && /*#__PURE__*/React__default["default"].createElement("label", {
@@ -190,6 +193,11 @@ DatePickerInput.propTypes = {
    */
   placeholder: PropTypes__default["default"].string,
 
+  /**
+   * whether the DatePicker is to be readOnly
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
    */
@@ -265,6 +273,5 @@ DatePickerIcon.propTypes = {
    */
   warn: PropTypes__default["default"].bool
 };
-var DatePickerInput$1 = DatePickerInput;
 
-exports["default"] = DatePickerInput$1;
+exports["default"] = DatePickerInput;

package/lib/components/Dropdown/Dropdown.Skeleton.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
+require('../ListBox/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
@@ -51,6 +52,5 @@ DropdownSkeleton.propTypes = {
    */
   size: ListBoxPropTypes.ListBoxSize
 };
-var DropdownSkeleton$1 = DropdownSkeleton;
 
-exports["default"] = DropdownSkeleton$1;
+exports["default"] = DropdownSkeleton;

package/lib/components/Dropdown/Dropdown.js

@@ -20,9 +20,10 @@ var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var ListBox = require('../ListBox/ListBox.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
+var ListBox = require('../ListBox/ListBox.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -338,6 +339,5 @@ Dropdown.defaultProps = {
   helperText: '',
   direction: 'bottom'
 };
-var Dropdown$1 = Dropdown;
 
-exports["default"] = Dropdown$1;
+exports["default"] = Dropdown;

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var cx = require('classnames');
 var Search = require('../Search/Search.js');
+require('../Search/Search.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
 

package/lib/components/FileUploader/FileUploader.js

@@ -17,9 +17,9 @@ var React = require('react');
 var Filename = require('./Filename.js');
 var FileUploaderButton = require('./FileUploaderButton.js');
 var types = require('../../prop-types/types.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
+var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/FileUploader/FileUploaderButton.js

@@ -13,12 +13,12 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var types = require('../../prop-types/types.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FeatureFlags = require('@carbon/feature-flags');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -13,10 +13,10 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/FileUploader/FileUploaderItem.js

@@ -14,11 +14,11 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var Filename = require('./Filename.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FeatureFlags = require('@carbon/feature-flags');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -46,6 +46,5 @@ FluidComboBoxSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var FluidComboBoxSkeleton$1 = FluidComboBoxSkeleton;
 
-exports["default"] = FluidComboBoxSkeleton$1;
+exports["default"] = FluidComboBoxSkeleton;

package/lib/components/FluidComboBox/FluidComboBox.js

@@ -145,6 +145,5 @@ FluidComboBox.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var FluidComboBox$1 = FluidComboBox;
 
-exports["default"] = FluidComboBox$1;
+exports["default"] = FluidComboBox;

package/lib/components/FluidDatePicker/FluidDatePicker.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
+require('../DatePicker/DatePicker.Skeleton.js');
 var DatePicker = require('../DatePicker/DatePicker.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
@@ -81,6 +82,5 @@ FluidDatePicker.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var FluidDatePicker$1 = FluidDatePicker;
 
-exports["default"] = FluidDatePicker$1;
+exports["default"] = FluidDatePicker;

package/lib/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -29,6 +29,5 @@ var FluidDatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(fun
     ref: ref
   }, other)));
 });
-var FluidDatePickerInput$1 = FluidDatePickerInput;
 
-exports["default"] = FluidDatePickerInput$1;
+exports["default"] = FluidDatePickerInput;