@carbon/react 1.101.0 → 1.102.0-rc.0

package/lib/components/ExpandableSearch/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ExpandableSearch = require('./ExpandableSearch.js');
+
+
+
+exports.ExpandableSearch = ExpandableSearch.default;
+exports.default = ExpandableSearch.default;

package/lib/components/FeatureFlags/index.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-var FeatureFlags$1 = require('@carbon/feature-flags');
+var featureFlags = require('@carbon/feature-flags');
 var PropTypes = require('prop-types');
 var React = require('react');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -17,7 +17,7 @@ var deprecate = require('../../prop-types/deprecate.js');
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
  */
-const FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
+const FeatureFlagContext = /*#__PURE__*/React.createContext(featureFlags.FeatureFlags);
 
 /**
  * Supports an object of feature flag values with the `flags` prop, merging them
@@ -54,12 +54,12 @@ function FeatureFlags({
     ...flags
   };
   const [scope, updateScope] = React.useState(() => {
-    const scope = FeatureFlags$1.createScope(combinedFlags);
+    const scope = featureFlags.createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     return scope;
   });
   if (parentScope !== prevParentScope) {
-    const scope = FeatureFlags$1.createScope(combinedFlags);
+    const scope = featureFlags.createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
     setPrevParentScope(parentScope);
@@ -69,7 +69,7 @@ function FeatureFlags({
   // for flags that are passed in. If they have changed, then we re-create the
   // FeatureFlagScope using the new flags
   useChangedValue(combinedFlags, isEqual, changedFlags => {
-    const scope = FeatureFlags$1.createScope(changedFlags);
+    const scope = featureFlags.createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
   });

package/lib/components/FluidSelect/FluidSelect.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022
+ * 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.
  */
-import React from 'react';
+import React, { type SelectHTMLAttributes } from 'react';
 export interface FluidSelectProps {
     /**
      * Provide the contents of your Select
@@ -17,7 +17,7 @@ export interface FluidSelectProps {
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */

package/lib/components/FluidTextArea/FluidTextArea.d.ts

@@ -8,8 +8,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 export interface FluidTextAreaProps {
     /**
-     * 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;
     /**
@@ -101,8 +100,7 @@ declare const FluidTextArea: {
     ({ className, ...other }: FluidTextAreaProps): import("react/jsx-runtime").JSX.Element;
     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.Requireable<string>;
         /**

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -35,8 +35,7 @@ const FluidTextArea = ({
 };
 FluidTextArea.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/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022
+ * 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.
  */
-import React from 'react';
+import React, { type SelectHTMLAttributes } from 'react';
 export interface FluidTimePickerSelectProps {
     /**
      * Provide the contents of your Select
@@ -17,7 +17,7 @@ export interface FluidTimePickerSelectProps {
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */

package/lib/components/Grid/Column.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.

package/lib/components/Grid/Column.js

@@ -10,32 +10,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var FeatureFlags = require('@carbon/feature-flags');
+var featureFlags = require('@carbon/feature-flags');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var GridContext = require('./GridContext.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespaceDefault(FeatureFlags);
-
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const Column = /*#__PURE__*/React.forwardRef(({
   as,
@@ -75,7 +56,7 @@ const Column = /*#__PURE__*/React.forwardRef(({
   }, rest), children);
 });
 const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
-const spanPropType = FeatureFlags__namespace.enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
+const spanPropType = featureFlags.enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
   span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
   offset: PropTypes.number,
   start: PropTypes.number,

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

@@ -40,7 +40,9 @@ function Loading({
     className: loadingClassName
   }), /*#__PURE__*/React.createElement("svg", {
     className: `${prefix}--loading__svg`,
-    viewBox: "0 0 100 100"
+    viewBox: "0 0 100 100",
+    role: "img",
+    "aria-label": description
   }, /*#__PURE__*/React.createElement("title", null, description), small ? /*#__PURE__*/React.createElement("circle", {
     className: `${prefix}--loading__background`,
     cx: "50%",

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

@@ -86,10 +86,14 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
   }
   function handleOpen() {
     if (menu.current) {
-      focusReturn.current = document.activeElement;
+      const {
+        activeElement,
+        dir
+      } = document;
+      focusReturn.current = activeElement instanceof HTMLElement ? activeElement : null;
       if (legacyAutoalign) {
         const pos = calculatePosition();
-        if ((document?.dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
+        if ((dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
           menu.current.style.insetInlineStart = `initial`;
           menu.current.style.insetInlineEnd = `${pos[0]}px`;
         } else {

package/lib/components/Menu/MenuItem.js

@@ -71,7 +71,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
   const context = React.useContext(MenuContext.MenuContext);
   const menuItem = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, menuItem, refs.setReference]);
-  const hasChildren = Boolean(children);
+  const hasChildren = React.Children.toArray(children).length > 0;
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
   function registerItem() {
@@ -79,7 +79,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
       type: 'registerItem',
       payload: {
         ref: menuItem,
-        disabled: Boolean(disabled)
+        disabled: disabled ?? false
       }
     });
   }

package/lib/components/Modal/Modal.js

@@ -162,7 +162,6 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     const {
       target
     } = evt;
-    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/MultiSelect/FilterableMultiSelect.js

@@ -222,7 +222,6 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     item => !item.disabled);
 
     // Sort only non-select-all items, select-all item must stay at the top
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
     const sortedReal = sortItems(nonSelectAllItems, {
       selectedItems: {
         top: controlledSelectedItems,
@@ -315,6 +314,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   React.useEffect(() => {
     const handleClickOutside = event => {
       const target = event.target;
+      if (!(target instanceof Node)) return;
       const wrapper = document.getElementById(id)?.closest(`.${prefix}--multi-select__wrapper`);
 
       // If click is outside our component and menu is open or input is focused
@@ -616,10 +616,11 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
-    ref: autoAlign ? refs.setFloating : null
+    ref: autoAlign ? refs.setFloating : null,
+    hidden: !isOpen
   }, {
     suppressRefError: true
-  }), [autoAlign, getMenuProps, refs.setFloating]);
+  }), [autoAlign, getMenuProps, isOpen, refs.setFloating]);
   const handleFocus = evt => {
     if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
       setIsFocused(false);

package/lib/components/MultiSelect/MultiSelect.js

@@ -426,8 +426,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
-    ref: enableFloatingStyles ? refs.setFloating : null
-  }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
+    ref: enableFloatingStyles ? refs.setFloating : null,
+    hidden: !isOpen
+  }), [enableFloatingStyles, getMenuProps, isOpen, refs.setFloating]);
   const allLabelProps = getLabelProps();
   const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
     id: allLabelProps.id
@@ -474,9 +475,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   }, selectedItems.length > 0 && /*#__PURE__*/React.createElement(index$2.default.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
-    selectionCount: selectedItemsLength
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
+    selectionCount: selectedItemsLength,
     translateWithId: translateWithId,
     disabled: disabled
   }), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
@@ -495,9 +494,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     translateWithId: translateWithId
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen &&
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
-  sortItems(filteredItems, sortOptions).map((item, index) => {
+  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const {
       hasIndividualSelections,
       nonSelectAllSelectedCount,

package/lib/components/MultiSelect/MultiSelectPropTypes.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.
@@ -34,17 +34,15 @@ export declare const sortingPropTypes: {
      */
     sortItems: PropTypes.Requireable<(...args: any[]) => any>;
 };
-interface DownshiftTypedProps<ItemType> {
-    itemToString?(item: ItemType): string;
-}
 interface SharedOptions {
     locale: string;
 }
-interface CompareItems {
-    (itemA: string, itemB: string, options: SharedOptions): number;
-}
-export interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
+export type CompareItems = (itemA: string, itemB: string, options: {
+    locale: string;
+}) => number;
+export interface SortItemsOptions<ItemType> extends SharedOptions {
     compareItems: CompareItems;
+    itemToString: (item: ItemType) => string;
     selectedItems: ItemType[];
 }
 export interface MultiSelectSortingProps<ItemType> {

package/lib/components/MultiSelect/tools/sorting.d.ts

@@ -1,9 +1,16 @@
-export function defaultCompareItems(itemA: string, itemB: string, { locale }: {
-    locale: string;
-}): number;
-export function defaultSortItems(items: any, { selectedItems, itemToString, compareItems, locale }: {
-    selectedItems?: never[] | undefined;
-    itemToString: any;
-    compareItems: any;
-    locale?: string | undefined;
-}): any;
+/**
+ * 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 type { CompareItems, SortItemsOptions } from '../MultiSelectPropTypes';
+/**
+ * Use `localeCompare` with the `numeric` option enabled to sort two
+ * alphanumeric strings.
+ */
+export declare const defaultCompareItems: CompareItems;
+/**
+ * Default sorting function for options in a selection control.
+ */
+export declare const defaultSortItems: <T>(items: T[], { selectedItems, itemToString, compareItems, locale }: SortItemsOptions<T>) => T[];

package/lib/components/MultiSelect/tools/sorting.js

@@ -7,16 +7,11 @@
 
 'use strict';
 
+const isSelectAllItem = item => typeof item === 'object' && item !== null && 'isSelectAll' in item;
+
 /**
- * Use the locale `localeCompare` with the `numeric` option to sort two
- * alpha-numeric strings.
- *
- * @param {string} itemA - The first string to compare.
- * @param {string} itemB - The second string to compare.
- * @param {object} options - Options for comparing.
- * @param {string} options.locale - The locale to use for comparison.
- * @returns {number} A negative number if itemA comes before itemB, a positive
- *   number if itemA comes after itemB, or 0 if they are equal.
+ * Use `localeCompare` with the `numeric` option enabled to sort two
+ * alphanumeric strings.
  */
 const defaultCompareItems = (itemA, itemB, {
   locale
@@ -25,18 +20,19 @@ const defaultCompareItems = (itemA, itemB, {
 });
 
 /**
- * Default sorting algorithm for options in a selection control
+ * Default sorting function for options in a selection control.
  */
 const defaultSortItems = (items, {
-  selectedItems = [],
+  selectedItems,
   itemToString,
   compareItems,
-  locale = 'en'
+  locale
 }) => {
+  // TODO: Should this util mutate items or should that be avoided?
   return items.sort((itemA, itemB) => {
     // Always place "select all" option at the beginning
-    if (itemA.isSelectAll) return -1;
-    if (itemB.isSelectAll) return 1;
+    if (isSelectAllItem(itemA) && itemA.isSelectAll) return -1;
+    if (isSelectAllItem(itemB) && itemB.isSelectAll) return 1;
     const hasItemA = selectedItems.includes(itemA);
     const hasItemB = selectedItems.includes(itemB);
     if (hasItemA && !hasItemB) return -1;

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -259,6 +259,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef(({
     const focusinEventName = hasFocusin ? 'focusin' : 'focus';
     hFocusIn.current = on(menuBody.ownerDocument, focusinEventName, event => {
       const target = event.target;
+      if (!(target instanceof Element)) return;
       const triggerEl = triggerRef.current;
       if (typeof target.matches === 'function') {
         if (!menuBody.contains(target) && triggerEl && !target.matches(`.${prefix}--overflow-menu:first-child, .${prefix}--overflow-menu-options:first-child`)) {

package/lib/components/OverflowMenuItem/OverflowMenuItem.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.
@@ -14,6 +14,10 @@ export interface OverflowMenuItemProps extends React.HTMLAttributes<HTMLElement>
      * A callback to tell the parent menu component that the menu should be closed.
      */
     closeMenu?: () => void;
+    /**
+     * Specify the message read by screen readers for the danger overflow menu item variant
+     */
+    dangerDescription?: string;
     /**
      * `true` to make this menu item disabled.
      */

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -19,12 +19,14 @@ var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
 var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
+var useId = require('../../internal/useId.js');
 
 const frFn = React.forwardRef;
 const OverflowMenuItem = frFn((props, ref) => {
   const {
     className,
     closeMenu,
+    dangerDescription = 'danger',
     disabled = false,
     handleOverflowMenuItemFocus,
     hasDivider = false,
@@ -68,13 +70,17 @@ const OverflowMenuItem = frFn((props, ref) => {
     [`${prefix}--overflow-menu-options__option--disabled`]: disabled
   }, wrapperClassName);
   const TagToUse = href ? 'a' : 'button';
+  const assistiveId = useId.useId('danger-description');
   const OverflowMenuItemContent = (() => {
     if (typeof itemText !== 'string') {
       return itemText;
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--overflow-menu-options__option-content`
-    }, itemText);
+    }, itemText), isDelete && /*#__PURE__*/React.createElement("span", {
+      id: assistiveId,
+      className: `${prefix}--visually-hidden`
+    }, dangerDescription));
   })();
   return /*#__PURE__*/React.createElement(Text.Text, {
     as: "li",
@@ -114,6 +120,10 @@ OverflowMenuItem.propTypes = {
    * A callback to tell the parent menu component that the menu should be closed.
    */
   closeMenu: PropTypes.func,
+  /**
+   * Specify the message read by screen readers for the danger overflow menu item variant
+   */
+  dangerDescription: PropTypes.string,
   /**
    * `true` to make this menu item disabled.
    */

package/lib/components/Popover/index.js

@@ -162,7 +162,8 @@ forwardRef) {
     // Middleware order matters, arrow should be last
     middleware: [react.offset(!isTabTip ? {
       alignmentAxis: alignmentAxisOffset,
-      mainAxis: popoverDimensions?.current?.offset
+      // Use 4px spacing when no caret, otherwise use the caret offset
+      mainAxis: caret ? popoverDimensions?.current?.offset : 4
     } : 0), autoAlign && react.flip({
       fallbackPlacements: isTabTip ? align.includes('bottom') ? ['bottom-start', 'bottom-end', 'top-start', 'top-end'] : ['top-start', 'top-end', 'bottom-start', 'bottom-end'] : align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
       fallbackStrategy: 'initialPlacement',
@@ -299,10 +300,9 @@ forwardRef) {
       return item;
     }
   });
-  const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
     value: value
-  }, /*#__PURE__*/React.createElement(BaseComponentAsAny, _rollupPluginBabelHelpers.extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(BaseComponent, _rollupPluginBabelHelpers.extends({}, rest, {
     className: className,
     ref: ref
   }), enableFloatingStyles || isTabTip ? mappedChildren : children));

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

@@ -47,17 +47,14 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const prefix = usePrefix.usePrefix();
   const [selected, setSelected] = React.useState(valueSelected ?? defaultSelected);
-  const [prevValueSelected, setPrevValueSelected] = React.useState(valueSelected);
+  const prevValueSelected = React.useRef(valueSelected);
   const radioButtonGroupInstanceId = useId.useId();
-
-  /**
-   * prop + state alignment - getDerivedStateFromProps
-   * only update if selected prop changes
-   */
-  if (valueSelected !== prevValueSelected) {
-    setSelected(valueSelected);
-    setPrevValueSelected(valueSelected);
-  }
+  React.useEffect(() => {
+    if (valueSelected !== prevValueSelected.current) {
+      setSelected(valueSelected);
+      prevValueSelected.current = valueSelected;
+    }
+  }, [valueSelected]);
   function getRadioButtons() {
     const mappedChildren = React.Children.map(children, radioButton => {
       if (!radioButton) {

package/lib/components/Search/Search.js

@@ -26,6 +26,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
+var utils = require('./utils.js');
 
 var _Close;
 const Search = /*#__PURE__*/React.forwardRef(({
@@ -51,7 +52,7 @@ const Search = /*#__PURE__*/React.forwardRef(({
   value,
   ...rest
 }, forwardRef) => {
-  const hasPropValue = Boolean(value || defaultValue);
+  const hasPropValue = utils.isSearchValuePresent(value) || utils.isSearchValuePresent(defaultValue);
   const prefix = usePrefix.usePrefix();
   const {
     isFluid
@@ -78,7 +79,7 @@ const Search = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--search-close--hidden`]: !hasContent || !isExpanded
   });
   if (value !== prevValue) {
-    setHasContent(!!value);
+    setHasContent(utils.isSearchValuePresent(value));
     setPrevValue(value);
   }
   function clearInput() {

package/lib/components/Search/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+export declare const isSearchValuePresent: (value: string | number | undefined) => boolean;

package/lib/components/Search/utils.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const isSearchValuePresent = value => value !== '' && typeof value !== 'undefined';
+
+exports.isSearchValuePresent = isSearchValuePresent;

package/lib/components/Select/Select.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 ChangeEventHandler, type ComponentPropsWithRef, type ReactNode } from 'react';
+import React, { type ChangeEventHandler, type ComponentPropsWithRef, type ReactNode, type SelectHTMLAttributes } from 'react';
 type ExcludedAttributes = 'size';
 export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
     /**
@@ -22,7 +22,7 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, Exclu
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */

package/lib/components/Select/Select.js

@@ -38,7 +38,7 @@ const Select = /*#__PURE__*/React.forwardRef(({
   hideLabel = false,
   invalid = false,
   invalidText = '',
-  helperText = '',
+  helperText,
   light = false,
   readOnly,
   size,