@xanui/core 1.1.20 → 1.1.22

package/AppRoot/index.d.ts

@@ -5,7 +5,8 @@ import { ThemeProviderProps } from '../theme/ThemeProvider.js';
 type AppRootProps<T extends TagComponentType = "div"> = ThemeProviderProps<T> & {
     noScrollbarCss?: boolean;
 };
+declare const appRootElement: () => HTMLDivElement;
 declare const AppRoot: React__default.ForwardRefExoticComponent<Omit<AppRootProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
-export { AppRoot as default };
+export { appRootElement, AppRoot as default };
 export type { AppRootProps };

package/AppRoot/index.js

@@ -1,5 +1,7 @@
 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../theme/index.js'),BreakpointProvider=require('../breakpoint/BreakpointProvider.js'),index=require('../css/index.js'),useScrollbar=require('../hooks/useScrollbar.js'),ThemeDefaultOptions=require('../theme/ThemeDefaultOptions.js'),createTheme=require('../theme/createTheme.js'),ThemeProvider=require('../theme/ThemeProvider.js');createTheme.createTheme("light", { colors: ThemeDefaultOptions.lightColorPallete });
 createTheme.createTheme("dark", { colors: ThemeDefaultOptions.darkColorPallete });
+const appRootClassName = "xui-app-root";
+const appRootElement = () => document.querySelector(`.${appRootClassName}`);
 const AppRoot = React.forwardRef((_a, ref) => {
     var { children, noScrollbarCss, theme } = _a, props = tslib.__rest(_a, ["children", "noScrollbarCss", "theme"]);
     noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
@@ -49,6 +51,10 @@ const AppRoot = React.forwardRef((_a, ref) => {
         });
     }, []);
     React.useEffect(() => {
+        const root = document.querySelectorAll(`.${appRootClassName}`);
+        if (!root || root.length > 1) {
+            throw new Error("Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.");
+        }
         // move oncss style tags to head
         if (typeof window === 'undefined')
             return;
@@ -58,5 +64,5 @@ const AppRoot = React.forwardRef((_a, ref) => {
             head.appendChild(style);
         });
     }, []);
-    return (jsxRuntime.jsx(ThemeProvider.default, Object.assign({ ref: ref, theme: theme }, props, { classNames: [`xui-app-root`], children: jsxRuntime.jsx(BreakpointProvider.BreakpointProvider, { children: children }) })));
-});exports.default=AppRoot;//# sourceMappingURL=index.js.map
+    return (jsxRuntime.jsx(ThemeProvider.default, Object.assign({ ref: ref, theme: theme }, props, { classNames: [appRootClassName], children: jsxRuntime.jsx(BreakpointProvider.BreakpointProvider, { children: children }) })));
+});exports.appRootElement=appRootElement;exports.default=AppRoot;//# sourceMappingURL=index.js.map

package/AppRoot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n   noScrollbarCss ??= false\n\n   useMemo(() => {\n      if (noScrollbarCss) return;\n      useScrollbar({\n         themeName: theme,\n         root_cls: themeRootClass(theme)\n      })\n   }, [noScrollbarCss, theme])\n\n   useMemo(() => {\n      css({\n         \"@global\": {\n            \"*\": {\n               m: 0,\n               p: 0,\n               outline: \"none\",\n               boxSizing: \"border-box\",\n               verticalAlign: \"baseline\",\n            },\n            \"html, body\": {\n               minHeight: \"100%\",\n               \"-webkit-font-smoothing\": \"antialiased\"\n            } as any,\n            \"img, picture, video, canvas, svg\": {\n               maxWidth: \"100%\",\n               display: \"block\"\n            },\n            \"input, button, textarea, select\": {\n               font: \"inherit\"\n            },\n            \"table\": {\n               borderCollapse: \"collapse\",\n               borderSpacing: 0\n            },\n            \"ol, ul\": {\n               listStyle: \"none\"\n            },\n            \"a\": {\n               display: \"inline-block\"\n            },\n            \"p, h1, h2, h3, h4, h5, h6\": {\n               overflowWrap: \"break-word\",\n            }\n         }\n      })\n   }, [])\n\n   useEffect(() => {\n      // move oncss style tags to head\n      if (typeof window === 'undefined') return;\n      const head = document.getElementsByTagName('head')[0];\n      const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         head.appendChild(style);\n      });\n   }, [])\n\n   return (\n      <ThemeProvider\n         ref={ref}\n         theme={theme}\n         {...props}\n         classNames={[`xui-app-root`]}\n      >\n         <BreakpointProvider>\n            {children}\n         </BreakpointProvider>\n      </ThemeProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":["createTheme","lightColorPallete","darkColorPallete","__rest","useMemo","useScrollbar","themeRootClass","css","useEffect","_jsx","ThemeProvider","BreakpointProvider"],"mappings":"0fASAA,uBAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAEC,qCAAiB,EAAE,CAAC;AACnDD,uBAAW,CAAC,MAAM,EAAE,EAAE,MAAM,EAAEE,oCAAgB,EAAE,CAAC;AAMjD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;QAAvF,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,OAA6B,EAAxB,KAAK,GAAAC,YAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,gBAAA,EAAA,OAAA,CAA6C,CAAF;IAC9G,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,MAAA,GAAd,cAAc,IAAd,cAAc,GAAK,KAAK,CAAA;IAExBC,aAAO,CAAC,MAAK;AACV,QAAA,IAAI,cAAc;YAAE;AACpB,QAAAC,oBAAY,CAAC;AACV,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,QAAQ,EAAEC,sBAAc,CAAC,KAAK;AAChC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAE3BF,aAAO,CAAC,MAAK;AACV,QAAAG,SAAG,CAAC;AACD,YAAA,SAAS,EAAE;AACR,gBAAA,GAAG,EAAE;AACF,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,SAAS,EAAE,YAAY;AACvB,oBAAA,aAAa,EAAE,UAAU;AAC3B,iBAAA;AACD,gBAAA,YAAY,EAAE;AACX,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,wBAAwB,EAAE;AACrB,iBAAA;AACR,gBAAA,kCAAkC,EAAE;AACjC,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,iCAAiC,EAAE;AAChC,oBAAA,IAAI,EAAE;AACR,iBAAA;AACD,gBAAA,OAAO,EAAE;AACN,oBAAA,cAAc,EAAE,UAAU;AAC1B,oBAAA,aAAa,EAAE;AACjB,iBAAA;AACD,gBAAA,QAAQ,EAAE;AACP,oBAAA,SAAS,EAAE;AACb,iBAAA;AACD,gBAAA,GAAG,EAAE;AACF,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,2BAA2B,EAAE;AAC1B,oBAAA,YAAY,EAAE,YAAY;AAC5B;AACH;AACH,SAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAENC,eAAS,CAAC,MAAK;;QAEZ,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE;QACnC,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACrD,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;AAC9E,QAAA,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACtB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC1B,QAAA,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,QACGC,cAAA,CAACC,qBAAa,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EAAA,EACR,KAAK,EAAA,EACT,UAAU,EAAE,CAAC,CAAA,YAAA,CAAc,CAAC,EAAA,QAAA,EAE5BD,cAAA,CAACE,qCAAkB,EAAA,EAAA,QAAA,EACf,QAAQ,EAAA,CACS,EAAA,CAAA,CACR;AAEtB,CAAC"}
+{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n}\n\nconst appRootClassName = \"xui-app-root\"\nexport const appRootElement = () => document.querySelector(`.${appRootClassName}`) as HTMLDivElement;\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n   noScrollbarCss ??= false\n\n   useMemo(() => {\n      if (noScrollbarCss) return;\n      useScrollbar({\n         themeName: theme,\n         root_cls: themeRootClass(theme)\n      })\n   }, [noScrollbarCss, theme])\n\n   useMemo(() => {\n      css({\n         \"@global\": {\n            \"*\": {\n               m: 0,\n               p: 0,\n               outline: \"none\",\n               boxSizing: \"border-box\",\n               verticalAlign: \"baseline\",\n            },\n            \"html, body\": {\n               minHeight: \"100%\",\n               \"-webkit-font-smoothing\": \"antialiased\"\n            } as any,\n            \"img, picture, video, canvas, svg\": {\n               maxWidth: \"100%\",\n               display: \"block\"\n            },\n            \"input, button, textarea, select\": {\n               font: \"inherit\"\n            },\n            \"table\": {\n               borderCollapse: \"collapse\",\n               borderSpacing: 0\n            },\n            \"ol, ul\": {\n               listStyle: \"none\"\n            },\n            \"a\": {\n               display: \"inline-block\"\n            },\n            \"p, h1, h2, h3, h4, h5, h6\": {\n               overflowWrap: \"break-word\",\n            }\n         }\n      })\n   }, [])\n\n   useEffect(() => {\n\n      const root = document.querySelectorAll(`.${appRootClassName}`)\n      if (!root || root.length > 1) {\n         throw new Error(\"Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.\");\n      }\n\n\n      // move oncss style tags to head\n      if (typeof window === 'undefined') return;\n      const head = document.getElementsByTagName('head')[0];\n      const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         head.appendChild(style);\n      });\n   }, [])\n\n   return (\n      <ThemeProvider\n         ref={ref}\n         theme={theme}\n         {...props}\n         classNames={[appRootClassName]}\n      >\n         <BreakpointProvider>\n            {children}\n         </BreakpointProvider>\n      </ThemeProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":["createTheme","lightColorPallete","darkColorPallete","__rest","useMemo","useScrollbar","themeRootClass","css","useEffect","_jsx","ThemeProvider","BreakpointProvider"],"mappings":"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"}

package/AppRoot/index.mjs

@@ -1,5 +1,7 @@
 import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React__default,{useMemo,useEffect}from'react';import {themeRootClass}from'../theme/index.mjs';import {BreakpointProvider}from'../breakpoint/BreakpointProvider.mjs';import {css}from'../css/index.mjs';import useScrollbar from'../hooks/useScrollbar.mjs';import {lightColorPallete,darkColorPallete}from'../theme/ThemeDefaultOptions.mjs';import {createTheme}from'../theme/createTheme.mjs';import ThemeProvider from'../theme/ThemeProvider.mjs';createTheme("light", { colors: lightColorPallete });
 createTheme("dark", { colors: darkColorPallete });
+const appRootClassName = "xui-app-root";
+const appRootElement = () => document.querySelector(`.${appRootClassName}`);
 const AppRoot = React__default.forwardRef((_a, ref) => {
     var { children, noScrollbarCss, theme } = _a, props = __rest(_a, ["children", "noScrollbarCss", "theme"]);
     noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
@@ -49,6 +51,10 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
         });
     }, []);
     useEffect(() => {
+        const root = document.querySelectorAll(`.${appRootClassName}`);
+        if (!root || root.length > 1) {
+            throw new Error("Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.");
+        }
         // move oncss style tags to head
         if (typeof window === 'undefined')
             return;
@@ -58,5 +64,5 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
             head.appendChild(style);
         });
     }, []);
-    return (jsx(ThemeProvider, Object.assign({ ref: ref, theme: theme }, props, { classNames: [`xui-app-root`], children: jsx(BreakpointProvider, { children: children }) })));
-});export{AppRoot as default};//# sourceMappingURL=index.mjs.map
+    return (jsx(ThemeProvider, Object.assign({ ref: ref, theme: theme }, props, { classNames: [appRootClassName], children: jsx(BreakpointProvider, { children: children }) })));
+});export{appRootElement,AppRoot as default};//# sourceMappingURL=index.mjs.map

package/AppRoot/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n   noScrollbarCss ??= false\n\n   useMemo(() => {\n      if (noScrollbarCss) return;\n      useScrollbar({\n         themeName: theme,\n         root_cls: themeRootClass(theme)\n      })\n   }, [noScrollbarCss, theme])\n\n   useMemo(() => {\n      css({\n         \"@global\": {\n            \"*\": {\n               m: 0,\n               p: 0,\n               outline: \"none\",\n               boxSizing: \"border-box\",\n               verticalAlign: \"baseline\",\n            },\n            \"html, body\": {\n               minHeight: \"100%\",\n               \"-webkit-font-smoothing\": \"antialiased\"\n            } as any,\n            \"img, picture, video, canvas, svg\": {\n               maxWidth: \"100%\",\n               display: \"block\"\n            },\n            \"input, button, textarea, select\": {\n               font: \"inherit\"\n            },\n            \"table\": {\n               borderCollapse: \"collapse\",\n               borderSpacing: 0\n            },\n            \"ol, ul\": {\n               listStyle: \"none\"\n            },\n            \"a\": {\n               display: \"inline-block\"\n            },\n            \"p, h1, h2, h3, h4, h5, h6\": {\n               overflowWrap: \"break-word\",\n            }\n         }\n      })\n   }, [])\n\n   useEffect(() => {\n      // move oncss style tags to head\n      if (typeof window === 'undefined') return;\n      const head = document.getElementsByTagName('head')[0];\n      const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         head.appendChild(style);\n      });\n   }, [])\n\n   return (\n      <ThemeProvider\n         ref={ref}\n         theme={theme}\n         {...props}\n         classNames={[`xui-app-root`]}\n      >\n         <BreakpointProvider>\n            {children}\n         </BreakpointProvider>\n      </ThemeProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":["React","_jsx"],"mappings":"4fASA,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC;AACnD,WAAW,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC;AAMjD,MAAM,OAAO,GAAGA,cAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;QAAvF,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,OAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,gBAAA,EAAA,OAAA,CAA6C,CAAF;IAC9G,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,MAAA,GAAd,cAAc,IAAd,cAAc,GAAK,KAAK,CAAA;IAExB,OAAO,CAAC,MAAK;AACV,QAAA,IAAI,cAAc;YAAE;AACpB,QAAA,YAAY,CAAC;AACV,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,QAAQ,EAAE,cAAc,CAAC,KAAK;AAChC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAE3B,OAAO,CAAC,MAAK;AACV,QAAA,GAAG,CAAC;AACD,YAAA,SAAS,EAAE;AACR,gBAAA,GAAG,EAAE;AACF,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,SAAS,EAAE,YAAY;AACvB,oBAAA,aAAa,EAAE,UAAU;AAC3B,iBAAA;AACD,gBAAA,YAAY,EAAE;AACX,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,wBAAwB,EAAE;AACrB,iBAAA;AACR,gBAAA,kCAAkC,EAAE;AACjC,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,iCAAiC,EAAE;AAChC,oBAAA,IAAI,EAAE;AACR,iBAAA;AACD,gBAAA,OAAO,EAAE;AACN,oBAAA,cAAc,EAAE,UAAU;AAC1B,oBAAA,aAAa,EAAE;AACjB,iBAAA;AACD,gBAAA,QAAQ,EAAE;AACP,oBAAA,SAAS,EAAE;AACb,iBAAA;AACD,gBAAA,GAAG,EAAE;AACF,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,2BAA2B,EAAE;AAC1B,oBAAA,YAAY,EAAE,YAAY;AAC5B;AACH;AACH,SAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;;QAEZ,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE;QACnC,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACrD,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;AAC9E,QAAA,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACtB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC1B,QAAA,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,QACGC,GAAA,CAAC,aAAa,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EAAA,EACR,KAAK,EAAA,EACT,UAAU,EAAE,CAAC,CAAA,YAAA,CAAc,CAAC,EAAA,QAAA,EAE5BA,GAAA,CAAC,kBAAkB,EAAA,EAAA,QAAA,EACf,QAAQ,EAAA,CACS,EAAA,CAAA,CACR;AAEtB,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n}\n\nconst appRootClassName = \"xui-app-root\"\nexport const appRootElement = () => document.querySelector(`.${appRootClassName}`) as HTMLDivElement;\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n   noScrollbarCss ??= false\n\n   useMemo(() => {\n      if (noScrollbarCss) return;\n      useScrollbar({\n         themeName: theme,\n         root_cls: themeRootClass(theme)\n      })\n   }, [noScrollbarCss, theme])\n\n   useMemo(() => {\n      css({\n         \"@global\": {\n            \"*\": {\n               m: 0,\n               p: 0,\n               outline: \"none\",\n               boxSizing: \"border-box\",\n               verticalAlign: \"baseline\",\n            },\n            \"html, body\": {\n               minHeight: \"100%\",\n               \"-webkit-font-smoothing\": \"antialiased\"\n            } as any,\n            \"img, picture, video, canvas, svg\": {\n               maxWidth: \"100%\",\n               display: \"block\"\n            },\n            \"input, button, textarea, select\": {\n               font: \"inherit\"\n            },\n            \"table\": {\n               borderCollapse: \"collapse\",\n               borderSpacing: 0\n            },\n            \"ol, ul\": {\n               listStyle: \"none\"\n            },\n            \"a\": {\n               display: \"inline-block\"\n            },\n            \"p, h1, h2, h3, h4, h5, h6\": {\n               overflowWrap: \"break-word\",\n            }\n         }\n      })\n   }, [])\n\n   useEffect(() => {\n\n      const root = document.querySelectorAll(`.${appRootClassName}`)\n      if (!root || root.length > 1) {\n         throw new Error(\"Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.\");\n      }\n\n\n      // move oncss style tags to head\n      if (typeof window === 'undefined') return;\n      const head = document.getElementsByTagName('head')[0];\n      const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         head.appendChild(style);\n      });\n   }, [])\n\n   return (\n      <ThemeProvider\n         ref={ref}\n         theme={theme}\n         {...props}\n         classNames={[appRootClassName]}\n      >\n         <BreakpointProvider>\n            {children}\n         </BreakpointProvider>\n      </ThemeProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":["React","_jsx"],"mappings":"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"}

package/hooks/usePortal.d.ts

@@ -1,9 +1,14 @@
 import React__default from 'react';
 
-declare function usePortal(children: React__default.ReactNode): {
+type UsePortalOptions = {
+    container?: HTMLElement;
+    autoMount?: boolean;
+};
+declare function usePortal(children: React__default.ReactNode, options?: UsePortalOptions): {
     isMount: () => boolean;
     mount: () => void;
     unmount: () => void;
 };
 
 export { usePortal as default, usePortal };
+export type { UsePortalOptions };

package/hooks/usePortal.js

@@ -1,56 +1,57 @@
-'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) {
-    const [initialized, setInitialized] = React.useState(false);
+'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');var index=require('../AppRoot/index.js');function usePortal(children, options) {
+    options = options || {};
+    if (options.autoMount === undefined) {
+        options.autoMount = true;
+    }
+    const [mounted, setMounted] = React.useState(options.autoMount);
     const theme = core.useTheme();
     const { el, root } = React.useMemo(() => {
         const el = document.createElement("div");
-        const root = client.createRoot(el); // React 18 root
+        const root = client.createRoot(el);
         return { el, root };
-    }, []);
-    const render = () => {
+    }, [options.autoMount]);
+    const container = () => {
+        const rootEle = index.appRootElement();
+        if ((options === null || options === void 0 ? void 0 : options.container) && !rootEle.contains(options.container)) {
+            throw new Error(`Provided container is not a child of AppRoot. Please ensure that the container is within the AppRoot component.`);
+        }
+        const container = (options === null || options === void 0 ? void 0 : options.container) || rootEle;
+        if (!container)
+            throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);
+        return container;
+    };
+    const mount = () => {
+        const cont = container();
+        if (!cont.contains(el)) {
+            cont.appendChild(el);
+        }
         root.render(jsxRuntime.jsx(ThemeProvider.default, { theme: theme.name, children: children }));
     };
+    const unmount = () => {
+        root.render(null);
+        el.remove();
+    };
     React.useEffect(() => {
-        const container = document.querySelector(`.xui-app-root`);
-        if (!container) {
-            throw new Error("No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.");
-        }
-        const isContained = document.body.contains(el);
-        if (initialized) {
-            if (isContained) {
-                render();
-            }
+        if (mounted) {
+            mount();
         }
         else {
-            if (!isContained) {
-                container.appendChild(el);
-            }
-            render();
-            setInitialized(true);
+            unmount();
+        }
+    }, [mounted]);
+    React.useEffect(() => {
+        if (mounted) {
+            mount();
         }
     }, [children]);
     React.useEffect(() => {
         return () => {
-            const isContained = document.body.contains(el);
-            if (isContained) {
-                root.unmount();
-                el === null || el === void 0 ? void 0 : el.remove();
-            }
+            unmount();
         };
     }, []);
     return {
-        isMount: () => document.body.contains(el),
-        mount: () => {
-            const isContained = document.body.contains(el);
-            if (!isContained) {
-                document.body.appendChild(el);
-            }
-            render();
-        },
-        unmount: () => {
-            if (document.body.contains(el)) {
-                el === null || el === void 0 ? void 0 : el.remove();
-            }
-            root.render(jsxRuntime.jsx(jsxRuntime.Fragment, {}));
-        }
+        isMount: () => mounted,
+        mount: () => setMounted(true),
+        unmount: () => setMounted(false)
     };
 }exports.default=usePortal;exports.usePortal=usePortal;//# sourceMappingURL=usePortal.js.map

package/hooks/usePortal.js.map

@@ -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            el?.remove();\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            el?.remove();\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,EAAE,aAAF,EAAE,KAAA,MAAA,GAAA,MAAA,GAAF,EAAE,CAAE,MAAM,EAAE;YACf;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,EAAE,aAAF,EAAE,KAAA,MAAA,GAAA,MAAA,GAAF,EAAE,CAAE,MAAM,EAAE;YACf;AACA,YAAA,IAAI,CAAC,MAAM,CAACF,cAAA,CAAAG,mBAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
+{"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\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n   container?: HTMLElement;\n   autoMount?: boolean;\n}\n\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\n   options = options || {};\n   if (options.autoMount === undefined) {\n      options.autoMount = true;\n   }\n   const [mounted, setMounted] = React.useState(options.autoMount);\n   const theme = useTheme();\n   const { el, root } = useMemo(() => {\n      const el = document.createElement(\"div\");\n      const root = createRoot(el);\n      return { el, root };\n   }, [options.autoMount]);\n\n   const container = () => {\n      const rootEle = appRootElement();\n      if (options?.container && !rootEle.contains(options.container)) {\n         throw new Error(`Provided container is not a child of AppRoot. Please ensure that the container is within the AppRoot component.`);\n      }\n      const container = options?.container || rootEle\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\n      return container;\n   }\n\n   const mount = () => {\n      const cont = container();\n      if (!cont.contains(el)) {\n         cont.appendChild(el);\n      }\n      root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n   }\n\n   const unmount = () => {\n      root.render(null)\n      el.remove();\n   }\n\n\n   useEffect(() => {\n      if (mounted) {\n         mount()\n      } else {\n         unmount()\n      }\n   }, [mounted]);\n\n   useEffect(() => {\n      if (mounted) {\n         mount()\n      }\n   }, [children]);\n\n   useEffect(() => {\n      return () => {\n         unmount()\n      };\n   }, []);\n\n   return {\n      isMount: () => mounted,\n      mount: () => setMounted(true),\n      unmount: () => setMounted(false)\n   }\n}\n\n\nexport default usePortal;"],"names":["useTheme","useMemo","createRoot","appRootElement","_jsx","ThemeProvider","useEffect"],"mappings":"yaAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,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;AACxC,QAAA,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAGC,oBAAc,EAAE;AAChC,QAAA,IAAI,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AAC7D,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,+GAAA,CAAiH,CAAC;QACrI;AACA,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,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;IAED,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGDC,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEbA,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,eAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}

package/hooks/usePortal.mjs

@@ -1,56 +1,57 @@
-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) {
-    const [initialized, setInitialized] = React__default.useState(false);
+import {jsx}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';import {appRootElement}from'../AppRoot/index.mjs';function usePortal(children, options) {
+    options = options || {};
+    if (options.autoMount === undefined) {
+        options.autoMount = true;
+    }
+    const [mounted, setMounted] = React__default.useState(options.autoMount);
     const theme = useTheme();
     const { el, root } = useMemo(() => {
         const el = document.createElement("div");
-        const root = createRoot(el); // React 18 root
+        const root = createRoot(el);
         return { el, root };
-    }, []);
-    const render = () => {
+    }, [options.autoMount]);
+    const container = () => {
+        const rootEle = appRootElement();
+        if ((options === null || options === void 0 ? void 0 : options.container) && !rootEle.contains(options.container)) {
+            throw new Error(`Provided container is not a child of AppRoot. Please ensure that the container is within the AppRoot component.`);
+        }
+        const container = (options === null || options === void 0 ? void 0 : options.container) || rootEle;
+        if (!container)
+            throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);
+        return container;
+    };
+    const mount = () => {
+        const cont = container();
+        if (!cont.contains(el)) {
+            cont.appendChild(el);
+        }
         root.render(jsx(ThemeProvider, { theme: theme.name, children: children }));
     };
+    const unmount = () => {
+        root.render(null);
+        el.remove();
+    };
     useEffect(() => {
-        const container = document.querySelector(`.xui-app-root`);
-        if (!container) {
-            throw new Error("No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.");
-        }
-        const isContained = document.body.contains(el);
-        if (initialized) {
-            if (isContained) {
-                render();
-            }
+        if (mounted) {
+            mount();
         }
         else {
-            if (!isContained) {
-                container.appendChild(el);
-            }
-            render();
-            setInitialized(true);
+            unmount();
+        }
+    }, [mounted]);
+    useEffect(() => {
+        if (mounted) {
+            mount();
         }
     }, [children]);
     useEffect(() => {
         return () => {
-            const isContained = document.body.contains(el);
-            if (isContained) {
-                root.unmount();
-                el === null || el === void 0 ? void 0 : el.remove();
-            }
+            unmount();
         };
     }, []);
     return {
-        isMount: () => document.body.contains(el),
-        mount: () => {
-            const isContained = document.body.contains(el);
-            if (!isContained) {
-                document.body.appendChild(el);
-            }
-            render();
-        },
-        unmount: () => {
-            if (document.body.contains(el)) {
-                el === null || el === void 0 ? void 0 : el.remove();
-            }
-            root.render(jsx(Fragment, {}));
-        }
+        isMount: () => mounted,
+        mount: () => setMounted(true),
+        unmount: () => setMounted(false)
     };
 }export{usePortal as default,usePortal};//# sourceMappingURL=usePortal.mjs.map

package/hooks/usePortal.mjs.map

@@ -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            el?.remove();\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            el?.remove();\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,EAAE,aAAF,EAAE,KAAA,MAAA,GAAA,MAAA,GAAF,EAAE,CAAE,MAAM,EAAE;YACf;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,EAAE,aAAF,EAAE,KAAA,MAAA,GAAA,MAAA,GAAF,EAAE,CAAE,MAAM,EAAE;YACf;AACA,YAAA,IAAI,CAAC,MAAM,CAACA,GAAA,CAAAC,QAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
+{"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\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n   container?: HTMLElement;\n   autoMount?: boolean;\n}\n\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\n   options = options || {};\n   if (options.autoMount === undefined) {\n      options.autoMount = true;\n   }\n   const [mounted, setMounted] = React.useState(options.autoMount);\n   const theme = useTheme();\n   const { el, root } = useMemo(() => {\n      const el = document.createElement(\"div\");\n      const root = createRoot(el);\n      return { el, root };\n   }, [options.autoMount]);\n\n   const container = () => {\n      const rootEle = appRootElement();\n      if (options?.container && !rootEle.contains(options.container)) {\n         throw new Error(`Provided container is not a child of AppRoot. Please ensure that the container is within the AppRoot component.`);\n      }\n      const container = options?.container || rootEle\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\n      return container;\n   }\n\n   const mount = () => {\n      const cont = container();\n      if (!cont.contains(el)) {\n         cont.appendChild(el);\n      }\n      root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n   }\n\n   const unmount = () => {\n      root.render(null)\n      el.remove();\n   }\n\n\n   useEffect(() => {\n      if (mounted) {\n         mount()\n      } else {\n         unmount()\n      }\n   }, [mounted]);\n\n   useEffect(() => {\n      if (mounted) {\n         mount()\n      }\n   }, [children]);\n\n   useEffect(() => {\n      return () => {\n         unmount()\n      };\n   }, []);\n\n   return {\n      isMount: () => mounted,\n      mount: () => setMounted(true),\n      unmount: () => setMounted(false)\n   }\n}\n\n\nexport default usePortal;"],"names":["React","_jsx"],"mappings":"kYAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,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;AACxC,QAAA,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAG,cAAc,EAAE;AAChC,QAAA,IAAI,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AAC7D,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,+GAAA,CAAiH,CAAC;QACrI;AACA,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,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,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGD,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}

package/index.d.ts

@@ -9,7 +9,7 @@ export { default as isWindow } from './isWindow.js';
 export { default as useInterface } from './hooks/useInterface.js';
 export { default as Transition, TransitionElementProps, TransitionProps, TransitionState, TransitionVariantTypes } from './Transition/index.js';
 export { default as useScrollbar } from './hooks/useScrollbar.js';
-export { default as AppRoot, AppRootProps } from './AppRoot/index.js';
+export { default as AppRoot, AppRootProps, appRootElement } from './AppRoot/index.js';
 export { default as usePortal } from './hooks/usePortal.js';
 export { adjustColor, adjustTextContrast, alpha, breakpoints, css } from './css/index.js';
 export { themeRootClass } from './theme/index.js';

package/index.js

@@ -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('./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
+'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.appRootElement=index.appRootElement;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

@@ -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'./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
+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,appRootElement}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

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.1.20",
+  "version": "1.1.22",
   "description": "",
   "private": false,
   "main": "./index.js",