@xanui/core 1.2.52 → 1.2.54
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 +10 -22
- package/AppRoot/Renderar.cjs.map +1 -1
- package/AppRoot/Renderar.d.ts +3 -3
- package/AppRoot/Renderar.js +13 -25
- package/AppRoot/Renderar.js.map +1 -1
- package/AppRoot/index.cjs +12 -2
- package/AppRoot/index.cjs.map +1 -1
- package/AppRoot/index.d.ts +1 -0
- package/AppRoot/index.js +12 -2
- package/AppRoot/index.js.map +1 -1
- package/package.json +1 -1
package/AppRoot/Renderar.cjs
CHANGED
|
@@ -8,16 +8,11 @@ let dispatch = null;
|
|
|
8
8
|
class Renderar {
|
|
9
9
|
static render(component, props) {
|
|
10
10
|
Components.push({ component, props });
|
|
11
|
-
if (dispatch)
|
|
11
|
+
if (dispatch)
|
|
12
12
|
dispatch();
|
|
13
|
-
}
|
|
14
13
|
return {
|
|
15
|
-
unrender: () =>
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
updateProps: (newProps) => {
|
|
19
|
-
this.updateProps(component, newProps);
|
|
20
|
-
}
|
|
14
|
+
unrender: () => this.unrender(component),
|
|
15
|
+
updateProps: (newProps) => this.updateProps(component, newProps),
|
|
21
16
|
};
|
|
22
17
|
}
|
|
23
18
|
static unrender(component) {
|
|
@@ -29,25 +24,18 @@ class Renderar {
|
|
|
29
24
|
}
|
|
30
25
|
}
|
|
31
26
|
static updateProps(component, props) {
|
|
32
|
-
const
|
|
33
|
-
if (
|
|
34
|
-
|
|
35
|
-
}
|
|
27
|
+
const stored = Components.find((c) => c.component === component);
|
|
28
|
+
if (stored)
|
|
29
|
+
stored.props = Object.assign(Object.assign({}, stored.props), props);
|
|
36
30
|
if (dispatch)
|
|
37
31
|
dispatch();
|
|
38
32
|
}
|
|
39
33
|
}
|
|
40
|
-
const RenderRenderar =
|
|
34
|
+
const RenderRenderar = () => {
|
|
41
35
|
const [, setState] = React.useState(0);
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
return Components.map(({ component: Component, props }, index) => {
|
|
48
|
-
return jsxRuntime.jsx(Component, Object.assign({}, props), index);
|
|
49
|
-
});
|
|
50
|
-
});
|
|
36
|
+
dispatch = () => setState((prev) => prev + 1);
|
|
37
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Components.map(({ component: Component, props }, i) => (jsxRuntime.jsx(Component, Object.assign({}, props), i))) }));
|
|
38
|
+
};
|
|
51
39
|
|
|
52
40
|
exports.RenderRenderar = RenderRenderar;
|
|
53
41
|
exports.Renderar = Renderar;
|
package/AppRoot/Renderar.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Renderar.cjs","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"Renderar.cjs","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["// Renderar.tsx\nimport React, { useState } from \"react\";\n\ntype StoredComponent = {\n component: React.FC<any>;\n props: any;\n};\n\nconst Components: StoredComponent[] = [];\nlet dispatch: (() => void) | null = null;\n\nexport class Renderar {\n static render(component: React.FC, props?: any) {\n Components.push({ component, props });\n if (dispatch) dispatch();\n return {\n unrender: () => this.unrender(component),\n updateProps: (newProps: any) => this.updateProps(component, newProps),\n };\n }\n\n static unrender(component: React.FC) {\n const index = Components.findIndex((c) => c.component === component);\n if (index > -1) {\n Components.splice(index, 1);\n if (dispatch) dispatch();\n }\n }\n\n static updateProps(component: React.FC, props: any) {\n const stored = Components.find((c) => c.component === component);\n if (stored) stored.props = { ...stored.props, ...props };\n if (dispatch) dispatch();\n }\n}\n\nexport const RenderRenderar = () => {\n const [, setState] = useState(0);\n dispatch = () => setState((prev) => prev + 1);\n\n return (\n <>\n {Components.map(({ component: Component, props }, i) => (\n <Component key={i} {...props} />\n ))}\n </>\n );\n};"],"names":["useState","_jsx","_Fragment"],"mappings":";;;;;AAQA,MAAM,UAAU,GAAsB,EAAE;AACxC,IAAI,QAAQ,GAAwB,IAAI;MAE3B,QAAQ,CAAA;AAClB,IAAA,OAAO,MAAM,CAAC,SAAmB,EAAE,KAAW,EAAA;QAC3C,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AACrC,QAAA,IAAI,QAAQ;AAAE,YAAA,QAAQ,EAAE;QACxB,OAAO;YACJ,QAAQ,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;AACxC,YAAA,WAAW,EAAE,CAAC,QAAa,KAAK,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC;SACvE;IACJ;IAEA,OAAO,QAAQ,CAAC,SAAmB,EAAA;AAChC,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,SAAmB,EAAE,KAAU,EAAA;AAC/C,QAAA,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;AAChE,QAAA,IAAI,MAAM;YAAE,MAAM,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,MAAM,CAAC,KAAK,CAAA,EAAK,KAAK,CAAE;AACxD,QAAA,IAAI,QAAQ;AAAE,YAAA,QAAQ,EAAE;IAC3B;AACF;AAEM,MAAM,cAAc,GAAG,MAAK;IAChC,MAAM,GAAG,QAAQ,CAAC,GAAGA,cAAQ,CAAC,CAAC,CAAC;AAChC,IAAA,QAAQ,GAAG,MAAM,QAAQ,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AAE7C,IAAA,QACGC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EACI,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,MAChDD,cAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAa,KAAK,CAAA,EAAZ,CAAC,CAAe,CAClC,CAAC,EAAA,CACF;AAET;;;;;"}
|
package/AppRoot/Renderar.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
|
|
3
3
|
declare class Renderar {
|
|
4
|
-
static render(component: React__default.
|
|
4
|
+
static render(component: React__default.FC, props?: any): {
|
|
5
5
|
unrender: () => void;
|
|
6
6
|
updateProps: (newProps: any) => void;
|
|
7
7
|
};
|
|
8
|
-
static unrender(component: React__default.
|
|
9
|
-
static updateProps(component: React__default.
|
|
8
|
+
static unrender(component: React__default.FC): void;
|
|
9
|
+
static updateProps(component: React__default.FC, props: any): void;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
export { Renderar };
|
package/AppRoot/Renderar.js
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { useState } from 'react';
|
|
3
3
|
|
|
4
4
|
const Components = [];
|
|
5
5
|
let dispatch = null;
|
|
6
6
|
class Renderar {
|
|
7
7
|
static render(component, props) {
|
|
8
8
|
Components.push({ component, props });
|
|
9
|
-
if (dispatch)
|
|
9
|
+
if (dispatch)
|
|
10
10
|
dispatch();
|
|
11
|
-
}
|
|
12
11
|
return {
|
|
13
|
-
unrender: () =>
|
|
14
|
-
|
|
15
|
-
},
|
|
16
|
-
updateProps: (newProps) => {
|
|
17
|
-
this.updateProps(component, newProps);
|
|
18
|
-
}
|
|
12
|
+
unrender: () => this.unrender(component),
|
|
13
|
+
updateProps: (newProps) => this.updateProps(component, newProps),
|
|
19
14
|
};
|
|
20
15
|
}
|
|
21
16
|
static unrender(component) {
|
|
@@ -27,25 +22,18 @@ class Renderar {
|
|
|
27
22
|
}
|
|
28
23
|
}
|
|
29
24
|
static updateProps(component, props) {
|
|
30
|
-
const
|
|
31
|
-
if (
|
|
32
|
-
|
|
33
|
-
}
|
|
25
|
+
const stored = Components.find((c) => c.component === component);
|
|
26
|
+
if (stored)
|
|
27
|
+
stored.props = Object.assign(Object.assign({}, stored.props), props);
|
|
34
28
|
if (dispatch)
|
|
35
29
|
dispatch();
|
|
36
30
|
}
|
|
37
31
|
}
|
|
38
|
-
const RenderRenderar =
|
|
39
|
-
const [, setState] =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
return Components.map(({ component: Component, props }, index) => {
|
|
46
|
-
return jsx(Component, Object.assign({}, props), index);
|
|
47
|
-
});
|
|
48
|
-
});
|
|
32
|
+
const RenderRenderar = () => {
|
|
33
|
+
const [, setState] = useState(0);
|
|
34
|
+
dispatch = () => setState((prev) => prev + 1);
|
|
35
|
+
return (jsx(Fragment, { children: Components.map(({ component: Component, props }, i) => (jsx(Component, Object.assign({}, props), i))) }));
|
|
36
|
+
};
|
|
49
37
|
|
|
50
38
|
export { RenderRenderar, Renderar };
|
|
51
39
|
//# sourceMappingURL=Renderar.js.map
|
package/AppRoot/Renderar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Renderar.js","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"Renderar.js","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["// Renderar.tsx\nimport React, { useState } from \"react\";\n\ntype StoredComponent = {\n component: React.FC<any>;\n props: any;\n};\n\nconst Components: StoredComponent[] = [];\nlet dispatch: (() => void) | null = null;\n\nexport class Renderar {\n static render(component: React.FC, props?: any) {\n Components.push({ component, props });\n if (dispatch) dispatch();\n return {\n unrender: () => this.unrender(component),\n updateProps: (newProps: any) => this.updateProps(component, newProps),\n };\n }\n\n static unrender(component: React.FC) {\n const index = Components.findIndex((c) => c.component === component);\n if (index > -1) {\n Components.splice(index, 1);\n if (dispatch) dispatch();\n }\n }\n\n static updateProps(component: React.FC, props: any) {\n const stored = Components.find((c) => c.component === component);\n if (stored) stored.props = { ...stored.props, ...props };\n if (dispatch) dispatch();\n }\n}\n\nexport const RenderRenderar = () => {\n const [, setState] = useState(0);\n dispatch = () => setState((prev) => prev + 1);\n\n return (\n <>\n {Components.map(({ component: Component, props }, i) => (\n <Component key={i} {...props} />\n ))}\n </>\n );\n};"],"names":["_jsx","_Fragment"],"mappings":";;;AAQA,MAAM,UAAU,GAAsB,EAAE;AACxC,IAAI,QAAQ,GAAwB,IAAI;MAE3B,QAAQ,CAAA;AAClB,IAAA,OAAO,MAAM,CAAC,SAAmB,EAAE,KAAW,EAAA;QAC3C,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AACrC,QAAA,IAAI,QAAQ;AAAE,YAAA,QAAQ,EAAE;QACxB,OAAO;YACJ,QAAQ,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;AACxC,YAAA,WAAW,EAAE,CAAC,QAAa,KAAK,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC;SACvE;IACJ;IAEA,OAAO,QAAQ,CAAC,SAAmB,EAAA;AAChC,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,SAAmB,EAAE,KAAU,EAAA;AAC/C,QAAA,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC;AAChE,QAAA,IAAI,MAAM;YAAE,MAAM,CAAC,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,MAAM,CAAC,KAAK,CAAA,EAAK,KAAK,CAAE;AACxD,QAAA,IAAI,QAAQ;AAAE,YAAA,QAAQ,EAAE;IAC3B;AACF;AAEM,MAAM,cAAc,GAAG,MAAK;IAChC,MAAM,GAAG,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAChC,IAAA,QAAQ,GAAG,MAAM,QAAQ,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AAE7C,IAAA,QACGA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACI,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,MAChDD,GAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAa,KAAK,CAAA,EAAZ,CAAC,CAAe,CAClC,CAAC,EAAA,CACF;AAET;;;;"}
|
package/AppRoot/index.cjs
CHANGED
|
@@ -17,8 +17,9 @@ 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, disableRenderar, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "disableRenderar", "document"]);
|
|
20
|
+
var { children, noScrollbarCss, CSSCacheId, theme, disableRenderar, selectionColor, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "disableRenderar", "selectionColor", "document"]);
|
|
21
21
|
noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
|
|
22
|
+
selectionColor !== null && selectionColor !== void 0 ? selectionColor : (selectionColor = "brand");
|
|
22
23
|
if (typeof window !== "undefined") {
|
|
23
24
|
_document !== null && _document !== void 0 ? _document : (_document = document);
|
|
24
25
|
}
|
|
@@ -39,7 +40,16 @@ const AppRoot = React.forwardRef((_a, ref) => {
|
|
|
39
40
|
_document.head.appendChild(style);
|
|
40
41
|
});
|
|
41
42
|
}, []);
|
|
42
|
-
|
|
43
|
+
let selection = {};
|
|
44
|
+
if (selectionColor && selectionColor !== 'default') {
|
|
45
|
+
selection = {
|
|
46
|
+
"&::selection": {
|
|
47
|
+
bgcolor: `${selectionColor}.primary`,
|
|
48
|
+
color: `${selectionColor}.text`
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
return (jsxRuntime.jsx(index.DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, 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(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, !disableRenderar && jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
|
|
43
53
|
});
|
|
44
54
|
|
|
45
55
|
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\";\nimport React, { useEffect, useId,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n document?: Document;\n CSSCacheId?: string;\n disableRenderar?: boolean;\n selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n selectionColor ??= \"brand\"\n if (typeof window !== \"undefined\") {\n _document ??= document\n }\n disableRenderar ??= false\n const docid = useId()\n const csscacheId = useId()\n CSSCacheId ??= csscacheId\n\n const [visibility, setVisibility] = React.useState<string>(\"hidden\");\n const rootRef = useRef(null)\n const mergeRef = useMergeRefs(rootRef, ref)\n\n useEffect(() => {\n setVisibility(\"visible\");\n\n // move oncss style tags to head\n if (typeof _document === 'undefined') return;\n const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n _document.head.appendChild(style);\n });\n }, [])\n let selection: any = {}\n if (selectionColor && selectionColor !== 'default') {\n selection = {\n \"&::selection\": {\n bgcolor: `${selectionColor}.primary`,\n color: `${selectionColor}.text`\n }\n }\n }\n\n return (\n <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n <CSSCacheProvider cacheId={CSSCacheId}>\n <AppRootProvider element={() => rootRef.current}>\n <ThemeProvider\n theme={theme}\n {...props}\n ref={mergeRef}\n isRoot\n sx={{\n ...props.sx,\n ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n ...selection\n }}\n >\n <BreakpointProvider>\n {children}\n {!disableRenderar && <RenderRenderar />}\n </BreakpointProvider>\n </ThemeProvider>\n </AppRootProvider>\n </CSSCacheProvider>\n </DocumentProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmBA;;;;AAGG;;;;AAIA;AACA;;AAGA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;;AAGH;AACG;AACG;;;AAGC;;;;AA4BV;;"}
|
package/AppRoot/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ type AppRootProps<T extends TagComponentType = "div"> = ThemeProviderProps<T> &
|
|
|
7
7
|
document?: Document;
|
|
8
8
|
CSSCacheId?: string;
|
|
9
9
|
disableRenderar?: boolean;
|
|
10
|
+
selectionColor?: "default" | "brand" | "accent" | "success" | "info" | "warning" | "danger";
|
|
10
11
|
};
|
|
11
12
|
declare const AppRoot: React__default.ForwardRefExoticComponent<Omit<AppRootProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
|
|
12
13
|
|
package/AppRoot/index.js
CHANGED
|
@@ -15,8 +15,9 @@ 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, disableRenderar, document: _document } = _a, props = __rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "disableRenderar", "document"]);
|
|
18
|
+
var { children, noScrollbarCss, CSSCacheId, theme, disableRenderar, selectionColor, document: _document } = _a, props = __rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "disableRenderar", "selectionColor", "document"]);
|
|
19
19
|
noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
|
|
20
|
+
selectionColor !== null && selectionColor !== void 0 ? selectionColor : (selectionColor = "brand");
|
|
20
21
|
if (typeof window !== "undefined") {
|
|
21
22
|
_document !== null && _document !== void 0 ? _document : (_document = document);
|
|
22
23
|
}
|
|
@@ -37,7 +38,16 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
|
|
|
37
38
|
_document.head.appendChild(style);
|
|
38
39
|
});
|
|
39
40
|
}, []);
|
|
40
|
-
|
|
41
|
+
let selection = {};
|
|
42
|
+
if (selectionColor && selectionColor !== 'default') {
|
|
43
|
+
selection = {
|
|
44
|
+
"&::selection": {
|
|
45
|
+
bgcolor: `${selectionColor}.primary`,
|
|
46
|
+
color: `${selectionColor}.text`
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
return (jsx(DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, 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(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxs(BreakpointProvider, { children: [children, !disableRenderar && jsx(RenderRenderar, {})] }) })) }) }) }));
|
|
41
51
|
});
|
|
42
52
|
|
|
43
53
|
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\";\nimport React, { useEffect, useId,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n document?: Document;\n CSSCacheId?: string;\n disableRenderar?: boolean;\n selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n selectionColor ??= \"brand\"\n if (typeof window !== \"undefined\") {\n _document ??= document\n }\n disableRenderar ??= false\n const docid = useId()\n const csscacheId = useId()\n CSSCacheId ??= csscacheId\n\n const [visibility, setVisibility] = React.useState<string>(\"hidden\");\n const rootRef = useRef(null)\n const mergeRef = useMergeRefs(rootRef, ref)\n\n useEffect(() => {\n setVisibility(\"visible\");\n\n // move oncss style tags to head\n if (typeof _document === 'undefined') return;\n const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n _document.head.appendChild(style);\n });\n }, [])\n let selection: any = {}\n if (selectionColor && selectionColor !== 'default') {\n selection = {\n \"&::selection\": {\n bgcolor: `${selectionColor}.primary`,\n color: `${selectionColor}.text`\n }\n }\n }\n\n return (\n <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n <CSSCacheProvider cacheId={CSSCacheId}>\n <AppRootProvider element={() => rootRef.current}>\n <ThemeProvider\n theme={theme}\n {...props}\n ref={mergeRef}\n isRoot\n sx={{\n ...props.sx,\n ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n ...selection\n }}\n >\n <BreakpointProvider>\n {children}\n {!disableRenderar && <RenderRenderar />}\n </BreakpointProvider>\n </ThemeProvider>\n </AppRootProvider>\n </CSSCacheProvider>\n </DocumentProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmBA;;;;AAGG;;;;AAIA;AACA;;AAGA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;;AAGH;AACG;AACG;;;AAGC;;;;AA4BV;;"}
|