@xanui/core 1.1.16 → 1.1.17
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/{usePortal.js → hooks/usePortal.js} +1 -1
- package/hooks/usePortal.js.map +1 -0
- package/{usePortal.mjs → hooks/usePortal.mjs} +1 -1
- package/hooks/usePortal.mjs.map +1 -0
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +1 -1
- package/usePortal.js.map +0 -1
- package/usePortal.mjs.map +0 -1
- /package/{usePortal.d.ts → hooks/usePortal.d.ts} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),client=require('react-dom/client');require('
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),client=require('react-dom/client');require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js');require('../css/getValue.js'),require('oncss');var ThemeProvider=require('../theme/ThemeProvider.js');require('react-state-bucket');function usePortal(children) {
|
|
2
2
|
const [initialized, setInitialized] = React.useState(false);
|
|
3
3
|
const theme = core.useTheme();
|
|
4
4
|
const { el, root } = React.useMemo(() => {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\n const container = document.querySelector(`.xui-app-root`) as HTMLDivElement;\n if (!container) {\n throw new Error(\"No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.\");\n }\n const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n document.body.removeChild(el);\n }\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n const isContained = document.body.contains(el);\n if (!isContained) {\n document.body.appendChild(el);\n }\n render()\n },\n unmount: () => {\n if (document.body.contains(el)) {\n document.body.removeChild(el);\n }\n root.render(<></>);\n }\n }\n}\n\n\nexport default usePortal;"],"names":["useTheme","useMemo","createRoot","_jsx","ThemeProvider","useEffect","_Fragment"],"mappings":"gYAIM,SAAU,SAAS,CAAC,QAAyB,EAAA;AAChD,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAGC,aAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QACxC,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,MAAM,CAACC,cAAA,CAACC,qBAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACZ,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,aAAA,CAAe,CAAmB;QAC3E,IAAI,CAAC,SAAS,EAAE;AACb,YAAA,MAAM,IAAI,KAAK,CAAC,wHAAwH,CAAC;QAC5I;QACA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAE9C,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE;AACd,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;YACJ,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B;AACA,YAAA,MAAM,EAAE;YACR,cAAc,CAAC,IAAI,CAAC;QACvB;AAEH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,eAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,WAAW,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACH,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACJ,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzC,KAAK,EAAE,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;YACX,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC7B,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,IAAI,CAAC,MAAM,CAACF,cAAA,CAAAG,mBAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {jsx,Fragment}from'react/jsx-runtime';import React__default,{useMemo,useEffect}from'react';import {createRoot}from'react-dom/client';import'
|
|
1
|
+
import {jsx,Fragment}from'react/jsx-runtime';import React__default,{useMemo,useEffect}from'react';import {createRoot}from'react-dom/client';import'../theme/ThemeDefaultOptions.mjs';import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import ThemeProvider from'../theme/ThemeProvider.mjs';import'react-state-bucket';function usePortal(children) {
|
|
2
2
|
const [initialized, setInitialized] = React__default.useState(false);
|
|
3
3
|
const theme = useTheme();
|
|
4
4
|
const { el, root } = useMemo(() => {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\n const container = document.querySelector(`.xui-app-root`) as HTMLDivElement;\n if (!container) {\n throw new Error(\"No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.\");\n }\n const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n document.body.removeChild(el);\n }\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n const isContained = document.body.contains(el);\n if (!isContained) {\n document.body.appendChild(el);\n }\n render()\n },\n unmount: () => {\n if (document.body.contains(el)) {\n document.body.removeChild(el);\n }\n root.render(<></>);\n }\n }\n}\n\n\nexport default usePortal;"],"names":["React","_jsx","_Fragment"],"mappings":"yVAIM,SAAU,SAAS,CAAC,QAAyB,EAAA;AAChD,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QACxC,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,MAAM,CAACC,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACZ,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,aAAA,CAAe,CAAmB;QAC3E,IAAI,CAAC,SAAS,EAAE;AACb,YAAA,MAAM,IAAI,KAAK,CAAC,wHAAwH,CAAC;QAC5I;QACA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAE9C,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE;AACd,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;YACJ,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B;AACA,YAAA,MAAM,EAAE;YACR,cAAc,CAAC,IAAI,CAAC;QACvB;AAEH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,WAAW,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACH,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACJ,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzC,KAAK,EAAE,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;YACX,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC7B,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,IAAI,CAAC,MAAM,CAACA,GAAA,CAAAC,QAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
|
package/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export { default as useInterface } from './hooks/useInterface.js';
|
|
|
10
10
|
export { default as Transition, TransitionElementProps, TransitionProps, TransitionState, TransitionVariantTypes } from './Transition/index.js';
|
|
11
11
|
export { default as useScrollbar } from './hooks/useScrollbar.js';
|
|
12
12
|
export { default as AppRoot, AppRootProps } from './AppRoot/index.js';
|
|
13
|
-
export { default as usePortal } from './usePortal.js';
|
|
13
|
+
export { default as usePortal } from './hooks/usePortal.js';
|
|
14
14
|
export { adjustColor, adjustTextContrast, alpha, breakpoints, css } from './css/index.js';
|
|
15
15
|
export { themeRootClass } from './theme/index.js';
|
|
16
16
|
export { Aliases, BreakpointKeys, CSSBreakpointType, CSSOptionProps, CSSProps, CSSValueType, FN, GlobalCSS } from './css/types.js';
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index$1=require('./Tag/index.js'),useTagProps=require('./Tag/useTagProps.js'),useAnimation=require('./hooks/useAnimation.js'),useColorTemplate=require('./hooks/useColorTemplate.js'),useBreakpoint=require('./breakpoint/useBreakpoint.js'),useBreakpointProps=require('./breakpoint/useBreakpointProps.js'),RenderServerStyles=require('./RenderServerStyles.js'),isWindow=require('./isWindow.js'),useInterface=require('./hooks/useInterface.js'),index$2=require('./Transition/index.js'),useScrollbar=require('./hooks/useScrollbar.js'),index=require('./AppRoot/index.js'),usePortal=require('./usePortal.js'),index$3=require('./css/index.js'),index$4=require('./theme/index.js'),getValue=require('./css/getValue.js'),getProps=require('./css/getProps.js'),ThemeProvider=require('./theme/ThemeProvider.js'),createThemeSwitcher=require('./theme/createThemeSwitcher.js'),createTheme=require('./theme/createTheme.js'),core=require('./theme/core.js');exports.Tag=index$1.default;exports.useTagProps=useTagProps.default;exports.animationEases=useAnimation.animationEases;exports.useAnimation=useAnimation.default;exports.useColorTemplate=useColorTemplate.default;exports.useBreakpoint=useBreakpoint.default;exports.useBreakpointProps=useBreakpointProps.default;exports.RenderServerStyles=RenderServerStyles.default;exports.isWindow=isWindow.default;exports.useInterface=useInterface.default;exports.Transition=index$2.default;exports.useScrollbar=useScrollbar.default;exports.AppRoot=index.default;exports.usePortal=usePortal.usePortal;exports.adjustColor=index$3.adjustColor;exports.adjustTextContrast=index$3.adjustTextContrast;exports.alpha=index$3.alpha;exports.breakpoints=index$3.breakpoints;exports.css=index$3.css;exports.themeRootClass=index$4.themeRootClass;exports.getValue=getValue.default;exports.getProps=getProps.default;exports.ThemeProvider=ThemeProvider.default;exports.createThemeSwitcher=createThemeSwitcher.default;exports.createTheme=createTheme.createTheme;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index$1=require('./Tag/index.js'),useTagProps=require('./Tag/useTagProps.js'),useAnimation=require('./hooks/useAnimation.js'),useColorTemplate=require('./hooks/useColorTemplate.js'),useBreakpoint=require('./breakpoint/useBreakpoint.js'),useBreakpointProps=require('./breakpoint/useBreakpointProps.js'),RenderServerStyles=require('./RenderServerStyles.js'),isWindow=require('./isWindow.js'),useInterface=require('./hooks/useInterface.js'),index$2=require('./Transition/index.js'),useScrollbar=require('./hooks/useScrollbar.js'),index=require('./AppRoot/index.js'),usePortal=require('./hooks/usePortal.js'),index$3=require('./css/index.js'),index$4=require('./theme/index.js'),getValue=require('./css/getValue.js'),getProps=require('./css/getProps.js'),ThemeProvider=require('./theme/ThemeProvider.js'),createThemeSwitcher=require('./theme/createThemeSwitcher.js'),createTheme=require('./theme/createTheme.js'),core=require('./theme/core.js');exports.Tag=index$1.default;exports.useTagProps=useTagProps.default;exports.animationEases=useAnimation.animationEases;exports.useAnimation=useAnimation.default;exports.useColorTemplate=useColorTemplate.default;exports.useBreakpoint=useBreakpoint.default;exports.useBreakpointProps=useBreakpointProps.default;exports.RenderServerStyles=RenderServerStyles.default;exports.isWindow=isWindow.default;exports.useInterface=useInterface.default;exports.Transition=index$2.default;exports.useScrollbar=useScrollbar.default;exports.AppRoot=index.default;exports.usePortal=usePortal.usePortal;exports.adjustColor=index$3.adjustColor;exports.adjustTextContrast=index$3.adjustTextContrast;exports.alpha=index$3.alpha;exports.breakpoints=index$3.breakpoints;exports.css=index$3.css;exports.themeRootClass=index$4.themeRootClass;exports.getValue=getValue.default;exports.getProps=getProps.default;exports.ThemeProvider=ThemeProvider.default;exports.createThemeSwitcher=createThemeSwitcher.default;exports.createTheme=createTheme.createTheme;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;//# sourceMappingURL=index.js.map
|
package/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{default as Tag}from'./Tag/index.mjs';export{default as useTagProps}from'./Tag/useTagProps.mjs';export{animationEases,default as useAnimation}from'./hooks/useAnimation.mjs';export{default as useColorTemplate}from'./hooks/useColorTemplate.mjs';export{default as useBreakpoint}from'./breakpoint/useBreakpoint.mjs';export{default as useBreakpointProps}from'./breakpoint/useBreakpointProps.mjs';export{default as RenderServerStyles}from'./RenderServerStyles.mjs';export{default as isWindow}from'./isWindow.mjs';export{default as useInterface}from'./hooks/useInterface.mjs';export{default as Transition}from'./Transition/index.mjs';export{default as useScrollbar}from'./hooks/useScrollbar.mjs';export{default as AppRoot}from'./AppRoot/index.mjs';export{usePortal}from'./usePortal.mjs';export{adjustColor,adjustTextContrast,alpha,breakpoints,css}from'./css/index.mjs';export{themeRootClass}from'./theme/index.mjs';export{default as getValue}from'./css/getValue.mjs';export{default as getProps}from'./css/getProps.mjs';export{default as ThemeProvider}from'./theme/ThemeProvider.mjs';export{default as createThemeSwitcher}from'./theme/createThemeSwitcher.mjs';export{createTheme}from'./theme/createTheme.mjs';export{getTheme,useTheme}from'./theme/core.mjs';//# sourceMappingURL=index.mjs.map
|
|
1
|
+
export{default as Tag}from'./Tag/index.mjs';export{default as useTagProps}from'./Tag/useTagProps.mjs';export{animationEases,default as useAnimation}from'./hooks/useAnimation.mjs';export{default as useColorTemplate}from'./hooks/useColorTemplate.mjs';export{default as useBreakpoint}from'./breakpoint/useBreakpoint.mjs';export{default as useBreakpointProps}from'./breakpoint/useBreakpointProps.mjs';export{default as RenderServerStyles}from'./RenderServerStyles.mjs';export{default as isWindow}from'./isWindow.mjs';export{default as useInterface}from'./hooks/useInterface.mjs';export{default as Transition}from'./Transition/index.mjs';export{default as useScrollbar}from'./hooks/useScrollbar.mjs';export{default as AppRoot}from'./AppRoot/index.mjs';export{usePortal}from'./hooks/usePortal.mjs';export{adjustColor,adjustTextContrast,alpha,breakpoints,css}from'./css/index.mjs';export{themeRootClass}from'./theme/index.mjs';export{default as getValue}from'./css/getValue.mjs';export{default as getProps}from'./css/getProps.mjs';export{default as ThemeProvider}from'./theme/ThemeProvider.mjs';export{default as createThemeSwitcher}from'./theme/createThemeSwitcher.mjs';export{createTheme}from'./theme/createTheme.mjs';export{getTheme,useTheme}from'./theme/core.mjs';//# sourceMappingURL=index.mjs.map
|
package/package.json
CHANGED
package/usePortal.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.js","sources":["../src/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"./theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\n const container = document.querySelector(`.xui-app-root`) as HTMLDivElement;\n if (!container) {\n throw new Error(\"No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.\");\n }\n const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n document.body.removeChild(el);\n }\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n const isContained = document.body.contains(el);\n if (!isContained) {\n document.body.appendChild(el);\n }\n render()\n },\n unmount: () => {\n if (document.body.contains(el)) {\n document.body.removeChild(el);\n }\n root.render(<></>);\n }\n }\n}\n\n\nexport default usePortal;"],"names":["useTheme","useMemo","createRoot","_jsx","ThemeProvider","useEffect","_Fragment"],"mappings":"4XAIM,SAAU,SAAS,CAAC,QAAyB,EAAA;AAChD,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAGC,aAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QACxC,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,MAAM,CAACC,cAAA,CAACC,qBAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACZ,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,aAAA,CAAe,CAAmB;QAC3E,IAAI,CAAC,SAAS,EAAE;AACb,YAAA,MAAM,IAAI,KAAK,CAAC,wHAAwH,CAAC;QAC5I;QACA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAE9C,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE;AACd,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;YACJ,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B;AACA,YAAA,MAAM,EAAE;YACR,cAAc,CAAC,IAAI,CAAC;QACvB;AAEH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,eAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,WAAW,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACH,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACJ,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzC,KAAK,EAAE,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;YACX,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC7B,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,IAAI,CAAC,MAAM,CAACF,cAAA,CAAAG,mBAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
|
package/usePortal.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.mjs","sources":["../src/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"./theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\n const container = document.querySelector(`.xui-app-root`) as HTMLDivElement;\n if (!container) {\n throw new Error(\"No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.\");\n }\n const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n document.body.removeChild(el);\n }\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n const isContained = document.body.contains(el);\n if (!isContained) {\n document.body.appendChild(el);\n }\n render()\n },\n unmount: () => {\n if (document.body.contains(el)) {\n document.body.removeChild(el);\n }\n root.render(<></>);\n }\n }\n}\n\n\nexport default usePortal;"],"names":["React","_jsx","_Fragment"],"mappings":"qVAIM,SAAU,SAAS,CAAC,QAAyB,EAAA;AAChD,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QACxC,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,MAAM,CAACC,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACZ,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,aAAA,CAAe,CAAmB;QAC3E,IAAI,CAAC,SAAS,EAAE;AACb,YAAA,MAAM,IAAI,KAAK,CAAC,wHAAwH,CAAC;QAC5I;QACA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAE9C,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE;AACd,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;YACJ,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B;AACA,YAAA,MAAM,EAAE;YACR,cAAc,CAAC,IAAI,CAAC;QACvB;AAEH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,WAAW,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACH,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACJ,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzC,KAAK,EAAE,MAAK;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;YACX,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC7B,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,IAAI,CAAC,MAAM,CAACA,GAAA,CAAAC,QAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
|
|
File without changes
|