Building Strongly Typed Polymorphic Components

packages/react/src/components/ListItem/ListItem.tsx

@@ -11,7 +11,7 @@ import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { Text } from '../Text';
 
-type ListItemProps = ComponentProps<'li'>;
+type ListItemProps = Omit<ComponentProps<'li'>, 'ref'>;
 
 export default function ListItem({
   className,

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

@@ -6,66 +6,74 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { ReactNode, useContext, useRef } from 'react';
-import { PolymorphicProps } from '../../types/common';
+import React, { ReactNode, useContext } from 'react';
 import { TextDir } from './TextDirection';
 import { TextDirectionContext } from './TextDirectionContext';
-import { useMergeRefs } from '@floating-ui/react';
+import {
+  PolymorphicComponentPropWithRef,
+  PolymorphicRef,
+} from '../../internal/PolymorphicProps';
 
 export interface TextBaseProps {
   dir?: TextDir | undefined;
+  children?: ReactNode;
 }
 
-export type TextProps<T extends React.ElementType> = PolymorphicProps<
-  T,
-  TextBaseProps
->;
-const Text = React.forwardRef(function Text<T extends React.ElementType>(
-  { as, children, dir = 'auto', ...rest }: TextProps<T>,
-  ref: React.Ref<HTMLElement>
-) {
-  // TODO: Update with context typing once its been converted to TS
-  const context = useContext<any>(TextDirectionContext);
-  const textProps: { dir?: TextDir } = {};
-  const BaseComponent = as ?? 'span';
-  const value = {
-    ...context,
-  };
-
-  if (!context) {
-    textProps.dir = dir;
-    value.direction = dir;
-  } else {
-    const { direction: parentDirection, getTextDirection } = context;
-
-    if (getTextDirection && getTextDirection.current) {
-      const text = getTextFromChildren(children);
-      const override = getTextDirection.current(text);
-
-      if (parentDirection !== override) {
-        textProps.dir = override;
-        value.direction = override;
-      } else if (parentDirection === 'auto') {
-        textProps.dir = override;
-      }
-    } else if (parentDirection !== dir) {
+export type TextProps<T extends React.ElementType> =
+  PolymorphicComponentPropWithRef<T, TextBaseProps>;
+
+type TextComponent = <T extends React.ElementType = 'span'>(
+  props: TextProps<T>
+) => React.ReactElement | any;
+
+const Text: TextComponent = React.forwardRef(
+  <T extends React.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 textProps: { dir?: TextDir } = {};
+    const BaseComponent = as ?? 'span';
+    const value = {
+      ...context,
+    };
+
+    if (!context) {
       textProps.dir = dir;
       value.direction = dir;
-    } else if (parentDirection === 'auto') {
-      textProps.dir = dir;
+    } else {
+      const { direction: parentDirection, getTextDirection } = context;
+
+      if (getTextDirection && getTextDirection.current) {
+        const text = getTextFromChildren(children);
+        const override = getTextDirection.current(text);
+
+        if (parentDirection !== override) {
+          textProps.dir = override;
+          value.direction = override;
+        } else if (parentDirection === 'auto') {
+          textProps.dir = override;
+        }
+      } else if (parentDirection !== dir) {
+        textProps.dir = dir;
+        value.direction = dir;
+      } else if (parentDirection === 'auto') {
+        textProps.dir = dir;
+      }
     }
-  }
 
-  return (
-    <TextDirectionContext.Provider value={value}>
-      <BaseComponent ref={ref} {...rest} {...textProps}>
-        {children}
-      </BaseComponent>
-    </TextDirectionContext.Provider>
-  );
-});
+    return (
+      <TextDirectionContext.Provider value={value}>
+        <BaseComponent ref={ref} {...rest} {...textProps}>
+          {children}
+        </BaseComponent>
+      </TextDirectionContext.Provider>
+    );
+  }
+);
 
-Text.propTypes = {
+(Text as React.FC).propTypes = {
   /**
    * Provide a custom element type used to render the outermost node
    */

packages/react/src/internal/PolymorphicProps.ts

@@ -0,0 +1,22 @@
+type AsProp<C extends React.ElementType> = {
+  as?: C;
+};
+
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+
+// This can be used if there is NO need for "ref"
+export type PolymorphicComponentProp<
+  C extends React.ElementType,
+  Props = {},
+> = React.PropsWithChildren<Props & AsProp<C>> &
+  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+
+// This is the type for the "ref" only
+export type PolymorphicRef<C extends React.ElementType> =
+  React.ComponentPropsWithRef<C>['ref'];
+
+// This is a new type utitlity with ref!
+export type PolymorphicComponentPropWithRef<
+  C extends React.ElementType,
+  Props = {},
+> = PolymorphicComponentProp<C, Props> & { ref?: PolymorphicRef<C> };