@xanui/core 1.2.42 → 1.2.43
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/{context.js → AppRootProvider.js} +1 -1
- package/AppRoot/AppRootProvider.js.map +1 -0
- package/AppRoot/{context.mjs → AppRootProvider.mjs} +1 -1
- package/AppRoot/AppRootProvider.mjs.map +1 -0
- package/AppRoot/index.d.ts +2 -2
- package/AppRoot/index.js +13 -94
- package/AppRoot/index.js.map +1 -1
- package/AppRoot/index.mjs +13 -91
- package/AppRoot/index.mjs.map +1 -1
- package/Iframe/index.d.ts +1 -0
- package/Iframe/index.js +3 -3
- package/Iframe/index.js.map +1 -1
- package/Iframe/index.mjs +4 -4
- package/Iframe/index.mjs.map +1 -1
- package/Tag/useTagProps.js +4 -1
- package/Tag/useTagProps.js.map +1 -1
- package/Tag/useTagProps.mjs +4 -1
- package/Tag/useTagProps.mjs.map +1 -1
- package/css/CSSCacheProvider.d.ts +7 -0
- package/css/CSSCacheProvider.js +34 -0
- package/css/CSSCacheProvider.js.map +1 -0
- package/css/CSSCacheProvider.mjs +29 -0
- package/css/CSSCacheProvider.mjs.map +1 -0
- package/hooks/useAnimation.js +9 -2
- package/hooks/useAnimation.js.map +1 -1
- package/hooks/useAnimation.mjs +7 -0
- package/hooks/useAnimation.mjs.map +1 -1
- package/hooks/usePortal.js +2 -2
- package/hooks/usePortal.js.map +1 -1
- package/hooks/usePortal.mjs +1 -1
- package/hooks/usePortal.mjs.map +1 -1
- package/hooks/useTransition/index.js +9 -7
- package/hooks/useTransition/index.js.map +1 -1
- package/hooks/useTransition/index.mjs +9 -7
- package/hooks/useTransition/index.mjs.map +1 -1
- package/index.d.ts +3 -2
- package/index.js +7 -4
- package/index.js.map +1 -1
- package/index.mjs +3 -2
- package/index.mjs.map +1 -1
- package/package.json +2 -2
- package/theme/ThemeProvider.d.ts +3 -1
- package/theme/ThemeProvider.js +94 -5
- package/theme/ThemeProvider.js.map +1 -1
- package/theme/ThemeProvider.mjs +94 -5
- package/theme/ThemeProvider.mjs.map +1 -1
- package/AppRoot/context.js.map +0 -1
- package/AppRoot/context.mjs.map +0 -1
- /package/AppRoot/{context.d.ts → AppRootProvider.d.ts} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppRootProvider.js","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<HTMLElement | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n return (\r\n <AppRootContext.Provider value={element}>\r\n {children}\r\n </AppRootContext.Provider>\r\n );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n const context = React.useContext(AppRootContext);\r\n if (typeof window === 'undefined') {\r\n return null as any;\r\n }\r\n return context as HTMLElement\r\n}\r\n"],"names":["_jsx"],"mappings":";;;;;AAEA,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAqB,IAAI,CAAC;AAE7D,MAAM,eAAe,GAAyE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC5H,IAAA,QACGA,cAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;AACA,IAAA,OAAO,OAAsB;AAChC;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppRootProvider.mjs","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<HTMLElement | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n return (\r\n <AppRootContext.Provider value={element}>\r\n {children}\r\n </AppRootContext.Provider>\r\n );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n const context = React.useContext(AppRootContext);\r\n if (typeof window === 'undefined') {\r\n return null as any;\r\n }\r\n return context as HTMLElement\r\n}\r\n"],"names":["React","_jsx"],"mappings":";;;AAEA,MAAM,cAAc,GAAGA,cAAK,CAAC,aAAa,CAAqB,IAAI,CAAC;AAE7D,MAAM,eAAe,GAAyE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC5H,IAAA,QACGC,GAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAGD,cAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;AACA,IAAA,OAAO,OAAsB;AAChC;;;;"}
|
package/AppRoot/index.d.ts
CHANGED
|
@@ -5,9 +5,9 @@ import { ThemeProviderProps } from '../theme/ThemeProvider.js';
|
|
|
5
5
|
type AppRootProps<T extends TagComponentType = "div"> = ThemeProviderProps<T> & {
|
|
6
6
|
noScrollbarCss?: boolean;
|
|
7
7
|
document?: Document;
|
|
8
|
+
CSSCacheId?: string;
|
|
8
9
|
};
|
|
9
|
-
declare const APP_ROOT_CLASSNAME = "xui-app-root";
|
|
10
10
|
declare const AppRoot: React__default.ForwardRefExoticComponent<Omit<AppRootProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
|
|
11
11
|
|
|
12
|
-
export {
|
|
12
|
+
export { AppRoot as default };
|
|
13
13
|
export type { AppRootProps };
|
package/AppRoot/index.js
CHANGED
|
@@ -1,110 +1,30 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
|
-
|
|
6
4
|
var tslib = require('tslib');
|
|
7
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
6
|
var React = require('react');
|
|
9
|
-
|
|
7
|
+
require('../theme/core.js');
|
|
8
|
+
require('../css/getValue.js');
|
|
9
|
+
require('oncss');
|
|
10
|
+
var ThemeProvider = require('../theme/ThemeProvider.js');
|
|
11
|
+
require('react-state-bucket');
|
|
10
12
|
var BreakpointProvider = require('../breakpoint/BreakpointProvider.js');
|
|
11
|
-
var index = require('../css/index.js');
|
|
12
13
|
var Renderar = require('./Renderar.js');
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var context = require('./context.js');
|
|
14
|
+
var index = require('../Document/index.js');
|
|
15
|
+
var AppRootProvider = require('./AppRootProvider.js');
|
|
16
16
|
var useMergeRefs = require('../hooks/useMergeRefs.js');
|
|
17
|
-
var
|
|
17
|
+
var CSSCacheProvider = require('../css/CSSCacheProvider.js');
|
|
18
18
|
|
|
19
|
-
const APP_ROOT_CLASSNAME = "xui-app-root";
|
|
20
19
|
const AppRoot = React.forwardRef((_a, ref) => {
|
|
21
|
-
var { children, noScrollbarCss, theme, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "theme", "document"]);
|
|
20
|
+
var { children, noScrollbarCss, CSSCacheId, theme, document: _document } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "document"]);
|
|
22
21
|
noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
|
|
23
22
|
_document !== null && _document !== void 0 ? _document : (_document = document);
|
|
23
|
+
const csscacheId = React.useId();
|
|
24
|
+
CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
|
|
24
25
|
const [visibility, setVisibility] = React.useState("hidden");
|
|
25
26
|
const rootRef = React.useRef(null);
|
|
26
27
|
const mergeRef = useMergeRefs(rootRef, ref);
|
|
27
|
-
const scrollbarCss = React.useMemo(() => {
|
|
28
|
-
if (noScrollbarCss)
|
|
29
|
-
return;
|
|
30
|
-
const cls = (cls) => `${index$1.themeRootClass(theme)} ${cls}`;
|
|
31
|
-
let thumbSize = 6;
|
|
32
|
-
let thumbColor = "var(--color-text-secondary)";
|
|
33
|
-
let trackColor = "transparent";
|
|
34
|
-
return index.css({
|
|
35
|
-
"@global": {
|
|
36
|
-
[cls('*::-webkit-scrollbar')]: {
|
|
37
|
-
width: thumbSize,
|
|
38
|
-
height: thumbSize,
|
|
39
|
-
},
|
|
40
|
-
[cls("*::-webkit-scrollbar-thumb")]: {
|
|
41
|
-
backgroundColor: thumbColor,
|
|
42
|
-
borderRadius: "6px",
|
|
43
|
-
opacity: 0.6,
|
|
44
|
-
},
|
|
45
|
-
[cls("*::-webkit-scrollbar-thumb:hover")]: {
|
|
46
|
-
backgroundColor: thumbColor,
|
|
47
|
-
opacity: 0.0,
|
|
48
|
-
},
|
|
49
|
-
[cls("*::-webkit-scrollbar-track")]: {
|
|
50
|
-
backgroundColor: trackColor,
|
|
51
|
-
borderRadius: "6px",
|
|
52
|
-
},
|
|
53
|
-
}
|
|
54
|
-
}, {
|
|
55
|
-
injectStyle: typeof window !== 'undefined',
|
|
56
|
-
container: _document,
|
|
57
|
-
});
|
|
58
|
-
}, [noScrollbarCss, theme]);
|
|
59
|
-
const globalStyle = React.useMemo(() => {
|
|
60
|
-
return index.css({
|
|
61
|
-
"@global": {
|
|
62
|
-
"*": {
|
|
63
|
-
m: 0,
|
|
64
|
-
p: 0,
|
|
65
|
-
outline: "none",
|
|
66
|
-
boxSizing: "border-box",
|
|
67
|
-
verticalAlign: "baseline",
|
|
68
|
-
},
|
|
69
|
-
"html, body": {
|
|
70
|
-
minHeight: "100%",
|
|
71
|
-
"-webkit-font-smoothing": "antialiased",
|
|
72
|
-
"-moz-osx-font-smoothing": "grayscale",
|
|
73
|
-
},
|
|
74
|
-
"img, picture, video, canvas, svg": {
|
|
75
|
-
maxWidth: "100%",
|
|
76
|
-
display: "block"
|
|
77
|
-
},
|
|
78
|
-
"input, button, textarea, select": {
|
|
79
|
-
font: "inherit"
|
|
80
|
-
},
|
|
81
|
-
"table": {
|
|
82
|
-
borderCollapse: "collapse",
|
|
83
|
-
borderSpacing: 0,
|
|
84
|
-
},
|
|
85
|
-
"ol, ul": {
|
|
86
|
-
listStyle: "none",
|
|
87
|
-
padding: 0,
|
|
88
|
-
margin: 0,
|
|
89
|
-
},
|
|
90
|
-
"a": {
|
|
91
|
-
display: "inline-block",
|
|
92
|
-
color: "inherit",
|
|
93
|
-
textDecoration: "none",
|
|
94
|
-
cursor: "pointer",
|
|
95
|
-
"&:hover": {
|
|
96
|
-
textDecoration: "underline"
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
"p, h1, h2, h3, h4, h5, h6": {
|
|
100
|
-
overflowWrap: "break-word",
|
|
101
|
-
},
|
|
102
|
-
}
|
|
103
|
-
}, {
|
|
104
|
-
injectStyle: typeof window !== 'undefined',
|
|
105
|
-
container: _document,
|
|
106
|
-
});
|
|
107
|
-
}, []);
|
|
108
28
|
React.useEffect(() => {
|
|
109
29
|
setVisibility("visible");
|
|
110
30
|
// move oncss style tags to head
|
|
@@ -115,9 +35,8 @@ const AppRoot = React.forwardRef((_a, ref) => {
|
|
|
115
35
|
_document.head.appendChild(style);
|
|
116
36
|
});
|
|
117
37
|
}, []);
|
|
118
|
-
return (jsxRuntime.jsx(index
|
|
38
|
+
return (jsxRuntime.jsx(index.DocumentProvider, { document: _document, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
|
|
119
39
|
});
|
|
120
40
|
|
|
121
|
-
exports
|
|
122
|
-
exports.default = AppRoot;
|
|
41
|
+
module.exports = AppRoot;
|
|
123
42
|
//# sourceMappingURL=index.js.map
|
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,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useRef } 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 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}>\r\n <CSSCacheProvider cacheId={CSSCacheId}>\r\n <AppRootProvider element={rootRef.current}>\r\n <ThemeProvider\r\n ref={mergeRef}\r\n theme={theme}\r\n {...props}\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 <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":";;;;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;;AAGA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;AAGH;AAuBH;;"}
|
package/AppRoot/index.mjs
CHANGED
|
@@ -1,106 +1,28 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { __rest } from 'tslib';
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
import React__default, {
|
|
5
|
-
import
|
|
4
|
+
import React__default, { useId, useRef, useEffect } from 'react';
|
|
5
|
+
import '../theme/core.mjs';
|
|
6
|
+
import '../css/getValue.mjs';
|
|
7
|
+
import 'oncss';
|
|
8
|
+
import ThemeProvider from '../theme/ThemeProvider.mjs';
|
|
9
|
+
import 'react-state-bucket';
|
|
6
10
|
import { BreakpointProvider } from '../breakpoint/BreakpointProvider.mjs';
|
|
7
|
-
import { css } from '../css/index.mjs';
|
|
8
11
|
import { RenderRenderar } from './Renderar.mjs';
|
|
9
|
-
import ServerStyleTag from '../Tag/ServerStyleTag.mjs';
|
|
10
12
|
import { DocumentProvider } from '../Document/index.mjs';
|
|
11
|
-
import { AppRootProvider } from './
|
|
13
|
+
import { AppRootProvider } from './AppRootProvider.mjs';
|
|
12
14
|
import useMergeRefs from '../hooks/useMergeRefs.mjs';
|
|
13
|
-
import
|
|
15
|
+
import { CSSCacheProvider } from '../css/CSSCacheProvider.mjs';
|
|
14
16
|
|
|
15
|
-
const APP_ROOT_CLASSNAME = "xui-app-root";
|
|
16
17
|
const AppRoot = React__default.forwardRef((_a, ref) => {
|
|
17
|
-
var { children, noScrollbarCss, theme, document: _document } = _a, props = __rest(_a, ["children", "noScrollbarCss", "theme", "document"]);
|
|
18
|
+
var { children, noScrollbarCss, CSSCacheId, theme, document: _document } = _a, props = __rest(_a, ["children", "noScrollbarCss", "CSSCacheId", "theme", "document"]);
|
|
18
19
|
noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
|
|
19
20
|
_document !== null && _document !== void 0 ? _document : (_document = document);
|
|
21
|
+
const csscacheId = useId();
|
|
22
|
+
CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
|
|
20
23
|
const [visibility, setVisibility] = React__default.useState("hidden");
|
|
21
24
|
const rootRef = useRef(null);
|
|
22
25
|
const mergeRef = useMergeRefs(rootRef, ref);
|
|
23
|
-
const scrollbarCss = useMemo(() => {
|
|
24
|
-
if (noScrollbarCss)
|
|
25
|
-
return;
|
|
26
|
-
const cls = (cls) => `${themeRootClass(theme)} ${cls}`;
|
|
27
|
-
let thumbSize = 6;
|
|
28
|
-
let thumbColor = "var(--color-text-secondary)";
|
|
29
|
-
let trackColor = "transparent";
|
|
30
|
-
return css({
|
|
31
|
-
"@global": {
|
|
32
|
-
[cls('*::-webkit-scrollbar')]: {
|
|
33
|
-
width: thumbSize,
|
|
34
|
-
height: thumbSize,
|
|
35
|
-
},
|
|
36
|
-
[cls("*::-webkit-scrollbar-thumb")]: {
|
|
37
|
-
backgroundColor: thumbColor,
|
|
38
|
-
borderRadius: "6px",
|
|
39
|
-
opacity: 0.6,
|
|
40
|
-
},
|
|
41
|
-
[cls("*::-webkit-scrollbar-thumb:hover")]: {
|
|
42
|
-
backgroundColor: thumbColor,
|
|
43
|
-
opacity: 0.0,
|
|
44
|
-
},
|
|
45
|
-
[cls("*::-webkit-scrollbar-track")]: {
|
|
46
|
-
backgroundColor: trackColor,
|
|
47
|
-
borderRadius: "6px",
|
|
48
|
-
},
|
|
49
|
-
}
|
|
50
|
-
}, {
|
|
51
|
-
injectStyle: typeof window !== 'undefined',
|
|
52
|
-
container: _document,
|
|
53
|
-
});
|
|
54
|
-
}, [noScrollbarCss, theme]);
|
|
55
|
-
const globalStyle = useMemo(() => {
|
|
56
|
-
return css({
|
|
57
|
-
"@global": {
|
|
58
|
-
"*": {
|
|
59
|
-
m: 0,
|
|
60
|
-
p: 0,
|
|
61
|
-
outline: "none",
|
|
62
|
-
boxSizing: "border-box",
|
|
63
|
-
verticalAlign: "baseline",
|
|
64
|
-
},
|
|
65
|
-
"html, body": {
|
|
66
|
-
minHeight: "100%",
|
|
67
|
-
"-webkit-font-smoothing": "antialiased",
|
|
68
|
-
"-moz-osx-font-smoothing": "grayscale",
|
|
69
|
-
},
|
|
70
|
-
"img, picture, video, canvas, svg": {
|
|
71
|
-
maxWidth: "100%",
|
|
72
|
-
display: "block"
|
|
73
|
-
},
|
|
74
|
-
"input, button, textarea, select": {
|
|
75
|
-
font: "inherit"
|
|
76
|
-
},
|
|
77
|
-
"table": {
|
|
78
|
-
borderCollapse: "collapse",
|
|
79
|
-
borderSpacing: 0,
|
|
80
|
-
},
|
|
81
|
-
"ol, ul": {
|
|
82
|
-
listStyle: "none",
|
|
83
|
-
padding: 0,
|
|
84
|
-
margin: 0,
|
|
85
|
-
},
|
|
86
|
-
"a": {
|
|
87
|
-
display: "inline-block",
|
|
88
|
-
color: "inherit",
|
|
89
|
-
textDecoration: "none",
|
|
90
|
-
cursor: "pointer",
|
|
91
|
-
"&:hover": {
|
|
92
|
-
textDecoration: "underline"
|
|
93
|
-
}
|
|
94
|
-
},
|
|
95
|
-
"p, h1, h2, h3, h4, h5, h6": {
|
|
96
|
-
overflowWrap: "break-word",
|
|
97
|
-
},
|
|
98
|
-
}
|
|
99
|
-
}, {
|
|
100
|
-
injectStyle: typeof window !== 'undefined',
|
|
101
|
-
container: _document,
|
|
102
|
-
});
|
|
103
|
-
}, []);
|
|
104
26
|
useEffect(() => {
|
|
105
27
|
setVisibility("visible");
|
|
106
28
|
// move oncss style tags to head
|
|
@@ -111,8 +33,8 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
|
|
|
111
33
|
_document.head.appendChild(style);
|
|
112
34
|
});
|
|
113
35
|
}, []);
|
|
114
|
-
return (jsx(DocumentProvider, { document: _document, children: jsx(AppRootProvider, { element: rootRef.current, children:
|
|
36
|
+
return (jsx(DocumentProvider, { document: _document, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: rootRef.current, children: jsx(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxs(BreakpointProvider, { children: [children, jsx(RenderRenderar, {})] }) })) }) }) }));
|
|
115
37
|
});
|
|
116
38
|
|
|
117
|
-
export {
|
|
39
|
+
export { AppRoot as default };
|
|
118
40
|
//# sourceMappingURL=index.mjs.map
|
package/AppRoot/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect,
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useRef } 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 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}>\r\n <CSSCacheProvider cacheId={CSSCacheId}>\r\n <AppRootProvider element={rootRef.current}>\r\n <ThemeProvider\r\n ref={mergeRef}\r\n theme={theme}\r\n {...props}\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 <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":";;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;;AAGA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;AAGH;AAuBH;;"}
|
package/Iframe/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { TagPropsRoot } from '../Tag/types.js';
|
|
|
3
3
|
|
|
4
4
|
type IframeProps = Omit<TagPropsRoot<"iframe">, "component"> & {
|
|
5
5
|
theme?: string;
|
|
6
|
+
CSSCacheId?: string;
|
|
6
7
|
};
|
|
7
8
|
declare const _default: React__default.ForwardRefExoticComponent<Omit<IframeProps, "ref"> & React__default.RefAttributes<HTMLIFrameElement>>;
|
|
8
9
|
|
package/Iframe/index.js
CHANGED
|
@@ -19,10 +19,10 @@ const IframeContext = React.createContext({
|
|
|
19
19
|
window: null,
|
|
20
20
|
});
|
|
21
21
|
const Iframe = (_a, ref) => {
|
|
22
|
-
var { children, sxr, theme } = _a, props = tslib.__rest(_a, ["children", "sxr", "theme"]);
|
|
22
|
+
var { children, sxr, theme, CSSCacheId } = _a, props = tslib.__rest(_a, ["children", "sxr", "theme", "CSSCacheId"]);
|
|
23
|
+
const [doc, setDoc] = React.useState(null);
|
|
23
24
|
const iframeRef = React.useRef(null);
|
|
24
25
|
const _ref = useMergeRefs(iframeRef, ref);
|
|
25
|
-
const [doc, setDoc] = React.useState(null);
|
|
26
26
|
const parentTheme = core.useTheme();
|
|
27
27
|
theme !== null && theme !== void 0 ? theme : (theme = parentTheme.name);
|
|
28
28
|
React.useEffect(() => {
|
|
@@ -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
|
|
40
|
+
}, children: jsxRuntime.jsx(index$2, { theme: theme, document: doc, CSSCacheId: CSSCacheId, children: children }) }), doc.body)] }));
|
|
41
41
|
};
|
|
42
42
|
var index = React.forwardRef(Iframe);
|
|
43
43
|
|
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}\r\n\r\nconst Iframe = ({ children, sxr, theme, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\r\n const
|
|
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;;"}
|
package/Iframe/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { __rest } from 'tslib';
|
|
3
3
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
4
|
-
import React__default, { createContext,
|
|
4
|
+
import React__default, { createContext, useState, useRef, useEffect } from 'react';
|
|
5
5
|
import { useTheme } from '../theme/core.mjs';
|
|
6
6
|
import '../css/getValue.mjs';
|
|
7
7
|
import 'oncss';
|
|
@@ -17,10 +17,10 @@ const IframeContext = createContext({
|
|
|
17
17
|
window: null,
|
|
18
18
|
});
|
|
19
19
|
const Iframe = (_a, ref) => {
|
|
20
|
-
var { children, sxr, theme } = _a, props = __rest(_a, ["children", "sxr", "theme"]);
|
|
20
|
+
var { children, sxr, theme, CSSCacheId } = _a, props = __rest(_a, ["children", "sxr", "theme", "CSSCacheId"]);
|
|
21
|
+
const [doc, setDoc] = useState(null);
|
|
21
22
|
const iframeRef = useRef(null);
|
|
22
23
|
const _ref = useMergeRefs(iframeRef, ref);
|
|
23
|
-
const [doc, setDoc] = useState(null);
|
|
24
24
|
const parentTheme = useTheme();
|
|
25
25
|
theme !== null && theme !== void 0 ? theme : (theme = parentTheme.name);
|
|
26
26
|
useEffect(() => {
|
|
@@ -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, children: children }) }), doc.body)] }));
|
|
38
|
+
}, children: jsx(AppRoot, { 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.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","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}\r\n\r\nconst Iframe = ({ children, sxr, theme, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\r\n const
|
|
1
|
+
{"version":3,"file":"index.mjs","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;;"}
|
package/Tag/useTagProps.js
CHANGED
|
@@ -5,12 +5,14 @@ var index$1 = require('../css/index.js');
|
|
|
5
5
|
var prettyClass = require('pretty-class');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var index = require('../Document/index.js');
|
|
8
|
+
var CSSCacheProvider = require('../css/CSSCacheProvider.js');
|
|
8
9
|
|
|
9
10
|
const useTagProps = (props) => {
|
|
10
11
|
const cachekey = JSON.stringify(props, (key, value) => {
|
|
11
12
|
return key === '_owner' || key === '_store' ? undefined : value;
|
|
12
13
|
}, 2);
|
|
13
14
|
const doc = index.useDocument();
|
|
15
|
+
const cacheId = CSSCacheProvider.useCSSCacheId();
|
|
14
16
|
const parsed = React.useMemo(() => {
|
|
15
17
|
let _props = {};
|
|
16
18
|
let _css = {};
|
|
@@ -33,13 +35,14 @@ const useTagProps = (props) => {
|
|
|
33
35
|
const styles = index$1.css(Object.assign(Object.assign(Object.assign(Object.assign({}, props.sxr), _css), props.sx), props.style), {
|
|
34
36
|
injectStyle: typeof doc !== 'undefined',
|
|
35
37
|
container: doc,
|
|
38
|
+
cacheId
|
|
36
39
|
});
|
|
37
40
|
return {
|
|
38
41
|
props: _props,
|
|
39
42
|
styles,
|
|
40
43
|
className: prettyClass.classNames(props.baseClass ? "xui-" + props.baseClass : undefined, props.classNames, props.className, styles.classname)
|
|
41
44
|
};
|
|
42
|
-
}, [cachekey
|
|
45
|
+
}, [cachekey]);
|
|
43
46
|
const _props = {};
|
|
44
47
|
for (let prop in parsed.props) {
|
|
45
48
|
_props[prop] = props[prop];
|
package/Tag/useTagProps.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTagProps.js","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\r\nimport cssPropList from './cssPropList';\r\nimport { css } from '../css';\r\nimport { classNames } from 'pretty-class';\r\nimport { CSSFactoryType } from 'oncss';\r\nimport { useMemo } from 'react';\r\nimport { useDocument } from '../Document';\r\n\r\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\r\n props: TagProps<T>,\r\n style: CSSFactoryType\r\n}\r\n\r\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\r\n const cachekey = JSON.stringify(props, (key, value) => {\r\n return key === '_owner' || key === '_store' ? undefined : value;\r\n }, 2);\r\n\r\n const doc = useDocument();\r\n\r\n const parsed = useMemo(() => {\r\n let _props: any = {}\r\n let _css: any = {}\r\n\r\n if (props.hover && Object.keys(props.hover).length > 0) {\r\n _css['&:hover'] = {\r\n ...props.hover\r\n }\r\n }\r\n\r\n for (let key in props) {\r\n const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\r\n if (keys.includes(key)) {\r\n continue;\r\n }\r\n let val = (props as any)[key];\r\n if (!cssPropList[key]) {\r\n _props[key] = val\r\n } else {\r\n _css[key] = val\r\n }\r\n }\r\n\r\n const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\r\n injectStyle: typeof doc !== 'undefined',\r\n container: doc,\r\n })\r\n\r\n return {\r\n props: _props,\r\n styles,\r\n className: classNames(\r\n props.baseClass ? \"xui-\" + props.baseClass : undefined,\r\n props.classNames,\r\n props.className,\r\n styles.classname\r\n )\r\n }\r\n }, [cachekey
|
|
1
|
+
{"version":3,"file":"useTagProps.js","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\r\nimport cssPropList from './cssPropList';\r\nimport { css } from '../css';\r\nimport { classNames } from 'pretty-class';\r\nimport { CSSFactoryType } from 'oncss';\r\nimport { useMemo } from 'react';\r\nimport { useDocument } from '../Document';\r\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\r\n\r\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\r\n props: TagProps<T>,\r\n style: CSSFactoryType\r\n}\r\n\r\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\r\n const cachekey = JSON.stringify(props, (key, value) => {\r\n return key === '_owner' || key === '_store' ? undefined : value;\r\n }, 2);\r\n\r\n const doc = useDocument();\r\n const cacheId = useCSSCacheId()\r\n\r\n const parsed = useMemo(() => {\r\n let _props: any = {}\r\n let _css: any = {}\r\n\r\n if (props.hover && Object.keys(props.hover).length > 0) {\r\n _css['&:hover'] = {\r\n ...props.hover\r\n }\r\n }\r\n\r\n for (let key in props) {\r\n const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\r\n if (keys.includes(key)) {\r\n continue;\r\n }\r\n let val = (props as any)[key];\r\n if (!cssPropList[key]) {\r\n _props[key] = val\r\n } else {\r\n _css[key] = val\r\n }\r\n }\r\n\r\n const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\r\n injectStyle: typeof doc !== 'undefined',\r\n container: doc,\r\n cacheId\r\n })\r\n\r\n return {\r\n props: _props,\r\n styles,\r\n className: classNames(\r\n props.baseClass ? \"xui-\" + props.baseClass : undefined,\r\n props.classNames,\r\n props.className,\r\n styles.classname\r\n )\r\n }\r\n }, [cachekey])\r\n\r\n const _props: any = {};\r\n for (let prop in parsed.props) {\r\n _props[prop] = (props as any)[prop]\r\n }\r\n _props.className = parsed.className;\r\n\r\n return { props: _props, style: parsed.styles };\r\n}\r\n\r\n\r\nexport default useTagProps"],"names":["useDocument","useCSSCacheId","useMemo","css","classNames"],"mappings":";;;;;;;;;AAcA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AACtG,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,GAAG,GAAGA,iBAAW,EAAE;AACzB,IAAA,MAAM,OAAO,GAAGC,8BAAa,EAAE;AAE/B,IAAA,MAAM,MAAM,GAAGC,aAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,KAAK,CAAC,KAAK,CAChB;QACJ;AAEA,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;AACpF,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB;YACH;AACA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;AAEA,QAAA,MAAM,MAAM,GAAGC,WAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAC,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,KAAK,CAAC,EAAE,GAAK,KAAK,CAAC,KAAK,CAAA,EAAI;AACxE,YAAA,WAAW,EAAE,OAAO,GAAG,KAAK,WAAW;AACvC,YAAA,SAAS,EAAE,GAAG;YACd;AACF,SAAA,CAAC;QAEF,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAEC,sBAAU,CAClB,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,EACtD,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,SAAS,EACf,MAAM,CAAC,SAAS;SAErB;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD;;;;"}
|
package/Tag/useTagProps.mjs
CHANGED
|
@@ -3,12 +3,14 @@ import { css } from '../css/index.mjs';
|
|
|
3
3
|
import { classNames } from 'pretty-class';
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
import { useDocument } from '../Document/index.mjs';
|
|
6
|
+
import { useCSSCacheId } from '../css/CSSCacheProvider.mjs';
|
|
6
7
|
|
|
7
8
|
const useTagProps = (props) => {
|
|
8
9
|
const cachekey = JSON.stringify(props, (key, value) => {
|
|
9
10
|
return key === '_owner' || key === '_store' ? undefined : value;
|
|
10
11
|
}, 2);
|
|
11
12
|
const doc = useDocument();
|
|
13
|
+
const cacheId = useCSSCacheId();
|
|
12
14
|
const parsed = useMemo(() => {
|
|
13
15
|
let _props = {};
|
|
14
16
|
let _css = {};
|
|
@@ -31,13 +33,14 @@ const useTagProps = (props) => {
|
|
|
31
33
|
const styles = css(Object.assign(Object.assign(Object.assign(Object.assign({}, props.sxr), _css), props.sx), props.style), {
|
|
32
34
|
injectStyle: typeof doc !== 'undefined',
|
|
33
35
|
container: doc,
|
|
36
|
+
cacheId
|
|
34
37
|
});
|
|
35
38
|
return {
|
|
36
39
|
props: _props,
|
|
37
40
|
styles,
|
|
38
41
|
className: classNames(props.baseClass ? "xui-" + props.baseClass : undefined, props.classNames, props.className, styles.classname)
|
|
39
42
|
};
|
|
40
|
-
}, [cachekey
|
|
43
|
+
}, [cachekey]);
|
|
41
44
|
const _props = {};
|
|
42
45
|
for (let prop in parsed.props) {
|
|
43
46
|
_props[prop] = props[prop];
|
package/Tag/useTagProps.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTagProps.mjs","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\r\nimport cssPropList from './cssPropList';\r\nimport { css } from '../css';\r\nimport { classNames } from 'pretty-class';\r\nimport { CSSFactoryType } from 'oncss';\r\nimport { useMemo } from 'react';\r\nimport { useDocument } from '../Document';\r\n\r\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\r\n props: TagProps<T>,\r\n style: CSSFactoryType\r\n}\r\n\r\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\r\n const cachekey = JSON.stringify(props, (key, value) => {\r\n return key === '_owner' || key === '_store' ? undefined : value;\r\n }, 2);\r\n\r\n const doc = useDocument();\r\n\r\n const parsed = useMemo(() => {\r\n let _props: any = {}\r\n let _css: any = {}\r\n\r\n if (props.hover && Object.keys(props.hover).length > 0) {\r\n _css['&:hover'] = {\r\n ...props.hover\r\n }\r\n }\r\n\r\n for (let key in props) {\r\n const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\r\n if (keys.includes(key)) {\r\n continue;\r\n }\r\n let val = (props as any)[key];\r\n if (!cssPropList[key]) {\r\n _props[key] = val\r\n } else {\r\n _css[key] = val\r\n }\r\n }\r\n\r\n const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\r\n injectStyle: typeof doc !== 'undefined',\r\n container: doc,\r\n })\r\n\r\n return {\r\n props: _props,\r\n styles,\r\n className: classNames(\r\n props.baseClass ? \"xui-\" + props.baseClass : undefined,\r\n props.classNames,\r\n props.className,\r\n styles.classname\r\n )\r\n }\r\n }, [cachekey
|
|
1
|
+
{"version":3,"file":"useTagProps.mjs","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\r\nimport cssPropList from './cssPropList';\r\nimport { css } from '../css';\r\nimport { classNames } from 'pretty-class';\r\nimport { CSSFactoryType } from 'oncss';\r\nimport { useMemo } from 'react';\r\nimport { useDocument } from '../Document';\r\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\r\n\r\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\r\n props: TagProps<T>,\r\n style: CSSFactoryType\r\n}\r\n\r\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\r\n const cachekey = JSON.stringify(props, (key, value) => {\r\n return key === '_owner' || key === '_store' ? undefined : value;\r\n }, 2);\r\n\r\n const doc = useDocument();\r\n const cacheId = useCSSCacheId()\r\n\r\n const parsed = useMemo(() => {\r\n let _props: any = {}\r\n let _css: any = {}\r\n\r\n if (props.hover && Object.keys(props.hover).length > 0) {\r\n _css['&:hover'] = {\r\n ...props.hover\r\n }\r\n }\r\n\r\n for (let key in props) {\r\n const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\r\n if (keys.includes(key)) {\r\n continue;\r\n }\r\n let val = (props as any)[key];\r\n if (!cssPropList[key]) {\r\n _props[key] = val\r\n } else {\r\n _css[key] = val\r\n }\r\n }\r\n\r\n const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\r\n injectStyle: typeof doc !== 'undefined',\r\n container: doc,\r\n cacheId\r\n })\r\n\r\n return {\r\n props: _props,\r\n styles,\r\n className: classNames(\r\n props.baseClass ? \"xui-\" + props.baseClass : undefined,\r\n props.classNames,\r\n props.className,\r\n styles.classname\r\n )\r\n }\r\n }, [cachekey])\r\n\r\n const _props: any = {};\r\n for (let prop in parsed.props) {\r\n _props[prop] = (props as any)[prop]\r\n }\r\n _props.className = parsed.className;\r\n\r\n return { props: _props, style: parsed.styles };\r\n}\r\n\r\n\r\nexport default useTagProps"],"names":["cssPropList"],"mappings":";;;;;;;AAcA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AACtG,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,GAAG,GAAG,WAAW,EAAE;AACzB,IAAA,MAAM,OAAO,GAAG,aAAa,EAAE;AAE/B,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,KAAK,CAAC,KAAK,CAChB;QACJ;AAEA,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;AACpF,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB;YACH;AACA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,CAACA,aAAW,CAAC,GAAG,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;AAEA,QAAA,MAAM,MAAM,GAAG,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAC,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,KAAK,CAAC,EAAE,GAAK,KAAK,CAAC,KAAK,CAAA,EAAI;AACxE,YAAA,WAAW,EAAE,OAAO,GAAG,KAAK,WAAW;AACvC,YAAA,SAAS,EAAE,GAAG;YACd;AACF,SAAA,CAAC;QAEF,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAE,UAAU,CAClB,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,EACtD,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,SAAS,EACf,MAAM,CAAC,SAAS;SAErB;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as oncss from 'oncss';
|
|
2
|
+
|
|
3
|
+
declare const useCSSCacheId: () => string;
|
|
4
|
+
declare const useCSSCache: () => any;
|
|
5
|
+
declare const getCSSCache: (cacheId: string) => Map<string, oncss.CSSFactoryType> | undefined;
|
|
6
|
+
|
|
7
|
+
export { getCSSCache, useCSSCache, useCSSCacheId };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var oncss = require('oncss');
|
|
6
|
+
|
|
7
|
+
const CSSCacheContext = React.createContext(null);
|
|
8
|
+
const CSSCacheProvider = ({ cacheId, children }) => {
|
|
9
|
+
return (jsxRuntime.jsx(CSSCacheContext.Provider, { value: cacheId, children: children }));
|
|
10
|
+
};
|
|
11
|
+
const useCSSCacheId = () => {
|
|
12
|
+
return React.useContext(CSSCacheContext);
|
|
13
|
+
};
|
|
14
|
+
const useCSSCache = () => {
|
|
15
|
+
const cacheId = React.useContext(CSSCacheContext);
|
|
16
|
+
if (typeof window === 'undefined') {
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
const caches = oncss.ONCSS_CACHE.caches();
|
|
20
|
+
return {
|
|
21
|
+
cacheId,
|
|
22
|
+
cache: caches.get(cacheId)
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
const getCSSCache = (cacheId) => {
|
|
26
|
+
const caches = oncss.ONCSS_CACHE.caches();
|
|
27
|
+
return caches.get(cacheId);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
exports.CSSCacheProvider = CSSCacheProvider;
|
|
31
|
+
exports.getCSSCache = getCSSCache;
|
|
32
|
+
exports.useCSSCache = useCSSCache;
|
|
33
|
+
exports.useCSSCacheId = useCSSCacheId;
|
|
34
|
+
//# sourceMappingURL=CSSCacheProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CSSCacheProvider.js","sources":["../../src/css/CSSCacheProvider.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { ONCSS_CACHE } from 'oncss'\r\n\r\nconst CSSCacheContext = React.createContext<string | null>(null);\r\n\r\nexport const CSSCacheProvider: React.FC<{ cacheId: string | null; children: React.ReactNode }> = ({ cacheId, children }) => {\r\n return (\r\n <CSSCacheContext.Provider value={cacheId}>\r\n {children}\r\n </CSSCacheContext.Provider>\r\n );\r\n}\r\n\r\nexport const useCSSCacheId = () => {\r\n return React.useContext(CSSCacheContext) as string\r\n}\r\n\r\nexport const useCSSCache = () => {\r\n const cacheId = React.useContext(CSSCacheContext);\r\n if (typeof window === 'undefined') {\r\n return null as any;\r\n }\r\n const caches = ONCSS_CACHE.caches()\r\n\r\n return {\r\n cacheId,\r\n cache: caches.get(cacheId!)\r\n }\r\n}\r\n\r\nexport const getCSSCache = (cacheId: string) => {\r\n const caches = ONCSS_CACHE.caches()\r\n return caches.get(cacheId)\r\n}"],"names":["_jsx","ONCSS_CACHE"],"mappings":";;;;;;AAGA,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAgB,IAAI,CAAC;AAEzD,MAAM,gBAAgB,GAAoE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AACxH,IAAA,QACGA,cAAA,CAAC,eAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACpC,QAAQ,EAAA,CACe;AAEjC;AAEO,MAAM,aAAa,GAAG,MAAK;AAC/B,IAAA,OAAO,KAAK,CAAC,UAAU,CAAC,eAAe,CAAW;AACrD;AAEO,MAAM,WAAW,GAAG,MAAK;IAC7B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC;AACjD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;AACA,IAAA,MAAM,MAAM,GAAGC,iBAAW,CAAC,MAAM,EAAE;IAEnC,OAAO;QACJ,OAAO;AACP,QAAA,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,OAAQ;KAC5B;AACJ;AAEO,MAAM,WAAW,GAAG,CAAC,OAAe,KAAI;AAC5C,IAAA,MAAM,MAAM,GAAGA,iBAAW,CAAC,MAAM,EAAE;AACnC,IAAA,OAAO,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;AAC7B;;;;;;;"}
|