@carbon/react 1.84.0-rc.0 → 1.84.0

package/es/components/ComposedModal/ComposedModal.js

@@ -176,7 +176,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     target: oldActiveNode,
     relatedTarget: currentActiveNode
   }) {
-    if (open && currentActiveNode && oldActiveNode && innerModal.current) {
+    if (!enableDialogElement && !focusTrapWithoutSentinels && open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode
       } = innerModal;
@@ -195,6 +195,23 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
         selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean)
       });
     }
+
+    // Adjust scroll if needed so that element with focus is not obscured by gradient
+    const modalContent = document.querySelector(`.${prefix}--modal-content`);
+    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
+      return;
+    }
+    const lastContent = modalContent.children[modalContent.children.length - 1];
+    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
+    for (let elem of modalContent.children) {
+      if (elem.contains(currentActiveNode)) {
+        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
+        if (spaceBelow < gradientSpacing) {
+          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
+        }
+        break;
+      }
+    }
   }
   function closeModal(evt) {
     if (!onClose || onClose(evt) !== false) {
@@ -309,7 +326,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onBlur: handleBlur,
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,

package/es/components/Modal/Modal.js

@@ -129,7 +129,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     target: oldActiveNode,
     relatedTarget: currentActiveNode
   }) {
-    if (open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
+    if (!enableDialogElement && open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
       const {
         current: bodyNode
       } = innerModal;
@@ -148,6 +148,23 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
         selectorsFloatingMenus
       });
     }
+
+    // Adjust scroll if needed so that element with focus is not obscured by gradient
+    const modalContent = document.querySelector(`.${prefix}--modal-content`);
+    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
+      return;
+    }
+    const lastContent = modalContent.children[modalContent.children.length - 1];
+    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
+    for (let elem of modalContent.children) {
+      if (elem.contains(currentActiveNode)) {
+        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
+        if (spaceBelow < gradientSpacing) {
+          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
+        }
+        break;
+      }
+    }
   }
   const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   const modalClasses = cx(`${prefix}--modal`, {
@@ -404,7 +421,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     level: 0,
     onKeyDown: handleKeyDown,
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: handleBlur,
     className: modalClasses,
     role: "presentation",
     ref: ref

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -248,6 +248,27 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       onMenuChange?.(isOpen);
     }
   }, [isOpen, onMenuChange, open]);
+  useEffect(() => {
+    const handleClickOutside = event => {
+      const target = event.target;
+      const wrapper = document.getElementById(id)?.closest(`.${prefix}--multi-select__wrapper`);
+
+      // If click is outside our component and menu is open or input is focused
+      if (wrapper && !wrapper.contains(target)) {
+        if (isOpen || inputFocused) {
+          setIsOpen(false);
+          setInputFocused(false);
+          setInputValue('');
+        }
+      }
+    };
+    if (inputFocused || isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, inputFocused]);
   const {
     getToggleButtonProps,
     getLabelProps,

package/es/components/OverflowMenu/OverflowMenu.js

@@ -143,14 +143,14 @@ const OverflowMenu = /*#__PURE__*/forwardRef(({
       setHasMountedTrigger(true);
     }
   }, []);
-
-  // Call `onClose` when menu closes.
   useEffect(() => {
-    if (!open && prevOpenState.current) {
+    if (open && !prevOpenState.current) {
+      onOpen();
+    } else if (!open && prevOpenState.current) {
       onClose();
     }
     prevOpenState.current = open;
-  }, [open, onClose]);
+  }, [open, onClose, onOpen]);
   useOutsideClick(wrapperRef, ({
     target
   }) => {
@@ -259,7 +259,6 @@ const OverflowMenu = /*#__PURE__*/forwardRef(({
         }
       }
     }, !hasFocusin);
-    onOpen();
   };
   const getTarget = () => {
     const triggerEl = triggerRef.current;

package/es/components/PageHeader/PageHeader.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Tabs as BaseTabs } from '../Tabs/Tabs';
+import { TYPES } from '../Tag/Tag';
 /**
  * ----------
  * PageHeader
@@ -199,16 +199,18 @@ declare const PageHeaderHeroImage: {
  * PageHeaderTabBar
  * ----------------
  */
+interface TagItem {
+    type: keyof typeof TYPES;
+    text: string;
+    size?: 'sm' | 'md' | 'lg';
+    id: string;
+}
 interface PageHeaderTabBarProps {
     children?: React.ReactNode;
     className?: string;
+    tags?: TagItem[];
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-interface PageHeaderTabsProps extends React.ComponentProps<typeof BaseTabs> {
-    children?: React.ReactNode;
-    className?: string;
-}
-declare const PageHeaderTabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * -------
  * Exports
@@ -272,6 +274,5 @@ declare const HeroImage: {
     };
 };
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-declare const Tabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, Tabs, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderTabsProps, };
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,7 +20,14 @@ import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 import '../Tooltip/Tooltip.js';
 import AspectRatio from '../AspectRatio/AspectRatio.js';
 import { createOverflowHandler } from '@carbon/utilities';
-import { Tabs as Tabs$1 } from '../Tabs/Tabs.js';
+import Tag from '../Tag/Tag.js';
+import '../Tag/DismissibleTag.js';
+import OperationalTag from '../Tag/OperationalTag.js';
+import '../Tag/SelectableTag.js';
+import '../Tag/Tag.Skeleton.js';
+import useOverflowItems from '../../internal/useOverflowItems.js';
+import { Popover, PopoverContent } from '../Popover/index.js';
+import { useId } from '../../internal/useId.js';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -355,46 +362,101 @@ PageHeaderHeroImage.propTypes = {
 const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar({
   className,
   children,
+  tags = [],
   ...other
 }, ref) {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__tab-bar`]: true
   }, className);
+  // Early return if no tags are provided
+  if (!tags.length) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames,
+      ref: ref
+    }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+      lg: 16,
+      md: 8,
+      sm: 4
+    }, children)));
+  }
+  const [openPopover, setOpenPopover] = useState(false);
+  const tagSize = tags[0]?.size || 'md';
+  const instanceId = useId('PageHeaderTabBar');
+  const tagsWithIds = useMemo(() => {
+    return tags.map((tag, index) => ({
+      ...tag,
+      id: tag.id || `tag-${index}-${instanceId}`
+    }));
+  }, [tags]);
+  const tagsContainerRef = useRef(null);
+  const offsetRef = useRef(null);
+  // To close popover when window resizes
+  useEffect(() => {
+    const handleResize = () => {
+      // Close the popover when window resizes to prevent unwanted opens
+      setOpenPopover(false);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // overflow items hook
+  const {
+    visibleItems = [],
+    hiddenItems = [],
+    itemRefHandler = () => {}
+  } = useOverflowItems(tagsWithIds, tagsContainerRef, offsetRef) || {
+    visibleItems: [],
+    hiddenItems: [],
+    itemRefHandler: () => {}
+  };
+  const handleOverflowClick = useCallback(event => {
+    event.stopPropagation();
+    setOpenPopover(prev => !prev);
+  }, []);
+
+  // Function to render tags
+  const renderTags = () => /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tags`,
+    ref: tagsContainerRef
+  }, visibleItems.map(tag => /*#__PURE__*/React.createElement(Tag, {
+    key: tag.id,
+    ref: node => itemRefHandler(tag.id, node),
+    type: tag.type,
+    size: tag.size,
+    className: `${prefix}--page-header__tag-item`
+  }, tag.text)), hiddenItems.length > 0 && /*#__PURE__*/React.createElement(Popover, {
+    open: openPopover,
+    onRequestClose: () => setOpenPopover(false)
+  }, /*#__PURE__*/React.createElement(OperationalTag, {
+    onClick: handleOverflowClick,
+    "aria-expanded": openPopover,
+    text: `+${hiddenItems.length}`,
+    size: tagSize
+  }), /*#__PURE__*/React.createElement(PopoverContent, {
+    className: "tag-popover-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tags-popover-list`
+  }, hiddenItems.map(tag => /*#__PURE__*/React.createElement(Tag, {
+    key: tag.id,
+    type: tag.type,
+    size: tag.size
+  }, tag.text))))));
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), children);
-});
-PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTabs = /*#__PURE__*/React.forwardRef(function PageHeaderTabs({
-  className,
-  children,
-  ...other
-}, ref) {
-  const prefix = usePrefix();
-  const childrenArray = React.Children.toArray(children);
-  let tabListElement = null;
-  const otherChildren = [];
-
-  // extract the TabList component so we can wrap a needed div around for
-  // layout purposes
-  childrenArray.forEach(child => {
-    if (child?.type?.displayName === 'TabList' || child?.type?.name === 'TabList') {
-      tabListElement = child;
-    } else {
-      otherChildren.push(child);
-    }
-  });
-  return /*#__PURE__*/React.createElement(Tabs$1, other, tabListElement && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--page-header__tablist-wrapper`
-  }, /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+  }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
     lg: 16,
     md: 8,
     sm: 4
-  }, tabListElement))), otherChildren);
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tab-bar--tablist`
+  }, children, tags.length > 0 && renderTags()))));
 });
-PageHeaderTabs.displayName = 'PageHeaderTabs';
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
 
 /**
  * -------
@@ -415,7 +477,5 @@ const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;
 TabBar.displayName = 'PageHeaderTabBar';
-const Tabs = PageHeaderTabs;
-Tabs.displayName = 'PageHeader.Tabs';
 
-export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs };
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar };

package/es/components/PageHeader/index.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, Tabs, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderTabsProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';

package/es/components/PageHeader/index.js

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs } from './PageHeader.js';
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar } from './PageHeader.js';

package/es/components/Search/Search.js

@@ -134,7 +134,6 @@ const Search = /*#__PURE__*/React.forwardRef(function Search({
     "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React.createElement("div", {
-    "aria-label": onExpand ? 'button' : undefined,
     "aria-labelledby": onExpand ? searchId : undefined,
     role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,

package/es/components/Slider/Slider.js

@@ -758,6 +758,9 @@ class Slider extends PureComponent {
           valueUpper,
           leftUpper
         });
+        if (this.filledTrackRef.current) {
+          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(${100 - this.state.leftUpper}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})` : `translate(${this.state.left}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})`;
+        }
       } else {
         const {
           value,
@@ -771,6 +774,9 @@ class Slider extends PureComponent {
           value,
           left
         });
+        if (this.filledTrackRef.current) {
+          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(100%, -50%) scaleX(-${this.state.left / 100})` : `translate(0%, -50%) scaleX(${this.state.left / 100})`;
+        }
       }
     }
   }

package/es/components/TextArea/TextArea.js

@@ -65,7 +65,7 @@ const TextArea = frFn((props, forwardRef) => {
     if (counterMode === 'character') {
       return strValue.length;
     } else {
-      return strValue.match(/\w+/g)?.length || 0;
+      return strValue.match(/\p{L}+/gu)?.length || 0;
     }
   }
   const [textCount, setTextCount] = useState(getInitialTextCount());
@@ -97,8 +97,8 @@ const TextArea = frFn((props, forwardRef) => {
     onPaste: evt => {
       if (!disabled) {
         if (counterMode === 'word' && enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
-          const existingWords = textareaRef.current.value.match(/\w+/g) || [];
-          const pastedWords = evt.clipboardData.getData('Text').match(/\w+/g) || [];
+          const existingWords = textareaRef.current.value.match(/\p{L}+/gu) || [];
+          const pastedWords = evt.clipboardData.getData('Text').match(/\p{L}+/gu) || [];
           const totalWords = existingWords.length + pastedWords.length;
           if (totalWords > maxCount) {
             evt.preventDefault();
@@ -127,7 +127,7 @@ const TextArea = frFn((props, forwardRef) => {
             return;
           }
           if (enableCounter && typeof maxCount !== 'undefined' && textareaRef.current !== null) {
-            const matchedWords = evt.target?.value?.match(/\w+/g);
+            const matchedWords = evt.target?.value?.match(/\p{L}+/gu);
             if (matchedWords && matchedWords.length <= maxCount) {
               textareaRef.current.removeAttribute('maxLength');
               setTimeout(() => {

package/es/components/TileGroup/TileGroup.d.ts

@@ -45,8 +45,9 @@ export interface TileGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>
      */
     required?: boolean;
 }
-declare const TileGroup: {
-    (props: any): import("react/jsx-runtime").JSX.Element;
+export declare const TileGroup: {
+    ({ children, className, defaultSelected, disabled, legend, name, onChange, valueSelected, required, }: TileGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
     propTypes: {
         /**
          * Provide a collection of <RadioTile> components to render in the group
@@ -86,6 +87,5 @@ declare const TileGroup: {
          */
         valueSelected: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
     };
-    displayName: string;
 };
-export default TileGroup;
+export {};

package/es/components/TileGroup/TileGroup.js

@@ -7,40 +7,42 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import RadioTile from '../RadioTile/RadioTile.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-const TileGroup = props => {
-  const {
-    children,
-    className,
-    defaultSelected,
-    disabled,
-    legend,
-    name,
-    onChange = noopFn,
-    valueSelected,
-    required
-  } = props;
+const TileGroup = ({
+  children,
+  className,
+  defaultSelected,
+  disabled,
+  legend,
+  name,
+  onChange = noopFn,
+  valueSelected,
+  required
+}) => {
   const prefix = usePrefix();
   const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
-  const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
+  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 Children.map(elements, child => {
+        if (! /*#__PURE__*/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.Children.map(children, child => {
-        // If RadioTile found, return it with necessary props
-        if (child?.type === RadioTile) {
+        // If a `RadioTile` is found, return it with necessary props,
+        if (/*#__PURE__*/isValidElement(child) && child.type === RadioTile) {
           const {
             value,
             ...otherProps
@@ -53,38 +55,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.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 = Children.count(children) > 0;
+        if (hasChildren) {
+          return /*#__PURE__*/cloneElement(child, undefined, traverseAndModifyChildren(children));
+        }
+
+        // If the child is neither a RadioTile nor has children, return it as is
+        return child;
       });
     };
-    return /*#__PURE__*/React.createElement(React.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.createElement("legend", {
-        className: `${prefix}--label`
-      }, legend);
-    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, traverseAndModifyChildren(elements));
   };
   return /*#__PURE__*/React.createElement("fieldset", {
     className: className ?? `${prefix}--tile-group`,
     disabled: disabled
-  }, renderLegend(legend), /*#__PURE__*/React.createElement("div", null, getRadioTilesWithWrappers(children)));
+  }, legend && /*#__PURE__*/React.createElement("legend", {
+    className: `${prefix}--label`
+  }, legend), /*#__PURE__*/React.createElement("div", null, getRadioTilesWithWrappers(children)));
 };
+TileGroup.displayName = 'TileGroup';
 TileGroup.propTypes = {
   /**
    * Provide a collection of <RadioTile> components to render in the group
@@ -124,6 +117,5 @@ TileGroup.propTypes = {
    */
   valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-TileGroup.displayName = 'TileGroup';
 
-export { TileGroup as default };
+export { TileGroup };

package/es/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/es/components/UIShell/HeaderMenuItem.js

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

package/es/index.js

@@ -148,7 +148,7 @@ export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skel
 export { default as TextInput } from './components/TextInput/TextInput.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
-export { default as TileGroup } from './components/TileGroup/TileGroup.js';
+export { TileGroup } from './components/TileGroup/TileGroup.js';
 export { default as TimePicker } from './components/TimePicker/TimePicker.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/TimePickerSelect.js';
 export { Toggle } from './components/Toggle/Toggle.js';

package/es/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;