@carbon/react 1.102.0-rc.0 → 1.103.0-rc.0

package/es/index.js

@@ -9,24 +9,24 @@
 import './feature-flags.js';
 export { default as Accordion } from './components/Accordion/Accordion.js';
 export { default as AccordionItem } from './components/Accordion/AccordionItem.js';
-export { default as AccordionSkeleton } from './components/Accordion/Accordion.Skeleton.js';
+export { AccordionSkeleton } from './components/Accordion/Accordion.Skeleton.js';
 export { default as AspectRatio } from './components/AspectRatio/AspectRatio.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.js';
-export { default as BreadcrumbSkeleton } from './components/Breadcrumb/Breadcrumb.Skeleton.js';
+export { BreadcrumbSkeleton } from './components/Breadcrumb/Breadcrumb.Skeleton.js';
 export { default as Button, ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions } from './components/Button/Button.js';
-export { default as ButtonSkeleton } from './components/Button/Button.Skeleton.js';
+export { ButtonSkeleton } from './components/Button/Button.Skeleton.js';
 export { default as ButtonSet } from './components/ButtonSet/ButtonSet.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
-export { default as CheckboxSkeleton } from './components/Checkbox/Checkbox.Skeleton.js';
+export { CheckboxSkeleton } from './components/Checkbox/Checkbox.Skeleton.js';
 export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';
 export { ClassPrefix } from './components/ClassPrefix/index.js';
 export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
-export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
+export { CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
 export { default as ComboBox } from './components/ComboBox/ComboBox.js';
 export { ComboButton } from './components/ComboButton/index.js';
 export { default as ComposedModal, ModalBody } from './components/ComposedModal/ComposedModal.js';
-export { ComposedModalPresence } from './components/ComposedModal/ComposedModalPresence.js';
+export { ComposedModalPresence, withComposedModalPresence } from './components/ComposedModal/ComposedModalPresence.js';
 export { ModalHeader } from './components/ComposedModal/ModalHeader.js';
 export { ModalFooter } from './components/ComposedModal/ModalFooter.js';
 import './components/ContainedList/index.js';
@@ -60,17 +60,17 @@ export { default as TableToolbarSearch } from './components/DataTable/TableToolb
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as DataTableSkeleton } from './components/DataTableSkeleton/DataTableSkeleton.js';
 export { default as DatePicker } from './components/DatePicker/DatePicker.js';
-export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
+export { DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
 export { default as DatePickerInput } from './components/DatePickerInput/DatePickerInput.js';
 export { default as Dropdown } from './components/Dropdown/Dropdown.js';
-export { default as DropdownSkeleton } from './components/Dropdown/Dropdown.Skeleton.js';
+export { DropdownSkeleton } from './components/Dropdown/Dropdown.Skeleton.js';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary.js';
 export { ErrorBoundaryContext } from './components/ErrorBoundary/ErrorBoundaryContext.js';
 export { default as ExpandableSearch } from './components/ExpandableSearch/ExpandableSearch.js';
 export { FeatureFlags, FeatureFlags as preview_FeatureFlags, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useFeatureFlag, useFeatureFlags } from './components/FeatureFlags/index.js';
 export { default as FileUploader } from './components/FileUploader/FileUploader.js';
 export { default as Filename } from './components/FileUploader/Filename.js';
-export { default as FileUploaderSkeleton } from './components/FileUploader/FileUploader.Skeleton.js';
+export { FileUploaderSkeleton } from './components/FileUploader/FileUploader.Skeleton.js';
 export { default as FileUploaderButton } from './components/FileUploader/FileUploaderButton.js';
 export { default as FileUploaderDropContainer } from './components/FileUploader/FileUploaderDropContainer.js';
 export { default as FileUploaderItem } from './components/FileUploader/FileUploaderItem.js';
@@ -86,7 +86,7 @@ export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
 export { ColumnHang } from './components/Grid/ColumnHang.js';
 export { GridSettings } from './components/Grid/GridContext.js';
-export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
+export { IconSkeleton } from './components/Icon/Icon.Skeleton.js';
 export { IdPrefix } from './components/IdPrefix/index.js';
 export { default as InlineLoading } from './components/InlineLoading/InlineLoading.js';
 export { default as Link } from './components/Link/Link.js';
@@ -96,7 +96,7 @@ export { Menu } from './components/Menu/Menu.js';
 export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './components/Menu/MenuItem.js';
 export { MenuButton } from './components/MenuButton/index.js';
 export { default as Modal } from './components/Modal/Modal.js';
-export { ModalPresence } from './components/Modal/ModalPresence.js';
+export { ModalPresence, withModalPresence } from './components/Modal/ModalPresence.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
 export { FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { MultiSelect } from './components/MultiSelect/MultiSelect.js';
@@ -104,30 +104,30 @@ export { ActionableNotification, Callout, InlineNotification, NotificationAction
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
 export { NumberInput, validateNumberSeparators } from './components/NumberInput/NumberInput.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
-export { default as OverflowMenu } from './components/OverflowMenu/index.js';
+export { OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/OverflowMenuItem.js';
-import * as index from './components/PageHeader/index.js';
-export { index as preview__PageHeader };
-export { index as unstable__PageHeader };
-import * as index$1 from './components/Dialog/index.js';
-export { index$1 as preview__Dialog };
+import * as index$1 from './components/PageHeader/index.js';
+export { index$1 as preview__PageHeader };
+export { index$1 as unstable__PageHeader };
+import * as index from './components/Dialog/index.js';
+export { index as preview__Dialog };
 export { default as Pagination } from './components/Pagination/Pagination.js';
-export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
+export { PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
-export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
+export { ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
 export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
-export { default as RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
+export { RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
 export { default as RadioButtonGroup } from './components/RadioButtonGroup/RadioButtonGroup.js';
 export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as Search } from './components/Search/Search.js';
-export { default as SearchSkeleton } from './components/Search/Search.Skeleton.js';
+export { SearchSkeleton } from './components/Search/Search.Skeleton.js';
 export { default as SecondaryButton } from './components/SecondaryButton/SecondaryButton.js';
 export { default as Select } from './components/Select/Select.js';
-export { default as SelectSkeleton } from './components/Select/Select.Skeleton.js';
+export { SelectSkeleton } from './components/Select/Select.Skeleton.js';
 export { default as SelectItem } from './components/SelectItem/SelectItem.js';
 export { default as SelectItemGroup } from './components/SelectItemGroup/SelectItemGroup.js';
 export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.js';
@@ -144,22 +144,22 @@ export { default as Switch } from './components/Switch/Switch.js';
 export { default as IconSwitch } from './components/Switch/IconSwitch.js';
 export { IconTab, Tab, TabList, TabListVertical, TabPanel, TabPanels, Tabs, TabsVertical } from './components/Tabs/Tabs.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
-export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
+export { TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as Tag } from './components/Tag/Tag.js';
 export { default as DismissibleTag } from './components/Tag/DismissibleTag.js';
 export { default as OperationalTag } from './components/Tag/OperationalTag.js';
 export { default as SelectableTag } from './components/Tag/SelectableTag.js';
-export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
+export { TagSkeleton } from './components/Tag/Tag.Skeleton.js';
 export { default as TextArea } from './components/TextArea/TextArea.js';
-export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
+export { TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
-export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
+export { TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.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';
-export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
+export { ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
 export { default as TreeNode } from './components/TreeView/TreeNode.js';
@@ -190,7 +190,7 @@ export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
 export { default as SideNavItems } from './components/UIShell/SideNavItems.js';
 export { default as SideNavLink } from './components/UIShell/SideNavLink.js';
 export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
-export { default as SideNavMenu } from './components/UIShell/SideNavMenu.js';
+export { SideNavMenu } from './components/UIShell/SideNavMenu.js';
 export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem.js';
 export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
@@ -242,7 +242,7 @@ import 'react';
 export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from './components/Theme/index.js';
 export { PrefixContext, usePrefix } from './internal/usePrefix.js';
 export { useIdPrefix } from './internal/useIdPrefix.js';
+export { default as ContainedList } from './components/ContainedList/ContainedList.js';
+export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as preview_PageSelector, default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as preview_Pagination, default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
-export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
-export { default as ContainedList } from './components/ContainedList/ContainedList.js';

package/es/internal/useNoInteractiveChildren.js

@@ -8,38 +8,31 @@
 import { useEffect } from 'react';
 
 const useNoInteractiveChildren = (ref, message = 'component should have no interactive child nodes') => {
-  if (process.env.NODE_ENV !== 'production') {
-    // This hook is intentionally called conditionally because it is
-    // stripped from production builds. In development it runs once
-    // to enforce accessibility constraints.
-    //
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      const node = ref.current ? getInteractiveContent(ref.current) : false;
-      if (node) {
-        const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
-        // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
-        console.error(errorMessage);
-        throw new Error(errorMessage);
-      }
-      // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-    }, []);
-  }
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    const {
+      current
+    } = ref;
+    const node = current ? getInteractiveContent(current) : null;
+    if (node) {
+      const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
+      // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452
+      console.error(errorMessage);
+      throw new Error(errorMessage);
+    }
+  }, [message, ref]);
 };
 const useInteractiveChildrenNeedDescription = (ref, message = `interactive child node(s) should have an \`aria-describedby\` property`) => {
-  if (process.env.NODE_ENV !== 'production') {
-    // This hook is intentionally called conditionally because it is
-    // stripped from production builds. In development it runs once
-    // to enforce accessibility constraints.
-    //
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      const node = ref.current ? getInteractiveContent(ref.current) : false;
-      if (node && !node.hasAttribute('aria-describedby')) {
-        throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
-      }
-    });
-  }
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    const {
+      current
+    } = ref;
+    const node = current ? getInteractiveContent(current) : null;
+    if (node && !node.hasAttribute('aria-describedby')) {
+      throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
+    }
+  }, [message, ref]);
 };
 
 /**
@@ -50,6 +43,7 @@ const useInteractiveChildrenNeedDescription = (ref, message = `interactive child
  * @returns The interactive node, or `null` if none is found.
  */
 const getInteractiveContent = node => {
+  // TODO: This check shouldn't be necessary. Investigate deleting it.
   if (!node || !node.childNodes) {
     return null;
   }
@@ -75,6 +69,7 @@ const getInteractiveContent = node => {
  * @returns The node with a `role`, or `null` if none is found.
  */
 const getRoleContent = node => {
+  // TODO: This check shouldn't be necessary. Investigate deleting it.
   if (!node || !node.childNodes) {
     return null;
   }

package/es/internal/useOverflowItems.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2025, 2025
+ * Copyright IBM Corp. 2025, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -18,10 +18,6 @@ type Item = {
  * @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[];

package/es/internal/useOverflowItems.js

@@ -18,17 +18,10 @@ import { usePreviousValue } from './usePreviousValue.js';
  * @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 = useRef(null);
   const [maxWidth, setMaxWidth] = useState(0);
-  if (!items || !Array.isArray(items)) {
-    return {
-      visibleItems: [],
-      hiddenItems: [],
-      itemRefHandler: () => {}
-    };
-  }
+  const overflowItems = useMemo(() => Array.isArray(items) ? items : [], [items]);
   const handleResize = () => {
     if (containerRef.current) {
       const offset = offsetRef?.current?.offsetWidth || 0;
@@ -36,7 +29,6 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
       setMaxWidth(newMax);
     }
   };
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   useResizeObserver({
     ref: containerRef,
     onResize: handleResize
@@ -59,16 +51,13 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
     };
   };
   const getVisibleItems = () => {
-    if (!items || Array.isArray(items) === false) {
-      return [];
-    }
     if (!containerRef) {
-      return items;
+      return overflowItems;
     }
     const map = getMap();
     let maxReached = false;
     let accumulatedWidth = 0;
-    const visibleItems = items.slice(0, maxItems).reduce((prev, cur) => {
+    const visibleItems = overflowItems.slice(0, maxItems).reduce((prev, cur) => {
       if (maxReached) {
         return prev;
       }
@@ -86,30 +75,20 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
   };
 
   // Memoize visible items calculation to avoid recalculating on every render
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const visibleItems = useMemo(() => {
-    if (!Array.isArray(items)) {
-      return [];
-    }
     return getVisibleItems();
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [items, maxWidth, maxItems]);
+  }, [overflowItems, maxWidth, maxItems]);
 
   // Memoize hidden items calculation
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const hiddenItems = useMemo(() => {
-    if (!Array.isArray(items)) {
-      return [];
-    }
-    return items.slice(visibleItems.length);
-  }, [items, visibleItems]);
+    return overflowItems.slice(visibleItems.length);
+  }, [overflowItems, visibleItems]);
 
   // Use previous value to compare and only call onChange when needed
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const previousHiddenItems = usePreviousValue(hiddenItems);
 
   // Only call onChange if hidden items actually changed
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   useEffect(() => {
   }, [hiddenItems, previousHiddenItems, onChange]);
   return {

package/es/internal/usePresence.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2025, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/internal/usePresence.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useState, useCallback } from 'react';
+import { useState } from 'react';
 import { usePrefix } from './usePrefix.js';
 import useIsomorphicEffect from './useIsomorphicEffect.js';
 
@@ -13,25 +13,22 @@ const usePresence = (ref, isOpen) => {
   const prefix = usePrefix();
   const [exitState, setExitState] = useState(isOpen ? 'idle' : 'finished');
   const isExiting = exitState === 'active';
+  useIsomorphicEffect(() => {
+    setExitState(prev => {
+      // element is exiting
+      if (!isOpen && prev === 'idle') return 'active';
 
-  // element is exiting
-  if (!isOpen && exitState === 'idle') {
-    setExitState('active');
-  }
-
-  // element exit was interrupted
-  if (isOpen && exitState !== 'idle') {
-    setExitState('idle');
-  }
-  const handleAnimationEnd = useCallback(() => {
-    setExitState('finished');
-  }, []);
+      // element exit was interrupted
+      if (isOpen && prev !== 'idle') return 'idle';
+      return prev;
+    });
+  }, [isOpen]);
   useIsomorphicEffect(() => {
     if (!ref.current || !isExiting) return;
 
     // resolve for JSDOM
     if (!('getAnimations' in ref.current)) {
-      handleAnimationEnd();
+      setExitState('finished');
       return;
     }
 
@@ -40,18 +37,18 @@ const usePresence = (ref, isOpen) => {
       subtree: true
     }).filter(animation => animation instanceof CSSAnimation && animation.animationName.startsWith(`${prefix}--presence`));
     if (!animations.length) {
-      handleAnimationEnd();
+      setExitState('finished');
       return;
     }
     let cancelled = false;
     Promise.all(animations.map(animation => animation.finished)).finally(() => {
       if (cancelled) return;
-      handleAnimationEnd();
+      setExitState('finished');
     });
     return () => {
       cancelled = true;
     };
-  }, [ref, isExiting, prefix, handleAnimationEnd]);
+  }, [ref, isExiting, prefix]);
   return {
     /**
      * Indicates whether the ref object is supposed to be mounted

package/lib/components/Button/Button.Skeleton.js

@@ -31,7 +31,8 @@ const ButtonSkeleton = ({
     [`${prefix}--btn--md`]: size === 'md',
     [`${prefix}--btn--lg`]: size === 'lg',
     [`${prefix}--btn--xl`]: size === 'xl',
-    [`${prefix}--btn--2xl`]: size === '2xl'
+    [`${prefix}--btn--2xl`]: size === '2xl',
+    [`${prefix}--layout--size-${size}`]: size
   });
   const commonProps = {
     className: buttonClasses,

package/lib/components/Button/Button.d.ts

@@ -17,7 +17,7 @@ export declare const ButtonTooltipPositions: string[];
 export type ButtonTooltipPosition = (typeof ButtonTooltipPositions)[number];
 export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
-     * Specify the message read by screen readers for the danger button variant
+     * Specify the message read by screen readers for the danger button variants
      */
     dangerDescription?: string;
     /**
@@ -38,7 +38,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     isExpressive?: boolean;
     /**
-     * Specify whether the Button is currently selected. Only applies to the Ghost variant.
+     * Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.
      */
     isSelected?: boolean;
     /**
@@ -63,7 +63,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     /**
      * Specify the alignment of the tooltip to the icon-only button.
-     * Can be one of: start, center, or end.
+     * Can be one of: `start`, `center`, or `end`.
      */
     tooltipAlignment?: ButtonTooltipAlignment;
     /**
@@ -77,7 +77,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     tooltipHighContrast?: boolean;
     /**
      * Specify the direction of the tooltip for icon-only buttons.
-     * Can be either top, right, bottom, or left.
+     * Can be either `top`, `right`, `bottom`, or `left`.
      */
     tooltipPosition?: ButtonTooltipPosition;
 }

package/lib/components/Button/Button.js

@@ -131,7 +131,7 @@ Button.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify the message read by screen readers for the danger button variant
+   * Specify the message read by screen readers for the danger button variants
    */
   dangerDescription: PropTypes.string,
   /**
@@ -161,7 +161,7 @@ Button.propTypes = {
    */
   isExpressive: PropTypes.bool,
   /**
-   * Specify whether the Button is currently selected. Only applies to the Ghost variant.
+   * Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.
    */
   isSelected: PropTypes.bool,
   /**
@@ -231,7 +231,7 @@ Button.propTypes = {
   target: PropTypes.string,
   /**
    * Specify the alignment of the tooltip to the icon-only button.
-   * Can be one of: start, center, or end.
+   * Can be one of: `start`, `center`, or `end`.
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
   /**
@@ -245,7 +245,7 @@ Button.propTypes = {
   tooltipHighContrast: PropTypes.bool,
   /**
    * Specify the direction of the tooltip for icon-only buttons.
-   * Can be either top, right, bottom, or left.
+   * Can be either `top`, `right`, `bottom`, or `left`.
    */
   tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   /**

package/lib/components/Button/index.js

@@ -20,4 +20,4 @@ exports.ButtonSizes = Button.ButtonSizes;
 exports.ButtonTooltipAlignments = Button.ButtonTooltipAlignments;
 exports.ButtonTooltipPositions = Button.ButtonTooltipPositions;
 exports.default = Button.default;
-exports.ButtonSkeleton = Button_Skeleton.default;
+exports.ButtonSkeleton = Button_Skeleton.ButtonSkeleton;

package/lib/components/ButtonSet/ButtonSet.js

@@ -66,7 +66,7 @@ const ButtonSet = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
     resizeObserver.observe(fluidInnerRef.current);
     return () => resizeObserver.disconnect();
-  }, [isStacked, stacked]);
+  }, [fluid, stacked]);
   React.useEffect(() => {
     const newSortedChildren = React.Children.toArray(children);
     newSortedChildren.sort((a, b) => {

package/lib/components/Checkbox/index.js

@@ -16,4 +16,4 @@ var Checkbox_Skeleton = require('./Checkbox.Skeleton.js');
 
 exports.Checkbox = Checkbox.default;
 exports.default = Checkbox.default;
-exports.CheckboxSkeleton = Checkbox_Skeleton.default;
+exports.CheckboxSkeleton = Checkbox_Skeleton.CheckboxSkeleton;

package/lib/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -65,7 +65,7 @@ const CheckboxGroup = ({
     kind: 'default'
   }) : candidate;
   const clonedChildren = React.Children.map(children, child => {
-    if (/*#__PURE__*/React.isValidElement(child) && child.type === Checkbox.default) {
+    if (utils.isComponentElement(child, Checkbox.default)) {
       const childProps = {
         ...(typeof invalid !== 'undefined' && typeof child.props.invalid === 'undefined' ? {
           invalid

package/lib/components/ComboBox/ComboBox.js

@@ -287,8 +287,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
             if (isMatchingSelection) {
               return changes;
             }
-            const nextSelectedItem = items.find(item => itemToString(item) === inputValue) ?? inputValue;
-            const isCustomSelection = typeof nextSelectedItem === 'string' && !items.some(item => isEqual(item, nextSelectedItem));
+            const nextSelectedItem = inputValue === '' ? null : items.find(item => itemToString(item) === inputValue) ?? inputValue;
+            const isCustomSelection = typeof nextSelectedItem === 'string' && nextSelectedItem !== '' && !items.some(item => isEqual(item, nextSelectedItem));
             if (!isEqual(currentSelectedItem, nextSelectedItem) && onChange) {
               onChange({
                 selectedItem: nextSelectedItem,
@@ -504,8 +504,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     onHighlightedIndexChange: ({
       highlightedIndex
     }) => {
-      // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
-      if (highlightedIndex > -1 && typeof window !== undefined) {
+      if (highlightedIndex > -1) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
         const highlightedItem = itemArray[highlightedIndex];
         if (highlightedItem) {

package/lib/components/ComposedModal/ComposedModal.js

@@ -261,9 +261,6 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
   const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
   // Generate aria-label based on Modal Header label if one is not provided (L253)
-  //
-  // TODO: Confirm whether `ModalHeader` `label` should allow `ReactNode`. If
-  // so, define how to derive a string for `aria-label`.
   let generatedAriaLabel;
   const childrenWithProps = React.Children.toArray(children).map(child => {
     if (utils.isComponentElement(child, ModalHeader.ModalHeader)) {

package/lib/components/ComposedModal/ComposedModalPresence.d.ts

@@ -4,7 +4,7 @@
  * 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 React, { type PropsWithChildren } from 'react';
+import React, { type ComponentType, type PropsWithChildren } from 'react';
 import { type PresenceContext } from '../../internal/usePresenceContext';
 import { useComposedModalState } from './useComposedModalState';
 export interface ComposedModalPresenceProps {
@@ -31,4 +31,12 @@ export declare const ComposedModalPresenceContext: React.Context<ComposedModalPr
  * Handles occurrences where only a single composed modal must consume a context.
  */
 export declare const useExclusiveComposedModalPresenceContext: (id: string) => ComposedModalPresenceContextProps | undefined;
+type WithComposedModalPresenceProps = Pick<ComposedModalPresenceProps, 'open'>;
+/**
+ * Higher-order function that wraps a component with ComposedModalPresence
+ */
+export declare const withComposedModalPresence: <TProps extends object>(Component: ComponentType<TProps>) => {
+    ({ open, ...componentProps }: TProps & WithComposedModalPresenceProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/lib/components/ComposedModal/ComposedModalPresence.js

@@ -40,7 +40,21 @@ const useExclusiveComposedModalPresenceContext = id => {
   const ctx = React.useContext(ComposedModalPresenceContext);
   return ctx?.isPresenceExclusive(id) ? ctx : undefined;
 };
+/**
+ * Higher-order function that wraps a component with ComposedModalPresence
+ */
+const withComposedModalPresence = Component => {
+  const WithComposedModalPresence = ({
+    open,
+    ...componentProps
+  }) => /*#__PURE__*/React.createElement(ComposedModalPresence, {
+    open: open
+  }, /*#__PURE__*/React.createElement(Component, componentProps));
+  WithComposedModalPresence.displayName = `withComposedModalPresence(${Component.displayName || Component.name || 'Component'})`;
+  return WithComposedModalPresence;
+};
 
 exports.ComposedModalPresence = ComposedModalPresence;
 exports.ComposedModalPresenceContext = ComposedModalPresenceContext;
 exports.useExclusiveComposedModalPresenceContext = useExclusiveComposedModalPresenceContext;
+exports.withComposedModalPresence = withComposedModalPresence;

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

@@ -6,7 +6,7 @@
  */
 import ComposedModal from './ComposedModal';
 export { default as ComposedModal, type ComposedModalProps, ModalBody, type ModalBodyProps, } from './ComposedModal';
-export { ComposedModalPresence, type ComposedModalPresenceProps, } from './ComposedModalPresence';
+export { ComposedModalPresence, withComposedModalPresence, type ComposedModalPresenceProps, } from './ComposedModalPresence';
 export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
 export { ModalFooter, type ModalFooterProps } from './ModalFooter';
 export default ComposedModal;