From 3d72cf8fb8661017e8cb7d17c2758e60c4a3f477 Mon Sep 17 00:00:00 2001
From: Twan Braas <twan.braas@mediamonks.com>
Date: Mon, 29 Jan 2024 15:19:02 +0100
Subject: [PATCH] Re-use types from AutoFill to InfiniteAutoFill

---
 src/components/AutoFill/AutoFill.mdx              |  2 +-
 src/components/AutoFill/AutoFill.tsx              |  2 +-
 .../InfiniteAutoFill/InfiniteAutoFill.mdx         |  5 +++--
 .../InfiniteAutoFill/InfiniteAutoFill.tsx         | 15 +++------------
 4 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/AutoFill/AutoFill.mdx b/src/components/AutoFill/AutoFill.mdx
index c607b23..536fd74 100644
--- a/src/components/AutoFill/AutoFill.mdx
+++ b/src/components/AutoFill/AutoFill.mdx
@@ -48,7 +48,7 @@ Fills components vertically.
 function DemoComponent() {
   return (
     <div style={{ height: 1000, outline: '1px solid black' }}>
-      <AutoFill>
+      <AutoFill axis="y">
         <div style={{ padding: 15 }}>
           <div style={{ width: 50, outline: '1px solid red' }}>Child</div>
         </div>
diff --git a/src/components/AutoFill/AutoFill.tsx b/src/components/AutoFill/AutoFill.tsx
index 2d4e798..8fc3c44 100644
--- a/src/components/AutoFill/AutoFill.tsx
+++ b/src/components/AutoFill/AutoFill.tsx
@@ -18,7 +18,7 @@ type AutoFillChildrenProps = {
   ref: RefCallback<unknown>;
 };
 
-type AutoFillProps = {
+export type AutoFillProps = {
   children:
     | ReactElement<AutoFillChildrenProps>
     | ReadonlyArray<ReactElement<AutoFillChildrenProps>>;
diff --git a/src/components/InfiniteAutoFill/InfiniteAutoFill.mdx b/src/components/InfiniteAutoFill/InfiniteAutoFill.mdx
index e8aee6d..237a0c6 100644
--- a/src/components/InfiniteAutoFill/InfiniteAutoFill.mdx
+++ b/src/components/InfiniteAutoFill/InfiniteAutoFill.mdx
@@ -6,7 +6,8 @@ import * as stories from './InfiniteAutoFill.stories';
 # InfiniteAutoFill
 
 Uses the AutoFill to repeat children to fill the parent element in given axis. In addition to that
-it adds the children one more time to the end of the list. This can be useful for example marquee's.
+it adds the children one more time to the end of the list. This can be useful for example marquees
+or infinite carousels.
 
 ## Reference
 
@@ -49,7 +50,7 @@ Fills components vertically + one extra.
 function DemoComponent() {
   return (
     <div style={{ height: 1000, outline: '1px solid black' }}>
-      <InfiniteAutoFill>
+      <InfiniteAutoFill axis="y">
         <div style={{ padding: 15 }}>
           <div style={{ width: 50, outline: '1px solid red' }}>Child</div>
         </div>
diff --git a/src/components/InfiniteAutoFill/InfiniteAutoFill.tsx b/src/components/InfiniteAutoFill/InfiniteAutoFill.tsx
index 6d7c5a6..d19043c 100644
--- a/src/components/InfiniteAutoFill/InfiniteAutoFill.tsx
+++ b/src/components/InfiniteAutoFill/InfiniteAutoFill.tsx
@@ -1,21 +1,12 @@
-import { type ReactElement, type RefCallback } from 'react';
+import { type ComponentProps, type ReactElement } from 'react';
 import { AutoFill } from '../../index.js';
 
-type InfiniteAutoFillChildrenProps = {
-  ref: RefCallback<unknown>;
-};
-
-type InfiniteAutoFillProps = {
-  children:
-    | ReactElement<InfiniteAutoFillChildrenProps>
-    | ReadonlyArray<ReactElement<InfiniteAutoFillChildrenProps>>;
-  axis?: 'x' | 'y';
-};
+type InfiniteAutoFillProps = ComponentProps<typeof AutoFill>;
 
 /**
  * Repeats children to fill the parent element in given axis.
  */
-export function InfiniteAutoFill({ children, axis = 'x' }: InfiniteAutoFillProps): ReactElement {
+export function InfiniteAutoFill({ children, axis }: InfiniteAutoFillProps): ReactElement {
   return (
     <>
       <AutoFill axis={axis}>{children}</AutoFill>