WIP(emotion,ui-i18n,ui-react-utils): add originalType to all decorato…

…r that uses forwardRef
instructure · Oct 19, 2023 · b6f4586 · b6f4586
1 parent c7389cb
commit b6f4586
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 32 deletions.
diff --git a/packages/emotion/src/withStyle.tsx b/packages/emotion/src/withStyle.tsx
@@ -244,7 +244,7 @@ const withStyle = decorator(
 
     hoistNonReactStatics(WithStyle, ComposedComponent)
 
-    // workaround so this can be tested with ReactTestUtils
+    // added so it can be tested with ReactTestUtils
     // more info: https://github.com/facebook/react/issues/13455
     WithStyle.originalType = ComposedComponent
 

diff --git a/packages/ui-i18n/src/bidirectional.tsx b/packages/ui-i18n/src/bidirectional.tsx
@@ -22,6 +22,11 @@
  * SOFTWARE.
  */
 import React, { ForwardedRef, forwardRef, PropsWithChildren } from 'react'
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes
+} from 'react'
 import { decorator } from '@instructure/ui-decorator'
 import { DIRECTION, TextDirectionContext } from './TextDirectionContext'
 import hoistNonReactStatics from 'hoist-non-react-statics'
@@ -101,9 +106,13 @@ const bidirectional: BidirectionalType = decorator((ComposedComponent) => {
     }
   }
 
-  const BidirectionalForwardingRef = forwardRef<any, BidirectionalProps>(
-    (props, ref) => <BidirectionalComponent {...props} forwardedRef={ref} />
-  )
+  const BidirectionalForwardingRef: ForwardRefExoticComponent<
+    PropsWithoutRef<Props> & RefAttributes<any>
+  > & {
+    originalType?: React.ComponentClass
+  } = forwardRef<any, BidirectionalProps>((props, ref) => (
+    <BidirectionalComponent {...props} forwardedRef={ref} />
+  ))
   if (process.env.NODE_ENV !== 'production') {
     const displayName = ComposedComponent.displayName || ComposedComponent.name
     BidirectionalForwardingRef.displayName = `BidirectionalForwardingRef(${displayName})`
@@ -114,6 +123,11 @@ const bidirectional: BidirectionalType = decorator((ComposedComponent) => {
   BidirectionalForwardingRef.propTypes = ComposedComponent.propTypes
   // @ts-expect-error These static fields exist on InstUI components
   BidirectionalForwardingRef.allowedProps = ComposedComponent.allowedProps
+
+  // added so it can be tested with ReactTestUtils
+  // more info: https://github.com/facebook/react/issues/13455
+  BidirectionalForwardingRef.originalType = ComposedComponent
+
   return BidirectionalForwardingRef
 }) as BidirectionalType
 

diff --git a/packages/ui-react-utils/src/DeterministicIdContext/withDeterministicId.tsx b/packages/ui-react-utils/src/DeterministicIdContext/withDeterministicId.tsx
@@ -21,11 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, {
-  forwardRef,
+import React, { forwardRef, useContext } from 'react'
+import type {
+  ForwardRefExoticComponent,
   PropsWithoutRef,
-  RefAttributes,
-  useContext
+  RefAttributes
 } from 'react'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 
@@ -49,33 +49,33 @@ type WithDeterministicIdProps = {
  */
 const withDeterministicId = decorator((ComposedComponent: InstUIComponent) => {
   type Props = PropsWithoutRef<Record<string, unknown>> & RefAttributes<any>
-  const WithDeterministicId = forwardRef(
-    (props: Props, ref: React.ForwardedRef<any>) => {
-      const componentName =
-        ComposedComponent.componentId ||
-        ComposedComponent.displayName ||
-        ComposedComponent.name
-      const instanceCounterMap = useContext(DeterministicIdContext)
-      const deterministicId = (instanceName = componentName) =>
-        generateId(instanceName, instanceCounterMap)
+  const WithDeterministicId: ForwardRefExoticComponent<Props> & {
+    originalType?: React.ComponentClass
+  } = forwardRef((props: Props, ref: React.ForwardedRef<any>) => {
+    const componentName =
+      ComposedComponent.componentId ||
+      ComposedComponent.displayName ||
+      ComposedComponent.name
+    const instanceCounterMap = useContext(DeterministicIdContext)
+    const deterministicId = (instanceName = componentName) =>
+      generateId(instanceName, instanceCounterMap)
 
-      if (props.deterministicId) {
-        warn(
-          false,
-          `Manually passing the "deterministicId" property is not allowed on the ${componentName} component.\n`,
-          props.deterministicId
-        )
-      }
-
-      return (
-        <ComposedComponent
-          ref={ref}
-          deterministicId={deterministicId}
-          {...props}
-        />
+    if (props.deterministicId) {
+      warn(
+        false,
+        `Manually passing the "deterministicId" property is not allowed on the ${componentName} component.\n`,
+        props.deterministicId
       )
     }
-  )
+
+    return (
+      <ComposedComponent
+        ref={ref}
+        deterministicId={deterministicId}
+        {...props}
+      />
+    )
+  })
 
   hoistNonReactStatics(WithDeterministicId, ComposedComponent)
 
@@ -89,6 +89,10 @@ const withDeterministicId = decorator((ComposedComponent: InstUIComponent) => {
   //@ts-expect-error fix this
   WithDeterministicId.allowedProps = ComposedComponent.allowedProps
 
+  // added so it can be tested with ReactTestUtils
+  // more info: https://github.com/facebook/react/issues/13455
+  WithDeterministicId.originalType = ComposedComponent
+
   if (process.env.NODE_ENV !== 'production') {
     WithDeterministicId.displayName = `WithDeterministicId(${ComposedComponent.displayName})`
   }