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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib-react",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "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,25 @@ 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 }));
+    const allChildren = React.Children.toArray(children);
+    const contentChildren = allChildren.filter((child) => {
+        if (!React.isValidElement(child)) {
+            return true;
+        }
+        const props = child.props || {};
+        const hasContentAttr = Object.prototype.hasOwnProperty.call(props, 'pep-dialog-content');
+        const hasActionsAttr = Object.prototype.hasOwnProperty.call(props, 'pep-dialog-actions');
+        return hasContentAttr || !hasActionsAttr;
+    });
+    const actionsChildren = allChildren.filter((child) => {
+        if (!React.isValidElement(child)) {
+            return false;
+        }
+        const props = child.props || {};
+        return Object.prototype.hasOwnProperty.call(props, 'pep-dialog-actions');
+    });
+    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