@xanui/core 1.2.41 → 1.2.42

package/AppRoot/context.js

@@ -12,7 +12,7 @@ const useAppRootElement = () => {
     if (typeof window === 'undefined') {
         return null;
     }
-    return context();
+    return context;
 };
 
 exports.AppRootProvider = AppRootProvider;

package/AppRoot/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../src/AppRoot/context.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; 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!()\r\n}\r\n"],"names":["_jsx"],"mappings":";;;;;AAEA,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAA6B,IAAI,CAAC;AAErE,MAAM,eAAe,GAAwE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC3H,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;IACA,OAAO,OAAQ,EAAE;AACpB;;;;;"}
+{"version":3,"file":"context.js","sources":["../../src/AppRoot/context.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;;;;;"}

package/AppRoot/context.mjs

@@ -10,7 +10,7 @@ const useAppRootElement = () => {
     if (typeof window === 'undefined') {
         return null;
     }
-    return context();
+    return context;
 };
 
 export { AppRootProvider, useAppRootElement };

package/AppRoot/context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.mjs","sources":["../../src/AppRoot/context.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; 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!()\r\n}\r\n"],"names":["React","_jsx"],"mappings":";;;AAEA,MAAM,cAAc,GAAGA,cAAK,CAAC,aAAa,CAA6B,IAAI,CAAC;AAErE,MAAM,eAAe,GAAwE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC3H,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;IACA,OAAO,OAAQ,EAAE;AACpB;;;;"}
+{"version":3,"file":"context.mjs","sources":["../../src/AppRoot/context.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.js

@@ -13,6 +13,7 @@ var Renderar = require('./Renderar.js');
 var ServerStyleTag = require('../Tag/ServerStyleTag.js');
 var index$2 = require('../Document/index.js');
 var context = require('./context.js');
+var useMergeRefs = require('../hooks/useMergeRefs.js');
 var ThemeProvider = require('../theme/ThemeProvider.js');
 
 const APP_ROOT_CLASSNAME = "xui-app-root";
@@ -21,6 +22,8 @@ const AppRoot = React.forwardRef((_a, ref) => {
     noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
     _document !== null && _document !== void 0 ? _document : (_document = document);
     const [visibility, setVisibility] = React.useState("hidden");
+    const rootRef = React.useRef(null);
+    const mergeRef = useMergeRefs(rootRef, ref);
     const scrollbarCss = React.useMemo(() => {
         if (noScrollbarCss)
             return;
@@ -112,7 +115,7 @@ const AppRoot = React.forwardRef((_a, ref) => {
             _document.head.appendChild(style);
         });
     }, []);
-    return (jsxRuntime.jsx(index$2.DocumentProvider, { document: _document, children: jsxRuntime.jsx(context.AppRootProvider, { element: () => _document.querySelector(`.${APP_ROOT_CLASSNAME}`), children: jsxRuntime.jsxs(ThemeProvider, Object.assign({ ref: ref, theme: theme }, props, { sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), classNames: [APP_ROOT_CLASSNAME], children: [jsxRuntime.jsx(ServerStyleTag, { factory: globalStyle }), scrollbarCss && jsxRuntime.jsx(ServerStyleTag, { factory: scrollbarCss }), jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, jsxRuntime.jsx(Renderar.RenderRenderar, {})] })] })) }) }));
+    return (jsxRuntime.jsx(index$2.DocumentProvider, { document: _document, children: jsxRuntime.jsx(context.AppRootProvider, { element: rootRef.current, children: jsxRuntime.jsxs(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), classNames: [APP_ROOT_CLASSNAME], children: [jsxRuntime.jsx(ServerStyleTag, { factory: globalStyle }), scrollbarCss && jsxRuntime.jsx(ServerStyleTag, { factory: scrollbarCss }), jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, jsxRuntime.jsx(Renderar.RenderRenderar, {})] })] })) }) }));
 });
 
 exports.APP_ROOT_CLASSNAME = APP_ROOT_CLASSNAME;

package/AppRoot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { css } from '../css';\r\nimport { RenderRenderar } from './Renderar';\r\nimport ServerStyleTag from '../Tag/ServerStyleTag';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './context';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n}\r\n\r\nexport const APP_ROOT_CLASSNAME = \"xui-app-root\"\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n\r\n   const scrollbarCss: any = useMemo(() => {\r\n      if (noScrollbarCss) return;\r\n      const cls = (cls: string) => `${themeRootClass(theme)} ${cls}`\r\n      let thumbSize = 6\r\n      let thumbColor = \"var(--color-text-secondary)\"\r\n      let trackColor = \"transparent\"\r\n\r\n      return css({\r\n         \"@global\": {\r\n            [cls('*::-webkit-scrollbar')]: {\r\n               width: thumbSize,\r\n               height: thumbSize,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n               backgroundColor: thumbColor,\r\n               borderRadius: \"6px\",\r\n               opacity: 0.6,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n               backgroundColor: thumbColor,\r\n               opacity: 0.0,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-track\")]: {\r\n               backgroundColor: trackColor,\r\n               borderRadius: \"6px\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   const globalStyle = useMemo(() => {\r\n      return css({\r\n         \"@global\": {\r\n            \"*\": {\r\n               m: 0,\r\n               p: 0,\r\n               outline: \"none\",\r\n               boxSizing: \"border-box\",\r\n               verticalAlign: \"baseline\",\r\n            },\r\n            \"html, body\": {\r\n               minHeight: \"100%\",\r\n               \"-webkit-font-smoothing\": \"antialiased\",\r\n               \"-moz-osx-font-smoothing\": \"grayscale\",\r\n            } as any,\r\n            \"img, picture, video, canvas, svg\": {\r\n               maxWidth: \"100%\",\r\n               display: \"block\"\r\n            },\r\n            \"input, button, textarea, select\": {\r\n               font: \"inherit\"\r\n            },\r\n            \"table\": {\r\n               borderCollapse: \"collapse\",\r\n               borderSpacing: 0,\r\n            },\r\n            \"ol, ul\": {\r\n               listStyle: \"none\",\r\n               padding: 0,\r\n               margin: 0,\r\n            },\r\n            \"a\": {\r\n               display: \"inline-block\",\r\n               color: \"inherit\",\r\n               textDecoration: \"none\",\r\n               cursor: \"pointer\",\r\n               \"&:hover\": {\r\n                  textDecoration: \"underline\"\r\n               }\r\n            },\r\n            \"p, h1, h2, h3, h4, h5, h6\": {\r\n               overflowWrap: \"break-word\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      })\r\n   }, [])\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\r\n   return (\r\n      <DocumentProvider document={_document}>\r\n         <AppRootProvider element={() => _document.querySelector(`.${APP_ROOT_CLASSNAME}`)!}>\r\n            <ThemeProvider\r\n               ref={ref}\r\n               theme={theme}\r\n               {...props}\r\n               sx={{\r\n                  ...props.sx,\r\n                  ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n               }}\r\n               classNames={[APP_ROOT_CLASSNAME]}\r\n            >\r\n               <ServerStyleTag factory={globalStyle} />\r\n               {\r\n                  scrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n               }\r\n               <BreakpointProvider>\r\n                  {children}\r\n                  <RenderRenderar />\r\n               </BreakpointProvider>\r\n            </ThemeProvider>\r\n         </AppRootProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgBO;AAEP;AAAsE;;;AAInE;AAEA;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;AACF;AACJ;AAEA;AACG;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;AACF;;;;;;;AAQD;AACA;AACG;AACH;;;AA6BN;;;"}
+{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo, useRef } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { css } from '../css';\r\nimport { RenderRenderar } from './Renderar';\r\nimport ServerStyleTag from '../Tag/ServerStyleTag';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './context';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n}\r\n\r\nexport const APP_ROOT_CLASSNAME = \"xui-app-root\"\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\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   const scrollbarCss: any = useMemo(() => {\r\n      if (noScrollbarCss) return;\r\n      const cls = (cls: string) => `${themeRootClass(theme)} ${cls}`\r\n      let thumbSize = 6\r\n      let thumbColor = \"var(--color-text-secondary)\"\r\n      let trackColor = \"transparent\"\r\n\r\n      return css({\r\n         \"@global\": {\r\n            [cls('*::-webkit-scrollbar')]: {\r\n               width: thumbSize,\r\n               height: thumbSize,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n               backgroundColor: thumbColor,\r\n               borderRadius: \"6px\",\r\n               opacity: 0.6,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n               backgroundColor: thumbColor,\r\n               opacity: 0.0,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-track\")]: {\r\n               backgroundColor: trackColor,\r\n               borderRadius: \"6px\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   const globalStyle = useMemo(() => {\r\n      return css({\r\n         \"@global\": {\r\n            \"*\": {\r\n               m: 0,\r\n               p: 0,\r\n               outline: \"none\",\r\n               boxSizing: \"border-box\",\r\n               verticalAlign: \"baseline\",\r\n            },\r\n            \"html, body\": {\r\n               minHeight: \"100%\",\r\n               \"-webkit-font-smoothing\": \"antialiased\",\r\n               \"-moz-osx-font-smoothing\": \"grayscale\",\r\n            } as any,\r\n            \"img, picture, video, canvas, svg\": {\r\n               maxWidth: \"100%\",\r\n               display: \"block\"\r\n            },\r\n            \"input, button, textarea, select\": {\r\n               font: \"inherit\"\r\n            },\r\n            \"table\": {\r\n               borderCollapse: \"collapse\",\r\n               borderSpacing: 0,\r\n            },\r\n            \"ol, ul\": {\r\n               listStyle: \"none\",\r\n               padding: 0,\r\n               margin: 0,\r\n            },\r\n            \"a\": {\r\n               display: \"inline-block\",\r\n               color: \"inherit\",\r\n               textDecoration: \"none\",\r\n               cursor: \"pointer\",\r\n               \"&:hover\": {\r\n                  textDecoration: \"underline\"\r\n               }\r\n            },\r\n            \"p, h1, h2, h3, h4, h5, h6\": {\r\n               overflowWrap: \"break-word\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      })\r\n   }, [])\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\r\n   return (\r\n      <DocumentProvider document={_document}>\r\n         <AppRootProvider element={rootRef.current}>\r\n            <ThemeProvider\r\n               ref={mergeRef}\r\n               theme={theme}\r\n               {...props}\r\n               sx={{\r\n                  ...props.sx,\r\n                  ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n               }}\r\n               classNames={[APP_ROOT_CLASSNAME]}\r\n            >\r\n               <ServerStyleTag factory={globalStyle} />\r\n               {\r\n                  scrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n               }\r\n               <BreakpointProvider>\r\n                  {children}\r\n                  <RenderRenderar />\r\n               </BreakpointProvider>\r\n            </ThemeProvider>\r\n         </AppRootProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiBO;AAEP;AAAsE;;;AAInE;AACA;;AAGA;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;AACF;AACJ;AAEA;AACG;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;AACF;;;;;;;AAQD;AACA;AACG;AACH;;AAIH;AAyBH;;;"}

package/AppRoot/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo, useEffect } from 'react';
+import React__default, { useRef, useMemo, useEffect } from 'react';
 import { themeRootClass } from '../theme/index.mjs';
 import { BreakpointProvider } from '../breakpoint/BreakpointProvider.mjs';
 import { css } from '../css/index.mjs';
@@ -9,6 +9,7 @@ import { RenderRenderar } from './Renderar.mjs';
 import ServerStyleTag from '../Tag/ServerStyleTag.mjs';
 import { DocumentProvider } from '../Document/index.mjs';
 import { AppRootProvider } from './context.mjs';
+import useMergeRefs from '../hooks/useMergeRefs.mjs';
 import ThemeProvider from '../theme/ThemeProvider.mjs';
 
 const APP_ROOT_CLASSNAME = "xui-app-root";
@@ -17,6 +18,8 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
     noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
     _document !== null && _document !== void 0 ? _document : (_document = document);
     const [visibility, setVisibility] = React__default.useState("hidden");
+    const rootRef = useRef(null);
+    const mergeRef = useMergeRefs(rootRef, ref);
     const scrollbarCss = useMemo(() => {
         if (noScrollbarCss)
             return;
@@ -108,7 +111,7 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
             _document.head.appendChild(style);
         });
     }, []);
-    return (jsx(DocumentProvider, { document: _document, children: jsx(AppRootProvider, { element: () => _document.querySelector(`.${APP_ROOT_CLASSNAME}`), children: jsxs(ThemeProvider, Object.assign({ ref: ref, theme: theme }, props, { sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), classNames: [APP_ROOT_CLASSNAME], children: [jsx(ServerStyleTag, { factory: globalStyle }), scrollbarCss && jsx(ServerStyleTag, { factory: scrollbarCss }), jsxs(BreakpointProvider, { children: [children, jsx(RenderRenderar, {})] })] })) }) }));
+    return (jsx(DocumentProvider, { document: _document, children: jsx(AppRootProvider, { element: rootRef.current, children: jsxs(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), classNames: [APP_ROOT_CLASSNAME], children: [jsx(ServerStyleTag, { factory: globalStyle }), scrollbarCss && jsx(ServerStyleTag, { factory: scrollbarCss }), jsxs(BreakpointProvider, { children: [children, jsx(RenderRenderar, {})] })] })) }) }));
 });
 
 export { APP_ROOT_CLASSNAME, AppRoot as default };

package/AppRoot/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { css } from '../css';\r\nimport { RenderRenderar } from './Renderar';\r\nimport ServerStyleTag from '../Tag/ServerStyleTag';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './context';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n}\r\n\r\nexport const APP_ROOT_CLASSNAME = \"xui-app-root\"\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n\r\n   const scrollbarCss: any = useMemo(() => {\r\n      if (noScrollbarCss) return;\r\n      const cls = (cls: string) => `${themeRootClass(theme)} ${cls}`\r\n      let thumbSize = 6\r\n      let thumbColor = \"var(--color-text-secondary)\"\r\n      let trackColor = \"transparent\"\r\n\r\n      return css({\r\n         \"@global\": {\r\n            [cls('*::-webkit-scrollbar')]: {\r\n               width: thumbSize,\r\n               height: thumbSize,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n               backgroundColor: thumbColor,\r\n               borderRadius: \"6px\",\r\n               opacity: 0.6,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n               backgroundColor: thumbColor,\r\n               opacity: 0.0,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-track\")]: {\r\n               backgroundColor: trackColor,\r\n               borderRadius: \"6px\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   const globalStyle = useMemo(() => {\r\n      return css({\r\n         \"@global\": {\r\n            \"*\": {\r\n               m: 0,\r\n               p: 0,\r\n               outline: \"none\",\r\n               boxSizing: \"border-box\",\r\n               verticalAlign: \"baseline\",\r\n            },\r\n            \"html, body\": {\r\n               minHeight: \"100%\",\r\n               \"-webkit-font-smoothing\": \"antialiased\",\r\n               \"-moz-osx-font-smoothing\": \"grayscale\",\r\n            } as any,\r\n            \"img, picture, video, canvas, svg\": {\r\n               maxWidth: \"100%\",\r\n               display: \"block\"\r\n            },\r\n            \"input, button, textarea, select\": {\r\n               font: \"inherit\"\r\n            },\r\n            \"table\": {\r\n               borderCollapse: \"collapse\",\r\n               borderSpacing: 0,\r\n            },\r\n            \"ol, ul\": {\r\n               listStyle: \"none\",\r\n               padding: 0,\r\n               margin: 0,\r\n            },\r\n            \"a\": {\r\n               display: \"inline-block\",\r\n               color: \"inherit\",\r\n               textDecoration: \"none\",\r\n               cursor: \"pointer\",\r\n               \"&:hover\": {\r\n                  textDecoration: \"underline\"\r\n               }\r\n            },\r\n            \"p, h1, h2, h3, h4, h5, h6\": {\r\n               overflowWrap: \"break-word\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      })\r\n   }, [])\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\r\n   return (\r\n      <DocumentProvider document={_document}>\r\n         <AppRootProvider element={() => _document.querySelector(`.${APP_ROOT_CLASSNAME}`)!}>\r\n            <ThemeProvider\r\n               ref={ref}\r\n               theme={theme}\r\n               {...props}\r\n               sx={{\r\n                  ...props.sx,\r\n                  ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n               }}\r\n               classNames={[APP_ROOT_CLASSNAME]}\r\n            >\r\n               <ServerStyleTag factory={globalStyle} />\r\n               {\r\n                  scrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n               }\r\n               <BreakpointProvider>\r\n                  {children}\r\n                  <RenderRenderar />\r\n               </BreakpointProvider>\r\n            </ThemeProvider>\r\n         </AppRootProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBO;AAEP;AAAsE;;;AAInE;AAEA;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;AACF;AACJ;AAEA;AACG;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;AACF;;;;;;;AAQD;AACA;AACG;AACH;;;AA6BN;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo, useRef } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { css } from '../css';\r\nimport { RenderRenderar } from './Renderar';\r\nimport ServerStyleTag from '../Tag/ServerStyleTag';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './context';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n}\r\n\r\nexport const APP_ROOT_CLASSNAME = \"xui-app-root\"\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\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   const scrollbarCss: any = useMemo(() => {\r\n      if (noScrollbarCss) return;\r\n      const cls = (cls: string) => `${themeRootClass(theme)} ${cls}`\r\n      let thumbSize = 6\r\n      let thumbColor = \"var(--color-text-secondary)\"\r\n      let trackColor = \"transparent\"\r\n\r\n      return css({\r\n         \"@global\": {\r\n            [cls('*::-webkit-scrollbar')]: {\r\n               width: thumbSize,\r\n               height: thumbSize,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n               backgroundColor: thumbColor,\r\n               borderRadius: \"6px\",\r\n               opacity: 0.6,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n               backgroundColor: thumbColor,\r\n               opacity: 0.0,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-track\")]: {\r\n               backgroundColor: trackColor,\r\n               borderRadius: \"6px\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   const globalStyle = useMemo(() => {\r\n      return css({\r\n         \"@global\": {\r\n            \"*\": {\r\n               m: 0,\r\n               p: 0,\r\n               outline: \"none\",\r\n               boxSizing: \"border-box\",\r\n               verticalAlign: \"baseline\",\r\n            },\r\n            \"html, body\": {\r\n               minHeight: \"100%\",\r\n               \"-webkit-font-smoothing\": \"antialiased\",\r\n               \"-moz-osx-font-smoothing\": \"grayscale\",\r\n            } as any,\r\n            \"img, picture, video, canvas, svg\": {\r\n               maxWidth: \"100%\",\r\n               display: \"block\"\r\n            },\r\n            \"input, button, textarea, select\": {\r\n               font: \"inherit\"\r\n            },\r\n            \"table\": {\r\n               borderCollapse: \"collapse\",\r\n               borderSpacing: 0,\r\n            },\r\n            \"ol, ul\": {\r\n               listStyle: \"none\",\r\n               padding: 0,\r\n               margin: 0,\r\n            },\r\n            \"a\": {\r\n               display: \"inline-block\",\r\n               color: \"inherit\",\r\n               textDecoration: \"none\",\r\n               cursor: \"pointer\",\r\n               \"&:hover\": {\r\n                  textDecoration: \"underline\"\r\n               }\r\n            },\r\n            \"p, h1, h2, h3, h4, h5, h6\": {\r\n               overflowWrap: \"break-word\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: _document,\r\n      })\r\n   }, [])\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\r\n   return (\r\n      <DocumentProvider document={_document}>\r\n         <AppRootProvider element={rootRef.current}>\r\n            <ThemeProvider\r\n               ref={mergeRef}\r\n               theme={theme}\r\n               {...props}\r\n               sx={{\r\n                  ...props.sx,\r\n                  ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n               }}\r\n               classNames={[APP_ROOT_CLASSNAME]}\r\n            >\r\n               <ServerStyleTag factory={globalStyle} />\r\n               {\r\n                  scrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n               }\r\n               <BreakpointProvider>\r\n                  {children}\r\n                  <RenderRenderar />\r\n               </BreakpointProvider>\r\n            </ThemeProvider>\r\n         </AppRootProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiBO;AAEP;AAAsE;;;AAInE;AACA;;AAGA;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;AACF;AACJ;AAEA;AACG;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;AACF;;;;;;;AAQD;AACA;AACG;AACH;;AAIH;AAyBH;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.2.41",
+  "version": "1.2.42",
   "description": "Xanui Core Library",
   "private": false,
   "main": "./index.js",