@carbon/react 1.96.0 → 1.97.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -531,6 +531,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   });
+
+  // Keep the dropdown highlight in sync with either the controlled value or
+  // Downshift's own selection when uncontrolled.
+  const menuSelectedItem = typeof selectedItemProp !== 'undefined' ? selectedItemProp : selectedItem;
   useEffect(() => {
     // Used to expose the downshift actions to consumers for use with downshiftProps
     // An odd pattern, here we mutate the value stored in the ref provided from the consumer.
@@ -758,13 +762,13 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     } = itemProps;
     return /*#__PURE__*/React.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
-      isActive: isEqual(selectedItem, item),
+      isActive: isEqual(menuSelectedItem, item),
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
     }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
       key: itemProps.id
-    }, item)) : itemToString(item), isEqual(selectedItem, item) && /*#__PURE__*/React.createElement(Checkmark, {
+    }, item)) : itemToString(item), isEqual(menuSelectedItem, item) && /*#__PURE__*/React.createElement(Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text, {

package/es/components/RadioTile/RadioTile.d.ts

@@ -69,5 +69,5 @@ export interface RadioTileProps {
      */
     required?: boolean;
 }
-declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLInputElement>>;
+declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.AriaAttributes & React.RefAttributes<HTMLInputElement>>;
 export default RadioTile;

package/es/components/RadioTile/RadioTile.js

@@ -51,6 +51,11 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   });
+  const {
+    'aria-describedby': ariaDescribedBy,
+    'aria-labelledby': ariaLabelledBy,
+    ...labelProps
+  } = rest;
   const v12TileRadioIcons = useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
     if (v12TileRadioIcons) {
@@ -79,7 +84,7 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
     size: 'xs'
   }) : candidate;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", _extends({
     checked: checked,
     className: `${prefix}--tile-input`,
     disabled: disabled,
@@ -89,10 +94,15 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
     onKeyDown: !disabled ? handleOnKeyDown : undefined,
     tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
-    value: value,
+    value: value
+  }, ariaDescribedBy && {
+    'aria-describedby': ariaDescribedBy
+  }, ariaLabelledBy && {
+    'aria-labelledby': ariaLabelledBy
+  }, {
     ref: ref,
     required: required
-  }), /*#__PURE__*/React.createElement("label", _extends({}, rest, {
+  })), /*#__PURE__*/React.createElement("label", _extends({}, labelProps, {
     htmlFor: inputId,
     className: className
   }), /*#__PURE__*/React.createElement("span", {

package/es/components/Tooltip/Tooltip.js

@@ -36,6 +36,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   closeOnActivation = false,
   dropShadow = false,
   highContrast = true,
+  // TODO: remove in v12, highContrast should not be configurable
   ...rest
 }, ref) => {
   const tooltipRef = useRef(null);
@@ -167,7 +168,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
       align: align,
       className: cx(`${prefix}--tooltip`, customClassName),
       dropShadow: dropShadow,
-      highContrast: highContrast,
+      highContrast: highContrast // TODO: v12 hard-set highContrast to true
+      ,
       onKeyDown: onKeyDown,
       onMouseLeave: onMouseLeave,
       open: open
@@ -250,6 +252,8 @@ Tooltip.propTypes = {
    * Render the component using the high-contrast theme
    */
   highContrast: PropTypes.bool,
+  // TODO: remove in v12, highContrast should not be configurable
+
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.

package/lib/components/ComboBox/ComboBox.js

@@ -535,6 +535,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }
   });
+
+  // Keep the dropdown highlight in sync with either the controlled value or
+  // Downshift's own selection when uncontrolled.
+  const menuSelectedItem = typeof selectedItemProp !== 'undefined' ? selectedItemProp : selectedItem;
   React.useEffect(() => {
     // Used to expose the downshift actions to consumers for use with downshiftProps
     // An odd pattern, here we mutate the value stored in the ref provided from the consumer.
@@ -762,13 +766,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = itemProps;
     return /*#__PURE__*/React.createElement(index$2.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
-      isActive: isEqual(selectedItem, item),
+      isActive: isEqual(menuSelectedItem, item),
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
     }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
       key: itemProps.id
-    }, item)) : itemToString(item), isEqual(selectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
+    }, item)) : itemToString(item), isEqual(menuSelectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text.Text, {

package/lib/components/RadioTile/RadioTile.d.ts

@@ -69,5 +69,5 @@ export interface RadioTileProps {
      */
     required?: boolean;
 }
-declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLInputElement>>;
+declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.AriaAttributes & React.RefAttributes<HTMLInputElement>>;
 export default RadioTile;

package/lib/components/RadioTile/RadioTile.js

@@ -55,6 +55,11 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--tile--decorator`]: decorator,
     [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
   });
+  const {
+    'aria-describedby': ariaDescribedBy,
+    'aria-labelledby': ariaLabelledBy,
+    ...labelProps
+  } = rest;
   const v12TileRadioIcons = index.useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
     if (v12TileRadioIcons) {
@@ -83,7 +88,7 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'xs'
   }) : candidate;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({
     checked: checked,
     className: `${prefix}--tile-input`,
     disabled: disabled,
@@ -93,10 +98,15 @@ const RadioTile = /*#__PURE__*/React.forwardRef(({
     onKeyDown: !disabled ? handleOnKeyDown : undefined,
     tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
-    value: value,
+    value: value
+  }, ariaDescribedBy && {
+    'aria-describedby': ariaDescribedBy
+  }, ariaLabelledBy && {
+    'aria-labelledby': ariaLabelledBy
+  }, {
     ref: ref,
     required: required
-  }), /*#__PURE__*/React.createElement("label", _rollupPluginBabelHelpers.extends({}, rest, {
+  })), /*#__PURE__*/React.createElement("label", _rollupPluginBabelHelpers.extends({}, labelProps, {
     htmlFor: inputId,
     className: className
   }), /*#__PURE__*/React.createElement("span", {

package/lib/components/Tooltip/Tooltip.js

@@ -38,6 +38,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   closeOnActivation = false,
   dropShadow = false,
   highContrast = true,
+  // TODO: remove in v12, highContrast should not be configurable
   ...rest
 }, ref) => {
   const tooltipRef = React.useRef(null);
@@ -169,7 +170,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
       align: align,
       className: cx(`${prefix}--tooltip`, customClassName),
       dropShadow: dropShadow,
-      highContrast: highContrast,
+      highContrast: highContrast // TODO: v12 hard-set highContrast to true
+      ,
       onKeyDown: onKeyDown,
       onMouseLeave: onMouseLeave,
       open: open
@@ -252,6 +254,8 @@ Tooltip.propTypes = {
    * Render the component using the high-contrast theme
    */
   highContrast: PropTypes.bool,
+  // TODO: remove in v12, highContrast should not be configurable
+
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.96.0",
+  "version": "1.97.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -55,7 +55,7 @@
     "@carbon/feature-flags": "0.32.0",
     "@carbon/icons-react": "^11.70.0",
     "@carbon/layout": "^11.43.0",
-    "@carbon/styles": "^1.95.0",
+    "@carbon/styles": "^1.96.0-rc.0",
     "@carbon/utilities": "^0.12.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -80,7 +80,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.38.0",
-    "@carbon/themes": "^11.63.0",
+    "@carbon/themes": "^11.64.0-rc.0",
     "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "d2ccae94e5aa3defcce07cc9ea90058fda6c9705"
+  "gitHead": "87ff7d321ab5e0f7147383b2a71f43936b7e34c1"
 }