@0xsequence/connect
Version:
Connect package for Sequence Web SDK
46 lines • 2.08 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShadowRoot = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_1 = require("@0xsequence/design-system");
const react_1 = require("react");
const react_dom_1 = require("react-dom");
const styleProperties_js_1 = require("../../styleProperties.js");
const styles_js_1 = require("../../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_js_1.styles + styleProperties_js_1.styleProperties + (customCSS ? `\n\n${customCSS}` : ''));
}
return sheet;
};
const ShadowRoot = (props) => {
const { theme, children, customCSS } = props;
const hostRef = (0, react_1.useRef)(null);
const [container, setContainer] = (0, react_1.useState)(null);
const [windowDocument, setWindowDocument] = (0, react_1.useState)(null);
(0, react_1.useEffect)(() => {
setWindowDocument(document);
}, []);
(0, react_1.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
? (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { "data-shadow-host": true, ref: hostRef, children: container && ((0, jsx_runtime_1.jsx)(design_system_1.ThemeProvider, { theme: theme, root: container, children: children })) }), document.body)
: null;
};
exports.ShadowRoot = ShadowRoot;
//# sourceMappingURL=ShadowRoot.js.map