From 4bb4fcdf3293c462edd86b392b6e76df4d55d0b2 Mon Sep 17 00:00:00 2001
From: James Reetzke <james@reet-ski.net>
Date: Tue, 25 Jan 2022 17:32:43 -0500
Subject: [PATCH] Support preact (#74)

* when 'render' is called manually, Preact expects that it always has props. We need to supply an empty argument for compatibility.

* Preact can't use plain objects as components, so we need to use the output of forwardRef and set the 87204iris property on it manually

* ensure children ref exists for accessing properties on it
---
 src/components/buttons/Social/SocialButton.style.ts |  8 ++++----
 src/utils/HOCs/withIris.ts                          | 13 +++++++------
 src/utils/hooks/usePortal_DEPRECATED/Anchor.tsx     |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/buttons/Social/SocialButton.style.ts b/src/components/buttons/Social/SocialButton.style.ts
index e5ca310de..90e5433a7 100755
--- a/src/components/buttons/Social/SocialButton.style.ts
+++ b/src/components/buttons/Social/SocialButton.style.ts
@@ -28,7 +28,7 @@ export const brandThemes = {
   google: {
     ...themes.light,
     name: 'Google',
-    icon: (GoogleGColor as any).render(),
+    icon: (GoogleGColor as any).render({}),
     formats: {
       ...themes.light.formats,
       primary: '#4285f4',
@@ -38,7 +38,7 @@ export const brandThemes = {
   facebook: {
     ...themes.light,
     name: 'Facebook',
-    icon: (Facebook as any).render(),
+    icon: (Facebook as any).render({}),
     formats: {
       ...themes.light.formats,
       primary: '#4267b2',
@@ -58,7 +58,7 @@ export const brandThemes = {
     light: {
       ...themes.dark,
       name: 'Apple',
-      icon: (Apple as any).render(),
+      icon: (Apple as any).render({}),
       formats: {
         ...themes.dark.formats,
         primary: '#000',
@@ -68,7 +68,7 @@ export const brandThemes = {
     dark: {
       ...themes.light,
       name: 'Apple',
-      icon: (Apple as any).render(),
+      icon: (Apple as any).render({}),
       formats: {
         ...themes.dark.formats,
         primary: '#FFF',
diff --git a/src/utils/HOCs/withIris.ts b/src/utils/HOCs/withIris.ts
index 2ad348b9d..ed10e5052 100644
--- a/src/utils/HOCs/withIris.ts
+++ b/src/utils/HOCs/withIris.ts
@@ -66,9 +66,8 @@ export function withIris<
     const component = name?.replace('Component', '');
     const dev = { path, debug };
 
-    const RefComponentWithIris = {
-      $$iris: { version, component, dev },
-      ...forwardRef<DOMElement, Props>((props: any, ref) => {
+    const RefComponentWithIris = forwardRef<DOMElement, Props>(
+      (props: any, ref) => {
         useEffect(() => {
           if (debug || (props && props.debug)) {
             if (ref) console.log({ Component, ref });
@@ -86,8 +85,10 @@ export function withIris<
           forwardRef: ref,
           ...props,
         });
-      }),
-    };
+      }
+    );
+
+    RefComponentWithIris['$$iris'] = { version, component, dev };
 
     return RefComponentWithIris as unknown as IrisComponent<
       DOMElement,
@@ -111,7 +112,7 @@ const soPretty = `
   padding: 0.25rem 1.25rem 0.3rem 0.5rem;
   color: white;
   text-shadow:
-  -1px -1px 0 rgba(0,0,0,0.334),  
+  -1px -1px 0 rgba(0,0,0,0.334),
   1px -1px 0 rgba(0,0,0,0.334),
   -1px 2px 5px rgba(0,0,0,0.334),
   1px 2px 5px rgba(0,0,0,0.334);
diff --git a/src/utils/hooks/usePortal_DEPRECATED/Anchor.tsx b/src/utils/hooks/usePortal_DEPRECATED/Anchor.tsx
index 19f5f7975..019867955 100755
--- a/src/utils/hooks/usePortal_DEPRECATED/Anchor.tsx
+++ b/src/utils/hooks/usePortal_DEPRECATED/Anchor.tsx
@@ -103,7 +103,7 @@ export function Anchor({
 }
 
 function useChildZIndex(children) {
-  if (children.ref.current) {
+  if (children?.ref?.current) {
     const style = getComputedStyle(children.ref.current);
     const zIndex = parseInt(style.zIndex);