@carbon/react 1.17.0-rc.1 → 1.17.0

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';
+import { Escape, 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);
@@ -282,6 +292,10 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
     calendarRef.current = calendar;
 
     function handleArrowDown(event) {
+      if (match(event, Escape)) {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (match(event, ArrowDown)) {
         var calendarContainer = calendar.calendarContainer,
             fpSelectedDateElem = calendar.selectedDateElem,
@@ -293,6 +307,10 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
     }
 
     function handleOnChange() {
+      if (datePickerType == 'single') {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (start.value !== '') {
         return;
       }
@@ -364,7 +382,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
   }, [maxDate]);
   useEffect(function () {
     if (calendarRef.current && disable) {
-      calendarRef.current.set('disbale', disable);
+      calendarRef.current.set('disable', disable);
     }
   }, [disable]);
   useEffect(function () {
@@ -388,12 +406,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 +493,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 +608,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.Skeleton.js

@@ -0,0 +1,67 @@
+/**
+ * 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 { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+import { Calendar } from '@carbon/icons-react';
+
+var _excluded = ["className", "datePickerType"];
+
+function FluidDatePickerSkeleton(_ref) {
+  var className = _ref.className,
+      _ref$datePickerType = _ref.datePickerType,
+      datePickerType = _ref$datePickerType === void 0 ? 'single' : _ref$datePickerType,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx(className, "".concat(prefix, "--form-item ").concat(prefix, "--date-picker--fluid__skeleton"), _defineProperty({}, "".concat(prefix, "--date-picker--fluid__skeleton--range"), datePickerType === 'range'));
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames
+  }, other), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  }), datePickerType !== 'simple' && /*#__PURE__*/React__default.createElement(Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    role: "img",
+    "aria-hidden": "true"
+  })), datePickerType === 'range' && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  }), /*#__PURE__*/React__default.createElement(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.string,
+
+  /**
+   * Specify which variant of the DatePicker the skeleton should mimic
+   */
+  datePickerType: PropTypes.oneOf(['simple', 'single', 'range'])
+};
+
+export { FluidDatePickerSkeleton as default };

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/ListBox/ListBoxSelection.js

@@ -28,14 +28,15 @@ function ListBoxSelection(_ref) {
       selectionCount = _ref.selectionCount,
       t = _ref.translateWithId,
       disabled = _ref.disabled,
-      onClearSelection = _ref.onClearSelection;
+      onClearSelection = _ref.onClearSelection,
+      readOnly = _ref.readOnly;
   var prefix = usePrefix();
   var className = cx("".concat(prefix, "--list-box__selection"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
 
   var handleOnClick = function handleOnClick(event) {
     event.stopPropagation();
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
 
@@ -49,7 +50,7 @@ function ListBoxSelection(_ref) {
   var handleOnKeyDown = function handleOnKeyDown(event) {
     event.stopPropagation();
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     } // When a user hits ENTER, we'll clear the selection
 
@@ -78,7 +79,8 @@ function ListBoxSelection(_ref) {
     onKeyDown: handleOnKeyDown,
     disabled: disabled,
     "aria-label": t('clear.all'),
-    title: description
+    title: description,
+    "aria-disabled": readOnly ? true : undefined
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))) : /*#__PURE__*/React__default.createElement("div", {
     role: "button",
     className: className,
@@ -125,6 +127,11 @@ ListBoxSelection.propTypes = {
    */
   onKeyDown: PropTypes.func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.

package/es/components/MultiSelect/MultiSelect.js

@@ -73,7 +73,8 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
       onChange = _ref.onChange,
       onMenuChange = _ref.onMenuChange,
       direction = _ref.direction,
-      selected = _ref.selectedItems;
+      selected = _ref.selectedItems,
+      readOnly = _ref.readOnly;
   var prefix = usePrefix();
 
   var _useContext = useContext(FormContext),
@@ -164,7 +165,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
   var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var className = cx("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx4)); // needs to be capitalized for react to render it correctly
+  var className = cx("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   var sortOptions = {
@@ -229,6 +230,21 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  var readOnlyEventHandlers = readOnly ? {
+    onClick: function onClick(evt) {
+      // NOTE: does not prevent click
+      evt.preventDefault(); // focus on the element as per readonly input behavior
+
+      evt.target.focus();
+    },
+    onKeyDown: function onKeyDown(evt) {
+      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
+
+      if (selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  } : {};
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -242,6 +258,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     size: size,
     className: className,
     disabled: disabled,
+    readOnly: readOnly,
     light: light,
     invalid: invalid,
     invalidText: invalidText,
@@ -257,12 +274,13 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
-    "aria-disabled": disabled
+    "aria-disabled": disabled || readOnly
   }, toggleButtonProps, {
     ref: mergeRefs(toggleButtonProps.ref, ref),
     onKeyDown: onKeyDown
-  }), selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
-    clearSelection: !disabled ? clearSelection : noop,
+  }, readOnlyEventHandlers), selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
+    readOnly: readOnly,
+    clearSelection: !disabled && !readOnly ? clearSelection : noop,
     selectionCount: selectedItems.length,
     translateWithId: translateWithId,
     disabled: disabled
@@ -413,6 +431,11 @@ MultiSelect.propTypes = _objectSpread2(_objectSpread2({}, sortingPropTypes), {},
    */
   open: PropTypes.bool,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * For full control of the selected items
    */

package/es/components/OverflowMenu/index.js

@@ -5,10 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as FeatureFlags from '@carbon/feature-flags';
 import { OverflowMenu as OverflowMenu$1 } from './OverflowMenu.js';
 import { createClassWrapper } from '../../internal/createClassWrapper.js';
 
-var OverflowMenu = FeatureFlags.enabled('enable-v11-release') ? createClassWrapper(OverflowMenu$1) : OverflowMenu$1;
+var OverflowMenu = createClassWrapper(OverflowMenu$1);
 
 export { OverflowMenu as default };

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -28,7 +28,8 @@ var SkeletonPlaceholder = function SkeletonPlaceholder(_ref) {
 
 SkeletonPlaceholder.propTypes = {
   /**
-   * the class to be applied to the component
+   * Add a custom class to the component
+   * to set the height and width
    */
   className: PropTypes.string
 };

package/es/components/SkeletonText/SkeletonText.js

@@ -89,7 +89,7 @@ SkeletonText.propTypes = {
   heading: PropTypes.bool,
 
   /**
-   * the number of lines in a paragraph
+   * the number of lines shown if paragraph is true
    */
   lineCount: PropTypes.number,