@carbon/react 1.77.0-rc.0 → 1.78.0-rc.0

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/Pagination/Pagination.js

@@ -13,10 +13,10 @@ import React__default, { useRef, useState } from 'react';
 import Select from '../Select/Select.js';
 import '../Select/Select.Skeleton.js';
 import SelectItem from '../SelectItem/SelectItem.js';
-import { equals } from '../../tools/array.js';
 import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { IconButton } from '../IconButton/index.js';
+import isEqual from 'react-fast-compare';
 
 var _CaretLeft, _CaretRight;
 function mapPageSizesToObject(sizes) {
@@ -117,7 +117,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     setPageSize(getPageSize(pageSizes, controlledPageSize));
     setPrevControlledPageSize(controlledPageSize);
   }
-  if (!equals(controlledPageSizes, prevPageSizes)) {
+  if (!isEqual(controlledPageSizes, prevPageSizes)) {
     const pageSizes = mapPageSizesToObject(controlledPageSizes);
     const hasPageSize = pageSizes.find(size => {
       return size.value === pageSize;

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;

package/es/components/ShapeIndicator/index.js

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { Critical, CriticalSeverity, Caution, DiamondFill, LowSeverity, CircleFill, CircleStroke } from '@carbon/icons-react';
+
+var _path;
+const ShapeIndicatorKinds = ['failed', 'critical', 'high', 'medium', 'low', 'cautious', 'undefined', 'stable', 'informative', 'incomplete', 'draft'];
+
+// TODO: update to import '@carbon/icons-react'
+const incompleteIcon = props => /*#__PURE__*/React__default.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  fill: "none",
+  "aria-hidden": "true"
+}, props), /*#__PURE__*/React__default.createElement("path", {
+  fill: "#fff",
+  fillOpacity: 0.01,
+  d: "M0 0h16v16H0z",
+  style: {
+    mixBlendMode: 'multiply'
+  }
+}), _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+  fill: "#161616",
+  d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a4.004 4.004 0 0 1 4 4H4a4.004 4.004 0 0 1 4-4Z"
+})));
+const shapeTypes = {
+  failed: Critical,
+  critical: CriticalSeverity,
+  high: Caution,
+  medium: DiamondFill,
+  low: LowSeverity,
+  cautious: Caution,
+  undefined: DiamondFill,
+  stable: CircleFill,
+  informative: LowSeverity,
+  incomplete: incompleteIcon,
+  draft: CircleStroke
+};
+const ShapeIndicator = /*#__PURE__*/React__default.forwardRef(function ShapeIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    kind,
+    label,
+    textSize = 12,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--shape-indicator`, customClassName, {
+    [`${prefix}--shape-indicator--14`]: textSize == 14
+  });
+  const ShapeForKind = shapeTypes[kind];
+  if (!ShapeForKind) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames,
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement(ShapeForKind, {
+    size: 16,
+    className: `${prefix}--shape-indicator--${kind}`
+  }), label);
+});
+ShapeIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the kind of the Shape Indicator
+   */
+  kind: PropTypes.oneOf(ShapeIndicatorKinds).isRequired,
+  /**
+   * Label next to the shape.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Specify the text size of the Shape Indicator. Defaults to 12.
+   */
+  textSize: PropTypes.oneOf([12, 14])
+};
+
+export { ShapeIndicator, ShapeIndicatorKinds, ShapeIndicator as default };

package/es/components/Tabs/Tabs.d.ts

@@ -353,10 +353,11 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
     secondaryLabel?: string;
 }
 declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
-/**
- * IconTab
- */
 export interface IconTabProps extends DivAttributes {
+    /**
+     * **Experimental**: Display an empty dot badge on the Tab.
+     */
+    badgeIndicator?: boolean;
     /**
      * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
      */
@@ -377,7 +378,8 @@ export interface IconTabProps extends DivAttributes {
      * Provide the label to be rendered inside the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
      * This means that if you have text in the child node it will not be
-     * announced to the screen reader.
+     * announced to the screen reader. If using the badgeIndicator then provide a
+     * label with describing that there is a new notification.
      */
     label: ReactNode;
     /**

package/es/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, forwardRef, createContext, useMemo } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -32,12 +32,13 @@ import deprecate from '../../prop-types/deprecate.js';
 import { useEvent } from '../../internal/useEvent.js';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import '../Text/index.js';
+import { BadgeIndicator } from '../BadgeIndicator/index.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
-import { Text } from '../Text/Text.js';
 import { matches, match } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp, Delete } from '../../internal/keyboard/keys.js';
 
-var _ChevronLeft, _ChevronRight;
+var _ChevronLeft, _ChevronRight, _BadgeIndicator;
 const verticalTabHeight = 64;
 
 // Used to manage the overall state of the Tabs
@@ -798,6 +799,9 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
     hasSecondaryLabel,
     contained
   } = React__default.useContext(TabContext);
+  const {
+    badgeIndicator
+  } = React__default.useContext(IconTabContext) || {};
   const dismissIconRef = useRef(null);
   const tabRef = useRef(null);
   const ref = useMergedRefs([forwardRef, tabRef]);
@@ -975,7 +979,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
     as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
-  }, secondaryLabel)), DismissIcon);
+  }, secondaryLabel), !disabled && badgeIndicator && (_BadgeIndicator || (_BadgeIndicator = /*#__PURE__*/React__default.createElement(BadgeIndicator, null)))), DismissIcon);
 });
 Tab.propTypes = {
   /**
@@ -1026,8 +1030,10 @@ Tab.propTypes = {
  * IconTab
  */
 
+const IconTabContext = /*#__PURE__*/createContext(false);
 const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11, ref) {
   let {
+    badgeIndicator,
     children,
     className: customClassName,
     defaultOpen = false,
@@ -1037,8 +1043,16 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11,
     ...rest
   } = _ref11;
   const prefix = usePrefix();
-  const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName);
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
+  const value = useMemo(() => ({
+    badgeIndicator
+  }), [badgeIndicator]);
+  const hasSize20 = /*#__PURE__*/React__default.isValidElement(children) && children.props?.size === 20;
+  const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName, {
+    [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20
+  });
+  return /*#__PURE__*/React__default.createElement(IconTabContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
     className: `${prefix}--icon-tooltip`,
@@ -1048,9 +1062,13 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11,
   }, /*#__PURE__*/React__default.createElement(Tab, _extends({
     className: classNames,
     ref: ref
-  }, rest), children));
+  }, rest), children)));
 });
 IconTab.propTypes = {
+  /**
+   * **Experimental**: Display an empty dot badge on the Tab.
+   */
+  badgeIndicator: PropTypes.bool,
   /**
    * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
    */
@@ -1071,7 +1089,8 @@ IconTab.propTypes = {
    * Provide the label to be rendered inside the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
    * This means that if you have text in the child node it will not be
-   * announced to the screen reader.
+   * announced to the screen reader. If using the badgeIndicator then provide a
+   * label with describing that there is a new notification.
    */
   label: PropTypes.node.isRequired,
   /**

package/es/components/Tag/OperationalTag.d.ts

@@ -4,7 +4,6 @@
  * 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 PropTypes from 'prop-types';
 import React, { MouseEventHandler } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
@@ -54,40 +53,6 @@ export interface OperationalTagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
-declare const OperationalTag: {
-    <T extends React.ElementType>({ className, disabled, id, renderIcon, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Provide a custom className that is applied to the containing <span>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the `OperationalTag` is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Specify the id for the tag.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * Optional prop to render a custom icon.
-         * Can be a React component class
-         */
-        renderIcon: PropTypes.Requireable<object>;
-        /**
-         * Specify the size of the Tag. Currently supports either `sm`,
-         * `md` (default) or `lg` sizes.
-         */
-        size: PropTypes.Requireable<string>;
-        /**
-         * Provide text to be rendered inside of a the tag.
-         */
-        text: PropTypes.Requireable<string>;
-        /**
-         * Specify the type of the `Tag`
-         */
-        type: PropTypes.Requireable<string>;
-    };
-};
+declare const OperationalTag: React.ForwardRefExoticComponent<Omit<OperationalTagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export declare const types: string[];
 export default OperationalTag;

package/es/components/Tag/OperationalTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -16,6 +16,7 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 import { Text } from '../Text/Text.js';
 
 const TYPES = {
@@ -30,7 +31,7 @@ const TYPES = {
   'cool-gray': 'Cool-Gray',
   'warm-gray': 'Warm-Gray'
 };
-const OperationalTag = _ref => {
+const OperationalTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
   let {
     className,
     disabled,
@@ -51,6 +52,7 @@ const OperationalTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+  const combinedRef = mergeRefs(tagRef, forwardRef);
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       label: text,
@@ -60,7 +62,7 @@ const OperationalTag = _ref => {
       onMouseEnter: () => false,
       closeOnActivation: true
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
-      ref: tagRef,
+      ref: combinedRef,
       type: type,
       size: size,
       renderIcon: renderIcon,
@@ -73,7 +75,7 @@ const OperationalTag = _ref => {
     }, text)));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
-    ref: tagRef,
+    ref: combinedRef,
     type: type,
     size: size,
     renderIcon: renderIcon,
@@ -84,7 +86,7 @@ const OperationalTag = _ref => {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
-};
+});
 OperationalTag.propTypes = {
   /**
    * Provide a custom className that is applied to the containing <span>

package/es/components/Text/Text.d.ts

@@ -1,17 +1,19 @@
 /**
- * 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 { TextDir } from './TextDirection';
-import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
+import { type ElementType, type ReactElement, type ReactNode } from 'react';
+import { PolymorphicComponentPropWithRef, PolymorphicRef } from '../../internal/PolymorphicProps';
+import { type TextDir } from '.';
 export interface TextBaseProps {
-    dir?: TextDir | undefined;
+    dir?: TextDir;
     children?: ReactNode;
 }
-export type TextProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TextBaseProps>;
-type TextComponent = <T extends React.ElementType = 'span'>(props: TextProps<T>) => React.ReactElement | any;
-declare const Text: TextComponent;
-export { Text };
+export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, TextBaseProps>;
+type TextComponent = <T extends ElementType = 'span'>(props: TextProps<T> & {
+    ref?: PolymorphicRef<T>;
+}) => ReactElement | null;
+export declare const Text: TextComponent;
+export {};

package/es/components/Text/Text.js

@@ -7,17 +7,17 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext } from 'react';
+import React__default, { forwardRef, useContext, Children } from 'react';
+import './index.js';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
-const Text = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const Text = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     as,
     children,
     dir = 'auto',
     ...rest
   } = _ref;
-  // TODO: Update with context typing once its been converted to TS
   const context = useContext(TextDirectionContext);
   const textProps = {};
   const BaseComponent = as ?? 'span';
@@ -69,11 +69,11 @@ Text.propTypes = {
    */
   dir: PropTypes.oneOf(['ltr', 'rtl', 'auto'])
 };
-function getTextFromChildren(children) {
+const getTextFromChildren = children => {
   if (typeof children === 'string') {
     return children;
   }
-  const text = React__default.Children.map(children, child => {
+  const text = Children.map(children, child => {
     if (typeof child === 'string') {
       return child;
     }
@@ -85,6 +85,6 @@ function getTextFromChildren(children) {
     return text[0];
   }
   return text;
-}
+};
 
 export { Text };

package/es/components/Text/TextDirection.d.ts

@@ -1,21 +1,20 @@
 /**
- * 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 PropTypes from 'prop-types';
 import { ReactNode } from 'react';
-export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
-export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
+import { type GetTextDirection, type TextDir } from '.';
 export interface TextDirectionProps {
-    children: ReactNode | undefined;
+    children: ReactNode;
     dir?: TextDir;
     getTextDirection?: GetTextDirection;
 }
-declare function TextDirection({ children, dir, getTextDirection, }: TextDirectionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TextDirection {
-    var propTypes: {
+export declare const TextDirection: {
+    ({ children, dir, getTextDirection, }: TextDirectionProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
         /**
          * Provide children to be rendered inside of this component
          */
@@ -31,5 +30,4 @@ declare namespace TextDirection {
          */
         getTextDirection: PropTypes.Requireable<(...args: any[]) => any>;
     };
-}
-export { TextDirection };
+};