@carbon/react 1.18.0 → 1.19.0

package/es/components/ComboBox/ComboBox.js

@@ -28,7 +28,7 @@ import { Text } from '../Text/Text.js';
 import ListBox from '../ListBox/ListBox.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
-var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
+var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "readOnly", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -102,6 +102,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       onInputChange = props.onInputChange,
       onToggleClick = props.onToggleClick,
       placeholder = props.placeholder,
+      readOnly = props.readOnly,
       selectedItem = props.selectedItem,
       shouldFilterItem = props.shouldFilterItem,
       size = props.size,
@@ -223,7 +224,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
 
   var enabled = useFeatureFlag('enable-v11-release');
   var showWarning = !invalid && warn;
-  var className = cx("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _cx));
+  var className = cx("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _defineProperty(_cx, "".concat(prefix, "--combo-box--readonly"), readOnly), _cx));
   var titleClasses = cx("".concat(prefix, "--label"), _defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
   var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(comboBoxInstanceId);
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
@@ -269,7 +270,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     });
     var labelProps = getLabelProps();
     var buttonProps = getToggleButtonProps({
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClick: handleToggleClick(isOpen),
       // When we moved the "root node" of Downshift to the <input> for
       // ARIA 1.2 compliance, we unfortunately hit this branch for the
@@ -313,6 +314,14 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       }
     };
 
+    var readOnlyEventHandlers = readOnly ? {
+      onKeyDown: function onKeyDown(evt) {
+        // This prevents the select from opening for the above keys
+        if (evt.key !== 'Tab') {
+          evt.preventDefault();
+        }
+      }
+    } : {};
     return /*#__PURE__*/React__default.createElement("div", {
       className: wrapperClasses
     }, titleText && /*#__PURE__*/React__default.createElement(Text, _extends({
@@ -343,7 +352,8 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       "aria-haspopup": "listbox",
       "aria-controls": inputProps['aria-controls'],
       title: textInput === null || textInput === void 0 ? void 0 : (_textInput$current = textInput.current) === null || _textInput$current === void 0 ? void 0 : _textInput$current.value
-    }, inputProps, rest, {
+    }, inputProps, rest, readOnlyEventHandlers, {
+      readOnly: readOnly,
       ref: mergeRefs(textInput, ref)
     })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
       className: "".concat(prefix, "--list-box__invalid-icon")
@@ -352,7 +362,7 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
       clearSelection: clearSelection,
       translateWithId: translateWithId,
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClearSelection: handleSelectionClear
     }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
       isOpen: isOpen,
@@ -493,6 +503,11 @@ ComboBox.propTypes = {
    */
   placeholder: PropTypes.string,
 
+  /**
+   * Is the ComboBox readonly?
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * For full control of the selection
    */

package/es/components/Dropdown/Dropdown.js

@@ -21,7 +21,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 import ListBox from '../ListBox/ListBox.js';
 
-var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps"];
+var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -59,6 +59,7 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
       initialSelectedItem = _ref.initialSelectedItem,
       controlledSelectedItem = _ref.selectedItem,
       downshiftProps = _ref.downshiftProps,
+      readOnly = _ref.readOnly,
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -97,7 +98,7 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
-  var className = cx("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
+  var className = cx("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _defineProperty(_cx, "".concat(prefix, "--dropdown--readonly"), readOnly), _defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
   var titleClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
   var wrapperClasses = cx("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused && !isOpen), _cx4)); // needs to be Capitalized for react to render it correctly
@@ -127,6 +128,21 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
     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", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
@@ -152,9 +168,10 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
-    "aria-disabled": disabled,
+    "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
+    ,
     title: selectedItem ? itemToString(selectedItem) : label
-  }, toggleButtonProps, {
+  }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergeRefs(toggleButtonProps.ref, ref)
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--list-box__label")
@@ -278,6 +295,11 @@ Dropdown.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * An optional callback to render the currently selected item as a react element instead of only
    * as a string.

package/es/components/ListBox/next/ListBoxSelection.js

@@ -90,6 +90,7 @@ function ListBoxSelection(_ref) {
   return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
     "aria-label": description,
     className: className,
+    disabled: disabled,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: disabled ? -1 : 0,

package/es/components/Notification/Notification.js

@@ -170,7 +170,8 @@ function NotificationIcon(_ref3) {
   }
 
   return /*#__PURE__*/React__default.createElement(IconForKind, {
-    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon")
+    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon"),
+    size: 20
   }, /*#__PURE__*/React__default.createElement("title", null, iconDescription));
 }
 

package/es/components/NumberInput/NumberInput.js

@@ -51,8 +51,10 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
       _props$invalidText = props.invalidText,
       invalidText = _props$invalidText === void 0 ? enabled ? undefined : 'Provide invalidText' : _props$invalidText,
       light = props.light,
-      max = props.max,
-      min = props.min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
       onChange = props.onChange,
       _onClick = props.onClick,
       onKeyUp = props.onKeyUp,

package/es/components/TextArea/TextArea.js

@@ -103,6 +103,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     "aria-invalid": invalid || null,
     "aria-describedby": invalid ? errorId : null,
     disabled: other.disabled,
+    readOnly: other.readOnly,
     style: other.cols ? {} : {
       width: "100%"
     }
@@ -112,7 +113,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--text-area__label-wrapper")
   }, label, counter), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--text-area__wrapper"),
+    className: cx("".concat(prefix, "--text-area__wrapper"), _defineProperty({}, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly)),
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
@@ -210,6 +211,11 @@ TextArea.propTypes = {
    */
   placeholder: PropTypes.string,
 
+  /**
+   * Whether the textarea should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify the rows attribute for the `<textarea>`
    */

package/es/components/Toggle/Toggle.js

@@ -61,7 +61,7 @@ function Toggle(_ref) {
   }
 
   var isSm = size === 'sm';
-  var sideLabel = checked ? labelB : labelA;
+  var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
   var wrapperClasses = cx("".concat(prefix, "--toggle"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--toggle--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--toggle--readonly"), readOnly), _classNames), className);
   var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));

package/es/feature-flags.js

@@ -10,5 +10,6 @@ import * as FeatureFlags from '@carbon/feature-flags';
 FeatureFlags.merge({
   'enable-css-custom-properties': true,
   'enable-css-grid': true,
-  'enable-v11-release': true
+  'enable-v11-release': true,
+  'enable-experimental-tile-contrast': false
 });

package/es/internal/useNoInteractiveChildren.js

@@ -31,6 +31,10 @@ function useNoInteractiveChildren(ref) {
  */
 
 function getInteractiveContent(node) {
+  if (!node || !node.childNodes) {
+    return null;
+  }
+
   if (isFocusable(node)) {
     return node;
   }

package/lib/components/ComboBox/ComboBox.js

@@ -39,7 +39,7 @@ var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
+var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "readOnly", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -113,6 +113,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       onInputChange = props.onInputChange,
       onToggleClick = props.onToggleClick,
       placeholder = props.placeholder,
+      readOnly = props.readOnly,
       selectedItem = props.selectedItem,
       shouldFilterItem = props.shouldFilterItem,
       size = props.size,
@@ -234,7 +235,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
 
   var enabled = index.useFeatureFlag('enable-v11-release');
   var showWarning = !invalid && warn;
-  var className = cx__default["default"]("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _cx));
+  var className = cx__default["default"]("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--combo-box--readonly"), readOnly), _cx));
   var titleClasses = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
   var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(comboBoxInstanceId);
   var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
@@ -280,7 +281,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
     });
     var labelProps = getLabelProps();
     var buttonProps = getToggleButtonProps({
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClick: handleToggleClick(isOpen),
       // When we moved the "root node" of Downshift to the <input> for
       // ARIA 1.2 compliance, we unfortunately hit this branch for the
@@ -324,6 +325,14 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       }
     };
 
+    var readOnlyEventHandlers = readOnly ? {
+      onKeyDown: function onKeyDown(evt) {
+        // This prevents the select from opening for the above keys
+        if (evt.key !== 'Tab') {
+          evt.preventDefault();
+        }
+      }
+    } : {};
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: wrapperClasses
     }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
@@ -354,7 +363,8 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       "aria-haspopup": "listbox",
       "aria-controls": inputProps['aria-controls'],
       title: textInput === null || textInput === void 0 ? void 0 : (_textInput$current = textInput.current) === null || _textInput$current === void 0 ? void 0 : _textInput$current.value
-    }, inputProps, rest, {
+    }, inputProps, rest, readOnlyEventHandlers, {
+      readOnly: readOnly,
       ref: mergeRefs["default"](textInput, ref)
     })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
       className: "".concat(prefix, "--list-box__invalid-icon")
@@ -363,7 +373,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
     }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
       clearSelection: clearSelection,
       translateWithId: translateWithId,
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClearSelection: handleSelectionClear
     }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
       isOpen: isOpen,
@@ -504,6 +514,11 @@ ComboBox.propTypes = {
    */
   placeholder: PropTypes__default["default"].string,
 
+  /**
+   * Is the ComboBox readonly?
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * For full control of the selection
    */

package/lib/components/Dropdown/Dropdown.js

@@ -31,7 +31,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps"];
+var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -69,6 +69,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
       initialSelectedItem = _ref.initialSelectedItem,
       controlledSelectedItem = _ref.selectedItem,
       downshiftProps = _ref.downshiftProps,
+      readOnly = _ref.readOnly,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -107,7 +108,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
-  var className = cx__default["default"]("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
+  var className = cx__default["default"]("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
   var titleClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
   var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused && !isOpen), _cx4)); // needs to be Capitalized for react to render it correctly
@@ -137,6 +138,21 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
     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["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -162,9 +178,10 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdo
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
-    "aria-disabled": disabled,
+    "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
+    ,
     title: selectedItem ? itemToString(selectedItem) : label
-  }, toggleButtonProps, {
+  }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergeRefs["default"](toggleButtonProps.ref, ref)
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--list-box__label")
@@ -288,6 +305,11 @@ Dropdown.propTypes = {
    */
   onChange: PropTypes__default["default"].func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * An optional callback to render the currently selected item as a react element instead of only
    * as a string.

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -100,6 +100,7 @@ function ListBoxSelection(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-label": description,
     className: className,
+    disabled: disabled,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: disabled ? -1 : 0,

package/lib/components/Notification/Notification.js

@@ -180,7 +180,8 @@ function NotificationIcon(_ref3) {
   }
 
   return /*#__PURE__*/React__default["default"].createElement(IconForKind, {
-    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon")
+    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon"),
+    size: 20
   }, /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));
 }
 

package/lib/components/NumberInput/NumberInput.js

@@ -61,8 +61,10 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
       _props$invalidText = props.invalidText,
       invalidText = _props$invalidText === void 0 ? enabled ? undefined : 'Provide invalidText' : _props$invalidText,
       light = props.light,
-      max = props.max,
-      min = props.min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
       onChange = props.onChange,
       _onClick = props.onClick,
       onKeyUp = props.onKeyUp,

package/lib/components/TextArea/TextArea.js

@@ -113,6 +113,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     "aria-invalid": invalid || null,
     "aria-describedby": invalid ? errorId : null,
     disabled: other.disabled,
+    readOnly: other.readOnly,
     style: other.cols ? {} : {
       width: "100%"
     }
@@ -122,7 +123,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--text-area__label-wrapper")
   }, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--text-area__wrapper"),
+    className: cx__default["default"]("".concat(prefix, "--text-area__wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly)),
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
@@ -220,6 +221,11 @@ TextArea.propTypes = {
    */
   placeholder: PropTypes__default["default"].string,
 
+  /**
+   * Whether the textarea should be read-only
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * Specify the rows attribute for the `<textarea>`
    */

package/lib/components/Toggle/Toggle.js

@@ -71,7 +71,7 @@ function Toggle(_ref) {
   }
 
   var isSm = size === 'sm';
-  var sideLabel = checked ? labelB : labelA;
+  var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--toggle--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--toggle--readonly"), readOnly), _classNames), className);
   var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));

package/lib/feature-flags.js

@@ -32,5 +32,6 @@ var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 FeatureFlags__namespace.merge({
   'enable-css-custom-properties': true,
   'enable-css-grid': true,
-  'enable-v11-release': true
+  'enable-v11-release': true,
+  'enable-experimental-tile-contrast': false
 });

package/lib/internal/useNoInteractiveChildren.js

@@ -35,6 +35,10 @@ function useNoInteractiveChildren(ref) {
  */
 
 function getInteractiveContent(node) {
+  if (!node || !node.childNodes) {
+    return null;
+  }
+
   if (isFocusable(node)) {
     return node;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,10 +43,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.10.0",
-    "@carbon/icons-react": "^11.12.0",
-    "@carbon/layout": "^11.8.0",
-    "@carbon/styles": "^1.18.0",
+    "@carbon/feature-flags": "^0.11.0",
+    "@carbon/icons-react": "^11.13.0",
+    "@carbon/layout": "^11.9.0",
+    "@carbon/styles": "^1.19.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -73,11 +73,11 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@carbon/test-utils": "^10.26.0",
-    "@carbon/themes": "^11.13.0",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@carbon/themes": "^11.14.0",
+    "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
-    "@rollup/plugin-typescript": "^9.0.0",
+    "@rollup/plugin-typescript": "^10.0.0",
     "@storybook/addon-a11y": "^6.5.6",
     "@storybook/addon-actions": "^6.5.6",
     "@storybook/addon-docs": "^6.5.6",
@@ -92,7 +92,7 @@
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
     "autoprefixer": "^10.4.0",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^9.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-carbon": "^0.3.0",
     "browserify-zlib": "^0.2.0",
@@ -135,5 +135,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "00fdab625998b2ae048814059ae8447435d6c7cd"
+  "gitHead": "8206000d08eba6a443d7846b692a3543a47a6e66"
 }