Merge pull request #379 from dev-five-git/as-with-children

As with children

Author: owjs3901

.changeset/early-llamas-cross.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+divide children prop in props prop

packages/react/src/types/props/__tests__/index.test-d.ts

@@ -1,7 +1,12 @@
 import { Property } from 'csstype'
 
 import type { ResponsiveValue } from '../../responsive-value'
-import type { DevupCommonProps, DevupComponentProps, DevupProps } from '..'
+import type {
+  DevupCommonProps,
+  DevupComponentAdditionalProps,
+  DevupComponentProps,
+  DevupProps,
+} from '..'
 import type { Selectors } from '../selector'
 
 describe('index', () => {
@@ -103,4 +108,35 @@ describe('index', () => {
       `,
     })
   })
+  it('DevupComponentAdditionalProps', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function Foo({ children: _ }: { children?: string; c: string }) {
+      return null
+    }
+    assertType<DevupComponentAdditionalProps<typeof Foo>>({
+      props: { c: 'a' },
+    })
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function Bar({ children: _ }: { children: string; c: string }) {
+      return null
+    }
+    assertType<DevupComponentAdditionalProps<typeof Bar>>({
+      props: { c: 'a' },
+      children: 'b',
+    })
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function Baz({ children: _ }: { children?: string; c?: string }) {
+      return null
+    }
+    assertType<DevupComponentAdditionalProps<typeof Baz>>({
+      props: { c: 'a' },
+      children: 'b',
+    })
+    assertType<DevupComponentAdditionalProps<typeof Baz>>({})
+    assertType<DevupComponentAdditionalProps<typeof Baz>>({
+      children: 'b',
+    })
+  })
 })

packages/react/src/types/props/index.ts

@@ -53,11 +53,21 @@ export type DevupElementTypeProps<T extends React.ElementType> =
 export type DevupComponentAdditionalProps<
   T extends React.ElementType,
   P extends React.ComponentProps<T> = React.ComponentProps<T>,
-> =
-  Partial<P> extends P
+> = (Partial<P> extends P
+  ? {
+      props?: FilterChildren<P>
+    }
+  : {
+      props: FilterChildren<P>
+    }) &
+  (P extends { children: infer U }
     ? {
-        props?: P
-      }
-    : {
-        props: P
+        children: U
       }
+    : P extends { children?: infer U }
+      ? {
+          children?: U
+        }
+      : object)
+
+type FilterChildren<T> = Omit<T, 'children'>