refactor(TextDirectionContext): rewrite in typescript (#18752)

Author: adamalston

packages/react/src/components/Text/Text.stories.js

@@ -77,6 +77,7 @@ export const SetTextDirection = () => {
         }
         return 'auto';
       }}>
+      {/* // TODO: These radio buttons don't work. */}
       <RadioButtonGroup
         legendText={legendText}
         name="radio-button-group"
@@ -123,6 +124,7 @@ export const UsageExamples = () => {
         <Text>{rtlText}</Text>
       </Button>
       <div style={{ width: 400 }}>
+        {/* // TODO: This dropdown doesn't work. */}
         <Dropdown
           id="default"
           titleText="Using <Text> with `itemToElement`"

packages/react/src/components/Text/Text.tsx

@@ -1,38 +1,46 @@
 /**
- * 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 React, { ReactNode, useContext } from 'react';
-import { TextDir } from './TextDirection';
-import { TextDirectionContext } from './TextDirectionContext';
+import React, {
+  Children,
+  forwardRef,
+  useContext,
+  type ElementType,
+  type FC,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
 import {
   PolymorphicComponentPropWithRef,
   PolymorphicRef,
 } from '../../internal/PolymorphicProps';
+import { TextDirectionContext, type TextDir } from '.';
 
 export interface TextBaseProps {
-  dir?: TextDir | undefined;
+  dir?: TextDir;
   children?: ReactNode;
 }
 
-export type TextProps<T extends React.ElementType> =
-  PolymorphicComponentPropWithRef<T, TextBaseProps>;
+export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<
+  T,
+  TextBaseProps
+>;
 
-type TextComponent = <T extends React.ElementType = 'span'>(
-  props: TextProps<T>
-) => React.ReactElement | any;
+type TextComponent = <T extends ElementType = 'span'>(
+  props: TextProps<T> & { ref?: PolymorphicRef<T> }
+) => ReactElement | null;
 
-const Text: TextComponent = React.forwardRef(
-  <T extends React.ElementType = 'span'>(
+export const Text = forwardRef(
+  <T extends ElementType = 'span'>(
     { as, children, dir = 'auto', ...rest }: TextProps<T>,
     ref?: PolymorphicRef<T>
   ) => {
-    // TODO: Update with context typing once its been converted to TS
-    const context = useContext<any>(TextDirectionContext);
+    const context = useContext(TextDirectionContext);
     const textProps: { dir?: TextDir } = {};
     const BaseComponent = as ?? 'span';
     const value = {
@@ -71,9 +79,9 @@ const Text: TextComponent = React.forwardRef(
       </TextDirectionContext.Provider>
     );
   }
-);
+) as TextComponent;
 
-(Text as React.FC).propTypes = {
+(Text as FC).propTypes = {
   /**
    * Provide a custom element type used to render the outermost node
    */
@@ -95,12 +103,12 @@ const Text: TextComponent = React.forwardRef(
   dir: PropTypes.oneOf(['ltr', 'rtl', 'auto']),
 };
 
-function getTextFromChildren(children: ReactNode) {
+const getTextFromChildren = (children: ReactNode) => {
   if (typeof children === 'string') {
     return children;
   }
 
-  const text = React.Children.map(children, (child) => {
+  const text = Children.map(children, (child) => {
     if (typeof child === 'string') {
       return child;
     }
@@ -114,6 +122,4 @@ function getTextFromChildren(children: ReactNode) {
   }
 
   return text;
-}
-
-export { Text };
+};

packages/react/src/components/Text/TextDirection.tsx

@@ -1,30 +1,32 @@
 /**
- * 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 React, { ReactNode, useEffect, useMemo, useRef } from 'react';
-import { TextDirectionContext } from './TextDirectionContext';
-
-export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
-export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
+import {
+  TextDirectionContext,
+  type GetTextDirection,
+  type TextDir,
+  type TextDirectionContextType,
+} from '.';
 
 export interface TextDirectionProps {
-  children: ReactNode | undefined;
+  children: ReactNode;
   dir?: TextDir;
   getTextDirection?: GetTextDirection;
 }
 
-function TextDirection({
+export const TextDirection = ({
   children,
   dir = 'auto',
   getTextDirection,
-}: TextDirectionProps) {
+}: TextDirectionProps) => {
   const savedCallback = useRef(getTextDirection);
-  const value = useMemo(() => {
+  const value = useMemo<TextDirectionContextType>(() => {
     return {
       direction: dir,
       getTextDirection: savedCallback,
@@ -33,14 +35,16 @@ function TextDirection({
 
   useEffect(() => {
     savedCallback.current = getTextDirection;
+    // TODO: Is this `useEffect` supposed to have a dependency on
+    // `getTextDirection`?
   });
 
   return (
     <TextDirectionContext.Provider value={value}>
       {children}
     </TextDirectionContext.Provider>
   );
-}
+};
 
 TextDirection.propTypes = {
   /**
@@ -60,5 +64,3 @@ TextDirection.propTypes = {
    */
   getTextDirection: PropTypes.func,
 };
-
-export { TextDirection };

packages/react/src/components/Text/TextDirectionContext.js

@@ -0,0 +1,22 @@
+/**
+ * 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 { createContext, 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 const TextDirectionContext = createContext<TextDirectionContextType>({
+  direction: 'auto',
+  getTextDirection: { current: undefined },
+});

packages/react/src/components/Text/TextDirectionContext.ts

@@ -1,30 +1,30 @@
 /**
- * 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 { Text, TextProps } from './Text';
+import React, { type ElementType } from 'react';
+import { Text, 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 function createTextComponent(
-  element: React.ElementType,
+export const createTextComponent = (
+  element: ElementType,
   displayName: string
-) {
-  function TextWrapper(props: TextProps<React.ElementType>) {
+) => {
+  const TextWrapper = (props: TextProps<ElementType>) => {
     return <Text as={element} {...props} />;
-  }
+  };
 
   if (__DEV__) {
     TextWrapper.displayName = displayName;
   }
 
   return TextWrapper;
-}
+};

packages/react/src/components/Text/createTextComponent.tsx

@@ -1,27 +1,15 @@
 /**
- * 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 {
-  TextDirection,
-  TextDirectionProps,
-  GetTextDirection,
-  TextDir,
-} from './TextDirection';
-import { Text, TextBaseProps, TextProps } from './Text';
 import { createTextComponent } from './createTextComponent';
 
-export { TextDirection, Text };
-export type {
-  TextBaseProps,
-  TextProps,
-  TextDirectionProps,
-  GetTextDirection,
-  TextDir,
-};
+export * from './Text';
+export * from './TextDirection';
+export * from './TextDirectionContext';
 
 export const Label = createTextComponent('label', 'Label');
 export const Legend = createTextComponent('legend', 'Legend');