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

@@ -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',

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);

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);