@carbon/react 1.95.1-rc.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/Menu/Menu.js

@@ -149,7 +149,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
     }
   }
   function handleBlur(e) {
-    if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
+    if (open && onClose && isRoot && e.relatedTarget && !menu.current?.contains(e.relatedTarget)) {
       handleClose();
     }
   }

package/es/components/Pagination/Pagination.js

@@ -250,6 +250,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
     hideLabel: true,
     onChange: handlePageInputChange,
     value: page,
+    key: page,
     disabled: pageInputDisabled || disabled
   }, selectItems), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--pagination__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/Search/Search.js

@@ -10,7 +10,7 @@ import { Close, Search as Search$1 } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useContext, useRef, useState } from 'react';
-import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
+import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,6 +20,8 @@ import { deprecate } from '../../prop-types/deprecate.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { noopFn } from '../../internal/noopFn.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 
 var _Close;
 const Search = /*#__PURE__*/React.forwardRef(({
@@ -129,11 +131,7 @@ const Search = /*#__PURE__*/React.forwardRef(({
       }
     }
   }
-  return /*#__PURE__*/React.createElement("div", {
-    role: "search",
-    "aria-label": placeholder,
-    className: searchClasses
-  }, /*#__PURE__*/React.createElement("div", {
+  const magnifierButton = /*#__PURE__*/React.createElement("div", {
     "aria-labelledby": onExpand ? searchId : undefined,
     role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,
@@ -145,7 +143,19 @@ const Search = /*#__PURE__*/React.forwardRef(({
     "aria-controls": onExpand ? uniqueId : undefined
   }, /*#__PURE__*/React.createElement(CustomSearchIcon, {
     icon: renderIcon
-  })), /*#__PURE__*/React.createElement("label", {
+  }));
+
+  // Wrap magnifierButton in a tooltip if it's expandable
+  const magnifierWithTooltip = onExpand && !isExpanded ? /*#__PURE__*/React.createElement(Tooltip, {
+    className: `${prefix}--search-tooltip ${prefix}--search-magnifier-tooltip`,
+    align: "top",
+    label: "Search"
+  }, magnifierButton) : magnifierButton;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "search",
+    "aria-label": placeholder,
+    className: searchClasses
+  }, magnifierWithTooltip, /*#__PURE__*/React.createElement("label", {
     id: searchId,
     htmlFor: uniqueId,
     className: `${prefix}--label`

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/Menu/Menu.js

@@ -151,7 +151,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
     }
   }
   function handleBlur(e) {
-    if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
+    if (open && onClose && isRoot && e.relatedTarget && !menu.current?.contains(e.relatedTarget)) {
       handleClose();
     }
   }

package/lib/components/Pagination/Pagination.js

@@ -254,6 +254,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
     hideLabel: true,
     onChange: handlePageInputChange,
     value: page,
+    key: page,
     disabled: pageInputDisabled || disabled
   }, selectItems), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--pagination__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/Search/Search.js

@@ -24,6 +24,8 @@ var deprecate = require('../../prop-types/deprecate.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var noopFn = require('../../internal/noopFn.js');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 
 var _Close;
 const Search = /*#__PURE__*/React.forwardRef(({
@@ -133,11 +135,7 @@ const Search = /*#__PURE__*/React.forwardRef(({
       }
     }
   }
-  return /*#__PURE__*/React.createElement("div", {
-    role: "search",
-    "aria-label": placeholder,
-    className: searchClasses
-  }, /*#__PURE__*/React.createElement("div", {
+  const magnifierButton = /*#__PURE__*/React.createElement("div", {
     "aria-labelledby": onExpand ? searchId : undefined,
     role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,
@@ -149,7 +147,19 @@ const Search = /*#__PURE__*/React.forwardRef(({
     "aria-controls": onExpand ? uniqueId : undefined
   }, /*#__PURE__*/React.createElement(CustomSearchIcon, {
     icon: renderIcon
-  })), /*#__PURE__*/React.createElement("label", {
+  }));
+
+  // Wrap magnifierButton in a tooltip if it's expandable
+  const magnifierWithTooltip = onExpand && !isExpanded ? /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
+    className: `${prefix}--search-tooltip ${prefix}--search-magnifier-tooltip`,
+    align: "top",
+    label: "Search"
+  }, magnifierButton) : magnifierButton;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "search",
+    "aria-label": placeholder,
+    className: searchClasses
+  }, magnifierWithTooltip, /*#__PURE__*/React.createElement("label", {
     id: searchId,
     htmlFor: uniqueId,
     className: `${prefix}--label`

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.95.1-rc.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.94.1-rc.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.62.1-rc.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": "fde0c0fc9b6c3931d871720ee94e99255603d18d"
+  "gitHead": "87ff7d321ab5e0f7147383b2a71f43936b7e34c1"
 }