From 154eb916a514c40ecc01abeec84f1bfead5ea4ba Mon Sep 17 00:00:00 2001
From: Twan Braas <twan.braas@mediamonks.com>
Date: Tue, 12 Dec 2023 12:46:51 +0100
Subject: [PATCH] Re-add the option to split first element child on the
 SplitTextWrapper

---
 .../SplitTextWrapper/SplitTextWrapper.tsx       | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/gsap/components/SplitTextWrapper/SplitTextWrapper.tsx b/src/gsap/components/SplitTextWrapper/SplitTextWrapper.tsx
index 9e140bd..0b4f924 100644
--- a/src/gsap/components/SplitTextWrapper/SplitTextWrapper.tsx
+++ b/src/gsap/components/SplitTextWrapper/SplitTextWrapper.tsx
@@ -29,6 +29,10 @@ type SplitTextWrapperProps<T extends KnownTarget> = {
    * The element type to render, the default is `div`
    */
   as?: T;
+  /**
+   * Split the first element child of the element passed
+   */
+  splitFirstElementChild?: boolean;
 };
 
 /**
@@ -43,7 +47,7 @@ type SplitTextWrapperComponent = <T extends KnownTarget = 'div'>(
 
 // @ts-expect-error polymorphic type is not compatible with ensuredForwardRef function factory
 export const SplitTextWrapper: SplitTextWrapperComponent = ensuredForwardRef(
-  ({ variables = {}, as, children, ...props }, ref) => {
+  ({ variables = {}, as, children, splitFirstElementChild = false, ...props }, ref) => {
     /**
      * Not using useCallback on purpose so that a new SplitText instance is
      * created whenever this component rerenders the children
@@ -53,7 +57,16 @@ export const SplitTextWrapper: SplitTextWrapperComponent = ensuredForwardRef(
         return;
       }
 
-      ref.current = new SplitText(element, variables);
+      if (splitFirstElementChild && element.childElementCount > 1) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          "Split text wrapper should only contain 1 element when 'splitFirstElementChild' is set to true",
+        );
+      }
+      ref.current = new SplitText(
+        splitFirstElementChild ? element.firstElementChild : element,
+        variables,
+      );
     };
 
     const Component = (as ?? 'div') as unknown as ComponentType<unknown>;