fix typescript error hoc

Author: Lionel Bertrand

Diff for: packages/core/src/types.ts

@@ -31,6 +31,13 @@ export type State<P> = {
 export type StyledComponent<P extends Record<string, any>> =
   ForwardRefExoticComponent<P & RefAttributes<any>>;
 
+export type InferRef<T> =
+  T extends ForwardRefExoticComponent<infer Ref>
+    ? Ref extends RefAttributes<infer RefElement>
+      ? RefElement
+      : never
+    : never;
+
 export type GetProps<A extends StylableComponent<any>> =
   A extends StyledComponent<infer P>
     ? P

Diff for: packages/core/src/withDefaultProps.tsx

@@ -7,23 +7,23 @@
 
 import { forwardRef, type ComponentType } from 'react';
 import { withStaticProperties } from './withStaticProperties';
+import type { InferRef } from './types';
 
-export function withDefaultProps<P extends Record<string, any>>(
+export function withDefaultProps<P>(
   Comp: ComponentType<P>,
   defaultProps: Partial<P>
 ) {
-  const { id, styleSheet, displayName } = Comp as any;
+  const { id, displayName } = Comp as any;
   return withStaticProperties(
-    forwardRef(function WithDefaultPropsRender(
-      props: Omit<P, keyof typeof defaultProps> &
-        Partial<Pick<P, keyof typeof defaultProps>>,
-      ref: any
-    ) {
+    forwardRef<
+      InferRef<typeof Comp>,
+      Omit<P, keyof typeof defaultProps> &
+        Partial<Pick<P, keyof typeof defaultProps>>
+    >(function WithDefaultPropsRender(props, ref) {
       return <Comp {...defaultProps} {...(props as any)} ref={ref} />;
     }),
-    { id, styleSheet, displayName } as {
+    { id, displayName } as {
       id?: string;
-      styleSheet: () => unknown;
       displayName?: string;
     }
   );

Diff for: packages/primitive/src/Badge/BadgeText.tsx

@@ -5,9 +5,10 @@
  * LICENSE file in the root of this projects source tree.
  */
 
+import type { InferRef } from '@crossed/core';
 import { ComponentType, forwardRef } from 'react';
 
 export const createBadgeText = <T,>(StyledText: ComponentType<T>) =>
-  forwardRef<any, T>((props, ref) => {
-    return <StyledText {...props} ref={ref} />;
+  forwardRef<InferRef<typeof StyledText>, T>((props, ref) => {
+    return <StyledText {...(props as any)} ref={ref} />;
   });

Diff for: packages/primitive/src/Button/ButtonElement.tsx

@@ -5,9 +5,10 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-import { ComponentType, forwardRef } from 'react';
+import type { InferRef } from '@crossed/core';
+import { type ComponentType, forwardRef } from 'react';
 
 export const createButtonElement = <T,>(StyledElement: ComponentType<T>) =>
-  forwardRef<any, T>((props, ref) => {
-    return <StyledElement {...props} ref={ref} />;
+  forwardRef<InferRef<typeof StyledElement>, T>((props, ref) => {
+    return <StyledElement {...(props as any)} ref={ref} />;
   });

Diff for: packages/primitive/src/Button/ButtonGroup.tsx

@@ -5,22 +5,25 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-import { ComponentType, forwardRef } from 'react';
+import { type ComponentType, forwardRef } from 'react';
 import { ProviderGroup } from './contextGroup';
 import { Orientation, RovingFocusGroup } from '../utils/RovingFocus';
 import { ButtonGroupCollection } from './contextCollection';
+import type { InferRef } from '@crossed/core';
 
 export const createButtonGroup = <T,>(StyledGroup: ComponentType<T>) =>
-  forwardRef<any, T & { orientation?: Orientation }>((props, ref) => {
-    return (
-      <ProviderGroup grouped orientation={props.orientation ?? 'horizontal'}>
-        <RovingFocusGroup orientation={props.orientation ?? 'horizontal'}>
-          <ButtonGroupCollection.Provider>
-            <ButtonGroupCollection.Slot>
-              <StyledGroup {...props} ref={ref} />
-            </ButtonGroupCollection.Slot>
-          </ButtonGroupCollection.Provider>
-        </RovingFocusGroup>
-      </ProviderGroup>
-    );
-  });
+  forwardRef<InferRef<typeof StyledGroup>, T & { orientation?: Orientation }>(
+    (props, ref) => {
+      return (
+        <ProviderGroup grouped orientation={props.orientation ?? 'horizontal'}>
+          <RovingFocusGroup orientation={props.orientation ?? 'horizontal'}>
+            <ButtonGroupCollection.Provider>
+              <ButtonGroupCollection.Slot>
+                <StyledGroup {...(props as any)} ref={ref} />
+              </ButtonGroupCollection.Slot>
+            </ButtonGroupCollection.Provider>
+          </RovingFocusGroup>
+        </ProviderGroup>
+      );
+    }
+  );

Diff for: packages/primitive/src/Dropdown/Dropdown.tsx

@@ -5,9 +5,10 @@
  * LICENSE file in the root of this projects source tree.
  */
 
+import type { InferRef } from '@crossed/core';
 import { forwardRef, type ComponentType } from 'react';
 
 export const createDropdownMain = <P,>(StyledRoot: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => {
-    return <StyledRoot {...props} ref={ref} />;
+  forwardRef<InferRef<typeof StyledRoot>, P>((props, ref) => {
+    return <StyledRoot {...(props as any)} ref={ref} />;
   });

Diff for: packages/primitive/src/Dropdown/DropdownContent.tsx

@@ -9,16 +9,17 @@ import { forwardRef, type ComponentType } from 'react';
 import { useContext } from './context';
 import { RovingFocus } from '../utils/RovingFocus';
 import { VisibilityHidden } from '../utils/VisibilityHidden';
+import type { InferRef } from '@crossed/core';
 
 export const createDropdownContent = <P,>(StyledRoot: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => {
+  forwardRef<InferRef<typeof StyledRoot>, P>((props, ref) => {
     const { id, open } = useContext();
     return (
       <RovingFocus>
         <VisibilityHidden hidden={!open}>
           <StyledRoot
             role="menu"
-            {...props}
+            {...(props as any)}
             ref={ref}
             id={id}
             aria-labelledby={`label-${id}`}

Diff for: packages/primitive/src/Dropdown/DropdownDivider.tsx

@@ -9,5 +9,5 @@ import { forwardRef, type ComponentType } from 'react';
 
 export const createDropdownDivider = <P,>(StyledRoot: ComponentType<P>) =>
   forwardRef<any, P>((props, ref) => {
-    return <StyledRoot role="separator" {...props} ref={ref} />;
+    return <StyledRoot role="separator" {...(props as any)} ref={ref} />;
   });

Diff for: packages/primitive/src/Dropdown/DropdownItem.tsx

@@ -7,7 +7,7 @@
 
 import { ComponentType, forwardRef } from 'react';
 import { useContext } from './context';
-import { composeEventHandlers } from '@crossed/core';
+import { composeEventHandlers, InferRef } from '@crossed/core';
 import { RovingFocus } from '../utils/RovingFocus';
 import type { RequiredAccessibilityProps } from '../types';
 
@@ -17,18 +17,16 @@ export type DropdownItemProps = {
 export const createDropdownItem = <P extends Record<string, any>>(
   Styled: ComponentType<P>
 ) =>
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-ignore
   forwardRef<
-    any,
+    InferRef<typeof Styled>,
     DropdownItemProps & RequiredAccessibilityProps<P, 'aria-label'>
   >((props, ref) => {
     const { setOpen } = useContext();
     return (
-      <RovingFocus.Item ref={ref} focusable={!props.disabled}>
+      <RovingFocus.Item ref={ref} focusable={!(props as any).disabled}>
         <Styled
-          tabIndex={props.disabled ? -1 : 0}
-          aria-disabled={(props.disabled || false).toString()}
+          tabIndex={(props as any).disabled ? -1 : 0}
+          aria-disabled={((props as any).disabled || false).toString()}
           role="menuitem"
           {...(props as any)}
           onPointerUp={composeEventHandlers((props as any).onPress, () => {

Diff for: packages/primitive/src/Dropdown/DropdownLabel.tsx

@@ -9,5 +9,5 @@ import { forwardRef, type ComponentType } from 'react';
 
 export const createDropdownLabel = <P,>(StyledRoot: ComponentType<P>) =>
   forwardRef<any, P>((props, ref) => {
-    return <StyledRoot role="separator" {...props} ref={ref} />;
+    return <StyledRoot role="separator" {...(props as any)} ref={ref} />;
   });

Diff for: packages/primitive/src/Label/Label.tsx

@@ -7,14 +7,15 @@
 
 import { useId, type ComponentType, useRef, forwardRef } from 'react';
 import { Provider } from './context';
+import type { InferRef } from '@crossed/core';
 
 export const createLabelMain = <P,>(StyledRoot: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => {
+  forwardRef<InferRef<typeof StyledRoot>, P>((props, ref) => {
     const id = useId();
     const inputRef = useRef();
     return (
       <Provider id={id} inputRef={inputRef}>
-        <StyledRoot {...props} ref={ref} />
+        <StyledRoot {...(props as any)} ref={ref} />
       </Provider>
     );
   });

Diff for: packages/primitive/src/List/List.tsx

@@ -5,9 +5,9 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-import { ComponentType, forwardRef } from 'react';
+import { withDefaultProps } from '@crossed/core';
+import type { ComponentType } from 'react';
 
-export const createListMain = <P,>(StyledRoot: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => (
-    <StyledRoot role="list" {...props} ref={ref} />
-  ));
+export const createListMain = <P extends Record<string, any>>(
+  StyledRoot: ComponentType<P>
+) => withDefaultProps(StyledRoot, { role: 'list' } as any);

Diff for: packages/primitive/src/List/ListDivider.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-import { forwardRef, type ComponentType } from 'react';
+import type { ComponentType } from 'react';
 
-export const createListDivider = <P,>(Styled: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => <Styled {...props} ref={ref} />);
+export const createListDivider = <P,>(Styled: ComponentType<P>) => Styled;

Diff for: packages/primitive/src/List/ListItem.tsx

@@ -5,9 +5,10 @@
  * LICENSE file in the root of this projects source tree.
  */
 
+import type { InferRef } from '@crossed/core';
 import { ComponentType, forwardRef } from 'react';
 
 export const createListItem = <P,>(StyledItem: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => (
-    <StyledItem role="listitem" {...props} ref={ref} />
+  forwardRef<InferRef<typeof StyledItem>, P>((props, ref) => (
+    <StyledItem role="listitem" {...(props as any)} ref={ref} />
   ));

Diff for: packages/primitive/src/List/ListLabel.tsx

@@ -5,7 +5,10 @@
  * LICENSE file in the root of this projects source tree.
  */
 
+import type { InferRef } from '@crossed/core';
 import { forwardRef, type ComponentType } from 'react';
 
 export const createListLabel = <P,>(Styled: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => <Styled {...props} ref={ref} />);
+  forwardRef<InferRef<typeof Styled>, P>((props, ref) => (
+    <Styled {...(props as any)} ref={ref} />
+  ));

Diff for: packages/primitive/src/List/ListSubTitle.tsx

@@ -8,4 +8,6 @@
 import { forwardRef, type ComponentType } from 'react';
 
 export const createListSubTitle = <P,>(StyledSubTitle: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => <StyledSubTitle {...props} ref={ref} />);
+  forwardRef<any, P>((props, ref) => (
+    <StyledSubTitle {...(props as any)} ref={ref} />
+  ));

Diff for: packages/primitive/src/List/ListTitle.tsx

@@ -5,7 +5,9 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-import { ComponentType, forwardRef } from 'react';
+import { type ComponentType, forwardRef } from 'react';
 
 export const createListTitle = <P,>(StyledTitle: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => <StyledTitle {...props} ref={ref} />);
+  forwardRef<any, P>((props, ref) => (
+    <StyledTitle {...(props as any)} ref={ref} />
+  ));

Diff for: packages/primitive/src/Select/Select.tsx

@@ -5,9 +5,7 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-import { forwardRef, type ComponentType } from 'react';
+import type { ComponentType } from 'react';
 
 export const createSelectMain = <P,>(StyledRoot: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => {
-    return <StyledRoot {...props} ref={ref} />;
-  });
+  StyledRoot;

Diff for: packages/primitive/src/Select/SelectContent.tsx

@@ -18,7 +18,7 @@ export const createSelectContent = <P,>(StyledRoot: ComponentType<P>) =>
         <VisibilityHidden hidden={!open}>
           <StyledRoot
             role="menu"
-            {...props}
+            {...(props as any)}
             ref={ref}
             id={id}
             aria-labelledby={`label-${id}`}

Diff for: packages/primitive/src/Select/SelectDivider.tsx

@@ -5,9 +5,10 @@
  * LICENSE file in the root of this projects source tree.
  */
 
+import type { InferRef } from '@crossed/core';
 import { forwardRef, type ComponentType } from 'react';
 
 export const createSelectDivider = <P,>(StyledRoot: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => {
-    return <StyledRoot role="separator" {...props} ref={ref} />;
+  forwardRef<InferRef<typeof StyledRoot>, P>((props, ref) => {
+    return <StyledRoot role="separator" {...(props as any)} ref={ref} />;
   });

Diff for: packages/primitive/src/Select/SelectItem.tsx

@@ -7,7 +7,7 @@
 
 import { ComponentType, forwardRef } from 'react';
 import { useContext } from './context';
-import { composeEventHandlers } from '@crossed/core';
+import { composeEventHandlers, InferRef } from '@crossed/core';
 import { RovingFocus } from '../utils/RovingFocus';
 import type { RequiredAccessibilityProps } from '../types';
 
@@ -21,14 +21,15 @@ export const createSelectItem = <P extends Record<string, any>>(
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
   forwardRef<
-    any,
+    InferRef<typeof Styled>,
     SelectItemProps & RequiredAccessibilityProps<P, 'aria-label'>
-  >(({ value, ...props }, ref) => {
+  >((originalProps, ref) => {
+    const { value, ...props } = originalProps as any;
     const { setOpen, setValue } = useContext();
     return (
-      <RovingFocus.Item ref={ref} focusable={!props.disabled}>
+      <RovingFocus.Item ref={ref} focusable={!(props as any).disabled}>
         <Styled
-          tabIndex={props.disabled ? -1 : 0}
+          tabIndex={(props as any).disabled ? -1 : 0}
           aria-disabled={((props as any).disabled || false).toString()}
           role="menuitem"
           {...(props as any)}

Diff for: packages/primitive/src/Select/SelectLabel.tsx

@@ -5,9 +5,8 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-import { forwardRef, type ComponentType } from 'react';
+import { withDefaultProps } from '@crossed/core';
+import type { ComponentType } from 'react';
 
 export const createSelectLabel = <P,>(StyledRoot: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => {
-    return <StyledRoot role="separator" {...props} ref={ref} />;
-  });
+  withDefaultProps(StyledRoot, { role: 'separator' } as any);

Diff for: packages/primitive/src/Sheet/SheetOverlay.tsx

@@ -7,14 +7,14 @@
 
 import { ComponentType, forwardRef } from 'react';
 import { useContext } from './context';
-import { composeEventHandlers } from '@crossed/core';
+import { composeEventHandlers, InferRef } from '@crossed/core';
 
 export const createSheetOverlay = <P,>(Styled: ComponentType<P>) =>
-  forwardRef<any, P>((props, ref) => {
+  forwardRef<InferRef<typeof Styled>, P>((props, ref) => {
     const { setOpen } = useContext();
     return (
       <Styled
-        {...props}
+        {...(props as any)}
         onPress={composeEventHandlers((props as any).onPress, () => {
           setOpen(false);
         })}

Diff for: packages/styled/src/withReactive/withReactive.tsx

@@ -5,13 +5,13 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-import React, { ComponentType, forwardRef } from 'react';
+import React, { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useTheme } from '../useTheme';
 
-export const withReactive = <P extends Record<string, any>>(
-  Comp: ComponentType<P>
+export const withReactive = <Ref, P = {}>(
+  Comp: ForwardRefRenderFunction<Ref, P>
 ) =>
-  forwardRef<P['ref'], P>((props, ref) => {
+  forwardRef<Ref, P>((props, ref) => {
     useTheme();
-    return <Comp {...props} ref={ref} />;
+    return <Comp {...(props as any)} ref={ref} />;
   });