@xanui/ui 1.1.2 → 1.1.4

package/ClickOutside/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: () => void\n}\n\nconst ClickOutside = React.forwardRef(({ children, onClickOutside, ...props }: ClickOutsideProps, ref: React.Ref<any>) => {\n    const _ref: any = ref || useRef(null)\n    const handler = (e: any) => {\n        if (!_ref.current.contains(e.target)) {\n            onClickOutside()\n        }\n    }\n    useEffect(() => {\n        document.addEventListener(\"click\", handler)\n        return () => {\n            document.removeEventListener(\"click\", handler)\n        }\n    }, [])\n\n\n    return <Tag\n        {...props}\n        ref={_ref}\n    >\n        {children}\n    </Tag>\n\n})\n\nexport default ClickOutside"],"names":["_jsx"],"mappings":"wIAQA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAyD,EAAE,GAAmB,KAAI;QAAlF,EAAE,QAAQ,EAAE,cAAc,EAAA,GAAA,EAA+B,EAA1B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApC,8BAAsC,CAAF;IACvE,MAAM,IAAI,GAAQ,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC;AACrC,IAAA,MAAM,OAAO,GAAG,CAAC,CAAM,KAAI;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;AAClC,YAAA,cAAc,EAAE;QACpB;AACJ,IAAA,CAAC;IACD,SAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAClD,QAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAGN,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,KAAK,EAAA,EACT,GAAG,EAAE,IAAI,EAAA,QAAA,EAER,QAAQ,EAAA,CAAA,CACP;AAEV,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["import { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: () => void;\n};\n\nconst ClickOutside = React.forwardRef(({ children, onClickOutside, ...props }: ClickOutsideProps, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside();\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag {...props} ref={setRefs}>\n            {children}\n        </Tag>\n    );\n}\n);\n\nexport default ClickOutside;\n"],"names":["_jsx"],"mappings":"wIAOA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAyD,EAAE,YAAiB,KAAI;QAAhF,EAAE,QAAQ,EAAE,cAAc,EAAA,GAAA,EAA+B,EAA1B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApC,8BAAsC,CAAF;AAEvE,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC;;AAGjD,IAAA,MAAM,OAAO,GAAG,CAAC,EAAe,KAAI;AAChC,QAAA,QAAQ,CAAC,OAAO,GAAG,EAAE;AAErB,QAAA,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;YACpC,YAAY,CAAC,EAAE,CAAC;QACpB;aAAO,IAAI,YAAY,EAAE;AACrB,YAAA,YAAY,CAAC,OAAO,GAAG,EAAE;QAC7B;AACJ,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;AAC9C,gBAAA,cAAc,EAAE;YACpB;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,OAAO,EAAA,QAAA,EACvB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/Drawer/index.d.ts

@@ -1,25 +1,25 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, ReactElement } from 'react';
-import { TagProps, useBreakpointPropsType } from '@xanui/core';
+import { useBreakpointPropsType, TagProps } from '@xanui/core';
 import { LayerProps } from '../Layer/index.js';
 
-type DrawerChildrenType = ReactNode | ReactElement | string;
-type DrawerProps = Omit<TagProps, "children" | "size"> & {
-    children?: DrawerChildrenType;
+type DrawerProps = Omit<LayerProps, "transition" | "slotProps"> & {
     placement?: useBreakpointPropsType<"left" | "right" | "bottom" | "top">;
-    open?: boolean;
     size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
     onClickOutside?: () => void;
     slotProps?: {
+        layer?: LayerProps['slotProps'];
         root?: TagProps<"div">;
-        layer?: Omit<LayerProps, 'id' | 'children' | 'open' | 'transition'>;
+        content?: TagProps<"div">;
     };
 };
 declare const Drawer: {
-    ({ children, open, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element;
-    open(content: DrawerChildrenType, props?: Omit<DrawerProps, "children" | "open">): void;
+    ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps): react_jsx_runtime.JSX.Element;
+    open(children: DrawerProps["children"], props?: Omit<DrawerProps, "children" | "open">): {
+        open: () => void;
+        close: () => void;
+    };
     close(): void;
 };
 
 export { Drawer as default };
-export type { DrawerChildrenType, DrawerProps };
+export type { DrawerProps };

package/Drawer/index.js

@@ -1,6 +1,18 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),index=require('../Layer/index.js'),index$1=require('../ClickOutside/index.js');const MainView = (_a) => {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),index=require('../Layer/index.js'),index$1=require('../ClickOutside/index.js');const getVariant = (placement) => {
+    switch (placement) {
+        case "right":
+            return "fadeLeft";
+        case "top":
+            return "fadeDown";
+        case "bottom":
+            return "fadeUp";
+        default:
+            return "fadeRight";
+    }
+};
+const Drawer = (_a) => {
     var _b;
-    var { children, placement, open, size, slotProps, onClickOutside } = _a, rest = tslib.__rest(_a, ["children", "placement", "open", "size", "slotProps", "onClickOutside"]);
+    var { children, placement, size, slotProps, onClickOutside } = _a, layerProps = tslib.__rest(_a, ["children", "placement", "size", "slotProps", "onClickOutside"]);
     const _p = {};
     if (placement)
         _p.placement = placement;
@@ -16,42 +28,41 @@
         large: 400
     };
     let _size = sizes[size] || size;
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            direction: isSide ? "row" : "column",
-            justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"
-        }, children: jsxRuntime.jsx(index$1.default, { onClickOutside: onClickOutside || (() => { }), children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: {
-                    width: isSide ? _size : "100%",
-                    height: isSide ? "100%" : _size,
-                    bgcolor: "background.primary",
-                    shadow: 10
-                }, baseClass: 'drawer-content', children: children })) }) })));
+    return (jsxRuntime.jsx(index.default, Object.assign({}, layerProps, { transition: getVariant(placement), children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                direction: isSide ? "row" : "column",
+                justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"
+            }, children: jsxRuntime.jsx(index$1.default, { onClickOutside: onClickOutside || (() => { }), children: jsxRuntime.jsx(core.Tag, { sxr: {
+                        width: isSide ? _size : "100%",
+                        height: isSide ? "100%" : _size,
+                        bgcolor: "background.primary",
+                        shadow: 10
+                    }, baseClass: 'drawer-content', children: children }) }) })) })));
 };
-let drawerId = "_" + Math.random().toString(32).substring(2);
-const getVariant = (placement) => {
-    switch (placement) {
-        case "right":
-            return "fadeLeft";
-        case "top":
-            return "fadeDown";
-        case "bottom":
-            return "fadeUp";
-        default:
-            return "fadeRight";
-    }
-};
-const Drawer = (_a) => {
-    var _b;
-    var { children, open } = _a, rest = tslib.__rest(_a, ["children", "open"]);
-    return (jsxRuntime.jsx(index.default, Object.assign({}, (_b = rest === null || rest === void 0 ? void 0 : rest.slotProps) === null || _b === void 0 ? void 0 : _b.layer, { open: open !== null && open !== void 0 ? open : true, transition: getVariant(rest.placement), children: jsxRuntime.jsx(MainView, Object.assign({}, rest, { open: true, children: children })) })));
-};
-Drawer.open = (content, props) => {
-    let { placement, slotProps } = props || {};
-    placement !== null && placement !== void 0 ? placement : (placement = 'left');
-    index.default.open(drawerId, jsxRuntime.jsx(MainView, Object.assign({ onClickOutside: () => index.default.close(drawerId) }, props, { open: true, children: content })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { transition: getVariant(placement) }));
+Drawer.open = (children, props) => {
+    const d = core.Renderar.render(Drawer, Object.assign(Object.assign({ open: true }, props), { children, slotProps: {
+            layer: {
+                onClosed: () => {
+                    d.unrender();
+                    alert("closed");
+                }
+            }
+        }, onClickOutside: () => {
+            if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
+                props.onClickOutside();
+            }
+        } }));
+    return {
+        open: () => {
+            d.updateProps({ open: true });
+        },
+        close: () => {
+            d.updateProps({ open: false });
+        },
+    };
 };
 Drawer.close = () => {
-    index.default.close(drawerId);
+    core.Renderar.unrender(Drawer);
 };exports.default=Drawer;//# sourceMappingURL=index.js.map

package/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { ReactElement, ReactNode } from 'react';\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside from '../ClickOutside';\n\n\nexport type DrawerChildrenType = ReactNode | ReactElement | string\n\nexport type DrawerProps = Omit<TagProps, \"children\" | \"size\"> & {\n    children?: DrawerChildrenType;\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    open?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        root?: TagProps<\"div\">;\n        layer?: Omit<LayerProps, 'id' | 'children' | 'open' | 'transition'>;\n    }\n}\n\nconst MainView = ({ children, placement, open, size, slotProps, onClickOutside, ...rest }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Tag\n            {...slotProps?.root}\n            baseClass='drawer'\n            sxr={{\n                width: \"100%\",\n                height: \"100%\",\n                display: \"flex\",\n                direction: isSide ? \"row\" : \"column\" as any,\n                justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n            }}\n        >\n            <ClickOutside onClickOutside={onClickOutside || (() => { })}>\n                <Tag\n                    {...rest}\n                    sxr={{\n                        width: isSide ? _size : \"100%\",\n                        height: isSide ? \"100%\" : _size,\n                        bgcolor: \"background.primary\",\n                        shadow: 10\n                    }}\n                    baseClass='drawer-content'\n                >\n                    {children}\n                </Tag>\n            </ClickOutside>\n        </Tag>\n    )\n}\n\nlet drawerId = \"_\" + Math.random().toString(32).substring(2)\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, open, ...rest }: DrawerProps) => {\n    return (\n        <Layer\n            {...rest?.slotProps?.layer}\n            open={open ?? true}\n            transition={getVariant(rest.placement)}\n        >\n            <MainView {...rest} open={true}>{children}</MainView>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (content: DrawerChildrenType, props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    let { placement, slotProps } = props || {}\n    placement ??= 'left'\n    Layer.open(drawerId, <MainView\n        onClickOutside={() => Layer.close(drawerId)}\n        {...props}\n        open={true}\n    >{content}</MainView>, {\n        ...slotProps?.layer,\n        transition: getVariant(placement)\n    })\n}\n\nDrawer.close = () => {\n    Layer.close(drawerId)\n}\n\nexport default Drawer"],"names":["__rest","useBreakpointProps","_jsx","Tag","ClickOutside","Layer"],"mappings":"oPAqBA,MAAM,QAAQ,GAAG,CAAC,EAAoF,KAAI;;AAAxF,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAA,GAAA,EAAwB,EAAnB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAArE,wEAAuE,CAAF;IACnF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;AACjC,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,QAAQ;IAEzB,IAAI,MAAM,GAAG,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,OAAO;AAC1D,IAAA,IAAI,KAAK,GAAQ;AACb,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,KAAK,EAAE;KACV;IAED,IAAI,KAAK,GAAG,KAAK,CAAC,IAAW,CAAC,IAAI,IAAI;AAEtC,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EACnB,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,QAAe;AAC3C,YAAA,cAAc,EAAE,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,KAAK,GAAG,YAAY,GAAG;SAChF,EAAA,QAAA,EAEDD,cAAA,CAACE,eAAY,EAAA,EAAC,cAAc,EAAE,cAAc,KAAK,QAAQ,CAAC,CAAC,YACvDF,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;oBACD,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM;oBAC9B,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK;AAC/B,oBAAA,OAAO,EAAE,oBAAoB;AAC7B,oBAAA,MAAM,EAAE;iBACX,EACD,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAEzB,QAAQ,EAAA,CAAA,CACP,EAAA,CACK,EAAA,CAAA,CACb;AAEd,CAAC;AAED,IAAI,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AAE5D,MAAM,UAAU,GAAG,CAAC,SAAe,KAAI;IACnC,QAAQ,SAAS;AACb,QAAA,KAAK,OAAO;AACR,YAAA,OAAO,UAAU;AACrB,QAAA,KAAK,KAAK;AACN,YAAA,OAAO,UAAU;AACrB,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,QAAQ;AACnB,QAAA;AACI,YAAA,OAAO,WAAW;;AAE9B,CAAC;AAED,MAAM,MAAM,GAAG,CAAC,EAAwC,KAAI;;QAA5C,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAAwB,EAAnB,IAAI,GAAAH,YAAA,CAAA,EAAA,EAAzB,oBAA2B,CAAF;IACrC,QACIE,eAACG,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACE,MAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAA,EAC1B,IAAI,EAAE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,GAAI,IAAI,EAClB,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,EAAA,QAAA,EAEtCH,cAAA,CAAC,QAAQ,oBAAK,IAAI,EAAA,EAAE,IAAI,EAAE,IAAI,YAAG,QAAQ,EAAA,CAAA,CAAY,EAAA,CAAA,CACjD;AAEhB;AAGA,MAAM,CAAC,IAAI,GAAG,CAAC,OAA2B,EAAE,KAA8C,KAAI;IAC1F,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,IAAI,EAAE;IAC1C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,MAAM,CAAA;IACpBG,aAAK,CAAC,IAAI,CAAC,QAAQ,EAAEH,cAAA,CAAC,QAAQ,kBAC1B,cAAc,EAAE,MAAMG,aAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,IACvC,KAAK,EAAA,EACT,IAAI,EAAE,IAAI,YACZ,OAAO,EAAA,CAAA,CAAY,kCACd,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,CAAA,EAAA,EACnB,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,IACnC;AACN,CAAC;AAED,MAAM,CAAC,KAAK,GAAG,MAAK;AAChB,IAAAA,aAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;AACzB,CAAC"}
+{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: LayerProps['slotProps']\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100%\",\n                    height: \"100%\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside onClickOutside={onClickOutside || (() => { })}>\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 10\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        slotProps: {\n            layer: {\n                onClosed: () => {\n                    d.unrender()\n                    alert(\"closed\")\n                }\n            }\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":["__rest","useBreakpointProps","_jsx","Layer","Tag","ClickOutside","Renderar"],"mappings":"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"}

package/Drawer/index.mjs

@@ -1,6 +1,18 @@
-import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useBreakpointProps,Tag}from'@xanui/core';import Layer from'../Layer/index.mjs';import ClickOutside from'../ClickOutside/index.mjs';const MainView = (_a) => {
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useBreakpointProps,Tag,Renderar}from'@xanui/core';import Layer from'../Layer/index.mjs';import ClickOutside from'../ClickOutside/index.mjs';const getVariant = (placement) => {
+    switch (placement) {
+        case "right":
+            return "fadeLeft";
+        case "top":
+            return "fadeDown";
+        case "bottom":
+            return "fadeUp";
+        default:
+            return "fadeRight";
+    }
+};
+const Drawer = (_a) => {
     var _b;
-    var { children, placement, open, size, slotProps, onClickOutside } = _a, rest = __rest(_a, ["children", "placement", "open", "size", "slotProps", "onClickOutside"]);
+    var { children, placement, size, slotProps, onClickOutside } = _a, layerProps = __rest(_a, ["children", "placement", "size", "slotProps", "onClickOutside"]);
     const _p = {};
     if (placement)
         _p.placement = placement;
@@ -16,42 +28,41 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useBreakp
         large: 400
     };
     let _size = sizes[size] || size;
-    return (jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            direction: isSide ? "row" : "column",
-            justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"
-        }, children: jsx(ClickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsx(Tag, Object.assign({}, rest, { sxr: {
-                    width: isSide ? _size : "100%",
-                    height: isSide ? "100%" : _size,
-                    bgcolor: "background.primary",
-                    shadow: 10
-                }, baseClass: 'drawer-content', children: children })) }) })));
+    return (jsx(Layer, Object.assign({}, layerProps, { transition: getVariant(placement), children: jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                direction: isSide ? "row" : "column",
+                justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"
+            }, children: jsx(ClickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsx(Tag, { sxr: {
+                        width: isSide ? _size : "100%",
+                        height: isSide ? "100%" : _size,
+                        bgcolor: "background.primary",
+                        shadow: 10
+                    }, baseClass: 'drawer-content', children: children }) }) })) })));
 };
-let drawerId = "_" + Math.random().toString(32).substring(2);
-const getVariant = (placement) => {
-    switch (placement) {
-        case "right":
-            return "fadeLeft";
-        case "top":
-            return "fadeDown";
-        case "bottom":
-            return "fadeUp";
-        default:
-            return "fadeRight";
-    }
-};
-const Drawer = (_a) => {
-    var _b;
-    var { children, open } = _a, rest = __rest(_a, ["children", "open"]);
-    return (jsx(Layer, Object.assign({}, (_b = rest === null || rest === void 0 ? void 0 : rest.slotProps) === null || _b === void 0 ? void 0 : _b.layer, { open: open !== null && open !== void 0 ? open : true, transition: getVariant(rest.placement), children: jsx(MainView, Object.assign({}, rest, { open: true, children: children })) })));
-};
-Drawer.open = (content, props) => {
-    let { placement, slotProps } = props || {};
-    placement !== null && placement !== void 0 ? placement : (placement = 'left');
-    Layer.open(drawerId, jsx(MainView, Object.assign({ onClickOutside: () => Layer.close(drawerId) }, props, { open: true, children: content })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { transition: getVariant(placement) }));
+Drawer.open = (children, props) => {
+    const d = Renderar.render(Drawer, Object.assign(Object.assign({ open: true }, props), { children, slotProps: {
+            layer: {
+                onClosed: () => {
+                    d.unrender();
+                    alert("closed");
+                }
+            }
+        }, onClickOutside: () => {
+            if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
+                props.onClickOutside();
+            }
+        } }));
+    return {
+        open: () => {
+            d.updateProps({ open: true });
+        },
+        close: () => {
+            d.updateProps({ open: false });
+        },
+    };
 };
 Drawer.close = () => {
-    Layer.close(drawerId);
+    Renderar.unrender(Drawer);
 };export{Drawer as default};//# sourceMappingURL=index.mjs.map

package/Drawer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { ReactElement, ReactNode } from 'react';\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside from '../ClickOutside';\n\n\nexport type DrawerChildrenType = ReactNode | ReactElement | string\n\nexport type DrawerProps = Omit<TagProps, \"children\" | \"size\"> & {\n    children?: DrawerChildrenType;\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    open?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        root?: TagProps<\"div\">;\n        layer?: Omit<LayerProps, 'id' | 'children' | 'open' | 'transition'>;\n    }\n}\n\nconst MainView = ({ children, placement, open, size, slotProps, onClickOutside, ...rest }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Tag\n            {...slotProps?.root}\n            baseClass='drawer'\n            sxr={{\n                width: \"100%\",\n                height: \"100%\",\n                display: \"flex\",\n                direction: isSide ? \"row\" : \"column\" as any,\n                justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n            }}\n        >\n            <ClickOutside onClickOutside={onClickOutside || (() => { })}>\n                <Tag\n                    {...rest}\n                    sxr={{\n                        width: isSide ? _size : \"100%\",\n                        height: isSide ? \"100%\" : _size,\n                        bgcolor: \"background.primary\",\n                        shadow: 10\n                    }}\n                    baseClass='drawer-content'\n                >\n                    {children}\n                </Tag>\n            </ClickOutside>\n        </Tag>\n    )\n}\n\nlet drawerId = \"_\" + Math.random().toString(32).substring(2)\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, open, ...rest }: DrawerProps) => {\n    return (\n        <Layer\n            {...rest?.slotProps?.layer}\n            open={open ?? true}\n            transition={getVariant(rest.placement)}\n        >\n            <MainView {...rest} open={true}>{children}</MainView>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (content: DrawerChildrenType, props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    let { placement, slotProps } = props || {}\n    placement ??= 'left'\n    Layer.open(drawerId, <MainView\n        onClickOutside={() => Layer.close(drawerId)}\n        {...props}\n        open={true}\n    >{content}</MainView>, {\n        ...slotProps?.layer,\n        transition: getVariant(placement)\n    })\n}\n\nDrawer.close = () => {\n    Layer.close(drawerId)\n}\n\nexport default Drawer"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: LayerProps['slotProps']\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100%\",\n                    height: \"100%\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside onClickOutside={onClickOutside || (() => { })}>\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 10\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        slotProps: {\n            layer: {\n                onClosed: () => {\n                    d.unrender()\n                    alert(\"closed\")\n                }\n            }\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":["_jsx"],"mappings":"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"}

package/Layer/index.d.ts

@@ -1,12 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { TransitionProps, useBreakpointPropsType, TagProps } from '@xanui/core';
-import { PortalProps } from '../Portal/index.js';
 
 type LayerProps = {
     open: boolean;
     children: ReactNode;
-    id?: string;
     transition?: TransitionProps['variant'];
     zIndex?: number;
     blur?: useBreakpointPropsType<number>;
@@ -19,16 +17,17 @@ type LayerProps = {
     slotProps?: {
         root?: Omit<TagProps<"div">, "children">;
         transition?: Omit<TransitionProps, "open" | "variant" | "onClose" | "onClosed" | "onOpen" | "onOpened">;
-        portal?: Omit<PortalProps, "children">;
         content?: Omit<TagProps<"div">, "children">;
     };
 };
 declare const Layer: {
-    ({ children, open, id, ...props }: LayerProps): react_jsx_runtime.JSX.Element;
-    open(id: string, content: ReactNode, props?: LayerHandlerProps): void;
-    close(id: string): void;
+    ({ children, open, ...props }: LayerProps): react_jsx_runtime.JSX.Element;
+    open(children: LayerProps["children"], props?: Partial<Omit<LayerProps, "children">>): {
+        open: () => void;
+        close: () => void;
+    };
+    close(): void;
 };
-type LayerHandlerProps = Omit<LayerProps, "open" | "children">;
 
 export { Layer as default };
-export type { LayerHandlerProps, LayerProps };
+export type { LayerProps };

package/Layer/index.js

@@ -1,17 +1,6 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../Portal/index.js'),RenderRoot=require('../ThemeProvider/RenderRoot.js');let _d;
-const useBlurCss = (blur, mode) => {
-    return React.useMemo(() => {
-        let transparent = { bgcolor: core.alpha("#000000", blur / 100) };
-        if (typeof window === 'undefined' || mode === 'transparent') {
-            return transparent;
-        }
-        const d = _d || (_d = window.document.createElement("div").style);
-        return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
-    }, [blur]);
-};
-const Layer = (_a) => {
-    var _b, _c, _e;
-    var { children, open, id } = _a, props = tslib.__rest(_a, ["children", "open", "id"]);
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../useBlurCss/index.js'),index$1=require('../ClickOutside/index.js');const Layer = (_a) => {
+    var _b, _c, _d;
+    var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
     let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = core.useInterface("Layer", props, {});
     const _p = {};
     if (blur)
@@ -23,7 +12,7 @@ const Layer = (_a) => {
     blurMode = p.blurMode;
     const [closed, setClosed] = React.useState(!open);
     placement = placement || "bottom-left";
-    const blurCss = blur ? useBlurCss(blur, blurMode) : {};
+    const blurCss = blur ? index.default(blur, blurMode) : {};
     React.useEffect(() => {
         if (closed && open) {
             setClosed(false);
@@ -33,41 +22,27 @@ const Layer = (_a) => {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
     let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
-    return (jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { id: id, sxr: Object.assign(Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _e === void 0 ? void 0 : _e.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), onClick: (e) => {
-                    var _a;
-                    if (!((_a = e.currentTarget.firstChild) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                        if (onClickOutside) {
-                            onClickOutside();
-                        }
-                    }
-                }, children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
+    return (jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), children: jsxRuntime.jsx(index$1.default, { onClickOutside: onClickOutside || (() => { }), children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
                         setClosed(true);
                         onClosed && onClosed();
-                    }, children: children })) })) }) })));
-};
-const layers = new Map();
-const LayerHandler = () => {
-    return Array.from(layers.values()).map((l, key) => {
-        return (jsxRuntime.jsx(Layer, Object.assign({ open: l.open, id: l.id }, l.props, { zIndex: layers.size, onClosed: () => {
-                var _a, _b;
-                setTimeout(() => {
-                    layers.delete(l.id);
-                }, 100);
-                ((_a = l === null || l === void 0 ? void 0 : l.props) === null || _a === void 0 ? void 0 : _a.onClosed) && ((_b = l === null || l === void 0 ? void 0 : l.props) === null || _b === void 0 ? void 0 : _b.onClosed());
-            }, children: l.content }), "layer-" + key));
-    });
+                    }, children: children })) }) })) }));
 };
-RenderRoot.default.create("LAYERS_RENDER", LayerHandler);
-Layer.open = (id, content, props) => {
-    if (layers.has(id))
-        return;
-    layers.set(id, { id, props, content, open: true });
-    RenderRoot.default.dispatch();
+Layer.open = (children, props) => {
+    const l = core.Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+            core.Renderar.unrender(Layer);
+            if (props === null || props === void 0 ? void 0 : props.onClosed) {
+                props.onClosed();
+            }
+        } }));
+    return {
+        open: () => {
+            l.updateProps({ open: true });
+        },
+        close: () => {
+            l.updateProps({ open: false });
+        },
+    };
 };
-Layer.close = (id) => {
-    const get = layers.get(id);
-    if (get) {
-        layers.set(id, Object.assign(Object.assign({}, get), { open: false }));
-        RenderRoot.default.dispatch();
-    }
-};exports.LayerHandler=LayerHandler;exports.default=Layer;//# sourceMappingURL=index.js.map
+Layer.close = () => {
+    core.Renderar.unrender(Layer);
+};exports.default=Layer;//# sourceMappingURL=index.js.map

package/Layer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport Portal, { PortalProps } from \"../Portal\";\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\nimport Renderar from '../ThemeProvider/RenderRoot';\n\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode: LayerProps[\"blurMode\"]) => {\n    return useMemo(() => {\n        let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n        if (typeof window === 'undefined' || mode === 'transparent') {\n            return transparent\n        }\n        const d = _d || (_d = window.document.createElement(\"div\").style)\n        return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n    }, [blur])\n}\n\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    id?: string;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, id, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <Transition\n                duration={duration}\n                delay={delay}\n                easing=\"easeOut\"\n                variant={\"fade\"}\n                open={open}\n            >\n                <Tag\n                    baseClass=\"layer\"\n                    {...slotProps?.root}\n                    id={id}\n                    sxr={{\n                        ...slotProps?.root?.sx,\n                        position: \"fixed\",\n                        zIndex: 1500 + (zIndex || 0),\n                        top: 0,\n                        left: 0,\n                        bottom: 0,\n                        right: 0,\n                        ...blurCss\n                    }}\n                    onClick={(e: any) => {\n                        if (!e.currentTarget.firstChild?.contains(e.target)) {\n                            if (onClickOutside) {\n                                onClickOutside()\n                            }\n                        }\n                    }}\n                >\n                    <Transition\n                        duration={duration}\n                        delay={delay}\n                        easing=\"easeOut\"\n                        variant={transition || \"zoomOver\"}\n                        {...slotProps?.transition}\n                        open={open}\n                        onOpen={onOpen}\n                        onOpened={onOpened}\n                        onClose={onClose}\n                        onClosed={() => {\n                            setClosed(true)\n                            onClosed && onClosed()\n                        }}\n                    >\n                        {children}\n                    </Transition>\n                </Tag>\n            </Transition>\n        </Portal>\n    )\n}\n\nexport type LayerHandlerProps = Omit<LayerProps, \"open\" | \"children\">\nconst layers = new Map<string, { id: string, open: boolean; props?: LayerHandlerProps, content: ReactNode }>()\n\nexport const LayerHandler = () => {\n    return Array.from(layers.values()).map((l, key) => {\n        return (\n            <Layer\n                open={l.open}\n                key={\"layer-\" + key}\n                id={l.id}\n                {...l.props}\n                zIndex={layers.size}\n                onClosed={() => {\n                    setTimeout(() => {\n                        layers.delete(l.id)\n                    }, 100);\n                    l?.props?.onClosed && l?.props?.onClosed()\n                }}\n            >{l.content}</Layer>\n        )\n    })\n}\n\n\nRenderar.create(\"LAYERS_RENDER\", LayerHandler)\n\nLayer.open = (id: string, content: ReactNode, props?: LayerHandlerProps) => {\n    if (layers.has(id)) return\n    layers.set(id, { id, props, content, open: true })\n    Renderar.dispatch()\n}\n\nLayer.close = (id: string) => {\n    const get = layers.get(id)\n    if (get) {\n        layers.set(id, { ...get, open: false })\n        Renderar.dispatch()\n    }\n}\n\nexport default Layer"],"names":["useMemo","alpha","__rest","useInterface","useBreakpointProps","useState","useEffect","_jsx","Portal","Transition","Tag","Renderar"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside from '../ClickOutside';\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    return (\n        <Transition\n            duration={duration}\n            delay={delay}\n            easing=\"easeOut\"\n            variant={\"fade\"}\n            open={open}\n        >\n            <Tag\n                baseClass=\"layer\"\n                {...slotProps?.root}\n                sxr={{\n                    ...slotProps?.root?.sx,\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    top: 0,\n                    left: 0,\n                    bottom: 0,\n                    right: 0,\n                    ...blurCss\n                }}\n            >\n                <ClickOutside\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Transition\n                        duration={duration}\n                        delay={delay}\n                        easing=\"easeOut\"\n                        variant={transition || \"zoomOver\"}\n                        {...slotProps?.transition}\n                        open={open}\n                        onOpen={onOpen}\n                        onOpened={onOpened}\n                        onClose={onClose}\n                        onClosed={() => {\n                            setClosed(true)\n                            onClosed && onClosed()\n                        }}\n                    >\n                        {children}\n                    </Transition>\n                </ClickOutside>\n            </Tag>\n        </Transition>\n    )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const l = Renderar.render(Layer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            Renderar.unrender(Layer as any)\n            if (props?.onClosed) {\n                props.onClosed()\n            }\n        }\n    })\n    return {\n        open: () => {\n            l.updateProps({ open: true })\n        },\n        close: () => {\n            l.updateProps({ open: false })\n        },\n    }\n}\nLayer.close = () => {\n    Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":["__rest","useInterface","useBreakpointProps","useState","useBlurCss","useEffect","_jsx","Transition","Tag","ClickOutside","Renderar"],"mappings":"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"}

package/Layer/index.mjs

@@ -1,17 +1,6 @@
-import {__rest}from'tslib';import {jsx,Fragment}from'react/jsx-runtime';import {useState,useEffect,useMemo}from'react';import {useInterface,useBreakpointProps,Transition,Tag,alpha}from'@xanui/core';import Portal from'../Portal/index.mjs';import Renderar from'../ThemeProvider/RenderRoot.mjs';let _d;
-const useBlurCss = (blur, mode) => {
-    return useMemo(() => {
-        let transparent = { bgcolor: alpha("#000000", blur / 100) };
-        if (typeof window === 'undefined' || mode === 'transparent') {
-            return transparent;
-        }
-        const d = _d || (_d = window.document.createElement("div").style);
-        return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
-    }, [blur]);
-};
-const Layer = (_a) => {
-    var _b, _c, _e;
-    var { children, open, id } = _a, props = __rest(_a, ["children", "open", "id"]);
+import {__rest}from'tslib';import {jsx,Fragment}from'react/jsx-runtime';import {useState,useEffect}from'react';import {useInterface,useBreakpointProps,Transition,Tag,Renderar}from'@xanui/core';import useBlurCss from'../useBlurCss/index.mjs';import ClickOutside from'../ClickOutside/index.mjs';const Layer = (_a) => {
+    var _b, _c, _d;
+    var { children, open } = _a, props = __rest(_a, ["children", "open"]);
     let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = useInterface("Layer", props, {});
     const _p = {};
     if (blur)
@@ -33,41 +22,27 @@ const Layer = (_a) => {
         return jsx(Fragment, {});
     let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
     let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
-    return (jsx(Portal, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsx(Transition, { duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { id: id, sxr: Object.assign(Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _e === void 0 ? void 0 : _e.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), onClick: (e) => {
-                    var _a;
-                    if (!((_a = e.currentTarget.firstChild) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                        if (onClickOutside) {
-                            onClickOutside();
-                        }
-                    }
-                }, children: jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
+    return (jsx(Transition, { duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), children: jsx(ClickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
                         setClosed(true);
                         onClosed && onClosed();
-                    }, children: children })) })) }) })));
-};
-const layers = new Map();
-const LayerHandler = () => {
-    return Array.from(layers.values()).map((l, key) => {
-        return (jsx(Layer, Object.assign({ open: l.open, id: l.id }, l.props, { zIndex: layers.size, onClosed: () => {
-                var _a, _b;
-                setTimeout(() => {
-                    layers.delete(l.id);
-                }, 100);
-                ((_a = l === null || l === void 0 ? void 0 : l.props) === null || _a === void 0 ? void 0 : _a.onClosed) && ((_b = l === null || l === void 0 ? void 0 : l.props) === null || _b === void 0 ? void 0 : _b.onClosed());
-            }, children: l.content }), "layer-" + key));
-    });
+                    }, children: children })) }) })) }));
 };
-Renderar.create("LAYERS_RENDER", LayerHandler);
-Layer.open = (id, content, props) => {
-    if (layers.has(id))
-        return;
-    layers.set(id, { id, props, content, open: true });
-    Renderar.dispatch();
+Layer.open = (children, props) => {
+    const l = Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+            Renderar.unrender(Layer);
+            if (props === null || props === void 0 ? void 0 : props.onClosed) {
+                props.onClosed();
+            }
+        } }));
+    return {
+        open: () => {
+            l.updateProps({ open: true });
+        },
+        close: () => {
+            l.updateProps({ open: false });
+        },
+    };
 };
-Layer.close = (id) => {
-    const get = layers.get(id);
-    if (get) {
-        layers.set(id, Object.assign(Object.assign({}, get), { open: false }));
-        Renderar.dispatch();
-    }
-};export{LayerHandler,Layer as default};//# sourceMappingURL=index.mjs.map
+Layer.close = () => {
+    Renderar.unrender(Layer);
+};export{Layer as default};//# sourceMappingURL=index.mjs.map