@pepperi-addons/ngx-lib-react 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib-react",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
   "license": "MIT",
   "author": "Pepperi",

package/pep-dialog.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+import * as ReactDOM from 'react-dom';
 export const PepDialog = ({ title, showClose, showHeader, showFooter, onClose, children, ...rest }) => {
     const ref = useRef(null);
+    const [contentHost, setContentHost] = React.useState(null);
+    const [actionsHost, setActionsHost] = React.useState(null);
     // Sync inputs as properties on the custom element
     useEffect(() => {
         const el = ref.current;
@@ -16,6 +19,33 @@ export const PepDialog = ({ title, showClose, showHeader, showFooter, onClose, c
         if (typeof showFooter !== 'undefined')
             el.showFooter = !!showFooter;
     }, [title, showClose, showHeader, showFooter]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) {
+            return;
+        }
+        let destroyed = false;
+        const queryHosts = () => {
+            if (destroyed) {
+                return;
+            }
+            const content = el.querySelector('[mat-dialog-content], .mat-dialog-content');
+            const actions = el.querySelector('[mat-dialog-actions], .mat-dialog-actions');
+            if (content || actions) {
+                setContentHost(content);
+                setActionsHost(actions);
+            }
+            else {
+                requestAnimationFrame(queryHosts);
+            }
+        };
+        queryHosts();
+        return () => {
+            destroyed = true;
+            setContentHost(null);
+            setActionsHost(null);
+        };
+    }, []);
     // Wire events
     useEffect(() => {
         const el = ref.current;
@@ -29,6 +59,18 @@ export const PepDialog = ({ title, showClose, showHeader, showFooter, onClose, c
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onClose]);
-    return (_jsx("pep-dialog-element", { ref: ref, ...rest, children: children }));
+    let primaryChildren = [];
+    if (React.isValidElement(children) && children.type === React.Fragment) {
+        primaryChildren = React.Children.toArray(children.props && children.props.children);
+    }
+    else {
+        primaryChildren = React.Children.toArray(children);
+    }
+    const flatChildren = primaryChildren.filter((child) => React.isValidElement(child));
+    const contentChildren = flatChildren[0] ? [flatChildren[0]] : [];
+    const actionsChildren = flatChildren[1] ? [flatChildren[1]] : [];
+    return (_jsxs(_Fragment, { children: [_jsx("pep-dialog-element", { ref: ref, ...rest }), contentHost && contentChildren.length > 0 &&
+                ReactDOM.createPortal(contentChildren, contentHost), actionsHost && actionsChildren.length > 0 &&
+                ReactDOM.createPortal(actionsChildren, actionsHost)] }));
 };
 //# sourceMappingURL=pep-dialog.js.map