@carbon/react 1.84.0-rc.0 → 1.84.0

package/lib/components/TileGroup/TileGroup.js

@@ -21,35 +21,37 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TileGroup = props => {
-  const {
-    children,
-    className,
-    defaultSelected,
-    disabled,
-    legend,
-    name,
-    onChange = noopFn.noopFn,
-    valueSelected,
-    required
-  } = props;
+const TileGroup = ({
+  children,
+  className,
+  defaultSelected,
+  disabled,
+  legend,
+  name,
+  onChange = noopFn.noopFn,
+  valueSelected,
+  required
+}) => {
   const prefix = usePrefix.usePrefix();
   const [selected, setSelected] = React.useState(valueSelected ?? defaultSelected);
-  const [prevValueSelected, setPrevValueSelected] = React.useState(valueSelected);
+  React.useEffect(() => {
+    if (typeof valueSelected !== 'undefined' && valueSelected !== selected) {
+      setSelected(valueSelected);
+    }
+  }, [valueSelected, selected]);
+  const handleChange = (value, name, evt) => {
+    if (value !== selected) {
+      setSelected(value);
+      onChange(value, name ?? '', evt);
+    }
+  };
+  const getRadioTilesWithWrappers = elements => {
+    const traverseAndModifyChildren = elements => {
+      return React.Children.map(elements, child => {
+        if (! /*#__PURE__*/React.isValidElement(child)) return child;
 
-  /**
-   * prop + state alignment - getDerivedStateFromProps
-   * only update if selected prop changes
-   */
-  if (valueSelected !== prevValueSelected) {
-    setSelected(valueSelected);
-    setPrevValueSelected(valueSelected);
-  }
-  const getRadioTilesWithWrappers = children => {
-    const traverseAndModifyChildren = children => {
-      return React__default["default"].Children.map(children, child => {
-        // If RadioTile found, return it with necessary props
-        if (child?.type === RadioTile["default"]) {
+        // If a `RadioTile` is found, return it with necessary props,
+        if (/*#__PURE__*/React.isValidElement(child) && child.type === RadioTile["default"]) {
           const {
             value,
             ...otherProps
@@ -62,38 +64,29 @@ const TileGroup = props => {
             onChange: handleChange,
             checked: value === selected
           }));
-        } else if (child?.props?.children) {
-          // If the child is not RadioTile and has children, recheck the children
-          return /*#__PURE__*/React__default["default"].cloneElement(child, {
-            ...child.props,
-            children: traverseAndModifyChildren(child.props.children)
-          });
-        } else {
-          // If the child is neither a RadioTile nor has children, return it as is
-          return child;
         }
+
+        // If the child is not RadioTile and has children, recheck the children
+        const children = child.props.children;
+        const hasChildren = React.Children.count(children) > 0;
+        if (hasChildren) {
+          return /*#__PURE__*/React.cloneElement(child, undefined, traverseAndModifyChildren(children));
+        }
+
+        // If the child is neither a RadioTile nor has children, return it as is
+        return child;
       });
     };
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, traverseAndModifyChildren(children));
-  };
-  const handleChange = (newSelection, value, evt) => {
-    if (newSelection !== selected) {
-      setSelected(newSelection);
-      onChange(newSelection, name, evt);
-    }
-  };
-  const renderLegend = legend => {
-    if (legend) {
-      return /*#__PURE__*/React__default["default"].createElement("legend", {
-        className: `${prefix}--label`
-      }, legend);
-    }
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, traverseAndModifyChildren(elements));
   };
   return /*#__PURE__*/React__default["default"].createElement("fieldset", {
     className: className ?? `${prefix}--tile-group`,
     disabled: disabled
-  }, renderLegend(legend), /*#__PURE__*/React__default["default"].createElement("div", null, getRadioTilesWithWrappers(children)));
+  }, legend && /*#__PURE__*/React__default["default"].createElement("legend", {
+    className: `${prefix}--label`
+  }, legend), /*#__PURE__*/React__default["default"].createElement("div", null, getRadioTilesWithWrappers(children)));
 };
+TileGroup.displayName = 'TileGroup';
 TileGroup.propTypes = {
   /**
    * Provide a collection of <RadioTile> components to render in the group
@@ -133,6 +126,5 @@ TileGroup.propTypes = {
    */
   valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
-TileGroup.displayName = 'TileGroup';
 
-exports["default"] = TileGroup;
+exports.TileGroup = TileGroup;

package/lib/components/TileGroup/index.d.ts

@@ -1,9 +1,9 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import TileGroup, { type TileGroupProps } from './TileGroup';
+import { TileGroup } from './TileGroup';
 export default TileGroup;
-export { TileGroup, type TileGroupProps };
+export * from './TileGroup';

package/lib/components/UIShell/HeaderMenuItem.js

@@ -34,6 +34,7 @@ const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem({
   ...rest
 }, ref) {
   const prefix = usePrefix.usePrefix();
+  const resolvedTabIndex = tabIndex ?? 0;
   if (isCurrentPage) {
     isActive = isCurrentPage;
   }
@@ -52,7 +53,7 @@ const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem({
     "aria-current": hasCurrentClass ? true : ariaCurrent,
     className: linkClassName,
     ref: ref,
-    tabIndex: tabIndex
+    tabIndex: resolvedTabIndex
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));

package/lib/index.js

@@ -424,7 +424,7 @@ exports.SelectableTile = Tile.SelectableTile;
 exports.Tile = Tile.Tile;
 exports.TileAboveTheFoldContent = Tile.TileAboveTheFoldContent;
 exports.TileBelowTheFoldContent = Tile.TileBelowTheFoldContent;
-exports.TileGroup = TileGroup["default"];
+exports.TileGroup = TileGroup.TileGroup;
 exports.TimePicker = TimePicker["default"];
 exports.TimePickerSelect = TimePickerSelect["default"];
 exports.Toggle = Toggle.Toggle;

package/lib/internal/useOverflowItems.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ReactNode, RefObject } from 'react';
+type Item = {
+    id: string;
+};
+/**
+ * Manages overflow items in a container by automatically hiding items that don't fit.
+ * @param items - Array of items to manage for overflow, each must have an `id` property.
+ * @param containerRef - React ref to the container element that holds the items.
+ * @param offsetRef - Optional ref to an offset element (like a "more" button) whose width is reserved when calculating available space.
+ * @param maxItems - Optional maximum number of visible items. If undefined, only container space constrains visibility.
+ * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
+ * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
+ */
+declare const useOverflowItems: <T extends Item>(items: T[] | ReactNode, containerRef: RefObject<HTMLDivElement>, offsetRef?: RefObject<HTMLDivElement>, maxItems?: number, onChange?: (hiddenItems: T[]) => void) => {
+    visibleItems: T[];
+    hiddenItems: T[];
+    itemRefHandler: () => void;
+} | {
+    visibleItems: T[];
+    itemRefHandler: (id: string, node: HTMLDivElement | null) => () => void;
+    hiddenItems: T[];
+};
+export default useOverflowItems;

package/lib/internal/useOverflowItems.js

@@ -0,0 +1,126 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useResizeObserver = require('./useResizeObserver.js');
+var usePreviousValue = require('./usePreviousValue.js');
+
+/**
+ * Manages overflow items in a container by automatically hiding items that don't fit.
+ * @param items - Array of items to manage for overflow, each must have an `id` property.
+ * @param containerRef - React ref to the container element that holds the items.
+ * @param offsetRef - Optional ref to an offset element (like a "more" button) whose width is reserved when calculating available space.
+ * @param maxItems - Optional maximum number of visible items. If undefined, only container space constrains visibility.
+ * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
+ * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
+ */
+
+const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) => {
+  const itemsRef = React.useRef(null);
+  const [maxWidth, setMaxWidth] = React.useState(0);
+  if (!items || !Array.isArray(items)) {
+    return {
+      visibleItems: [],
+      hiddenItems: [],
+      itemRefHandler: () => {}
+    };
+  }
+  const handleResize = () => {
+    if (containerRef.current) {
+      const offset = offsetRef?.current?.offsetWidth || 0;
+      const newMax = containerRef.current.offsetWidth - offset;
+      setMaxWidth(newMax);
+    }
+  };
+  useResizeObserver.useResizeObserver({
+    ref: containerRef,
+    onResize: handleResize
+  });
+  const getMap = () => {
+    if (!itemsRef.current) {
+      itemsRef.current = new Map();
+    }
+    return itemsRef.current;
+  };
+  const itemRefHandler = (id, node) => {
+    const map = getMap();
+    if (node) {
+      const style = getComputedStyle?.(node);
+      const totalWidth = node.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
+      map.set(id, totalWidth);
+    }
+    return () => {
+      map.delete(id);
+    };
+  };
+  const getVisibleItems = () => {
+    if (!items || Array.isArray(items) === false) {
+      return [];
+    }
+    if (!containerRef) {
+      return items;
+    }
+    const map = getMap();
+    let maxReached = false;
+    let accumulatedWidth = 0;
+    const visibleItems = items.slice(0, maxItems).reduce((prev, cur) => {
+      if (maxReached) {
+        return prev;
+      }
+      const itemWidth = map.get(cur.id) || 0;
+      const willFit = accumulatedWidth + itemWidth <= maxWidth;
+      if (willFit) {
+        accumulatedWidth += itemWidth;
+        prev.push(cur);
+      } else {
+        maxReached = true;
+      }
+      return prev;
+    }, []);
+    return visibleItems;
+  };
+
+  // Memoize visible items calculation to avoid recalculating on every render
+  const visibleItems = React.useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return getVisibleItems();
+  }, [items, maxWidth, maxItems]);
+
+  // Memoize hidden items calculation
+  const hiddenItems = React.useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return items.slice(visibleItems.length);
+  }, [items, visibleItems]);
+
+  // Use previous value to compare and only call onChange when needed
+  const previousHiddenItems = usePreviousValue.usePreviousValue(hiddenItems);
+
+  // Only call onChange if hidden items actually changed
+  React.useEffect(() => {
+    if (previousHiddenItems && onChange) {
+      const hasChanged = hiddenItems.length !== previousHiddenItems.length || hiddenItems.some((item, index) => item !== previousHiddenItems[index]);
+      if (hasChanged) {
+        onChange(hiddenItems);
+      }
+    }
+  }, [hiddenItems, previousHiddenItems, onChange]);
+  return {
+    visibleItems,
+    itemRefHandler,
+    hiddenItems
+  };
+};
+
+exports["default"] = useOverflowItems;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.84.0-rc.0",
+  "version": "1.84.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,11 +52,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "^0.27.0-rc.0",
-    "@carbon/icons-react": "^11.61.0-rc.0",
-    "@carbon/layout": "^11.35.0-rc.0",
-    "@carbon/styles": "^1.83.0-rc.0",
-    "@carbon/utilities": "^0.7.0-rc.0",
+    "@carbon/feature-flags": "^0.27.0",
+    "@carbon/icons-react": "^11.61.0",
+    "@carbon/layout": "^11.35.0",
+    "@carbon/styles": "^1.83.0",
+    "@carbon/utilities": "^0.7.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -80,7 +80,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.36.0",
-    "@carbon/themes": "^11.54.0-rc.0",
+    "@carbon/themes": "^11.54.0",
     "@figma/code-connect": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -103,7 +103,7 @@
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-carbon": "^0.7.0-rc.0",
+    "babel-preset-carbon": "^0.7.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
     "clipboardy": "^2.1.0",
@@ -148,5 +148,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "fcae2645f1b5a1a01b5629926df471ec1945d1e6"
+  "gitHead": "f6debacbfe06fa5c31f70809e15762dc30096d70"
 }

package/telemetry.yml

@@ -474,6 +474,8 @@ collect:
         # PageHeaderContentPageActions
         - actions
         - menuButtonLabel
+        # PageHeaderTabBar
+        - tags
         # PageSelector
         - currentPage
         - totalPages