@carbon/react 1.77.0 → 1.78.0

package/lib/components/Menu/MenuItem.js

@@ -18,13 +18,12 @@ var iconsReact = require('@carbon/icons-react');
 var useControllableState = require('../../internal/useControllableState.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var warning = require('../../internal/warning.js');
 var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
 require('../Text/index.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -33,7 +32,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _CaretLeft, _CaretRight;
+var _Checkmark, _CaretLeft, _CaretRight;
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRef) {
   let {
     children,
@@ -144,15 +143,14 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
       setRtl(false);
     }
   }, [direction]);
-  const iconsAllowed = context.state.mode === 'basic' || rest.role === 'menuitemcheckbox' || rest.role === 'menuitemradio';
   React.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]);
   React.useEffect(() => {
     Object.keys(floatingStyles).forEach(style => {
       if (refs.floating.current && style !== 'position') {
@@ -176,8 +174,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     onClick: handleClick,
     onKeyDown: handleKeyDown
   }, getReferenceProps()), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--menu-item__selection-icon`
+  }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__icon`
-  }, iconsAllowed && IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  }, IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: `${prefix}--menu-item__label`,
     title: label
@@ -222,7 +222,7 @@ MenuItem.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
@@ -243,9 +243,6 @@ const MenuItemSelectable = /*#__PURE__*/React.forwardRef(function MenuItemSelect
   } = _ref2;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
-  if (context.state.mode === 'basic') {
-    process.env.NODE_ENV !== "production" ? warning.warning(false, 'MenuItemSelectable is not supported when the menu is in "basic" mode.') : void 0;
-  }
   const [checked, setChecked] = useControllableState.useControllableState({
     value: selected,
     onChange,
@@ -255,13 +252,13 @@ const MenuItemSelectable = /*#__PURE__*/React.forwardRef(function MenuItemSelect
     setChecked(!checked);
   }
   React.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__default["default"](className, `${prefix}--menu-item-selectable--selected`);
   return /*#__PURE__*/React__default["default"].createElement(MenuItem, _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: forwardRef,
@@ -269,7 +266,6 @@ const MenuItemSelectable = /*#__PURE__*/React.forwardRef(function MenuItemSelect
     className: classNames,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    renderIcon: checked ? iconsReact.Checkmark : undefined,
     onClick: handleClick
   }));
 });
@@ -344,9 +340,6 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
   } = _ref4;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
-  if (context.state.mode === 'basic') {
-    process.env.NODE_ENV !== "production" ? warning.warning(false, 'MenuItemRadioGroup is not supported when the menu is in "basic" mode.') : void 0;
-  }
   const [selection, setSelection] = useControllableState.useControllableState({
     value: selectedItem,
     onChange,
@@ -356,13 +349,13 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
     setSelection(item);
   }
   React.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__default["default"](className, `${prefix}--menu-item-radio-group`);
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: classNames,
@@ -376,7 +369,6 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
     label: itemToString(item),
     role: "menuitemradio",
     "aria-checked": item === selection,
-    renderIcon: item === selection ? iconsReact.Checkmark : undefined,
     onClick: e => {
       handleClick(item);
     }

package/lib/components/MenuButton/index.js

@@ -83,6 +83,15 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
     // “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: react.autoUpdate
@@ -97,7 +106,11 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
   React.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]);
@@ -136,7 +149,6 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
     id: id,
     legacyAutoalign: false,
     label: label,
-    mode: "basic",
     size: size,
     open: open,
     onClose: handleClose,

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

@@ -32,8 +32,8 @@ var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -200,7 +200,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   React.useEffect(() => {
     if (!open && launcherButtonRef) {
       setTimeout(() => {
-        launcherButtonRef?.current?.focus();
+        if ('current' in launcherButtonRef) {
+          launcherButtonRef.current?.focus();
+        }
       });
     }
   }, [open, launcherButtonRef]);
@@ -383,7 +385,11 @@ Modal.propTypes = {
    * Provide a ref to return focus to once the modal is closed.
    */
   launcherButtonRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any
+    current: PropTypes__default["default"].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__default["default"].instanceOf(HTMLButtonElement) : PropTypes__default["default"].any, PropTypes__default["default"].oneOf([null])]).isRequired
   })]),
   /**
    * Specify the description for the loading text

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

@@ -435,11 +435,12 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   const menuProps = React.useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
   }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
+  const labelProps = ! /*#__PURE__*/React.isValidElement(titleText) ? getLabelProps() : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, labelProps), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: isFluid ? handleFocus : undefined,

package/lib/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/lib/components/MultiSelect/tools/sorting.js

@@ -10,14 +10,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * 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/lib/components/Notification/Notification.js

@@ -27,8 +27,8 @@ var wrapFocus = require('../../internal/wrapFocus.js');
 var index = require('../FeatureFlags/index.js');
 var warning = require('../../internal/warning.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -740,11 +740,9 @@ function Callout(_ref8) {
     [`${prefix}--actionable-notification--${kind}`]: kind,
     [`${prefix}--actionable-notification--hide-close-button`]: true
   });
-  const ref = React.useRef(null);
-  useNoInteractiveChildren.useInteractiveChildrenNeedDescription(ref, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    ref: ref
-  }, rest, {
+  const childrenContainer = React.useRef(null);
+  useNoInteractiveChildren.useInteractiveChildrenNeedDescription(childrenContainer, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClassName
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--actionable-notification__details`
@@ -753,6 +751,7 @@ function Callout(_ref8) {
     kind: kind,
     iconDescription: statusIconDescription || `${kind} icon`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: childrenContainer,
     className: `${prefix}--actionable-notification__text-wrapper`
   }, title && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",

package/lib/components/NumberInput/NumberInput.js

@@ -173,20 +173,20 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     [`${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) {
@@ -196,7 +196,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
         onClick(event, state);
       }
     }
-  }
+  };
 
   // AILabel always size `mini`
   let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;

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

@@ -64,13 +64,6 @@ const triggerButtonPositionFactors = {
   [FloatingMenu.DIRECTION_TOP]: -2,
   [FloatingMenu.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];
@@ -92,6 +85,11 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
           top: 0
         };
       }
+    default:
+      return {
+        left: 0,
+        top: 0
+      };
   }
 };
 class OverflowMenu extends React__default["default"].Component {
@@ -117,7 +115,7 @@ class OverflowMenu extends React__default["default"].Component {
     _rollupPluginBabelHelpers.defineProperty(this, "_hBlurTimeout", void 0);
     /**
      * The element ref of the tooltip's trigger button.
-     * @type {React.RefObject<Element>}
+     * @type {React.RefObject<HTMLElement>}
      * @private
      */
     _rollupPluginBabelHelpers.defineProperty(this, "_triggerRef", /*#__PURE__*/React__default["default"].createRef());
@@ -374,7 +372,7 @@ class OverflowMenu extends React__default["default"].Component {
       onKeyDown: this.handleKeyPress,
       id: menuBodyId
     }, childrenWithProps);
-    const wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu["default"], {
+    const wrappedMenuBody = /*#__PURE__*/React__default["default"].createElement(FloatingMenu.FloatingMenu, {
       focusTrap: focusTrap,
       triggerRef: this._triggerRef,
       menuDirection: direction,

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -16,8 +16,8 @@ var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
 require('../Text/index.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -16,8 +16,8 @@ var React = require('react');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/RadioTile/RadioTile.js

@@ -20,8 +20,8 @@ var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/Select/Select.js

@@ -59,8 +59,16 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     isFluid
   } = React.useContext(FormContext.FormContext);
   const [isFocused, setIsFocused] = React.useState(false);
-  const [title, setTitle] = React.useState('');
   const selectInstanceId = useId.useId();
+  // Convert children to an array of valid elements once using type narrowing
+  const validChildren = React__default["default"].Children.toArray(children).filter(child => /*#__PURE__*/React__default["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] = React.useState(initialTitle);
   const selectClasses = cx__default["default"]({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,
@@ -115,7 +123,8 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     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/lib/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;