@carbon/react 1.77.0 → 1.78.0

package/lib/components/ShapeIndicator/index.js

@@ -0,0 +1,104 @@
+/**
+ * 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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+var iconsReact = require('@carbon/icons-react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+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["default"].createElement("svg", _rollupPluginBabelHelpers["extends"]({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  fill: "none",
+  "aria-hidden": "true"
+}, props), /*#__PURE__*/React__default["default"].createElement("path", {
+  fill: "#fff",
+  fillOpacity: 0.01,
+  d: "M0 0h16v16H0z",
+  style: {
+    mixBlendMode: 'multiply'
+  }
+}), _path || (_path = /*#__PURE__*/React__default["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: iconsReact.Critical,
+  critical: iconsReact.CriticalSeverity,
+  high: iconsReact.Caution,
+  medium: iconsReact.DiamondFill,
+  low: iconsReact.LowSeverity,
+  cautious: iconsReact.Caution,
+  undefined: iconsReact.DiamondFill,
+  stable: iconsReact.CircleFill,
+  informative: iconsReact.LowSeverity,
+  incomplete: incompleteIcon,
+  draft: iconsReact.CircleStroke
+};
+const ShapeIndicator = /*#__PURE__*/React__default["default"].forwardRef(function ShapeIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    kind,
+    label,
+    textSize = 12,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--shape-indicator`, customClassName, {
+    [`${prefix}--shape-indicator--14`]: textSize == 14
+  });
+  const ShapeForKind = shapeTypes[kind];
+  if (!ShapeForKind) {
+    return null;
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames,
+    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement(ShapeForKind, {
+    size: 16,
+    className: `${prefix}--shape-indicator--${kind}`
+  }), label);
+});
+ShapeIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify the kind of the Shape Indicator
+   */
+  kind: PropTypes__default["default"].oneOf(ShapeIndicatorKinds).isRequired,
+  /**
+   * Label next to the shape.
+   */
+  label: PropTypes__default["default"].string.isRequired,
+  /**
+   * Specify the text size of the Shape Indicator. Defaults to 12.
+   */
+  textSize: PropTypes__default["default"].oneOf([12, 14])
+};
+
+exports.ShapeIndicator = ShapeIndicator;
+exports.ShapeIndicatorKinds = ShapeIndicatorKinds;
+exports["default"] = ShapeIndicator;

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

@@ -36,9 +36,10 @@ var deprecate = require('../../prop-types/deprecate.js');
 var useEvent = require('../../internal/useEvent.js');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
 require('../Text/index.js');
+var index = require('../BadgeIndicator/index.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 }; }
@@ -47,7 +48,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _ChevronLeft, _ChevronRight;
+var _ChevronLeft, _ChevronRight, _BadgeIndicator;
 const verticalTabHeight = 64;
 
 // Used to manage the overall state of the Tabs
@@ -804,23 +805,26 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
     onTabCloseRequest
   } = React__default["default"].useContext(TabsContext);
   const {
-    index,
+    index: index$1,
     hasSecondaryLabel,
     contained
   } = React__default["default"].useContext(TabContext);
+  const {
+    badgeIndicator
+  } = React__default["default"].useContext(IconTabContext) || {};
   const dismissIconRef = React.useRef(null);
   const tabRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, tabRef]);
   const [ignoreHover, setIgnoreHover] = React.useState(false);
-  const id = `${baseId}-tab-${index}`;
-  const panelId = `${baseId}-tabpanel-${index}`;
+  const id = `${baseId}-tab-${index$1}`;
+  const panelId = `${baseId}-tabpanel-${index$1}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
     return element.offsetHeight < element.scrollHeight;
   };
   const className = cx__default["default"](`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, {
-    [`${prefix}--tabs__nav-item--selected`]: selectedIndex === index,
+    [`${prefix}--tabs__nav-item--selected`]: selectedIndex === index$1,
     [`${prefix}--tabs__nav-item--disabled`]: disabled,
     [`${prefix}--tabs__nav-item--hover-off`]: ignoreHover
   }, customClassName);
@@ -856,7 +860,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
   }, [prefix, id]);
   const handleClose = evt => {
     evt.stopPropagation();
-    onTabCloseRequest?.(index);
+    onTabCloseRequest?.(index$1);
 
     // set focus after removing tab
     if (tabRef.current && tabRef.current.parentElement) {
@@ -867,7 +871,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
       }).length;
 
       // if not removing last tab focus on next tab
-      if (tabRef.current && index + 1 !== tabCount) {
+      if (tabRef.current && index$1 + 1 !== tabCount) {
         tabRef.current.focus();
       }
       // if removing last tab focus on previous tab
@@ -890,21 +894,21 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
     })
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    tabIndex: selectedIndex === index && dismissable ? 0 : -1,
+    tabIndex: selectedIndex === index$1 && dismissable ? 0 : -1,
     "aria-disabled": disabled,
-    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    "aria-hidden": selectedIndex === index$1 && dismissable ? 'false' : 'true',
     disabled: disabled,
     className: cx__default["default"]({
       [`${prefix}--tabs__nav-item--close-icon`]: dismissable,
       [`${prefix}--visually-hidden`]: !dismissable,
-      [`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index,
+      [`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index$1,
       [`${prefix}--tabs__nav-item--close-icon--disabled`]: disabled
     }),
     onClick: handleClose,
     title: `Remove ${typeof children === 'string' ? children : ''} tab`,
     ref: dismissIconRef
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
-    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    "aria-hidden": selectedIndex === index$1 && dismissable ? 'false' : 'true',
     "aria-label": `Press delete to remove ${typeof children === 'string' ? children : ''} tab`
   })));
   const hasIcon = Icon ?? dismissable;
@@ -921,7 +925,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
     }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
       "aria-controls": panelId,
       "aria-disabled": disabled,
-      "aria-selected": selectedIndex === index,
+      "aria-selected": selectedIndex === index$1,
       ref: ref,
       id: id,
       role: "tab",
@@ -932,11 +936,11 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
         if (disabled) {
           return;
         }
-        setSelectedIndex(index);
+        setSelectedIndex(index$1);
         onClick?.(evt);
       },
       onKeyDown: handleKeyDown,
-      tabIndex: selectedIndex === index ? '0' : '-1',
+      tabIndex: selectedIndex === index$1 ? '0' : '-1',
       type: "button"
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tabs__nav-item-label-wrapper`
@@ -951,7 +955,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
-    "aria-selected": selectedIndex === index,
+    "aria-selected": selectedIndex === index$1,
     ref: ref,
     id: id,
     role: "tab",
@@ -961,11 +965,11 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref10, forwardRef) {
       if (disabled) {
         return;
       }
-      setSelectedIndex(index);
+      setSelectedIndex(index$1);
       onClick?.(evt);
     },
     onKeyDown: handleKeyDown,
-    tabIndex: selectedIndex === index ? '0' : '-1',
+    tabIndex: selectedIndex === index$1 ? '0' : '-1',
     type: "button"
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tabs__nav-item-label-wrapper`
@@ -985,7 +989,7 @@ const Tab = /*#__PURE__*/React.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["default"].createElement(index.BadgeIndicator, null)))), DismissIcon);
 });
 Tab.propTypes = {
   /**
@@ -1036,8 +1040,10 @@ Tab.propTypes = {
  * IconTab
  */
 
+const IconTabContext = /*#__PURE__*/React.createContext(false);
 const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref11, ref) {
   let {
+    badgeIndicator,
     children,
     className: customClassName,
     defaultOpen = false,
@@ -1047,8 +1053,16 @@ const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconT
     ...rest
   } = _ref11;
   const prefix = usePrefix.usePrefix();
-  const classNames = cx__default["default"](`${prefix}--tabs__nav-item--icon-only`, customClassName);
-  return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+  const value = React.useMemo(() => ({
+    badgeIndicator
+  }), [badgeIndicator]);
+  const hasSize20 = /*#__PURE__*/React__default["default"].isValidElement(children) && children.props?.size === 20;
+  const classNames = cx__default["default"](`${prefix}--tabs__nav-item--icon-only`, customClassName, {
+    [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20
+  });
+  return /*#__PURE__*/React__default["default"].createElement(IconTabContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
     className: `${prefix}--icon-tooltip`,
@@ -1058,9 +1072,13 @@ const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconT
   }, /*#__PURE__*/React__default["default"].createElement(Tab, _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, rest), children));
+  }, rest), children)));
 });
 IconTab.propTypes = {
+  /**
+   * **Experimental**: Display an empty dot badge on the Tab.
+   */
+  badgeIndicator: PropTypes__default["default"].bool,
   /**
    * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
    */
@@ -1081,7 +1099,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__default["default"].node.isRequired,
   /**

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

@@ -20,6 +20,7 @@ require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
 var isEllipsisActive = require('./isEllipsisActive.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -40,7 +41,7 @@ const TYPES = {
   'cool-gray': 'Cool-Gray',
   'warm-gray': 'Warm-Gray'
 };
-const OperationalTag = _ref => {
+const OperationalTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     className,
     disabled,
@@ -61,6 +62,7 @@ const OperationalTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx__default["default"](`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+  const combinedRef = mergeRefs["default"](tagRef, forwardRef);
   if (isEllipsisApplied) {
     return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
       label: text,
@@ -70,7 +72,7 @@ const OperationalTag = _ref => {
       onMouseEnter: () => false,
       closeOnActivation: true
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
-      ref: tagRef,
+      ref: combinedRef,
       type: type,
       size: size,
       renderIcon: renderIcon,
@@ -83,7 +85,7 @@ const OperationalTag = _ref => {
     }, text)));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
-    ref: tagRef,
+    ref: combinedRef,
     type: type,
     size: size,
     renderIcon: renderIcon,
@@ -94,7 +96,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/lib/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/lib/components/Text/Text.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
+require('./index.js');
 var TextDirectionContext = require('./TextDirectionContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -19,14 +20,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Text = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+const Text = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     as,
     children,
     dir = 'auto',
     ...rest
   } = _ref;
-  // TODO: Update with context typing once its been converted to TS
   const context = React.useContext(TextDirectionContext.TextDirectionContext);
   const textProps = {};
   const BaseComponent = as ?? 'span';
@@ -78,11 +78,11 @@ Text.propTypes = {
    */
   dir: PropTypes__default["default"].oneOf(['ltr', 'rtl', 'auto'])
 };
-function getTextFromChildren(children) {
+const getTextFromChildren = children => {
   if (typeof children === 'string') {
     return children;
   }
-  const text = React__default["default"].Children.map(children, child => {
+  const text = React.Children.map(children, child => {
     if (typeof child === 'string') {
       return child;
     }
@@ -94,6 +94,6 @@ function getTextFromChildren(children) {
     return text[0];
   }
   return text;
-}
+};
 
 exports.Text = Text;

package/lib/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 };
+};

package/lib/components/Text/TextDirection.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var PropTypes = require('prop-types');
 var React = require('react');
+require('./index.js');
 var TextDirectionContext = require('./TextDirectionContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -18,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function TextDirection(_ref) {
+const TextDirection = _ref => {
   let {
     children,
     dir = 'auto',
@@ -33,11 +34,13 @@ function TextDirection(_ref) {
   }, [dir]);
   React.useEffect(() => {
     savedCallback.current = getTextDirection;
+    // TODO: Is this `useEffect` supposed to have a dependency on
+    // `getTextDirection`?
   });
   return /*#__PURE__*/React__default["default"].createElement(TextDirectionContext.TextDirectionContext.Provider, {
     value: value
   }, children);
-}
+};
 TextDirection.propTypes = {
   /**
    * Provide children to be rendered inside of this component

package/lib/components/Text/TextDirectionContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 MutableRefObject } from 'react';
+export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
+export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
+export interface TextDirectionContextType {
+    direction: TextDir;
+    getTextDirection: MutableRefObject<GetTextDirection | undefined>;
+}
+export declare const TextDirectionContext: import("react").Context<TextDirectionContextType>;

package/lib/components/Text/TextDirectionContext.js

@@ -11,7 +11,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-/** @type any */
-const TextDirectionContext = /*#__PURE__*/React.createContext(null);
+const TextDirectionContext = /*#__PURE__*/React.createContext({
+  direction: 'auto',
+  getTextDirection: {
+    current: undefined
+  }
+});
 
 exports.TextDirectionContext = TextDirectionContext;

package/lib/components/Text/createTextComponent.d.ts

@@ -1,18 +1,18 @@
 /**
- * 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 from 'react';
-import { TextProps } from './Text';
+import { type ElementType } from 'react';
+import { TextProps } from '.';
 /**
  * Create a text component wrapper for a given text node type. Useful for
  * returning a `Text` component for a text node like a `<label>`.
  * @param {string} element
  * @param {string} displayName
  */
-export declare function createTextComponent(element: React.ElementType, displayName: string): {
-    (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
+export declare const createTextComponent: (element: ElementType, displayName: string) => {
+    (props: TextProps<ElementType>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/components/Text/createTextComponent.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+require('./index.js');
 var Text = require('./Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -23,16 +24,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @param {string} element
  * @param {string} displayName
  */
-function createTextComponent(element, displayName) {
-  function TextWrapper(props) {
+const createTextComponent = (element, displayName) => {
+  const TextWrapper = props => {
     return /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
       as: element
     }, props));
-  }
+  };
   if (process.env.NODE_ENV !== "production") {
     TextWrapper.displayName = displayName;
   }
   return TextWrapper;
-}
+};
 
 exports.createTextComponent = createTextComponent;