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

package/es/components/ComposedModal/ComposedModal.js

@@ -19,7 +19,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 var _ModalBody$propTypes, _ComposedModal$propTy;
 
 var _excluded = ["className", "children", "hasForm", "hasScrollingContent"],
-    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
+    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "isFullWidth", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
 var ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
   var _cx;
 
@@ -53,6 +53,7 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
       customClassName = _ref2.className,
       containerClassName = _ref2.containerClassName,
       danger = _ref2.danger,
+      isFullWidth = _ref2.isFullWidth,
       onClose = _ref2.onClose,
       onKeyDown = _ref2.onKeyDown,
       open = _ref2.open,
@@ -129,7 +130,7 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
   }
 
   var modalClass = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--modal"), true), _defineProperty(_cx2, 'is-visible', isOpen), _defineProperty(_cx2, customClassName, customClassName), _defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
-  var containerClass = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
+  var containerClass = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_cx3, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
 
   var generatedAriaLabel;
   var childrenWithProps = React__default.Children.toArray(children).map(function (child) {
@@ -216,7 +217,7 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
     className: "".concat(prefix, "--visually-hidden")
   }, "Focus sentinel")));
 });
-ComposedModal.propTypes = (_ComposedModal$propTy = {}, _defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes.string), _defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes.string), _defineProperty(_ComposedModal$propTy, "children", PropTypes.node), _defineProperty(_ComposedModal$propTy, "className", PropTypes.string), _defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes.string), _defineProperty(_ComposedModal$propTy, "danger", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "onClose", PropTypes.func), _defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes.func), _defineProperty(_ComposedModal$propTy, "open", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_ComposedModal$propTy, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+ComposedModal.propTypes = (_ComposedModal$propTy = {}, _defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes.string), _defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes.string), _defineProperty(_ComposedModal$propTy, "children", PropTypes.node), _defineProperty(_ComposedModal$propTy, "className", PropTypes.string), _defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes.string), _defineProperty(_ComposedModal$propTy, "danger", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "isFullWidth", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "onClose", PropTypes.func), _defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes.func), _defineProperty(_ComposedModal$propTy, "open", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_ComposedModal$propTy, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
 ComposedModal.defaultProps = {
   onKeyDown: function onKeyDown() {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'

package/es/components/Modal/Modal.js

@@ -20,10 +20,10 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Modal$propTypes;
 
-var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
+var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside", "isFullWidth"];
 var getInstanceId = setupGetInstanceId();
 var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
-  var _classNames;
+  var _classNames, _classNames2;
 
   var children = _ref.children,
       className = _ref.className,
@@ -48,6 +48,7 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       hasScrollingContent = _ref.hasScrollingContent,
       closeButtonLabel = _ref.closeButtonLabel,
       preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
+      isFullWidth = _ref.isFullWidth,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
@@ -105,7 +106,7 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
 
   var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   var modalClasses = cx("".concat(prefix, "--modal"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _defineProperty(_classNames, 'is-visible', open), _defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _defineProperty(_classNames, className, className), _classNames));
-  var containerClasses = cx("".concat(prefix, "--modal-container"), _defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
+  var containerClasses = cx("".concat(prefix, "--modal-container"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_classNames2, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _classNames2));
   var contentClasses = cx("".concat(prefix, "--modal-content"), _defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
   var footerClasses = cx("".concat(prefix, "--modal-footer"), _defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
   var modalButton = /*#__PURE__*/React__default.createElement("button", {
@@ -240,7 +241,7 @@ Modal.propTypes = (_Modal$propTypes = {
    * Should go hand in hand with the danger prop.
    */
   alert: PropTypes.bool
-}, _defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_Modal$propTypes, "children", PropTypes.node), _defineProperty(_Modal$propTypes, "className", PropTypes.string), _defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "danger", PropTypes.bool), _defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes.bool), _defineProperty(_Modal$propTypes, "id", PropTypes.string), _defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "modalHeading", PropTypes.node), _defineProperty(_Modal$propTypes, "modalLabel", PropTypes.node), _defineProperty(_Modal$propTypes, "onKeyDown", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestClose", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "open", PropTypes.bool), _defineProperty(_Modal$propTypes, "passiveModal", PropTypes.bool), _defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
+}, _defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_Modal$propTypes, "children", PropTypes.node), _defineProperty(_Modal$propTypes, "className", PropTypes.string), _defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "danger", PropTypes.bool), _defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes.bool), _defineProperty(_Modal$propTypes, "id", PropTypes.string), _defineProperty(_Modal$propTypes, "isFullWidth", PropTypes.bool), _defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "modalHeading", PropTypes.node), _defineProperty(_Modal$propTypes, "modalLabel", PropTypes.node), _defineProperty(_Modal$propTypes, "onKeyDown", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestClose", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "open", PropTypes.bool), _defineProperty(_Modal$propTypes, "passiveModal", PropTypes.bool), _defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
   if (props.secondaryButtons) {
     if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
       return new Error("".concat(propName, " needs to be an array of two button config objects"));

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -53,13 +53,19 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButt
   function getRadioButtons() {
     var mappedChildren = React__default.Children.map(children, function (radioButton) {
       var value = radioButton.props.value;
-      return /*#__PURE__*/React__default.cloneElement(radioButton, {
+      var newProps = {
         name: name,
         key: value,
         value: value,
         onChange: handleOnChange,
         checked: value === selected
-      });
+      };
+
+      if (!selected && radioButton.props.checked) {
+        newProps.checked = true;
+      }
+
+      return /*#__PURE__*/React__default.cloneElement(radioButton, newProps);
     });
     return mappedChildren;
   }

package/es/components/TextArea/TextArea.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState } from 'react';
+import React__default, { useContext, useState, useEffect } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled } from '@carbon/icons-react';
@@ -49,6 +49,11 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      ariaAnnouncement = _useState4[0],
+      setAriaAnnouncement = _useState4[1];
+
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -72,6 +77,15 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     textareaProps.maxLength = maxCount;
   }
 
+  useEffect(function () {
+    var lastTen = maxCount - 10;
+
+    if (textCount >= lastTen) {
+      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
+    } else {
+      setAriaAnnouncement('');
+    }
+  }, [textCount, maxCount]);
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
   var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
@@ -110,7 +124,10 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
-  }), input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }), input, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--text-area__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: "".concat(prefix, "--text-area__divider")
   }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
 });

package/es/index.js

@@ -18,6 +18,7 @@ export { ClassPrefix } from './components/ClassPrefix/index.js';
 export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
 export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
 export { default as ComboBox } from './components/ComboBox/ComboBox.js';
+import './components/ContainedList/index.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
@@ -95,7 +96,6 @@ export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.j
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
-import './components/ContainedList/index.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { Heading, Section } from './components/Heading/index.js';
 export { IconButton } from './components/IconButton/index.js';
@@ -109,6 +109,7 @@ export { DefinitionTooltip } from './components/Tooltip/next/DefinitionTooltip.j
 export { GlobalTheme, Theme, useTheme } from './components/Theme/index.js';
 export { usePrefix } from './internal/usePrefix.js';
 export { default as AspectRatio } from './components/AspectRatio/AspectRatio.js';
+export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
@@ -121,7 +122,6 @@ export { default as SideNavFooter } from './components/UIShell/SideNavFooter.js'
 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_ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as unstable_useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
 export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
@@ -135,10 +135,10 @@ export { default as unstable_MenuSelectableItem } from './components/Menu/MenuSe
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
+export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
 export { default as TreeView } from './components/TreeView/TreeView.js';
-export { default as unstable_ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as unstable_Menu } from './components/Menu/Menu.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.js';

package/lib/components/ComposedModal/ComposedModal.js

@@ -29,7 +29,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var _ModalBody$propTypes, _ComposedModal$propTy;
 
 var _excluded = ["className", "children", "hasForm", "hasScrollingContent"],
-    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
+    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "isFullWidth", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
 var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody(_ref, ref) {
   var _cx;
 
@@ -63,6 +63,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
       customClassName = _ref2.className,
       containerClassName = _ref2.containerClassName,
       danger = _ref2.danger,
+      isFullWidth = _ref2.isFullWidth,
       onClose = _ref2.onClose,
       onKeyDown = _ref2.onKeyDown,
       open = _ref2.open,
@@ -139,7 +140,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
   }
 
   var modalClass = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--modal"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, 'is-visible', isOpen), _rollupPluginBabelHelpers.defineProperty(_cx2, customClassName, customClassName), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
-  var containerClass = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
+  var containerClass = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _rollupPluginBabelHelpers.defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
 
   var generatedAriaLabel;
   var childrenWithProps = React__default["default"].Children.toArray(children).map(function (child) {
@@ -226,7 +227,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     className: "".concat(prefix, "--visually-hidden")
   }, "Focus sentinel")));
 });
-ComposedModal.propTypes = (_ComposedModal$propTy = {}, _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+ComposedModal.propTypes = (_ComposedModal$propTy = {}, _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "isFullWidth", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
 ComposedModal.defaultProps = {
   onKeyDown: function onKeyDown() {},
   selectorPrimaryFocus: '[data-modal-primary-focus]'

package/lib/components/Modal/Modal.js

@@ -30,10 +30,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Modal$propTypes;
 
-var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
+var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside", "isFullWidth"];
 var getInstanceId = setupGetInstanceId["default"]();
 var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_ref, ref) {
-  var _classNames;
+  var _classNames, _classNames2;
 
   var children = _ref.children,
       className = _ref.className,
@@ -58,6 +58,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_re
       hasScrollingContent = _ref.hasScrollingContent,
       closeButtonLabel = _ref.closeButtonLabel,
       preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
+      isFullWidth = _ref.isFullWidth,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -115,7 +116,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_re
 
   var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   var modalClasses = cx__default["default"]("".concat(prefix, "--modal"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _rollupPluginBabelHelpers.defineProperty(_classNames, 'is-visible', open), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
-  var containerClasses = cx__default["default"]("".concat(prefix, "--modal-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
+  var containerClasses = cx__default["default"]("".concat(prefix, "--modal-container"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--modal-container--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _classNames2));
   var contentClasses = cx__default["default"]("".concat(prefix, "--modal-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
   var footerClasses = cx__default["default"]("".concat(prefix, "--modal-footer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
   var modalButton = /*#__PURE__*/React__default["default"].createElement("button", {
@@ -250,7 +251,7 @@ Modal.propTypes = (_Modal$propTypes = {
    * Should go hand in hand with the danger prop.
    */
   alert: PropTypes__default["default"].bool
-}, _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalHeading", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalLabel", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "passiveModal", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
+}, _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "isFullWidth", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalHeading", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalLabel", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "passiveModal", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
   if (props.secondaryButtons) {
     if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
       return new Error("".concat(propName, " needs to be an array of two button config objects"));

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -63,13 +63,19 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
   function getRadioButtons() {
     var mappedChildren = React__default["default"].Children.map(children, function (radioButton) {
       var value = radioButton.props.value;
-      return /*#__PURE__*/React__default["default"].cloneElement(radioButton, {
+      var newProps = {
         name: name,
         key: value,
         value: value,
         onChange: handleOnChange,
         checked: value === selected
-      });
+      };
+
+      if (!selected && radioButton.props.checked) {
+        newProps.checked = true;
+      }
+
+      return /*#__PURE__*/React__default["default"].cloneElement(radioButton, newProps);
     });
     return mappedChildren;
   }

package/lib/components/TextArea/TextArea.js

@@ -59,6 +59,11 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
+  var _useState3 = React.useState(''),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      ariaAnnouncement = _useState4[0],
+      setAriaAnnouncement = _useState4[1];
+
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -82,6 +87,15 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     textareaProps.maxLength = maxCount;
   }
 
+  React.useEffect(function () {
+    var lastTen = maxCount - 10;
+
+    if (textCount >= lastTen) {
+      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
+    } else {
+      setAriaAnnouncement('');
+    }
+  }, [textCount, maxCount]);
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
   var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
@@ -120,7 +134,10 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
-  }), input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+  }), input, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--text-area__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--text-area__divider")
   }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
 });

package/lib/index.js

@@ -22,6 +22,7 @@ var index$9 = require('./components/ClassPrefix/index.js');
 var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
 var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
 var ComboBox = require('./components/ComboBox/ComboBox.js');
+require('./components/ContainedList/index.js');
 var index = require('./components/ContentSwitcher/index.js');
 var Copy = require('./components/Copy/Copy.js');
 var CopyButton = require('./components/CopyButton/CopyButton.js');
@@ -99,7 +100,6 @@ var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
 var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
 var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
-require('./components/ContainedList/index.js');
 var index$d = require('./components/FeatureFlags/index.js');
 var index$e = require('./components/Heading/index.js');
 var index$f = require('./components/IconButton/index.js');
@@ -113,6 +113,7 @@ var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js'
 var index$k = require('./components/Theme/index.js');
 var usePrefix = require('./internal/usePrefix.js');
 var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
+var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
 var Row = require('./components/Grid/Row.js');
 var Column = require('./components/Grid/Column.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
@@ -125,7 +126,6 @@ var SideNavFooter = require('./components/UIShell/SideNavFooter.js');
 var SideNavIcon = require('./components/UIShell/SideNavIcon.js');
 var SideNavItem = require('./components/UIShell/SideNavItem.js');
 var SideNavLinkText = require('./components/UIShell/SideNavLinkText.js');
-var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
 var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
 var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
 var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
@@ -139,10 +139,10 @@ var MenuSelectableItem = require('./components/Menu/MenuSelectableItem.js');
 var PageSelector = require('./components/Pagination/experimental/PageSelector.js');
 var Pagination$1 = require('./components/Pagination/experimental/Pagination.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
+var ContainedList = require('./components/ContainedList/ContainedList.js');
 var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
 var TextInput = require('./components/TextInput/TextInput.js');
 var TreeView = require('./components/TreeView/TreeView.js');
-var ContainedList = require('./components/ContainedList/ContainedList.js');
 var Menu = require('./components/Menu/Menu.js');
 var Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
 var BreadcrumbItem = require('./components/Breadcrumb/BreadcrumbItem.js');
@@ -338,6 +338,7 @@ exports.Theme = index$k.Theme;
 exports.useTheme = index$k.useTheme;
 exports.usePrefix = usePrefix.usePrefix;
 exports.AspectRatio = AspectRatio["default"];
+exports.ContainedListItem = ContainedListItem["default"];
 exports.Row = Row["default"];
 exports.Column = Column["default"];
 exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
@@ -350,7 +351,6 @@ exports.SideNavFooter = SideNavFooter["default"];
 exports.SideNavIcon = SideNavIcon["default"];
 exports.SideNavItem = SideNavItem["default"];
 exports.SideNavLinkText = SideNavLinkText["default"];
-exports.unstable_ContainedListItem = ContainedListItem["default"];
 exports.unstable_useContextMenu = useContextMenu["default"];
 exports.unstable__FluidTextArea = FluidTextArea["default"];
 exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
@@ -364,10 +364,10 @@ exports.unstable_MenuSelectableItem = MenuSelectableItem["default"];
 exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination$1["default"];
 exports.ProgressBar = ProgressBar["default"];
+exports.ContainedList = ContainedList["default"];
 exports.MultiSelect = MultiSelect["default"];
 exports.TextInput = TextInput["default"];
 exports.TreeView = TreeView["default"];
-exports.unstable_ContainedList = ContainedList["default"];
 exports.unstable_Menu = Menu["default"];
 exports.Breadcrumb = Breadcrumb["default"];
 exports.BreadcrumbItem = BreadcrumbItem["default"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.17.0-rc.0",
+  "version": "1.17.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.9.0",
     "@carbon/icons-react": "^11.10.0",
     "@carbon/layout": "^11.7.0",
-    "@carbon/styles": "^1.17.0-rc.0",
+    "@carbon/styles": "^1.17.0-rc.1",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -73,7 +73,7 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@carbon/test-utils": "^10.26.0",
-    "@carbon/themes": "^11.11.0",
+    "@carbon/themes": "^11.11.1-rc.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
@@ -135,5 +135,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "707f5b292f95f7146576a1995350f47582a3b39b"
+  "gitHead": "01475a0713de3b5243b747ffe7036f652ae5c22f"
 }