@carbon/react 1.100.0 → 1.101.0

package/es/components/Tag/SelectableTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -19,6 +19,7 @@ import '../Text/TextDirection.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
 import { useControllableState } from '../../internal/useControllableState.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const SelectableTag = /*#__PURE__*/forwardRef(({
@@ -47,7 +48,7 @@ const SelectableTag = /*#__PURE__*/forwardRef(({
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);

package/es/components/Tag/Tag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useLayoutEffect, cloneElement } from 'react';
+import React, { useRef, useState, cloneElement } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
@@ -21,6 +21,7 @@ import { isEllipsisActive } from './isEllipsisActive.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 var _Close;
 const TYPES = {
@@ -76,7 +77,7 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
   // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
   const tagId = id || `tag-${useId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);

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

@@ -1,11 +1,11 @@
 /**
- * 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, { type ReactNode } from 'react';
-export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Provide a custom className that is applied directly to the underlying
      * `<textarea>` node

package/es/components/TextArea/TextArea.js

@@ -193,24 +193,25 @@ const TextArea = frFn((props, forwardRef) => {
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React.createElement(Text, {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement(Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
     className: counterClasses,
     "aria-hidden": "true"
   }, `${textCount}/${maxCount}`) : null;
   const counterDescriptionId = enableCounter && maxCount ? `${id}-counter-desc` : undefined;
-  const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
+  const helper = hasHelper && /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: helperId,
     className: helperTextClasses,
     ref: helperTextRef
-  }, helperText) : null;
+  }, helperText);
   const errorId = id + '-error-msg';
   const error = invalid ? /*#__PURE__*/React.createElement(Text, {
     as: "div",
@@ -277,7 +278,7 @@ const TextArea = frFn((props, forwardRef) => {
   }, [ariaAnnouncement, prevAnnouncement, counterMode]);
   const input = /*#__PURE__*/React.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
-    "aria-readonly": other.readOnly ? true : false,
+    "aria-readonly": Boolean(other.readOnly),
     className: textareaClasses,
     "aria-invalid": invalid,
     "aria-describedby": ariaDescribedBy,

package/es/components/TextInput/ControlledPasswordInput.js

@@ -71,10 +71,10 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React.createElement("label", {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   const error = invalid ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-requirement`,
     id: errorId
@@ -89,12 +89,13 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
-  const helperId = !helperText ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
   const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, getTextInputProps({
     invalid,
     sharedTextInputProps,
     invalidId: errorId,
-    hasHelper: !error && helperText ? true : false,
+    hasHelper: !error && hasHelper,
     helperId
   }), {
     "data-toggle-password-visibility": type === 'password'
@@ -105,10 +106,10 @@ const ControlledPasswordInput = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--assistive-text`
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: helperTextClasses
-  }, helperText) : null;
+  }, helperText);
   return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-item ${prefix}--text-input-wrapper ${prefix}--password-input-wrapper`
   }, label, /*#__PURE__*/React.createElement("div", {

package/es/components/TextInput/PasswordInput.js

@@ -61,8 +61,7 @@ const PasswordInput = /*#__PURE__*/forwardRef(({
   } = useContext(FormContext);
   const handleTogglePasswordVisibility = event => {
     setInputType(inputType === 'password' ? 'text' : 'password');
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    onTogglePasswordVisibility && onTogglePasswordVisibility(event);
+    onTogglePasswordVisibility?.(event);
   };
   const textInputClasses = cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
     [`${prefix}--text-input--light`]: light,
@@ -117,14 +116,14 @@ const PasswordInput = /*#__PURE__*/forwardRef(({
     [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
     [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
   });
-  const label = labelText ? /*#__PURE__*/React.createElement("label", {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  }, labelText);
+  const helper = typeof helperText !== 'undefined' && helperText !== null && /*#__PURE__*/React.createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
-  }, helperText) : null;
+  }, helperText);
   const passwordIsVisible = inputType === 'text';
   const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React.createElement(ViewOff, {
     className: `${prefix}--icon-visibility-off`

package/es/components/TextInput/TextInput.js

@@ -141,19 +141,19 @@ const TextInput = /*#__PURE__*/forwardRef(({
     as: "div",
     className: counterClasses
   }, `${textCount}/${maxCount}`) : null;
-  const label = labelText ? /*#__PURE__*/React.createElement(Text, {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement(Text, {
     as: "label",
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   const labelWrapper = /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--text-input__label-wrapper`
   }, label, counter);
-  const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
+  const helper = typeof helperText !== 'undefined' && helperText !== null && /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: normalizedProps.helperId,
     className: helperTextClasses
-  }, helperText) : null;
+  }, helperText);
   const input = /*#__PURE__*/React.createElement("input", getTextInputProps({
     sharedTextInputProps,
     invalid: normalizedProps.invalid,

package/es/components/TimePicker/TimePicker.js

@@ -98,10 +98,10 @@ const TimePicker = frFn((props, ref) => {
     [`${prefix}--visually-hidden`]: hideLabel,
     [`${prefix}--label--disabled`]: disabled
   });
-  const label = labelText ? /*#__PURE__*/React.createElement("label", {
+  const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: labelClasses
-  }, labelText) : null;
+  }, labelText);
   function getInternalPickerSelects() {
     const readOnlyEventHandlers = {
       onMouseDown: evt => {

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

@@ -48,8 +48,9 @@ const DefinitionTooltip = ({
       setOpen(false);
     },
     onMouseEnter: () => {
-      // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-      openOnHover ? setOpen(true) : null;
+      if (openOnHover) {
+        setOpen(true);
+      }
     },
     onFocus: () => {
       setOpen(true);

package/es/internal/useId.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useLayoutEffect, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { setupGetInstanceId } from '../tools/setupGetInstanceId.js';
-import { canUseDOM } from './environment.js';
+import useIsomorphicEffect from './useIsomorphicEffect.js';
 import { useIdPrefix } from './useIdPrefix.js';
 
 // This file was heavily inspired by:
@@ -46,7 +46,6 @@ const _React = {
   ...React
 };
 const instanceId = setupGetInstanceId();
-const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
 let serverHandoffCompleted = false;
 const defaultId = 'id';
 
@@ -64,7 +63,7 @@ function useCompatibleId(prefix = defaultId) {
     }
     return null;
   });
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (id === null) {
       setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
     }

package/es/internal/usePresence.js

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useState, useCallback, useLayoutEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { usePrefix } from './usePrefix.js';
+import useIsomorphicEffect from './useIsomorphicEffect.js';
 
 const usePresence = (ref, isOpen) => {
   const prefix = usePrefix();
@@ -25,7 +26,7 @@ const usePresence = (ref, isOpen) => {
   const handleAnimationEnd = useCallback(() => {
     setExitState('finished');
   }, []);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (!ref.current || !isExiting) return;
 
     // resolve for JSDOM

package/es/internal/useResizeObserver.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.

package/es/internal/useResizeObserver.js

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
+import useIsomorphicEffect from './useIsomorphicEffect.js';
 
 const useResizeObserver = ({
   ref,
@@ -16,7 +17,7 @@ const useResizeObserver = ({
   const entriesToHandle = useRef(null);
   const cb = useRef(onResize);
   useEffect(() => {
-    // ref for onResize removes it as dependency from useLayoutEffect
+    // ref for onResize removes it as dependency from useIsomorphicEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
     cb.current = onResize;
@@ -37,7 +38,7 @@ const useResizeObserver = ({
     getInitialSize();
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [width, height]);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (!ref?.current) {
       return;
     }
@@ -48,9 +49,7 @@ const useResizeObserver = ({
       const entry = entriesToHandle.current[0];
       setWidth(entry.contentRect.width);
       setHeight(entry.contentRect.height);
-
-      // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-      cb.current && cb.current(entry.contentRect);
+      cb.current?.(entry.contentRect);
     };
     const observer = new ResizeObserver(entries => {
       // always update entriesToHandle
@@ -66,7 +65,6 @@ const useResizeObserver = ({
     return () => {
       observer.disconnect();
     };
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, []);
   return {
     width,

package/es/tools/events.d.ts

@@ -14,4 +14,4 @@ import type { SyntheticEvent } from 'react';
  * @param handlers - An array of event handler functions.
  * @returns A composite event handler.
  */
-export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
+export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;

package/lib/components/AILabel/index.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/AILabel/index.js

@@ -25,20 +25,9 @@ const AILabelContent = /*#__PURE__*/React.forwardRef(function AILabelContent({
 }, ref // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
 ) {
   const prefix = usePrefix.usePrefix();
-  const hasAILabelActions = React.Children.toArray(children).some(child => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-    const item = child;
-    // TODO: Is there supposed to be a `return` here? If so, this issue would
-    // have been caught by ESLint. It's concerning that this code is 7 months
-    // old and no one has noticed any issues with it. It also makes me question
-    // whether the code is necessary.
-    // https://github.com/carbon-design-system/carbon/issues/18991
-    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-    item.type === AILabelActions;
-  });
   const aiLabelContentClasses = cx(className, {
     [`${prefix}--ai-label-content`]: true,
-    [`${prefix}--ai-label-content--with-actions`]: hasAILabelActions
+    [`${prefix}--ai-label-content--with-actions`]: false
   });
   return /*#__PURE__*/React.createElement(index.ToggletipContent, {
     className: aiLabelContentClasses

package/lib/components/Checkbox/Checkbox.js

@@ -46,11 +46,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
   const checkboxGroupInstanceId = useId.useId();
-  const helperId = !helperText ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
+  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: `${prefix}--form__helper-text`
-  }, helperText) : null;
+  }, helperText);
   const wrapperClasses = cx(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, className, {
     [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
     [`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
@@ -110,6 +111,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--checkbox-label`,
     title: title
   }, /*#__PURE__*/React.createElement(Text.Text, {
+    as: "div",
     className: innerLabelClasses
   }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--checkbox-wrapper-inner--decorator`

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -42,11 +42,12 @@ const CheckboxGroup = ({
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
   const checkboxGroupInstanceId = useId.useId();
-  const helperId = !helperText ? undefined : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
-  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
+  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
+  const helperId = !hasHelper ? undefined : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
+  const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: `${prefix}--form__helper-text`
-  }, helperText) : null;
+  }, helperText);
   const fieldsetClasses = cx(`${prefix}--checkbox-group`, className, {
     [`${prefix}--checkbox-group--${orientation}`]: orientation === 'horizontal',
     [`${prefix}--checkbox-group--readonly`]: readOnly,

package/lib/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/lib/components/ComboBox/ComboBox.js

@@ -27,6 +27,7 @@ var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
@@ -251,8 +252,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   React.useEffect(() => {
     if (prevInputValue.current !== inputValue) {
       prevInputValue.current = inputValue;
-      // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
-      onInputChange && onInputChange(inputValue);
+      onInputChange?.(inputValue);
     }
     // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   }, [inputValue]);
@@ -427,11 +427,19 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       event?.persist?.();
     }
   };
-  const showWarning = !invalid && warn;
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled: disabled || false,
+    invalid: invalid || false,
+    invalidText,
+    warn: warn || false,
+    warnText
+  });
   const className = cx(`${prefix}--combo-box`, {
     [`${prefix}--combo-box--invalid--focused`]: invalid && isFocused,
     [`${prefix}--list-box--up`]: direction === 'top',
-    [`${prefix}--combo-box--warning`]: showWarning,
+    [`${prefix}--combo-box--warning`]: normalizedProps.warn,
     [`${prefix}--combo-box--readonly`]: readOnly,
     [`${prefix}--autoalign`]: enableFloatingStyles
   });
@@ -601,7 +609,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   // The input should be described by the appropriate message text id
   // when both the message is supplied *and* when the component is in
   // the matching state (invalid, warn, etc).
-  const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
+  const ariaDescribedBy = normalizedProps.invalid && invalidText && invalidTextId || normalizedProps.warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
@@ -629,13 +637,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     onBlur: handleFocus,
     className: className,
     disabled: disabled,
-    invalid: invalid,
+    invalid: normalizedProps.invalid,
     invalidText: invalidText,
     invalidTextId: invalidTextId,
     isOpen: isOpen,
     light: light,
     size: size,
-    warn: warn,
+    warn: normalizedProps.warn,
     ref: enableFloatingStyles ? refs.setReference : null,
     warnText: warnText,
     warnTextId: warnTextId
@@ -737,9 +745,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), rest, readOnlyEventHandlers, {
     readOnly: readOnly,
     "aria-describedby": ariaDescribedBy
-  })), invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+  })), normalizedProps.invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
-  }), showWarning && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
+  }), normalizedProps.warn && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), inputValue && /*#__PURE__*/React.createElement(ListBoxSelection.default, {
     clearSelection: () => {
@@ -777,18 +785,23 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     const {
       'aria-disabled': unusedAriaDisabled,
       // eslint-disable-line @typescript-eslint/no-unused-vars
+      'aria-selected': unusedAriaSelected,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
       ...modifiedItemProps
     } = itemProps;
+    const isSelected = isEqual(currentSelectedItem, item);
     return /*#__PURE__*/React.createElement(index$2.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
-      isActive: isEqual(currentSelectedItem, item),
+      isActive: isSelected,
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
-    }, modifiedItemProps), itemToElement ? itemToElement(item) : itemToString(item), isEqual(currentSelectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
+    }, modifiedItemProps, {
+      "aria-selected": isSelected
+    }), itemToElement ? itemToElement(item) : itemToString(item), isSelected && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
-  }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text.Text, {
+  }) : null)), helperText && !normalizedProps.invalid && !normalizedProps.warn && !isFluid && /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     id: helperTextId,
     className: helperClasses

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

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

@@ -20,6 +20,7 @@ require('../Menu/MenuItem.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
@@ -96,7 +97,7 @@ const ComboButton = /*#__PURE__*/React.forwardRef(function ComboButton({
     handleMousedown: handleTriggerMousedown,
     handleClose
   } = useAttachedMenu.useAttachedMenu(containerRef);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.default(() => {
     const updatedFloatingStyles = {
       ...floatingStyles,
       visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'

package/lib/components/ComposedModal/ComposedModal.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var useResizeObserver = require('../../internal/useResizeObserver.js');
-var reactIs = require('react-is');
 var PropTypes = require('prop-types');
 var index = require('../Layer/index.js');
 var ModalHeader = require('./ModalHeader.js');
@@ -263,29 +262,25 @@ 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 => {
-    switch (true) {
-      case reactIs.isElement(child) && child.type === /*#__PURE__*/React.createElement(ModalHeader.ModalHeader).type:
-        {
-          const el = child;
-          generatedAriaLabel = el.props.label;
-          return /*#__PURE__*/React.cloneElement(el, {
-            closeModal
-          });
-        }
-      case reactIs.isElement(child) && child.type === /*#__PURE__*/React.createElement(ModalFooter.ModalFooter).type:
-        {
-          const el = child;
-          return /*#__PURE__*/React.cloneElement(el, {
-            closeModal,
-            inputref: button,
-            danger
-          });
-        }
-      default:
-        return child;
+    if (utils.isComponentElement(child, ModalHeader.ModalHeader)) {
+      generatedAriaLabel = child.props.label;
+      return /*#__PURE__*/React.cloneElement(child, {
+        closeModal
+      });
+    }
+    if (utils.isComponentElement(child, ModalFooter.ModalFooter)) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        closeModal,
+        inputref: button,
+        danger
+      });
     }
+    return child;
   });
 
   // Modals without a footer are considered passive and carry limitations as

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * 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.
@@ -40,7 +40,7 @@ export interface ModalHeaderProps extends DivProps {
     /**
      * Specify an optional label to be displayed
      */
-    label?: ReactNode;
+    label?: string;
     /**
      * Specify an optional className to be applied to the modal header label
      */