@xanui/core 1.2.41 → 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} +2 -2
- package/AppRoot/AppRootProvider.js.map +1 -0
- package/AppRoot/{context.mjs → AppRootProvider.mjs} +2 -2
- package/AppRoot/AppRootProvider.mjs.map +1 -0
- package/AppRoot/index.d.ts +2 -2
- package/AppRoot/index.js +16 -94
- package/AppRoot/index.js.map +1 -1
- package/AppRoot/index.mjs +16 -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
|
@@ -12,9 +12,9 @@ const useAppRootElement = () => {
|
|
|
12
12
|
if (typeof window === 'undefined') {
|
|
13
13
|
return null;
|
|
14
14
|
}
|
|
15
|
-
return context
|
|
15
|
+
return context;
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
exports.AppRootProvider = AppRootProvider;
|
|
19
19
|
exports.useAppRootElement = useAppRootElement;
|
|
20
|
-
//# sourceMappingURL=
|
|
20
|
+
//# sourceMappingURL=AppRootProvider.js.map
|
|
@@ -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;;;;;"}
|
|
@@ -10,8 +10,8 @@ const useAppRootElement = () => {
|
|
|
10
10
|
if (typeof window === 'undefined') {
|
|
11
11
|
return null;
|
|
12
12
|
}
|
|
13
|
-
return context
|
|
13
|
+
return context;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
export { AppRootProvider, useAppRootElement };
|
|
17
|
-
//# sourceMappingURL=
|
|
17
|
+
//# sourceMappingURL=AppRootProvider.mjs.map
|
|
@@ -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,107 +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
|
|
16
|
-
var
|
|
14
|
+
var index = require('../Document/index.js');
|
|
15
|
+
var AppRootProvider = require('./AppRootProvider.js');
|
|
16
|
+
var useMergeRefs = require('../hooks/useMergeRefs.js');
|
|
17
|
+
var CSSCacheProvider = require('../css/CSSCacheProvider.js');
|
|
17
18
|
|
|
18
|
-
const APP_ROOT_CLASSNAME = "xui-app-root";
|
|
19
19
|
const AppRoot = React.forwardRef((_a, ref) => {
|
|
20
|
-
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"]);
|
|
21
21
|
noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
|
|
22
22
|
_document !== null && _document !== void 0 ? _document : (_document = document);
|
|
23
|
+
const csscacheId = React.useId();
|
|
24
|
+
CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
|
|
23
25
|
const [visibility, setVisibility] = React.useState("hidden");
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
return;
|
|
27
|
-
const cls = (cls) => `${index$1.themeRootClass(theme)} ${cls}`;
|
|
28
|
-
let thumbSize = 6;
|
|
29
|
-
let thumbColor = "var(--color-text-secondary)";
|
|
30
|
-
let trackColor = "transparent";
|
|
31
|
-
return index.css({
|
|
32
|
-
"@global": {
|
|
33
|
-
[cls('*::-webkit-scrollbar')]: {
|
|
34
|
-
width: thumbSize,
|
|
35
|
-
height: thumbSize,
|
|
36
|
-
},
|
|
37
|
-
[cls("*::-webkit-scrollbar-thumb")]: {
|
|
38
|
-
backgroundColor: thumbColor,
|
|
39
|
-
borderRadius: "6px",
|
|
40
|
-
opacity: 0.6,
|
|
41
|
-
},
|
|
42
|
-
[cls("*::-webkit-scrollbar-thumb:hover")]: {
|
|
43
|
-
backgroundColor: thumbColor,
|
|
44
|
-
opacity: 0.0,
|
|
45
|
-
},
|
|
46
|
-
[cls("*::-webkit-scrollbar-track")]: {
|
|
47
|
-
backgroundColor: trackColor,
|
|
48
|
-
borderRadius: "6px",
|
|
49
|
-
},
|
|
50
|
-
}
|
|
51
|
-
}, {
|
|
52
|
-
injectStyle: typeof window !== 'undefined',
|
|
53
|
-
container: _document,
|
|
54
|
-
});
|
|
55
|
-
}, [noScrollbarCss, theme]);
|
|
56
|
-
const globalStyle = React.useMemo(() => {
|
|
57
|
-
return index.css({
|
|
58
|
-
"@global": {
|
|
59
|
-
"*": {
|
|
60
|
-
m: 0,
|
|
61
|
-
p: 0,
|
|
62
|
-
outline: "none",
|
|
63
|
-
boxSizing: "border-box",
|
|
64
|
-
verticalAlign: "baseline",
|
|
65
|
-
},
|
|
66
|
-
"html, body": {
|
|
67
|
-
minHeight: "100%",
|
|
68
|
-
"-webkit-font-smoothing": "antialiased",
|
|
69
|
-
"-moz-osx-font-smoothing": "grayscale",
|
|
70
|
-
},
|
|
71
|
-
"img, picture, video, canvas, svg": {
|
|
72
|
-
maxWidth: "100%",
|
|
73
|
-
display: "block"
|
|
74
|
-
},
|
|
75
|
-
"input, button, textarea, select": {
|
|
76
|
-
font: "inherit"
|
|
77
|
-
},
|
|
78
|
-
"table": {
|
|
79
|
-
borderCollapse: "collapse",
|
|
80
|
-
borderSpacing: 0,
|
|
81
|
-
},
|
|
82
|
-
"ol, ul": {
|
|
83
|
-
listStyle: "none",
|
|
84
|
-
padding: 0,
|
|
85
|
-
margin: 0,
|
|
86
|
-
},
|
|
87
|
-
"a": {
|
|
88
|
-
display: "inline-block",
|
|
89
|
-
color: "inherit",
|
|
90
|
-
textDecoration: "none",
|
|
91
|
-
cursor: "pointer",
|
|
92
|
-
"&:hover": {
|
|
93
|
-
textDecoration: "underline"
|
|
94
|
-
}
|
|
95
|
-
},
|
|
96
|
-
"p, h1, h2, h3, h4, h5, h6": {
|
|
97
|
-
overflowWrap: "break-word",
|
|
98
|
-
},
|
|
99
|
-
}
|
|
100
|
-
}, {
|
|
101
|
-
injectStyle: typeof window !== 'undefined',
|
|
102
|
-
container: _document,
|
|
103
|
-
});
|
|
104
|
-
}, []);
|
|
26
|
+
const rootRef = React.useRef(null);
|
|
27
|
+
const mergeRef = useMergeRefs(rootRef, ref);
|
|
105
28
|
React.useEffect(() => {
|
|
106
29
|
setVisibility("visible");
|
|
107
30
|
// move oncss style tags to head
|
|
@@ -112,9 +35,8 @@ const AppRoot = React.forwardRef((_a, ref) => {
|
|
|
112
35
|
_document.head.appendChild(style);
|
|
113
36
|
});
|
|
114
37
|
}, []);
|
|
115
|
-
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, {})] }) })) }) }) }));
|
|
116
39
|
});
|
|
117
40
|
|
|
118
|
-
exports
|
|
119
|
-
exports.default = AppRoot;
|
|
41
|
+
module.exports = AppRoot;
|
|
120
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,103 +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 './
|
|
12
|
-
import
|
|
13
|
+
import { AppRootProvider } from './AppRootProvider.mjs';
|
|
14
|
+
import useMergeRefs from '../hooks/useMergeRefs.mjs';
|
|
15
|
+
import { CSSCacheProvider } from '../css/CSSCacheProvider.mjs';
|
|
13
16
|
|
|
14
|
-
const APP_ROOT_CLASSNAME = "xui-app-root";
|
|
15
17
|
const AppRoot = React__default.forwardRef((_a, ref) => {
|
|
16
|
-
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"]);
|
|
17
19
|
noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
|
|
18
20
|
_document !== null && _document !== void 0 ? _document : (_document = document);
|
|
21
|
+
const csscacheId = useId();
|
|
22
|
+
CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
|
|
19
23
|
const [visibility, setVisibility] = React__default.useState("hidden");
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
return;
|
|
23
|
-
const cls = (cls) => `${themeRootClass(theme)} ${cls}`;
|
|
24
|
-
let thumbSize = 6;
|
|
25
|
-
let thumbColor = "var(--color-text-secondary)";
|
|
26
|
-
let trackColor = "transparent";
|
|
27
|
-
return css({
|
|
28
|
-
"@global": {
|
|
29
|
-
[cls('*::-webkit-scrollbar')]: {
|
|
30
|
-
width: thumbSize,
|
|
31
|
-
height: thumbSize,
|
|
32
|
-
},
|
|
33
|
-
[cls("*::-webkit-scrollbar-thumb")]: {
|
|
34
|
-
backgroundColor: thumbColor,
|
|
35
|
-
borderRadius: "6px",
|
|
36
|
-
opacity: 0.6,
|
|
37
|
-
},
|
|
38
|
-
[cls("*::-webkit-scrollbar-thumb:hover")]: {
|
|
39
|
-
backgroundColor: thumbColor,
|
|
40
|
-
opacity: 0.0,
|
|
41
|
-
},
|
|
42
|
-
[cls("*::-webkit-scrollbar-track")]: {
|
|
43
|
-
backgroundColor: trackColor,
|
|
44
|
-
borderRadius: "6px",
|
|
45
|
-
},
|
|
46
|
-
}
|
|
47
|
-
}, {
|
|
48
|
-
injectStyle: typeof window !== 'undefined',
|
|
49
|
-
container: _document,
|
|
50
|
-
});
|
|
51
|
-
}, [noScrollbarCss, theme]);
|
|
52
|
-
const globalStyle = useMemo(() => {
|
|
53
|
-
return css({
|
|
54
|
-
"@global": {
|
|
55
|
-
"*": {
|
|
56
|
-
m: 0,
|
|
57
|
-
p: 0,
|
|
58
|
-
outline: "none",
|
|
59
|
-
boxSizing: "border-box",
|
|
60
|
-
verticalAlign: "baseline",
|
|
61
|
-
},
|
|
62
|
-
"html, body": {
|
|
63
|
-
minHeight: "100%",
|
|
64
|
-
"-webkit-font-smoothing": "antialiased",
|
|
65
|
-
"-moz-osx-font-smoothing": "grayscale",
|
|
66
|
-
},
|
|
67
|
-
"img, picture, video, canvas, svg": {
|
|
68
|
-
maxWidth: "100%",
|
|
69
|
-
display: "block"
|
|
70
|
-
},
|
|
71
|
-
"input, button, textarea, select": {
|
|
72
|
-
font: "inherit"
|
|
73
|
-
},
|
|
74
|
-
"table": {
|
|
75
|
-
borderCollapse: "collapse",
|
|
76
|
-
borderSpacing: 0,
|
|
77
|
-
},
|
|
78
|
-
"ol, ul": {
|
|
79
|
-
listStyle: "none",
|
|
80
|
-
padding: 0,
|
|
81
|
-
margin: 0,
|
|
82
|
-
},
|
|
83
|
-
"a": {
|
|
84
|
-
display: "inline-block",
|
|
85
|
-
color: "inherit",
|
|
86
|
-
textDecoration: "none",
|
|
87
|
-
cursor: "pointer",
|
|
88
|
-
"&:hover": {
|
|
89
|
-
textDecoration: "underline"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
"p, h1, h2, h3, h4, h5, h6": {
|
|
93
|
-
overflowWrap: "break-word",
|
|
94
|
-
},
|
|
95
|
-
}
|
|
96
|
-
}, {
|
|
97
|
-
injectStyle: typeof window !== 'undefined',
|
|
98
|
-
container: _document,
|
|
99
|
-
});
|
|
100
|
-
}, []);
|
|
24
|
+
const rootRef = useRef(null);
|
|
25
|
+
const mergeRef = useMergeRefs(rootRef, ref);
|
|
101
26
|
useEffect(() => {
|
|
102
27
|
setVisibility("visible");
|
|
103
28
|
// move oncss style tags to head
|
|
@@ -108,8 +33,8 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
|
|
|
108
33
|
_document.head.appendChild(style);
|
|
109
34
|
});
|
|
110
35
|
}, []);
|
|
111
|
-
return (jsx(DocumentProvider, { document: _document, children: jsx(
|
|
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, {})] }) })) }) }) }));
|
|
112
37
|
});
|
|
113
38
|
|
|
114
|
-
export {
|
|
39
|
+
export { AppRoot as default };
|
|
115
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
|