@0xsequence/connect
Version:
Connect package for Sequence Web SDK
42 lines • 1.78 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { ThemeProvider } from '@0xsequence/design-system';
import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { styleProperties } from '../../styleProperties.js';
import { styles } from '../../styles.js';
// Create a stylesheet which is shared by all ShadowRoot components
let sheet;
const getCSSStyleSheet = (customCSS) => {
if (!sheet) {
sheet = new CSSStyleSheet();
sheet.replaceSync(styles + styleProperties + (customCSS ? `\n\n${customCSS}` : ''));
}
return sheet;
};
export const ShadowRoot = (props) => {
const { theme, children, customCSS } = props;
const hostRef = useRef(null);
const [container, setContainer] = useState(null);
const [windowDocument, setWindowDocument] = useState(null);
useEffect(() => {
setWindowDocument(document);
}, []);
useEffect(() => {
if (hostRef.current && !hostRef.current.shadowRoot) {
// Create a shadow root
const shadowRoot = hostRef.current.attachShadow({ mode: 'open' });
// Attach the stylesheet
shadowRoot.adoptedStyleSheets = [getCSSStyleSheet(customCSS)];
// Create a container
const container = document.createElement('div');
container.id = 'shadow-root-container';
shadowRoot.appendChild(container);
setContainer(container);
}
}, [windowDocument]);
return windowDocument
? createPortal(_jsx("div", { "data-shadow-host": true, ref: hostRef, children: container && (_jsx(ThemeProvider, { theme: theme, root: container, children: children })) }), document.body)
: null;
};
//# sourceMappingURL=ShadowRoot.js.map