@xanui/core 1.2.46 → 1.2.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AppRoot/Renderar.cjs +14 -49
- package/AppRoot/Renderar.cjs.map +1 -1
- package/AppRoot/Renderar.d.ts +0 -1
- package/AppRoot/Renderar.js +15 -50
- package/AppRoot/Renderar.js.map +1 -1
- package/AppRoot/index.cjs +3 -4
- package/AppRoot/index.cjs.map +1 -1
- package/AppRoot/index.d.ts +1 -0
- package/AppRoot/index.js +4 -5
- package/AppRoot/index.js.map +1 -1
- package/Iframe/index.cjs +1 -1
- package/Iframe/index.cjs.map +1 -1
- package/Iframe/index.js +1 -1
- package/Iframe/index.js.map +1 -1
- package/hooks/usePortal.cjs +1 -1
- package/hooks/usePortal.cjs.map +1 -1
- package/hooks/usePortal.js +1 -1
- package/hooks/usePortal.js.map +1 -1
- package/package.json +1 -1
package/AppRoot/Renderar.cjs
CHANGED
|
@@ -2,17 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var index = require('../Document/index.cjs');
|
|
6
5
|
|
|
7
|
-
const
|
|
8
|
-
|
|
6
|
+
const Components = [];
|
|
7
|
+
let dispatch = null;
|
|
9
8
|
class Renderar {
|
|
10
9
|
static render(component, props) {
|
|
11
|
-
|
|
12
|
-
let components = State.get(docid) || [];
|
|
13
|
-
components.push({ component, props });
|
|
14
|
-
State.set(Renderar.doc.id, components);
|
|
15
|
-
const dispatch = Dispatch.get(docid);
|
|
10
|
+
Components.push({ component, props });
|
|
16
11
|
if (dispatch) {
|
|
17
12
|
dispatch();
|
|
18
13
|
}
|
|
@@ -26,63 +21,33 @@ class Renderar {
|
|
|
26
21
|
};
|
|
27
22
|
}
|
|
28
23
|
static unrender(component) {
|
|
29
|
-
const
|
|
30
|
-
let components = State.get(docid) || [];
|
|
31
|
-
const index = components.findIndex((c) => c.component === component);
|
|
24
|
+
const index = Components.findIndex((c) => c.component === component);
|
|
32
25
|
if (index > -1) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (dispatch) {
|
|
26
|
+
Components.splice(index, 1);
|
|
27
|
+
if (dispatch)
|
|
36
28
|
dispatch();
|
|
37
|
-
}
|
|
38
29
|
}
|
|
39
30
|
}
|
|
40
31
|
static updateProps(component, props) {
|
|
41
|
-
const
|
|
42
|
-
let components = State.get(docid) || [];
|
|
43
|
-
const storedComponent = components.find((c) => c.component === component);
|
|
32
|
+
const storedComponent = Components.find((c) => c.component === component);
|
|
44
33
|
if (storedComponent) {
|
|
45
34
|
storedComponent.props = Object.assign(Object.assign({}, storedComponent.props), props);
|
|
46
35
|
}
|
|
47
|
-
|
|
48
|
-
if (dispatch) {
|
|
36
|
+
if (dispatch)
|
|
49
37
|
dispatch();
|
|
50
|
-
}
|
|
51
38
|
}
|
|
52
39
|
}
|
|
53
|
-
const RenderRenderar = () => {
|
|
40
|
+
const RenderRenderar = React.memo(() => {
|
|
54
41
|
const [, setState] = React.useState(0);
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
const render = Renderar.render;
|
|
58
|
-
const unrender = Renderar.unrender;
|
|
59
|
-
const updateProps = Renderar.updateProps;
|
|
60
|
-
Renderar.render = ((component, props) => {
|
|
61
|
-
Renderar.doc = doc;
|
|
62
|
-
render(component, props);
|
|
63
|
-
Renderar.doc = null;
|
|
64
|
-
});
|
|
65
|
-
Renderar.unrender = ((component) => {
|
|
66
|
-
Renderar.doc = doc;
|
|
67
|
-
unrender(component);
|
|
68
|
-
Renderar.doc = null;
|
|
69
|
-
});
|
|
70
|
-
Renderar.updateProps = ((component, props) => {
|
|
71
|
-
Renderar.doc = doc;
|
|
72
|
-
updateProps(component, props);
|
|
73
|
-
Renderar.doc = null;
|
|
74
|
-
});
|
|
75
|
-
}, [doc.id]);
|
|
76
|
-
if (!Dispatch.has(doc.id)) {
|
|
77
|
-
Dispatch.set(doc.id, () => {
|
|
42
|
+
if (!dispatch) {
|
|
43
|
+
dispatch = () => {
|
|
78
44
|
setState((prev) => prev + 1);
|
|
79
|
-
}
|
|
45
|
+
};
|
|
80
46
|
}
|
|
81
|
-
|
|
82
|
-
return components.map(({ component: Component, props }, index) => {
|
|
47
|
+
return Components.map(({ component: Component, props }, index) => {
|
|
83
48
|
return jsxRuntime.jsx(Component, Object.assign({}, props), index);
|
|
84
49
|
});
|
|
85
|
-
};
|
|
50
|
+
});
|
|
86
51
|
|
|
87
52
|
exports.RenderRenderar = RenderRenderar;
|
|
88
53
|
exports.Renderar = Renderar;
|
package/AppRoot/Renderar.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Renderar.cjs","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Renderar.cjs","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { memo, ReactElement } from \"react\";\r\n\r\ntype StoredComponent = {\r\n component: React.FunctionComponent<any>;\r\n props: any;\r\n};\r\n\r\nconst Components: StoredComponent[] = [];\r\nlet dispatch: (() => void) | null = null;\r\n\r\nexport class Renderar {\r\n static render(component: React.FunctionComponent, props?: any) {\r\n Components.push({ component, props });\r\n\r\n if (dispatch) {\r\n dispatch();\r\n }\r\n\r\n return {\r\n unrender: () => {\r\n this.unrender(component);\r\n },\r\n updateProps: (newProps: any) => {\r\n this.updateProps(component, newProps);\r\n }\r\n };\r\n }\r\n\r\n static unrender(component: React.FunctionComponent) {\r\n const index = Components.findIndex((c) => c.component === component);\r\n if (index > -1) {\r\n Components.splice(index, 1);\r\n if (dispatch) dispatch();\r\n }\r\n }\r\n\r\n static updateProps(component: React.FunctionComponent, props: any) {\r\n const storedComponent = Components.find((c) => c.component === component);\r\n if (storedComponent) {\r\n storedComponent.props = { ...storedComponent.props, ...props };\r\n }\r\n if (dispatch) dispatch();\r\n }\r\n}\r\n\r\nexport const RenderRenderar = memo(() => {\r\n const [, setState] = React.useState(0);\r\n\r\n if (!dispatch) {\r\n dispatch = () => {\r\n setState((prev) => prev + 1);\r\n };\r\n }\r\n\r\n return Components.map(({ component: Component, props }, index): ReactElement => {\r\n return <Component key={index} {...props} />;\r\n });\r\n})\r\n"],"names":["memo","_jsx"],"mappings":";;;;;AAOA,MAAM,UAAU,GAAsB,EAAE;AACxC,IAAI,QAAQ,GAAwB,IAAI;MAE3B,QAAQ,CAAA;AAClB,IAAA,OAAO,MAAM,CAAC,SAAkC,EAAE,KAAW,EAAA;QAC1D,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QAErC,IAAI,QAAQ,EAAE;AACX,YAAA,QAAQ,EAAE;QACb;QAEA,OAAO;YACJ,QAAQ,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC3B,CAAC;AACD,YAAA,WAAW,EAAE,CAAC,QAAa,KAAI;AAC5B,gBAAA,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC;YACxC;SACF;IACJ;IAEA,OAAO,QAAQ,CAAC,SAAkC,EAAA;AAC/C,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;AACpE,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACb,YAAA,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAC3B,YAAA,IAAI,QAAQ;AAAE,gBAAA,QAAQ,EAAE;QAC3B;IACH;AAEA,IAAA,OAAO,WAAW,CAAC,SAAkC,EAAE,KAAU,EAAA;AAC9D,QAAA,MAAM,eAAe,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;QACzE,IAAI,eAAe,EAAE;YAClB,eAAe,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,eAAe,CAAC,KAAK,CAAA,EAAK,KAAK,CAAE;QACjE;AACA,QAAA,IAAI,QAAQ;AAAE,YAAA,QAAQ,EAAE;IAC3B;AACF;AAEM,MAAM,cAAc,GAAGA,UAAI,CAAC,MAAK;IACrC,MAAM,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAI,CAAC,QAAQ,EAAE;QACZ,QAAQ,GAAG,MAAK;YACb,QAAQ,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AAC/B,QAAA,CAAC;IACJ;AAEA,IAAA,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,KAAkB;AAC5E,QAAA,OAAOC,eAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAiB,KAAK,CAAA,EAAhB,KAAK,CAAe;AAC9C,IAAA,CAAC,CAAC;AACL,CAAC;;;;;"}
|
package/AppRoot/Renderar.d.ts
CHANGED
package/AppRoot/Renderar.js
CHANGED
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import React__default, {
|
|
3
|
-
import { useDocument } from '../Document/index.js';
|
|
2
|
+
import React__default, { memo } from 'react';
|
|
4
3
|
|
|
5
|
-
const
|
|
6
|
-
|
|
4
|
+
const Components = [];
|
|
5
|
+
let dispatch = null;
|
|
7
6
|
class Renderar {
|
|
8
7
|
static render(component, props) {
|
|
9
|
-
|
|
10
|
-
let components = State.get(docid) || [];
|
|
11
|
-
components.push({ component, props });
|
|
12
|
-
State.set(Renderar.doc.id, components);
|
|
13
|
-
const dispatch = Dispatch.get(docid);
|
|
8
|
+
Components.push({ component, props });
|
|
14
9
|
if (dispatch) {
|
|
15
10
|
dispatch();
|
|
16
11
|
}
|
|
@@ -24,63 +19,33 @@ class Renderar {
|
|
|
24
19
|
};
|
|
25
20
|
}
|
|
26
21
|
static unrender(component) {
|
|
27
|
-
const
|
|
28
|
-
let components = State.get(docid) || [];
|
|
29
|
-
const index = components.findIndex((c) => c.component === component);
|
|
22
|
+
const index = Components.findIndex((c) => c.component === component);
|
|
30
23
|
if (index > -1) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
if (dispatch) {
|
|
24
|
+
Components.splice(index, 1);
|
|
25
|
+
if (dispatch)
|
|
34
26
|
dispatch();
|
|
35
|
-
}
|
|
36
27
|
}
|
|
37
28
|
}
|
|
38
29
|
static updateProps(component, props) {
|
|
39
|
-
const
|
|
40
|
-
let components = State.get(docid) || [];
|
|
41
|
-
const storedComponent = components.find((c) => c.component === component);
|
|
30
|
+
const storedComponent = Components.find((c) => c.component === component);
|
|
42
31
|
if (storedComponent) {
|
|
43
32
|
storedComponent.props = Object.assign(Object.assign({}, storedComponent.props), props);
|
|
44
33
|
}
|
|
45
|
-
|
|
46
|
-
if (dispatch) {
|
|
34
|
+
if (dispatch)
|
|
47
35
|
dispatch();
|
|
48
|
-
}
|
|
49
36
|
}
|
|
50
37
|
}
|
|
51
|
-
const RenderRenderar = () => {
|
|
38
|
+
const RenderRenderar = memo(() => {
|
|
52
39
|
const [, setState] = React__default.useState(0);
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const render = Renderar.render;
|
|
56
|
-
const unrender = Renderar.unrender;
|
|
57
|
-
const updateProps = Renderar.updateProps;
|
|
58
|
-
Renderar.render = ((component, props) => {
|
|
59
|
-
Renderar.doc = doc;
|
|
60
|
-
render(component, props);
|
|
61
|
-
Renderar.doc = null;
|
|
62
|
-
});
|
|
63
|
-
Renderar.unrender = ((component) => {
|
|
64
|
-
Renderar.doc = doc;
|
|
65
|
-
unrender(component);
|
|
66
|
-
Renderar.doc = null;
|
|
67
|
-
});
|
|
68
|
-
Renderar.updateProps = ((component, props) => {
|
|
69
|
-
Renderar.doc = doc;
|
|
70
|
-
updateProps(component, props);
|
|
71
|
-
Renderar.doc = null;
|
|
72
|
-
});
|
|
73
|
-
}, [doc.id]);
|
|
74
|
-
if (!Dispatch.has(doc.id)) {
|
|
75
|
-
Dispatch.set(doc.id, () => {
|
|
40
|
+
if (!dispatch) {
|
|
41
|
+
dispatch = () => {
|
|
76
42
|
setState((prev) => prev + 1);
|
|
77
|
-
}
|
|
43
|
+
};
|
|
78
44
|
}
|
|
79
|
-
|
|
80
|
-
return components.map(({ component: Component, props }, index) => {
|
|
45
|
+
return Components.map(({ component: Component, props }, index) => {
|
|
81
46
|
return jsx(Component, Object.assign({}, props), index);
|
|
82
47
|
});
|
|
83
|
-
};
|
|
48
|
+
});
|
|
84
49
|
|
|
85
50
|
export { RenderRenderar, Renderar };
|
|
86
51
|
//# sourceMappingURL=Renderar.js.map
|
package/AppRoot/Renderar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Renderar.js","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Renderar.js","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { memo, ReactElement } from \"react\";\r\n\r\ntype StoredComponent = {\r\n component: React.FunctionComponent<any>;\r\n props: any;\r\n};\r\n\r\nconst Components: StoredComponent[] = [];\r\nlet dispatch: (() => void) | null = null;\r\n\r\nexport class Renderar {\r\n static render(component: React.FunctionComponent, props?: any) {\r\n Components.push({ component, props });\r\n\r\n if (dispatch) {\r\n dispatch();\r\n }\r\n\r\n return {\r\n unrender: () => {\r\n this.unrender(component);\r\n },\r\n updateProps: (newProps: any) => {\r\n this.updateProps(component, newProps);\r\n }\r\n };\r\n }\r\n\r\n static unrender(component: React.FunctionComponent) {\r\n const index = Components.findIndex((c) => c.component === component);\r\n if (index > -1) {\r\n Components.splice(index, 1);\r\n if (dispatch) dispatch();\r\n }\r\n }\r\n\r\n static updateProps(component: React.FunctionComponent, props: any) {\r\n const storedComponent = Components.find((c) => c.component === component);\r\n if (storedComponent) {\r\n storedComponent.props = { ...storedComponent.props, ...props };\r\n }\r\n if (dispatch) dispatch();\r\n }\r\n}\r\n\r\nexport const RenderRenderar = memo(() => {\r\n const [, setState] = React.useState(0);\r\n\r\n if (!dispatch) {\r\n dispatch = () => {\r\n setState((prev) => prev + 1);\r\n };\r\n }\r\n\r\n return Components.map(({ component: Component, props }, index): ReactElement => {\r\n return <Component key={index} {...props} />;\r\n });\r\n})\r\n"],"names":["React","_jsx"],"mappings":";;;AAOA,MAAM,UAAU,GAAsB,EAAE;AACxC,IAAI,QAAQ,GAAwB,IAAI;MAE3B,QAAQ,CAAA;AAClB,IAAA,OAAO,MAAM,CAAC,SAAkC,EAAE,KAAW,EAAA;QAC1D,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QAErC,IAAI,QAAQ,EAAE;AACX,YAAA,QAAQ,EAAE;QACb;QAEA,OAAO;YACJ,QAAQ,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC3B,CAAC;AACD,YAAA,WAAW,EAAE,CAAC,QAAa,KAAI;AAC5B,gBAAA,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC;YACxC;SACF;IACJ;IAEA,OAAO,QAAQ,CAAC,SAAkC,EAAA;AAC/C,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;AACpE,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACb,YAAA,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAC3B,YAAA,IAAI,QAAQ;AAAE,gBAAA,QAAQ,EAAE;QAC3B;IACH;AAEA,IAAA,OAAO,WAAW,CAAC,SAAkC,EAAE,KAAU,EAAA;AAC9D,QAAA,MAAM,eAAe,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;QACzE,IAAI,eAAe,EAAE;YAClB,eAAe,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,eAAe,CAAC,KAAK,CAAA,EAAK,KAAK,CAAE;QACjE;AACA,QAAA,IAAI,QAAQ;AAAE,YAAA,QAAQ,EAAE;IAC3B;AACF;AAEM,MAAM,cAAc,GAAG,IAAI,CAAC,MAAK;IACrC,MAAM,GAAG,QAAQ,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAI,CAAC,QAAQ,EAAE;QACZ,QAAQ,GAAG,MAAK;YACb,QAAQ,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AAC/B,QAAA,CAAC;IACJ;AAEA,IAAA,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,KAAkB;AAC5E,QAAA,OAAOC,IAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAiB,KAAK,CAAA,EAAhB,KAAK,CAAe;AAC9C,IAAA,CAAC,CAAC;AACL,CAAC;;;;"}
|
package/AppRoot/index.cjs
CHANGED
|
@@ -17,17 +17,16 @@ var useMergeRefs = require('../hooks/useMergeRefs.cjs');
|
|
|
17
17
|
var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
|
|
18
18
|
|
|
19
19
|
const AppRoot = React.forwardRef((_a, ref) => {
|
|
20
|
-
var { children, noScrollbarCss, CSSCacheId, theme, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "document"]);
|
|
20
|
+
var { children, noScrollbarCss, CSSCacheId, theme, disableRenderar, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "disableRenderar", "document"]);
|
|
21
21
|
noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
|
|
22
22
|
_document !== null && _document !== void 0 ? _document : (_document = document);
|
|
23
|
+
disableRenderar !== null && disableRenderar !== void 0 ? disableRenderar : (disableRenderar = false);
|
|
23
24
|
const docid = React.useId();
|
|
24
25
|
const csscacheId = React.useId();
|
|
25
26
|
CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
|
|
26
27
|
const [visibility, setVisibility] = React.useState("hidden");
|
|
27
|
-
const [doc, setDoc] = React.useState(_document !== null && _document !== void 0 ? _document : (_document = document));
|
|
28
28
|
const rootRef = React.useRef(null);
|
|
29
29
|
const mergeRef = useMergeRefs(rootRef, ref);
|
|
30
|
-
// console.log(_document);
|
|
31
30
|
React.useEffect(() => {
|
|
32
31
|
setVisibility("visible");
|
|
33
32
|
// move oncss style tags to head
|
|
@@ -38,7 +37,7 @@ const AppRoot = React.forwardRef((_a, ref) => {
|
|
|
38
37
|
_document.head.appendChild(style);
|
|
39
38
|
});
|
|
40
39
|
}, []);
|
|
41
|
-
return (jsxRuntime.jsx(index.DocumentProvider, { document:
|
|
40
|
+
return (jsxRuntime.jsx(index.DocumentProvider, { document: _document, id: docid, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: () => rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, !disableRenderar && jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
|
|
42
41
|
});
|
|
43
42
|
|
|
44
43
|
module.exports = AppRoot;
|
package/AppRoot/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n noScrollbarCss?: boolean;\r\n document?: Document;\r\n CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n noScrollbarCss ??= false\r\n _document ??= document\r\n const docid = useId()\r\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n noScrollbarCss?: boolean;\r\n document?: Document;\r\n CSSCacheId?: string;\r\n disableRenderar?: boolean;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, disableRenderar, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n noScrollbarCss ??= false\r\n _document ??= document\r\n disableRenderar ??= false\r\n const docid = useId()\r\n const csscacheId = useId()\r\n CSSCacheId ??= csscacheId\r\n\r\n const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n const rootRef = useRef(null)\r\n const mergeRef = useMergeRefs(rootRef, ref)\r\n\r\n useEffect(() => {\r\n setVisibility(\"visible\");\r\n\r\n // move oncss style tags to head\r\n if (typeof _document === 'undefined') return;\r\n const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n styles.forEach((style) => {\r\n _document.head.appendChild(style);\r\n });\r\n }, [])\r\n\r\n return (\r\n <DocumentProvider document={_document} id={docid}>\r\n <CSSCacheProvider cacheId={CSSCacheId}>\r\n <AppRootProvider element={() => rootRef.current}>\r\n <ThemeProvider\r\n theme={theme}\r\n {...props}\r\n ref={mergeRef}\r\n isRoot\r\n sx={{\r\n ...props.sx,\r\n ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n }}\r\n >\r\n <BreakpointProvider>\r\n {children}\r\n {!disableRenderar && <RenderRenderar />}\r\n </BreakpointProvider>\r\n </ThemeProvider>\r\n </AppRootProvider>\r\n </CSSCacheProvider>\r\n </DocumentProvider>\r\n )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkBA;AAAsE;;;;AAInE;AACA;;AAGA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;AAGH;AAuBH;;"}
|
package/AppRoot/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ type AppRootProps<T extends TagComponentType = "div"> = ThemeProviderProps<T> &
|
|
|
6
6
|
noScrollbarCss?: boolean;
|
|
7
7
|
document?: Document;
|
|
8
8
|
CSSCacheId?: string;
|
|
9
|
+
disableRenderar?: boolean;
|
|
9
10
|
};
|
|
10
11
|
declare const AppRoot: React__default.ForwardRefExoticComponent<Omit<AppRootProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
|
|
11
12
|
|
package/AppRoot/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { __rest } from 'tslib';
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
import React__default, { useId,
|
|
4
|
+
import React__default, { useId, useRef, useEffect } from 'react';
|
|
5
5
|
import '../theme/core.js';
|
|
6
6
|
import '../css/getValue.js';
|
|
7
7
|
import 'oncss';
|
|
@@ -15,17 +15,16 @@ import useMergeRefs from '../hooks/useMergeRefs.js';
|
|
|
15
15
|
import { CSSCacheProvider } from '../css/CSSCacheProvider.js';
|
|
16
16
|
|
|
17
17
|
const AppRoot = React__default.forwardRef((_a, ref) => {
|
|
18
|
-
var { children, noScrollbarCss, CSSCacheId, theme, document: _document } = _a, props = __rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "document"]);
|
|
18
|
+
var { children, noScrollbarCss, CSSCacheId, theme, disableRenderar, document: _document } = _a, props = __rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "disableRenderar", "document"]);
|
|
19
19
|
noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
|
|
20
20
|
_document !== null && _document !== void 0 ? _document : (_document = document);
|
|
21
|
+
disableRenderar !== null && disableRenderar !== void 0 ? disableRenderar : (disableRenderar = false);
|
|
21
22
|
const docid = useId();
|
|
22
23
|
const csscacheId = useId();
|
|
23
24
|
CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
|
|
24
25
|
const [visibility, setVisibility] = React__default.useState("hidden");
|
|
25
|
-
const [doc, setDoc] = useState(_document !== null && _document !== void 0 ? _document : (_document = document));
|
|
26
26
|
const rootRef = useRef(null);
|
|
27
27
|
const mergeRef = useMergeRefs(rootRef, ref);
|
|
28
|
-
// console.log(_document);
|
|
29
28
|
useEffect(() => {
|
|
30
29
|
setVisibility("visible");
|
|
31
30
|
// move oncss style tags to head
|
|
@@ -36,7 +35,7 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
|
|
|
36
35
|
_document.head.appendChild(style);
|
|
37
36
|
});
|
|
38
37
|
}, []);
|
|
39
|
-
return (jsx(DocumentProvider, { document:
|
|
38
|
+
return (jsx(DocumentProvider, { document: _document, id: docid, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: () => rootRef.current, children: jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxs(BreakpointProvider, { children: [children, !disableRenderar && jsx(RenderRenderar, {})] }) })) }) }) }));
|
|
40
39
|
});
|
|
41
40
|
|
|
42
41
|
export { AppRoot as default };
|
package/AppRoot/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n noScrollbarCss?: boolean;\r\n document?: Document;\r\n CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n noScrollbarCss ??= false\r\n _document ??= document\r\n const docid = useId()\r\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n noScrollbarCss?: boolean;\r\n document?: Document;\r\n CSSCacheId?: string;\r\n disableRenderar?: boolean;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, disableRenderar, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n noScrollbarCss ??= false\r\n _document ??= document\r\n disableRenderar ??= false\r\n const docid = useId()\r\n const csscacheId = useId()\r\n CSSCacheId ??= csscacheId\r\n\r\n const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n const rootRef = useRef(null)\r\n const mergeRef = useMergeRefs(rootRef, ref)\r\n\r\n useEffect(() => {\r\n setVisibility(\"visible\");\r\n\r\n // move oncss style tags to head\r\n if (typeof _document === 'undefined') return;\r\n const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n styles.forEach((style) => {\r\n _document.head.appendChild(style);\r\n });\r\n }, [])\r\n\r\n return (\r\n <DocumentProvider document={_document} id={docid}>\r\n <CSSCacheProvider cacheId={CSSCacheId}>\r\n <AppRootProvider element={() => rootRef.current}>\r\n <ThemeProvider\r\n theme={theme}\r\n {...props}\r\n ref={mergeRef}\r\n isRoot\r\n sx={{\r\n ...props.sx,\r\n ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n }}\r\n >\r\n <BreakpointProvider>\r\n {children}\r\n {!disableRenderar && <RenderRenderar />}\r\n </BreakpointProvider>\r\n </ThemeProvider>\r\n </AppRootProvider>\r\n </CSSCacheProvider>\r\n </DocumentProvider>\r\n )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA;AAAsE;;;;AAInE;AACA;;AAGA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;AAGH;AAuBH;;"}
|
package/Iframe/index.cjs
CHANGED
|
@@ -37,7 +37,7 @@ const Iframe = (_a, ref) => {
|
|
|
37
37
|
reactDom.createPortal(jsxRuntime.jsx(IframeContext.Provider, { value: {
|
|
38
38
|
document: doc,
|
|
39
39
|
window: doc.defaultView,
|
|
40
|
-
}, children: jsxRuntime.jsx(index$2, { theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
|
|
40
|
+
}, children: jsxRuntime.jsx(index$2, { disableRenderar: true, theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
|
|
41
41
|
};
|
|
42
42
|
var index = React.forwardRef(Iframe);
|
|
43
43
|
|
package/Iframe/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport Tag from \"../Tag\";\r\nimport { createPortal } from \"react-dom\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { TagPropsRoot } from \"../Tag/types\";\r\nimport useMergeRefs from \"../hooks/useMergeRefs\";\r\n\r\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\r\n document: null,\r\n window: null,\r\n});\r\n\r\n\r\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\r\n theme?: string;\r\n CSSCacheId?: string;\r\n}\r\n\r\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\r\n const [doc, setDoc] = useState<Document | null>(null);\r\n const iframeRef = useRef<HTMLIFrameElement>(null);\r\n const _ref = useMergeRefs(iframeRef, ref)\r\n const parentTheme = useTheme()\r\n theme ??= parentTheme.name\r\n\r\n useEffect(() => {\r\n if (!iframeRef.current) return;\r\n const iframe = iframeRef.current;\r\n const onLoad = () => setDoc(iframe.contentDocument);\r\n iframe.addEventListener(\"load\", onLoad);\r\n return () => iframe.removeEventListener(\"load\", onLoad);\r\n }, []);\r\n\r\n return (\r\n <>\r\n <Tag\r\n {...props}\r\n component={\"iframe\"}\r\n sxr={{\r\n border: 'none',\r\n width: \"100%\",\r\n height: \"100%\",\r\n p: 0,\r\n m: 0,\r\n ...sxr\r\n }}\r\n ref={_ref}\r\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\r\n />\r\n {doc &&\r\n createPortal(\r\n <IframeContext.Provider\r\n value={{\r\n document: doc,\r\n window: doc.defaultView,\r\n }}\r\n >\r\n <AppRoot theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\r\n {children}\r\n </AppRoot>\r\n </IframeContext.Provider>,\r\n doc.body\r\n )}\r\n </>\r\n );\r\n}\r\n\r\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport Tag from \"../Tag\";\r\nimport { createPortal } from \"react-dom\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { TagPropsRoot } from \"../Tag/types\";\r\nimport useMergeRefs from \"../hooks/useMergeRefs\";\r\n\r\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\r\n document: null,\r\n window: null,\r\n});\r\n\r\n\r\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\r\n theme?: string;\r\n CSSCacheId?: string;\r\n}\r\n\r\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\r\n const [doc, setDoc] = useState<Document | null>(null);\r\n const iframeRef = useRef<HTMLIFrameElement>(null);\r\n const _ref = useMergeRefs(iframeRef, ref)\r\n const parentTheme = useTheme()\r\n theme ??= parentTheme.name\r\n\r\n useEffect(() => {\r\n if (!iframeRef.current) return;\r\n const iframe = iframeRef.current;\r\n const onLoad = () => setDoc(iframe.contentDocument);\r\n iframe.addEventListener(\"load\", onLoad);\r\n return () => iframe.removeEventListener(\"load\", onLoad);\r\n }, []);\r\n\r\n return (\r\n <>\r\n <Tag\r\n {...props}\r\n component={\"iframe\"}\r\n sxr={{\r\n border: 'none',\r\n width: \"100%\",\r\n height: \"100%\",\r\n p: 0,\r\n m: 0,\r\n ...sxr\r\n }}\r\n ref={_ref}\r\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\r\n />\r\n {doc &&\r\n createPortal(\r\n <IframeContext.Provider\r\n value={{\r\n document: doc,\r\n window: doc.defaultView,\r\n }}\r\n >\r\n <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\r\n {children}\r\n </AppRoot>\r\n </IframeContext.Provider>,\r\n doc.body\r\n )}\r\n </>\r\n );\r\n}\r\n\r\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
|
package/Iframe/index.js
CHANGED
|
@@ -35,7 +35,7 @@ const Iframe = (_a, ref) => {
|
|
|
35
35
|
createPortal(jsx(IframeContext.Provider, { value: {
|
|
36
36
|
document: doc,
|
|
37
37
|
window: doc.defaultView,
|
|
38
|
-
}, children: jsx(AppRoot, { theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
|
|
38
|
+
}, children: jsx(AppRoot, { disableRenderar: true, theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
|
|
39
39
|
};
|
|
40
40
|
var index = React__default.forwardRef(Iframe);
|
|
41
41
|
|
package/Iframe/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport Tag from \"../Tag\";\r\nimport { createPortal } from \"react-dom\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { TagPropsRoot } from \"../Tag/types\";\r\nimport useMergeRefs from \"../hooks/useMergeRefs\";\r\n\r\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\r\n document: null,\r\n window: null,\r\n});\r\n\r\n\r\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\r\n theme?: string;\r\n CSSCacheId?: string;\r\n}\r\n\r\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\r\n const [doc, setDoc] = useState<Document | null>(null);\r\n const iframeRef = useRef<HTMLIFrameElement>(null);\r\n const _ref = useMergeRefs(iframeRef, ref)\r\n const parentTheme = useTheme()\r\n theme ??= parentTheme.name\r\n\r\n useEffect(() => {\r\n if (!iframeRef.current) return;\r\n const iframe = iframeRef.current;\r\n const onLoad = () => setDoc(iframe.contentDocument);\r\n iframe.addEventListener(\"load\", onLoad);\r\n return () => iframe.removeEventListener(\"load\", onLoad);\r\n }, []);\r\n\r\n return (\r\n <>\r\n <Tag\r\n {...props}\r\n component={\"iframe\"}\r\n sxr={{\r\n border: 'none',\r\n width: \"100%\",\r\n height: \"100%\",\r\n p: 0,\r\n m: 0,\r\n ...sxr\r\n }}\r\n ref={_ref}\r\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\r\n />\r\n {doc &&\r\n createPortal(\r\n <IframeContext.Provider\r\n value={{\r\n document: doc,\r\n window: doc.defaultView,\r\n }}\r\n >\r\n <AppRoot theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\r\n {children}\r\n </AppRoot>\r\n </IframeContext.Provider>,\r\n doc.body\r\n )}\r\n </>\r\n );\r\n}\r\n\r\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport Tag from \"../Tag\";\r\nimport { createPortal } from \"react-dom\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { TagPropsRoot } from \"../Tag/types\";\r\nimport useMergeRefs from \"../hooks/useMergeRefs\";\r\n\r\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\r\n document: null,\r\n window: null,\r\n});\r\n\r\n\r\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\r\n theme?: string;\r\n CSSCacheId?: string;\r\n}\r\n\r\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\r\n const [doc, setDoc] = useState<Document | null>(null);\r\n const iframeRef = useRef<HTMLIFrameElement>(null);\r\n const _ref = useMergeRefs(iframeRef, ref)\r\n const parentTheme = useTheme()\r\n theme ??= parentTheme.name\r\n\r\n useEffect(() => {\r\n if (!iframeRef.current) return;\r\n const iframe = iframeRef.current;\r\n const onLoad = () => setDoc(iframe.contentDocument);\r\n iframe.addEventListener(\"load\", onLoad);\r\n return () => iframe.removeEventListener(\"load\", onLoad);\r\n }, []);\r\n\r\n return (\r\n <>\r\n <Tag\r\n {...props}\r\n component={\"iframe\"}\r\n sxr={{\r\n border: 'none',\r\n width: \"100%\",\r\n height: \"100%\",\r\n p: 0,\r\n m: 0,\r\n ...sxr\r\n }}\r\n ref={_ref}\r\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\r\n />\r\n {doc &&\r\n createPortal(\r\n <IframeContext.Provider\r\n value={{\r\n document: doc,\r\n window: doc.defaultView,\r\n }}\r\n >\r\n <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\r\n {children}\r\n </AppRoot>\r\n </IframeContext.Provider>,\r\n doc.body\r\n )}\r\n </>\r\n );\r\n}\r\n\r\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
|
package/hooks/usePortal.cjs
CHANGED
|
@@ -40,7 +40,7 @@ function usePortal(children, options) {
|
|
|
40
40
|
if (!cont.contains(el)) {
|
|
41
41
|
cont.appendChild(el);
|
|
42
42
|
}
|
|
43
|
-
root.render(jsxRuntime.jsx(index$1, { theme: theme.name, CSSCacheId: cacheId, document: doc.document, children: children }));
|
|
43
|
+
root.render(jsxRuntime.jsx(index$1, { disableRenderar: true, theme: theme.name, CSSCacheId: cacheId, document: doc.document, children: children }));
|
|
44
44
|
};
|
|
45
45
|
const unmount = () => {
|
|
46
46
|
root.render(null);
|
package/hooks/usePortal.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.cjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type UsePortalOptions = {\r\n container?: HTMLElement;\r\n autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n options = options || {};\r\n if (options.autoMount === undefined) {\r\n options.autoMount = true;\r\n }\r\n const [mounted, setMounted] = React.useState(options.autoMount);\r\n const theme = useTheme();\r\n const doc = useDocument()\r\n const appRoot = useAppRootElement();\r\n const cacheId = useCSSCacheId()\r\n\r\n const { el, root } = useMemo(() => {\r\n const el = doc.document.createElement(\"div\");\r\n const root = createRoot(el);\r\n return { el, root };\r\n }, [options.autoMount]);\r\n\r\n const container = () => {\r\n const container = options?.container || appRoot\r\n if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n return container;\r\n }\r\n\r\n const mount = () => {\r\n const cont = container();\r\n if (!cont.contains(el)) {\r\n cont.appendChild(el);\r\n }\r\n root.render(<AppRoot theme={theme.name} CSSCacheId={cacheId} document={doc.document}>{children}</AppRoot>)\r\n }\r\n\r\n const unmount = () => {\r\n root.render(null)\r\n el.remove();\r\n }\r\n\r\n useEffect(() => {\r\n (mounted && appRoot) ? mount() : unmount()\r\n }, [mounted, appRoot]);\r\n\r\n useEffect(() => {\r\n if (mounted && appRoot) mount()\r\n }, [children, appRoot]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n unmount()\r\n };\r\n }, []);\r\n\r\n return {\r\n isMount: () => mounted,\r\n mount: () => setMounted(true),\r\n unmount: () => setMounted(false)\r\n }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAcA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;AACA;;;AAIG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;;AAGN;;AAGG;;AAEH;;AAGG;AACH;;;AAG2B;AAC3B;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}
|
|
1
|
+
{"version":3,"file":"usePortal.cjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type UsePortalOptions = {\r\n container?: HTMLElement;\r\n autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n options = options || {};\r\n if (options.autoMount === undefined) {\r\n options.autoMount = true;\r\n }\r\n const [mounted, setMounted] = React.useState(options.autoMount);\r\n const theme = useTheme();\r\n const doc = useDocument()\r\n const appRoot = useAppRootElement();\r\n const cacheId = useCSSCacheId()\r\n\r\n const { el, root } = useMemo(() => {\r\n const el = doc.document.createElement(\"div\");\r\n const root = createRoot(el);\r\n return { el, root };\r\n }, [options.autoMount]);\r\n\r\n const container = () => {\r\n const container = options?.container || appRoot\r\n if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n return container;\r\n }\r\n\r\n const mount = () => {\r\n const cont = container();\r\n if (!cont.contains(el)) {\r\n cont.appendChild(el);\r\n }\r\n root.render(<AppRoot disableRenderar theme={theme.name} CSSCacheId={cacheId} document={doc.document}>{children}</AppRoot>)\r\n }\r\n\r\n const unmount = () => {\r\n root.render(null)\r\n el.remove();\r\n }\r\n\r\n useEffect(() => {\r\n (mounted && appRoot) ? mount() : unmount()\r\n }, [mounted, appRoot]);\r\n\r\n useEffect(() => {\r\n if (mounted && appRoot) mount()\r\n }, [children, appRoot]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n unmount()\r\n };\r\n }, []);\r\n\r\n return {\r\n isMount: () => mounted,\r\n mount: () => setMounted(true),\r\n unmount: () => setMounted(false)\r\n }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAcA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;AACA;;;AAIG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;;AAGN;;AAGG;;AAEH;;AAGG;AACH;;;AAG2B;AAC3B;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}
|
package/hooks/usePortal.js
CHANGED
|
@@ -38,7 +38,7 @@ function usePortal(children, options) {
|
|
|
38
38
|
if (!cont.contains(el)) {
|
|
39
39
|
cont.appendChild(el);
|
|
40
40
|
}
|
|
41
|
-
root.render(jsx(AppRoot, { theme: theme.name, CSSCacheId: cacheId, document: doc.document, children: children }));
|
|
41
|
+
root.render(jsx(AppRoot, { disableRenderar: true, theme: theme.name, CSSCacheId: cacheId, document: doc.document, children: children }));
|
|
42
42
|
};
|
|
43
43
|
const unmount = () => {
|
|
44
44
|
root.render(null);
|
package/hooks/usePortal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type UsePortalOptions = {\r\n container?: HTMLElement;\r\n autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n options = options || {};\r\n if (options.autoMount === undefined) {\r\n options.autoMount = true;\r\n }\r\n const [mounted, setMounted] = React.useState(options.autoMount);\r\n const theme = useTheme();\r\n const doc = useDocument()\r\n const appRoot = useAppRootElement();\r\n const cacheId = useCSSCacheId()\r\n\r\n const { el, root } = useMemo(() => {\r\n const el = doc.document.createElement(\"div\");\r\n const root = createRoot(el);\r\n return { el, root };\r\n }, [options.autoMount]);\r\n\r\n const container = () => {\r\n const container = options?.container || appRoot\r\n if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n return container;\r\n }\r\n\r\n const mount = () => {\r\n const cont = container();\r\n if (!cont.contains(el)) {\r\n cont.appendChild(el);\r\n }\r\n root.render(<AppRoot theme={theme.name} CSSCacheId={cacheId} document={doc.document}>{children}</AppRoot>)\r\n }\r\n\r\n const unmount = () => {\r\n root.render(null)\r\n el.remove();\r\n }\r\n\r\n useEffect(() => {\r\n (mounted && appRoot) ? mount() : unmount()\r\n }, [mounted, appRoot]);\r\n\r\n useEffect(() => {\r\n if (mounted && appRoot) mount()\r\n }, [children, appRoot]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n unmount()\r\n };\r\n }, []);\r\n\r\n return {\r\n isMount: () => mounted,\r\n mount: () => setMounted(true),\r\n unmount: () => setMounted(false)\r\n }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;AACA;;;AAIG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;;AAGN;;AAGG;;AAEH;;AAGG;AACH;;;AAG2B;AAC3B;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}
|
|
1
|
+
{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type UsePortalOptions = {\r\n container?: HTMLElement;\r\n autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n options = options || {};\r\n if (options.autoMount === undefined) {\r\n options.autoMount = true;\r\n }\r\n const [mounted, setMounted] = React.useState(options.autoMount);\r\n const theme = useTheme();\r\n const doc = useDocument()\r\n const appRoot = useAppRootElement();\r\n const cacheId = useCSSCacheId()\r\n\r\n const { el, root } = useMemo(() => {\r\n const el = doc.document.createElement(\"div\");\r\n const root = createRoot(el);\r\n return { el, root };\r\n }, [options.autoMount]);\r\n\r\n const container = () => {\r\n const container = options?.container || appRoot\r\n if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n return container;\r\n }\r\n\r\n const mount = () => {\r\n const cont = container();\r\n if (!cont.contains(el)) {\r\n cont.appendChild(el);\r\n }\r\n root.render(<AppRoot disableRenderar theme={theme.name} CSSCacheId={cacheId} document={doc.document}>{children}</AppRoot>)\r\n }\r\n\r\n const unmount = () => {\r\n root.render(null)\r\n el.remove();\r\n }\r\n\r\n useEffect(() => {\r\n (mounted && appRoot) ? mount() : unmount()\r\n }, [mounted, appRoot]);\r\n\r\n useEffect(() => {\r\n if (mounted && appRoot) mount()\r\n }, [children, appRoot]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n unmount()\r\n };\r\n }, []);\r\n\r\n return {\r\n isMount: () => mounted,\r\n mount: () => setMounted(true),\r\n unmount: () => setMounted(false)\r\n }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;AACA;;;AAIG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;;AAGN;;AAGG;;AAEH;;AAGG;AACH;;;AAG2B;AAC3B;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}
|