@xylabs/sdk-react 2.9.12 → 2.9.13

package/dist/cjs5/components/Portal.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Portal.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Portal.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+//TODO - Move into SDK
+const Portal = ({ children, className, el = 'div', target = 'body' }) => {
+    const [container] = useState(document.createElement(el));
+    if (className) {
+        container.classList.add(className);
+    }
+    useEffect(() => {
+        const targetElement = document.querySelector(target);
+        if (!targetElement) {
+            console.warn(`Unable to find target element: ${target}`);
+        }
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.appendChild(container);
+        return () => {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeChild(container);
+        };
+    }, [container, target]);
+    return createPortal(children, container);
+};
+//# sourceMappingURL=Portal.js.map

package/dist/components/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../src/components/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AASxC,sBAAsB;AACtB,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,EAAe,EAAE,EAAE;IAC1G,MAAM,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAA;IACxD,IAAI,SAAS,EAAE;QACb,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;KACnC;IACD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QACpD,IAAI,CAAC,aAAa,EAAE;YAClB,OAAO,CAAC,IAAI,CAAC,kCAAkC,MAAM,EAAE,CAAC,CAAA;SACzD;QACD,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,WAAW,CAAC,SAAS,CAAC,CAAA;QACrC,OAAO,GAAG,EAAE;YACV,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,WAAW,CAAC,SAAS,CAAC,CAAA;QACvC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAA;IAEvB,OAAO,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAA;AAC1C,CAAC,CAAA"}

package/dist/esm2015/components/Portal.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm2017/components/Portal.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm5/components/Portal.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/node/components/Portal.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/node-esm/components/Portal.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -48,6 +48,7 @@
     "@types/node": "^17",
     "@types/numeral": "^2",
     "@types/react": "^17",
+    "@types/react-dom": "^17",
     "@xylabs/eslint-config-react": "^2",
     "@xylabs/pixel": "^1.3.6",
     "@xylabs/rollup-config": "^1.1.5",
@@ -123,5 +124,5 @@
   },
   "sideEffects": false,
   "types": "dist/index.d.ts",
-  "version": "2.9.12"
+  "version": "2.9.13"
 }

package/src/components/Portal.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+interface PortalProps {
+  children: React.ReactNode
+  className?: string
+  el?: string
+  target?: string
+}
+
+export const Portal: React.FC<PortalProps> = ({ children, className, el = 'div', target = 'body' }: PortalProps) => {
+  const [container] = useState(document.createElement(el))
+  if (className) {
+    container.classList.add(className)
+  }
+  useEffect(() => {
+    const targetElement = document.querySelector(target)
+    if (!targetElement) {
+      console.warn(`Unable to find target element: ${target}`)
+    }
+    targetElement?.appendChild(container)
+    return () => {
+      targetElement?.removeChild(container)
+    }
+  }, [container, target])
+
+  return createPortal(children, container)
+}

package/src/components/index.ts

@@ -18,6 +18,7 @@ export * from './InvertableThemeProvider'
 export * from './LinkEx'
 export * from './NumberStatus'
 export * from './QuickTipButton'
+export * from './Portal'
 export * from './RichResult'
 export * from './ScrollToTop'
 export * from './TokenAmount'