@carbon/react 1.101.0 → 1.102.0

package/es/components/Tag/DismissibleTag.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/es/components/Tag/DismissibleTag.js

@@ -45,8 +45,8 @@ const DismissibleTag = /*#__PURE__*/forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix();
   const tagLabelRef = useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId()}`;
+  const generatedTagId = useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useIsomorphicEffect(() => {

package/es/components/Tag/OperationalTag.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/es/components/Tag/OperationalTag.js

@@ -45,8 +45,8 @@ const OperationalTag = /*#__PURE__*/forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix();
   const tagRef = useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId()}`;
+  const generatedTagId = useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useIsomorphicEffect(() => {

package/es/components/Tag/SelectableTag.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/es/components/Tag/SelectableTag.js

@@ -37,8 +37,8 @@ const SelectableTag = /*#__PURE__*/forwardRef(({
 }, forwardRef) => {
   const prefix = usePrefix();
   const tagRef = useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId()}`;
+  const generatedTagId = useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const [selectedTag, setSelectedTag] = useControllableState({
     value: selected,
     onChange: onChange,

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

@@ -74,8 +74,8 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
     console.warn('The `onClose` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
   }
   const ref = useMergedRefs([forwardRef, tagRef]);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const tagId = id || `tag-${useId()}`;
+  const generatedTagId = useId();
+  const tagId = id ?? `tag-${generatedTagId}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];

package/es/components/TextArea/TextArea.d.ts

@@ -7,8 +7,7 @@
 import React, { type ReactNode } from 'react';
 export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
-     * Provide a custom className that is applied directly to the underlying
-     * `<textarea>` node
+     * Provide a custom className that is applied to the wrapper node
      */
     className?: string;
     /**

package/es/components/TextArea/TextArea.js

@@ -38,7 +38,7 @@ const TextArea = frFn((props, forwardRef) => {
     onKeyDown = noopFn,
     invalid = false,
     invalidText = '',
-    helperText = '',
+    helperText,
     light,
     placeholder = '',
     enableCounter = false,
@@ -239,7 +239,7 @@ const TextArea = frFn((props, forwardRef) => {
     ariaDescribedBy = warnId;
   } else {
     const ids = [];
-    if (!isFluid && helperText && helperId) ids.push(helperId);
+    if (!isFluid && hasHelper && helperId) ids.push(helperId);
     if (counterDescriptionId) ids.push(counterDescriptionId);
     ariaDescribedBy = ids.length > 0 ? ids.join(' ') : undefined;
   }
@@ -278,7 +278,7 @@ const TextArea = frFn((props, forwardRef) => {
   }, [ariaAnnouncement, prevAnnouncement, counterMode]);
   const input = /*#__PURE__*/React.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
-    "aria-readonly": Boolean(other.readOnly),
+    "aria-readonly": other.readOnly,
     className: textareaClasses,
     "aria-invalid": invalid,
     "aria-describedby": ariaDescribedBy,
@@ -324,8 +324,7 @@ const TextArea = frFn((props, forwardRef) => {
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {
   /**
-   * Provide a custom className that is applied directly to the underlying
-   * `<textarea>` node
+   * Provide a custom className that is applied to the wrapper node
    */
   className: PropTypes.string,
   /**

package/es/components/TextInput/ControlledPasswordInput.js

@@ -27,7 +27,7 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
   hideLabel,
   invalid = false,
   invalidText = '',
-  helperText = '',
+  helperText,
   light,
   type = 'password',
   togglePasswordVisibility,

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

@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import RadioTile from '../RadioTile/RadioTile.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
@@ -42,7 +43,7 @@ const TileGroup = ({
         if (! /*#__PURE__*/isValidElement(child)) return child;
 
         // If a `RadioTile` is found, return it with necessary props,
-        if (/*#__PURE__*/isValidElement(child) && child.type === RadioTile) {
+        if (isComponentElement(child, RadioTile)) {
           const {
             value,
             ...otherProps

package/es/components/TimePickerSelect/TimePickerSelect.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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.
  */
-import React from 'react';
+import React, { type SelectHTMLAttributes } from 'react';
 export type TimePickerSelectProps = {
     /**
      * Provide the contents of your TimePickerSelect
@@ -17,7 +17,7 @@ export type TimePickerSelectProps = {
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */
@@ -39,7 +39,7 @@ declare const TimePickerSelect: React.ForwardRefExoticComponent<{
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>["defaultValue"];
     /**
      * Specify whether the control is disabled
      */

package/es/components/Toggletip/index.js

@@ -134,8 +134,7 @@ function Toggletip({
     const eventType = 'PointerEvent' in window ? 'pointerdown' : 'mousedown';
     const handleOutsideClick = event => {
       const node = event.target;
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
-      if (open && node && !ref.current.contains(node)) {
+      if (open && node && !ref.current?.contains(node)) {
         setOpen(false);
       }
     };

package/es/components/TreeView/TreeNode.js

@@ -241,7 +241,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
           return node;
         }
         if (node.classList.contains(`${prefix}--tree-node-link-parent`)) {
-          return node.firstChild;
+          return node.firstElementChild;
         }
         if (node.classList.contains(`${prefix}--tree`)) {
           return null;
@@ -263,7 +263,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
          * When focus is on a leaf node or a closed parent node, move focus to
          * its parent node (unless its depth is level 1)
          */
-        const parentNode = findParentTreeNode(href ? currentNode.current?.parentElement?.parentElement : currentNode.current?.parentElement);
+        const parentNode = findParentTreeNode((href ? currentNode.current?.parentElement?.parentElement : currentNode.current?.parentElement) ?? null);
         if (parentNode instanceof HTMLElement) {
           parentNode.focus();
         }

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

@@ -8,7 +8,8 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, isValidElement } from 'react';
+import React, { useRef, useState } from 'react';
+import { isComponentElement } from '../../internal/utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -59,10 +60,12 @@ const HeaderPanel = /*#__PURE__*/React.forwardRef(({
     };
   }
   useWindowEvent('click', event => {
-    const target = event.target;
-    if (!(target instanceof HTMLElement)) return;
+    const {
+      target
+    } = event;
+    if (!(target instanceof Element)) return;
     setLastClickedElement(target);
-    const isChildASwitcher = /*#__PURE__*/isValidElement(children) && typeof children.type !== 'string' && children.type === Switcher;
+    const isChildASwitcher = isComponentElement(children, Switcher);
     if (isChildASwitcher && !target.closest(`.${prefix}--header-panel--expanded`) && !target.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
       setExpandedState(false);
       onHeaderPanelFocus();

package/es/components/UIShell/SideNav.js

@@ -20,7 +20,7 @@ import { useDelayedState } from '../../internal/useDelayedState.js';
 import { breakpoints } from '@carbon/layout';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
 
-// TO-DO: comment back in when footer is added for rails
+// TODO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
 
 const SideNavContext = /*#__PURE__*/createContext({});
@@ -35,7 +35,7 @@ const SideNav = frFn((props, ref) => {
     children,
     onToggle,
     className: customClassName,
-    // TO-DO: comment back in when footer is added for rails
+    // TODO: comment back in when footer is added for rails
     // translateById: t = (id) => translations[id],
     href,
     isFixedNav = false,
@@ -73,7 +73,7 @@ const SideNav = frFn((props, ref) => {
     'aria-labelledby': ariaLabelledBy
   };
 
-  // TO-DO: comment back in when footer is added for rails
+  // TODO: comment back in when footer is added for rails
   // const assistiveText = expanded
   //   ? t('carbon.sidenav.state.open')
   //   : t('carbon.sidenav.state.closed');

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

@@ -6,10 +6,11 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, Children, isValidElement, cloneElement } from 'react';
+import React, { forwardRef, useRef, Children, cloneElement } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { isComponentElement } from '../../internal/utils.js';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import SwitcherItem from './SwitcherItem.js';
@@ -38,7 +39,7 @@ const Switcher = /*#__PURE__*/forwardRef((props, forwardRef) => {
     direction
   }) => {
     const enabledIndices = Children.toArray(children).reduce((acc, child, i) => {
-      if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherItem && Object.keys(child.props).length) {
+      if (isComponentElement(child, SwitcherItem) && Object.keys(child.props).length) {
         acc.push(i);
       }
       return acc;
@@ -61,12 +62,12 @@ const Switcher = /*#__PURE__*/forwardRef((props, forwardRef) => {
       }
     })();
     const switcherItem = switcherRef.current?.children[nextValidIndex]?.children[0];
-    if (switcherItem) {
+    if (switcherItem instanceof HTMLElement) {
       switcherItem.focus();
     }
   };
   const childrenWithProps = Children.toArray(children).map((child, index) => {
-    if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherItem) {
+    if (isComponentElement(child, SwitcherItem)) {
       return /*#__PURE__*/cloneElement(child, {
         handleSwitcherItemFocus,
         index,
@@ -74,7 +75,7 @@ const Switcher = /*#__PURE__*/forwardRef((props, forwardRef) => {
         expanded
       });
     }
-    if (/*#__PURE__*/isValidElement(child) && child.type === SwitcherDivider) {
+    if (isComponentElement(child, SwitcherDivider)) {
       return /*#__PURE__*/cloneElement(child, {
         key: index
       });

package/es/feature-flags.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as FeatureFlags from '@carbon/feature-flags';
+import { merge } from '@carbon/feature-flags';
 
-FeatureFlags.merge({
+merge({
   'enable-css-custom-properties': true,
   'enable-css-grid': true,
   'enable-v11-release': true,

package/es/internal/FloatingMenu.js

@@ -6,7 +6,7 @@
  */
 
 import React, { useContext, useState, useRef, useCallback, useEffect, cloneElement } from 'react';
-import * as FeatureFlags from '@carbon/feature-flags';
+import { enabled } from '@carbon/feature-flags';
 import ReactDOM from 'react-dom';
 import { Tab } from './keyboard/keys.js';
 import { match } from './keyboard/match.js';
@@ -274,8 +274,8 @@ const FloatingMenu = ({
       });
     }
   };
-  const deprecatedFlag = FeatureFlags.enabled('enable-experimental-focus-wrap-without-sentinels');
-  const focusTrapWithoutSentinelsFlag = FeatureFlags.enabled('enable-focus-wrap-without-sentinels');
+  const deprecatedFlag = enabled('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = enabled('enable-focus-wrap-without-sentinels');
   const focusTrapWithoutSentinels = deprecatedFlag || focusTrapWithoutSentinelsFlag;
   if (typeof document !== 'undefined') {
     const portalTarget = target ? target() : document.body;

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/lib/components/Accordion/AccordionItem.js

@@ -41,7 +41,7 @@ function AccordionItem({
   ...rest
 }) {
   const [isOpen, setIsOpen] = React.useState(open);
-  const [prevIsOpen, setPrevIsOpen] = React.useState(open);
+  const prevOpenRef = React.useRef(open);
   const accordionState = React.useContext(AccordionProvider.AccordionContext);
   const disabledIsControlled = typeof controlledDisabled === 'boolean';
   const disabled = disabledIsControlled ? controlledDisabled : accordionState.disabled;
@@ -64,10 +64,12 @@ function AccordionItem({
       node.style.maxBlockSize = '';
     }
   }, [isOpen]);
-  if (open !== prevIsOpen) {
-    setIsOpen(open);
-    setPrevIsOpen(open);
-  }
+  React.useEffect(() => {
+    if (open !== prevOpenRef.current) {
+      setIsOpen(open);
+      prevOpenRef.current = open;
+    }
+  }, [open]);
 
   // When the AccordionItem heading is clicked, toggle the open state of the
   // panel

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

@@ -149,7 +149,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     middleware: autoAlign ? [react.flip(), react.hide()] : undefined,
     whileElementsMounted: react.autoUpdate
   } : {});
-  const parentWidth = refs?.reference?.current?.clientWidth;
+  const referenceElement = refs?.reference?.current;
+  const parentWidth = referenceElement instanceof HTMLElement ? referenceElement.clientWidth : undefined;
   React.useEffect(() => {
     if (enableFloatingStyles) {
       const updatedFloatingStyles = {
@@ -503,10 +504,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     onHighlightedIndexChange: ({
       highlightedIndex
     }) => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion , 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"]`);
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
         const highlightedItem = itemArray[highlightedIndex];
         if (highlightedItem) {
           highlightedItem.scrollIntoView({

package/lib/components/ComposedModal/ComposedModal.js

@@ -200,7 +200,6 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
       target
     } = evt;
     const mouseDownTarget = onMouseDownTarget.current;
-    evt.stopPropagation();
     const shouldCloseOnOutsideClick =
     // Passive modals can close on clicks outside the modal when
     // preventCloseOnClickOutside is undefined or explicitly set to false.

package/lib/components/ContainedList/ContainedList.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2025
+ * Copyright IBM Corp. 2022, 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/ContainedList/ContainedList.js

@@ -14,36 +14,25 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var index = require('../Layout/index.js');
+var utils = require('../../internal/utils.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
+var ExpandableSearch = require('../ExpandableSearch/ExpandableSearch.js');
 var Search = require('../Search/Search.js');
 require('../Search/Search.Skeleton.js');
 
 const variants = ['on-page', 'disclosed'];
-function filterChildren(children) {
+const isSearchComponent = node => utils.isComponentElement(node, Search.default) || utils.isComponentElement(node, ExpandableSearch.default);
+const filterChildren = children => {
   if (Array.isArray(children)) {
-    return children?.filter(child => !['Search', 'ExpandableSearch'].includes(child?.type?.displayName));
+    return children.filter(child => !isSearchComponent(child));
   }
-  if (children && !['Search', 'ExpandableSearch'].includes(children?.type?.displayName)) {
+  if (children && !isSearchComponent(children)) {
     return children;
   }
   return null;
-}
-function renderChildren(children) {
-  if (Array.isArray(children)) {
-    children.map((child, index) => {
-      if (index === 0 && child.type === Search.default) {
-        return child;
-      }
-      return child;
-    });
-  }
-  if (children && children.type === Search.default) {
-    return children;
-  }
-  return children;
-}
+};
 const ContainedList = ({
   action,
   children,
@@ -63,21 +52,7 @@ const ContainedList = ({
     [`${prefix}--layout--size-${size}`]: size
   }, `${prefix}--contained-list--${kind}`, className);
   const filteredChildren = filterChildren(children);
-  function isSearchAction(action) {
-    if (! /*#__PURE__*/React.isValidElement(action)) {
-      return false;
-    }
-    const actionTypes = ['Search', 'ExpandableSearch'];
-    let actionType = '';
-    if (typeof action.type === 'string') {
-      actionType = action.type;
-    } else {
-      actionType = action.type.displayName || '';
-    }
-    return actionTypes.includes(actionType);
-  }
-  const isActionSearch = isSearchAction(action);
-  const renderedChildren = renderChildren(children);
+  const isActionSearch = isSearchComponent(action);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classes
   }, rest), label && /*#__PURE__*/React.createElement("div", {
@@ -104,7 +79,7 @@ const ContainedList = ({
   React.createElement("ul", {
     role: "list",
     "aria-labelledby": label ? labelId : undefined
-  }, isActionSearch ? filteredChildren : renderedChildren));
+  }, isActionSearch ? filteredChildren : children));
 };
 ContainedList.propTypes = {
   /**