fix: ref typing actionsheet accordion button

Author: Viraj-10

example/storybook/tsconfig.json

@@ -4,6 +4,7 @@
     "baseUrl": ".",
     "paths": {
       "@gluestack-ui/themed": ["../../packages/themed/src"],
+      "@gluestack-ui/button": ["../../packages/unstyled/button/src"],
       "@gluestack-ui/config": ["../../packages/config/src/gluestack-ui.config"],
       "react-native": ["./node_modules/react-native-web"],
       "@gluestack-style/react": ["../../packages/styled/react/src"],

packages/unstyled/accordion/src/types.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ViewProps } from 'react-native';
 
 export interface IAccordionProps extends ViewProps {
@@ -91,27 +92,33 @@ export type IAccordionComponentType<
   TitleTextProps,
   ContentTextProps
 > = React.ForwardRefExoticComponent<
-  AccordionProps & React.RefAttributes<AccordionProps> & IAccordionProps
+  React.PropsWithoutRef<AccordionProps & IAccordionProps> &
+    React.RefAttributes<AccordionProps>
 > & {
   Item: React.ForwardRefExoticComponent<
-    ItemProps & React.RefAttributes<ItemProps> & IAccordionItemProps
+    React.PropsWithoutRef<ItemProps & IAccordionItemProps> &
+      React.RefAttributes<ItemProps>
   >;
   Header: React.ForwardRefExoticComponent<
-    HeaderProps & React.RefAttributes<HeaderProps>
+    React.PropsWithoutRef<HeaderProps> & React.RefAttributes<HeaderProps>
   >;
   Trigger: React.ForwardRefExoticComponent<
-    Omit<TriggerProps, 'children'> & IAccordionTriggerProps
+    React.PropsWithoutRef<
+      Omit<TriggerProps, 'children'> & IAccordionTriggerProps
+    > &
+      React.RefAttributes<TriggerProps>
   >;
   Content: React.ForwardRefExoticComponent<
-    ContentProps & React.RefAttributes<ContentProps>
+    React.PropsWithoutRef<ContentProps> & React.RefAttributes<ContentProps>
   >;
   TitleText: React.ForwardRefExoticComponent<
-    TitleTextProps & React.RefAttributes<TitleTextProps>
+    React.PropsWithoutRef<TitleTextProps> & React.RefAttributes<TitleTextProps>
   >;
   ContentText: React.ForwardRefExoticComponent<
-    ContentTextProps & React.RefAttributes<ContentTextProps>
+    React.PropsWithoutRef<ContentTextProps> &
+      React.RefAttributes<ContentTextProps>
   >;
   Icon: React.ForwardRefExoticComponent<
-    IconProps & React.RefAttributes<IconProps>
+    React.PropsWithoutRef<IconProps> & React.RefAttributes<IconProps>
   >;
 };

packages/unstyled/actionsheet/src/types.ts

@@ -66,45 +66,52 @@ export type IActionsheetComponentType<
   SectionHeaderTextProps,
   IconProps
 > = React.ForwardRefExoticComponent<
-  ActionsheetProps & React.RefAttributes<ActionsheetProps> & IActionsheetProps
+  React.RefAttributes<ActionsheetProps> &
+    React.PropsWithoutRef<ActionsheetProps & IActionsheetProps>
 > & {
   Content: React.ForwardRefExoticComponent<
-    ContentProps &
-      React.RefAttributes<ContentProps> &
-      InterfaceActionsheetContentProps
+    React.PropsWithoutRef<ContentProps & InterfaceActionsheetContentProps> &
+      React.RefAttributes<ContentProps>
   >;
   Item: React.ForwardRefExoticComponent<
-    ItemProps & InterfaceActionsheetItemProps & React.RefAttributes<ItemProps>
+    React.PropsWithoutRef<ItemProps & InterfaceActionsheetItemProps> &
+      React.RefAttributes<ItemProps>
   >;
   ItemText: React.ForwardRefExoticComponent<
-    React.RefAttributes<ItemTextProps> & ItemTextProps
+    React.RefAttributes<ItemTextProps> & React.PropsWithoutRef<ItemTextProps>
   >;
   DragIndicator: React.ForwardRefExoticComponent<
-    React.RefAttributes<DragIndicatorProps> & DragIndicatorProps
+    React.RefAttributes<DragIndicatorProps> &
+      React.PropsWithoutRef<DragIndicatorProps>
   >;
   Backdrop: React.ForwardRefExoticComponent<
-    React.RefAttributes<BackdropProps> & BackdropProps
+    React.RefAttributes<BackdropProps> & React.PropsWithoutRef<BackdropProps>
   >;
   DragIndicatorWrapper: React.ForwardRefExoticComponent<
-    React.RefAttributes<IndicatorWrapperProps> & IndicatorWrapperProps
+    React.RefAttributes<IndicatorWrapperProps> &
+      React.PropsWithoutRef<IndicatorWrapperProps>
   >;
   ScrollView: React.ForwardRefExoticComponent<
-    React.RefAttributes<ScrollViewProps> & ScrollViewProps
+    React.RefAttributes<ScrollViewProps> &
+      React.PropsWithoutRef<ScrollViewProps>
   >;
   VirtualizedList: React.ForwardRefExoticComponent<
-    React.RefAttributes<VirtualizedListProps> & VirtualizedListProps
+    React.RefAttributes<VirtualizedListProps> &
+      React.PropsWithoutRef<VirtualizedListProps>
   >;
   FlatList: React.ForwardRefExoticComponent<
-    React.RefAttributes<FlatListProps> & FlatListProps
+    React.RefAttributes<FlatListProps> & React.PropsWithoutRef<FlatListProps>
   >;
   SectionList: React.ForwardRefExoticComponent<
-    React.RefAttributes<SectionListProps> & SectionListProps
+    React.RefAttributes<SectionListProps> &
+      React.PropsWithoutRef<SectionListProps>
   >;
   SectionHeaderText: React.ForwardRefExoticComponent<
-    React.RefAttributes<SectionHeaderTextProps> & SectionHeaderTextProps
+    React.RefAttributes<SectionHeaderTextProps> &
+      React.PropsWithoutRef<SectionHeaderTextProps>
   >;
   Icon: React.ForwardRefExoticComponent<
-    React.RefAttributes<IconProps> & IconProps
+    React.RefAttributes<IconProps> & React.PropsWithoutRef<IconProps>
   >;
 };
 

packages/unstyled/button/src/types.ts

@@ -1,3 +1,4 @@
+import { PropsWithoutRef, RefAttributes } from 'react';
 import type { PressableProps } from 'react-native';
 
 export interface InterfaceButtonProps extends PressableProps {
@@ -53,19 +54,19 @@ export type IButtonComponentType<
   TextProps,
   IconProps
 > = React.ForwardRefExoticComponent<
-  React.RefAttributes<ButtonProps> & ButtonProps & IButtonProps
+  PropsWithoutRef<ButtonProps & IButtonProps> & RefAttributes<ButtonProps>
 > & {
   Group: React.ForwardRefExoticComponent<
-    React.RefAttributes<GroupProps> & GroupProps & IButtonGroupProps
+    RefAttributes<GroupProps> & PropsWithoutRef<GroupProps & IButtonGroupProps>
   >;
   Spinner: React.ForwardRefExoticComponent<
-    SpinnerProps & React.RefAttributes<SpinnerProps>
+    PropsWithoutRef<SpinnerProps> & React.RefAttributes<SpinnerProps>
   >;
   Text: React.ForwardRefExoticComponent<
-    React.RefAttributes<TextProps> & TextProps
+    React.RefAttributes<TextProps> & PropsWithoutRef<TextProps>
   >;
   Icon: React.ForwardRefExoticComponent<
-    React.RefAttributes<IconProps> & IconProps
+    React.RefAttributes<IconProps> & PropsWithoutRef<IconProps>
   >;
 };
 

yarn.lock

@@ -2631,6 +2631,13 @@
     "@gluestack-ui/utils" "^0.1.12"
     "@react-native-aria/focus" "^0.2.9"
 
+"@gluestack-ui/utils@0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/utils/-/utils-0.1.12.tgz#0bb3400c9315fb6c0fd1bc697b20d80f82cd3899"
+  integrity sha512-OhOkljhr7foCUJP//8LwMN3EX4/pniFWmQpk1yDJMQL9DaTJbP7s3HsnTM7UzH2kp9DR1Utoz9Y9WscH3ajLpQ==
+  dependencies:
+    "@react-native-aria/focus" "^0.2.9"
+
 "@gluestack/design-system@0.5.36":
   version "0.5.36"
   resolved "https://registry.yarnpkg.com/@gluestack/design-system/-/design-system-0.5.36.tgz#ee9c6a1dc3d0806eda5bd5781b58c3e8b3621dcf"