diff --git a/packages/emotion/src/withStyle.tsx b/packages/emotion/src/withStyle.tsx index 5d271a86f7..4636dea963 100644 --- 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 index dabb55a30f..989f519113 100644 --- 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( - (props, ref) => - ) + const BidirectionalForwardingRef: ForwardRefExoticComponent< + PropsWithoutRef & RefAttributes + > & { + originalType?: React.ComponentClass + } = forwardRef((props, 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 index 07e45c01f9..fa7005032b 100644 --- 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> & RefAttributes - const WithDeterministicId = forwardRef( - (props: Props, ref: React.ForwardedRef) => { - const componentName = - ComposedComponent.componentId || - ComposedComponent.displayName || - ComposedComponent.name - const instanceCounterMap = useContext(DeterministicIdContext) - const deterministicId = (instanceName = componentName) => - generateId(instanceName, instanceCounterMap) + const WithDeterministicId: ForwardRefExoticComponent & { + originalType?: React.ComponentClass + } = forwardRef((props: Props, ref: React.ForwardedRef) => { + 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 ( - + if (props.deterministicId) { + warn( + false, + `Manually passing the "deterministicId" property is not allowed on the ${componentName} component.\n`, + props.deterministicId ) } - ) + + return ( + + ) + }) 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})` }