@carbon/react 1.77.0 → 1.78.0

package/es/components/Menu/MenuItem.js

@@ -10,20 +10,19 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
 import { useFloating, autoUpdate, offset, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
-import { CaretLeft, CaretRight, Checkmark } from '@carbon/icons-react';
+import { Checkmark, CaretLeft, CaretRight } from '@carbon/icons-react';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { warning } from '../../internal/warning.js';
 import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
 import '../Text/index.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
-import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _CaretLeft, _CaretRight;
+var _Checkmark, _CaretLeft, _CaretRight;
 const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
   let {
     children,
@@ -134,15 +133,14 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
       setRtl(false);
     }
   }, [direction]);
-  const iconsAllowed = context.state.mode === 'basic' || rest.role === 'menuitemcheckbox' || rest.role === 'menuitemradio';
   useEffect(() => {
-    if (iconsAllowed && IconElement && !context.state.hasIcons) {
+    if (IconElement && !context.state.hasIcons) {
       // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableIcons'
       });
     }
-  }, [iconsAllowed, IconElement, context.state.hasIcons, context]);
+  }, [IconElement, context.state.hasIcons, context]);
   useEffect(() => {
     Object.keys(floatingStyles).forEach(style => {
       if (refs.floating.current && style !== 'position') {
@@ -166,8 +164,10 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     onClick: handleClick,
     onKeyDown: handleKeyDown
   }, getReferenceProps()), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--menu-item__selection-icon`
+  }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React__default.createElement(Checkmark, null)))), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__icon`
-  }, iconsAllowed && IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
+  }, IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
     className: `${prefix}--menu-item__label`,
     title: label
@@ -212,7 +212,7 @@ MenuItem.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes.func,
   /**
-   * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
+   * Sets the menu item's icon.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -233,9 +233,6 @@ const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_
   } = _ref2;
   const prefix = usePrefix();
   const context = useContext(MenuContext);
-  if (context.state.mode === 'basic') {
-    process.env.NODE_ENV !== "production" ? warning(false, 'MenuItemSelectable is not supported when the menu is in "basic" mode.') : void 0;
-  }
   const [checked, setChecked] = useControllableState({
     value: selected,
     onChange,
@@ -245,13 +242,13 @@ const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_
     setChecked(!checked);
   }
   useEffect(() => {
-    if (!context.state.hasIcons) {
+    if (!context.state.hasSelectableItems) {
       // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
-        type: 'enableIcons'
+        type: 'enableSelectableItems'
       });
     }
-  }, [context.state.hasIcons, context]);
+  }, [context.state.hasSelectableItems, context]);
   const classNames = cx(className, `${prefix}--menu-item-selectable--selected`);
   return /*#__PURE__*/React__default.createElement(MenuItem, _extends({}, rest, {
     ref: forwardRef,
@@ -259,7 +256,6 @@ const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_
     className: classNames,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    renderIcon: checked ? Checkmark : undefined,
     onClick: handleClick
   }));
 });
@@ -334,9 +330,6 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
   } = _ref4;
   const prefix = usePrefix();
   const context = useContext(MenuContext);
-  if (context.state.mode === 'basic') {
-    process.env.NODE_ENV !== "production" ? warning(false, 'MenuItemRadioGroup is not supported when the menu is in "basic" mode.') : void 0;
-  }
   const [selection, setSelection] = useControllableState({
     value: selectedItem,
     onChange,
@@ -346,13 +339,13 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
     setSelection(item);
   }
   useEffect(() => {
-    if (!context.state.hasIcons) {
+    if (!context.state.hasSelectableItems) {
       // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
-        type: 'enableIcons'
+        type: 'enableSelectableItems'
       });
     }
-  }, [context.state.hasIcons, context]);
+  }, [context.state.hasSelectableItems, context]);
   const classNames = cx(className, `${prefix}--menu-item-radio-group`);
   return /*#__PURE__*/React__default.createElement("li", {
     className: classNames,
@@ -366,7 +359,6 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
     label: itemToString(item),
     role: "menuitemradio",
     "aria-checked": item === selection,
-    renderIcon: item === selection ? Checkmark : undefined,
     onClick: e => {
       handleClick(item);
     }

package/es/components/MenuButton/index.js

@@ -73,6 +73,15 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     // “break” the floating element out of a clipping ancestor.
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
+    // Submenus are using a fixed position to break out of the parent menu's
+    // box avoiding clipping while allowing for vertical scroll. When an
+    // element is using transform it establishes a new containing block
+    // block for all of its descendants. Therefore, its padding box will be
+    // used for fixed-positioned descendants. This would cause the submenu
+    // to be clipped by its parent menu.
+    // Reference: https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#current-transformation-matrix-computation
+    // Reference: https://github.com/carbon-design-system/carbon/pull/18153#issuecomment-2498548835
+    transform: false,
     // Middleware order matters, arrow should be last
     middleware: middlewares,
     whileElementsMounted: autoUpdate
@@ -87,7 +96,11 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
   useLayoutEffect(() => {
     Object.keys(floatingStyles).forEach(style => {
       if (refs.floating.current) {
-        refs.floating.current.style[style] = floatingStyles[style];
+        let value = floatingStyles[style];
+        if (['top', 'right', 'bottom', 'left'].includes(style) && Number(value)) {
+          value += 'px';
+        }
+        refs.floating.current.style[style] = value;
       }
     });
   }, [floatingStyles, refs.floating, middlewareData, placement, open]);
@@ -126,7 +139,6 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     id: id,
     legacyAutoalign: false,
     label: label,
-    mode: "basic",
     size: size$1,
     open: open,
     onClose: handleClose,

package/es/components/Modal/Modal.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { ReactNode } from 'react';
+import React, { type ReactNode, type Ref } from 'react';
 import { ReactAttr } from '../../types/common';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
@@ -58,7 +58,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
     /**
      * Provide a ref to return focus to once the modal is closed.
      */
-    launcherButtonRef?: any;
+    launcherButtonRef?: Ref<HTMLButtonElement>;
     /**
      * Specify the description for the loading text
      */

package/es/components/Modal/Modal.js

@@ -28,8 +28,8 @@ import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
-import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
@@ -190,7 +190,9 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   useEffect(() => {
     if (!open && launcherButtonRef) {
       setTimeout(() => {
-        launcherButtonRef?.current?.focus();
+        if ('current' in launcherButtonRef) {
+          launcherButtonRef.current?.focus();
+        }
       });
     }
   }, [open, launcherButtonRef]);
@@ -373,7 +375,11 @@ Modal.propTypes = {
    * Provide a ref to return focus to once the modal is closed.
    */
   launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
+    current: PropTypes.oneOfType([
+    // `PropTypes.instanceOf(HTMLButtonElement)` alone won't work because
+    // `HTMLButtonElement` is not defined in the test environment even
+    // though `testEnvironment` is set to `jsdom`.
+    typeof HTMLButtonElement !== 'undefined' ? PropTypes.instanceOf(HTMLButtonElement) : PropTypes.any, PropTypes.oneOf([null])]).isRequired
   })]),
   /**
    * Specify the description for the loading text

package/es/components/Modal/next/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -50,10 +50,6 @@ export interface BaseModalProps extends ReactAttr<HTMLDivElement> {
      * Specify whether or not the Modal content should have any inner padding.
      */
     isFullWidth?: boolean;
-    /**
-     * Provide a ref to return focus to once the modal is closed.
-     */
-    launcherButtonRef?: any;
     /**
      * Specify the description for the loading text
      */

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { useMemo, useContext, useState, useLayoutEffect } from 'react';
+import React__default, { useMemo, useContext, useState, useLayoutEffect, isValidElement } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -424,11 +424,12 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const menuProps = useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
   }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
+  const labelProps = ! /*#__PURE__*/isValidElement(titleText) ? getLabelProps() : null;
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
     className: titleClasses
-  }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement("span", {
+  }, labelProps), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default.createElement(ListBox, {
     onFocus: isFluid ? handleFocus : undefined,

package/es/components/MultiSelect/MultiSelectPropTypes.d.ts

@@ -40,8 +40,11 @@ interface DownshiftTypedProps<ItemType> {
 interface SharedOptions {
     locale: string;
 }
+interface CompareItems {
+    (itemA: string, itemB: string, options: SharedOptions): number;
+}
 export interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
-    compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    compareItems: CompareItems;
     selectedItems: ItemType[];
 }
 export interface MultiSelectSortingProps<ItemType> {
@@ -49,7 +52,7 @@ export interface MultiSelectSortingProps<ItemType> {
      * Provide a compare function that is used to determine the ordering of
      * options. See 'sortItems' for more control.
      */
-    compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    compareItems?: CompareItems;
     /**
      * Provide a method that sorts all options in the control. Overriding this
      * prop means that you also have to handle the sort logic for selected versus

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

@@ -6,14 +6,15 @@
  */
 
 /**
- * Use the local `localCompare` with the `numeric` option to sort two,
- * potentially alpha-numeric, strings in a list of items.
+ * Use the locale `localeCompare` with the `numeric` option to sort two
+ * alpha-numeric strings.
  *
- * @param {ItemType} itemA
- * @param {ItemType} itemB
- * @param {object} options
- * @param {string} options.locale
- * @returns {number}
+ * @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.
  */
 const defaultCompareItems = (itemA, itemB, _ref) => {
   let {

package/es/components/Notification/Notification.js

@@ -23,8 +23,8 @@ import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus.j
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { warning } from '../../internal/warning.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
-import { Text } from '../Text/Text.js';
 import { match, matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Tab, Escape } from '../../internal/keyboard/keys.js';
 
 /**
@@ -730,11 +730,9 @@ function Callout(_ref8) {
     [`${prefix}--actionable-notification--${kind}`]: kind,
     [`${prefix}--actionable-notification--hide-close-button`]: true
   });
-  const ref = useRef(null);
-  useInteractiveChildrenNeedDescription(ref, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    ref: ref
-  }, rest, {
+  const childrenContainer = useRef(null);
+  useInteractiveChildrenNeedDescription(childrenContainer, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: containerClassName
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--actionable-notification__details`
@@ -743,6 +741,7 @@ function Callout(_ref8) {
     kind: kind,
     iconDescription: statusIconDescription || `${kind} icon`
   }), /*#__PURE__*/React__default.createElement("div", {
+    ref: childrenContainer,
     className: `${prefix}--actionable-notification__text-wrapper`
   }, title && /*#__PURE__*/React__default.createElement(Text, {
     as: "div",

package/es/components/NumberInput/NumberInput.js

@@ -163,20 +163,20 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
   });
   const Icon = normalizedProps.icon;
-  function handleStepperClick(event, direction) {
+  const getDecimalPlaces = num => {
+    const parts = num.toString().split('.');
+    return parts[1] ? parts[1].length : 0;
+  };
+  const handleStepperClick = (event, direction) => {
     if (inputRef.current) {
       const currentValue = Number(inputRef.current.value);
-      let newValue = direction === 'up' ? currentValue + step : currentValue - step;
-      if (min !== undefined) {
-        newValue = Math.max(newValue, min);
-      }
-      if (max !== undefined) {
-        newValue = Math.min(newValue, max);
-      }
-      const currentInputValue = inputRef.current ? inputRef.current.value : '';
+      const rawValue = direction === 'up' ? currentValue + step : currentValue - step;
+      const precision = Math.max(getDecimalPlaces(currentValue), getDecimalPlaces(step));
+      const floatValue = parseFloat(rawValue.toFixed(precision));
+      const newValue = typeof min !== 'undefined' && typeof max !== 'undefined' ? Math.min(Math.max(floatValue, min), max) : floatValue;
       const state = {
-        value: allowEmpty && currentInputValue === '' && step === 0 ? '' : newValue,
-        direction: direction
+        value: allowEmpty && inputRef.current.value === '' && step === 0 ? '' : newValue,
+        direction
       };
       setValue(state.value);
       if (onChange) {
@@ -186,7 +186,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
         onClick(event, state);
       }
     }
-  }
+  };
 
   // AILabel always size `mini`
   let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;

package/es/components/OverflowMenu/OverflowMenu.d.ts

@@ -1,25 +1,13 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { type MenuDirection, type MenuOffset } from '../../internal/FloatingMenu';
 import React, { ComponentType } from 'react';
 import PropTypes from 'prop-types';
-/**
- * @param {Element} menuBody The menu body with the menu arrow.
- * @param {string} direction The floating menu direction.
- * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
- * @private
- */
-export declare const getMenuOffset: (menuBody: any, direction: any, trigger: any, flip: any) => {
-    left: number;
-    top: number;
-} | undefined;
-interface Offset {
-    top?: number | null | undefined;
-    left?: number | null | undefined;
-}
+export declare const getMenuOffset: MenuOffset;
 type IconProps = {
     className?: string;
     'aria-label'?: string;
@@ -46,7 +34,7 @@ export interface OverflowMenuProps {
     /**
      * The menu direction.
      */
-    direction?: string;
+    direction?: MenuDirection;
     /**
      * `true` if the menu alignment should be flipped.
      */
@@ -75,11 +63,11 @@ export interface OverflowMenuProps {
     /**
      * The adjustment in position applied to the floating menu.
      */
-    menuOffset?: Offset | (() => void);
+    menuOffset?: MenuOffset;
     /**
      * The adjustment in position applied to the floating menu.
      */
-    menuOffsetFlip?: Offset | (() => void);
+    menuOffsetFlip?: MenuOffset;
     /**
      * The class to apply to the menu options
      */
@@ -246,10 +234,10 @@ declare class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMe
     _hBlurTimeout: any;
     /**
      * The element ref of the tooltip's trigger button.
-     * @type {React.RefObject<Element>}
+     * @type {React.RefObject<HTMLElement>}
      * @private
      */
-    _triggerRef: React.RefObject<unknown>;
+    _triggerRef: React.RefObject<HTMLElement>;
     componentDidUpdate(_: any, prevState: any): void;
     componentDidMount(): void;
     static getDerivedStateFromProps({ open }: {

package/es/components/OverflowMenu/OverflowMenu.js

@@ -6,7 +6,7 @@
  */
 
 import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import FloatingMenu, { DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/FloatingMenu.js';
+import { FloatingMenu, DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/FloatingMenu.js';
 import React__default from 'react';
 import ClickListener from '../../internal/ClickListener.js';
 import { IconButton } from '../IconButton/index.js';
@@ -53,13 +53,6 @@ const triggerButtonPositionFactors = {
   [DIRECTION_TOP]: -2,
   [DIRECTION_BOTTOM]: -1
 };
-
-/**
- * @param {Element} menuBody The menu body with the menu arrow.
- * @param {string} direction The floating menu direction.
- * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
- * @private
- */
 const getMenuOffset = (menuBody, direction, trigger, flip) => {
   const triggerButtonPositionProp = triggerButtonPositionProps[direction];
   const triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
@@ -81,6 +74,11 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
           top: 0
         };
       }
+    default:
+      return {
+        left: 0,
+        top: 0
+      };
   }
 };
 class OverflowMenu extends React__default.Component {
@@ -106,7 +104,7 @@ class OverflowMenu extends React__default.Component {
     _defineProperty(this, "_hBlurTimeout", void 0);
     /**
      * The element ref of the tooltip's trigger button.
-     * @type {React.RefObject<Element>}
+     * @type {React.RefObject<HTMLElement>}
      * @private
      */
     _defineProperty(this, "_triggerRef", /*#__PURE__*/React__default.createRef());

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -12,8 +12,8 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { warning } from '../../internal/warning.js';
 import '../Text/index.js';
-import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 
 const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function OverflowMenuItem(_ref, ref) {

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -12,8 +12,8 @@ import React__default, { useState } from 'react';
 import { Warning, Incomplete, CheckmarkOutline, CircleDash } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
-import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 const defaultTranslations = {

package/es/components/RadioTile/RadioTile.js

@@ -16,8 +16,8 @@ import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;

package/es/components/Select/Select.js

@@ -49,8 +49,16 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     isFluid
   } = useContext(FormContext);
   const [isFocused, setIsFocused] = useState(false);
-  const [title, setTitle] = useState('');
   const selectInstanceId = useId();
+  // Convert children to an array of valid elements once using type narrowing
+  const validChildren = React__default.Children.toArray(children).filter(child => /*#__PURE__*/React__default.isValidElement(child));
+
+  // Find the default option based on the specified defaultValue
+  const defaultOption = validChildren.find(child => child.props?.value === other?.defaultValue);
+
+  // Use the default option's text if available; otherwise, fallback to the first option's text
+  const initialTitle = defaultOption?.props?.text || validChildren[0]?.props?.text || '';
+  const [title, setTitle] = useState(initialTitle);
   const selectClasses = cx({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,
@@ -105,7 +113,8 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
     setIsFocused(evt.type === 'focus' ? true : false);
   };
   const handleChange = evt => {
-    setTitle(evt?.target?.value);
+    const selectedOption = evt?.target?.options[evt.target.selectedIndex];
+    setTitle(selectedOption?.text);
   };
   const readOnlyEventHandlers = {
     onMouseDown: evt => {

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export declare const ShapeIndicatorKinds: string[];
+export type ShapeIndicatorKind = (typeof ShapeIndicatorKinds)[number];
+export interface ShapeIndicatorProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify the kind of shape to be used
+     */
+    kind: ShapeIndicatorKind;
+    /**
+     * Label next to the shape
+     */
+    label: string;
+    /**
+     * Specify the text size of the Shape Indicator. Defaults to 12.
+     */
+    textSize?: 12 | 14;
+}
+export declare const ShapeIndicator: React.ForwardRefExoticComponent<ShapeIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export default ShapeIndicator;