no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.10

package/lib-esm/shared/LayerManager.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect } from 'react';
-import styled from '@emotion/styled';
+import { jsx } from '@emotion/react/jsx-runtime';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
-/** Enums for layer position on screen. */
-export var LAYER_POSITION;
-(function (LAYER_POSITION) {
+import styled from '@emotion/styled';
+import { getThemeValue, THEME_NAME } from './constants.js';
+
+/** Enums for layer position on screen. */ var LAYER_POSITION = /*#__PURE__*/ function(LAYER_POSITION) {
     LAYER_POSITION[LAYER_POSITION["TOP_LEFT"] = 0] = "TOP_LEFT";
     LAYER_POSITION[LAYER_POSITION["TOP_CENTER"] = 1] = "TOP_CENTER";
     LAYER_POSITION[LAYER_POSITION["TOP_RIGHT"] = 2] = "TOP_RIGHT";
@@ -12,53 +12,39 @@ export var LAYER_POSITION;
     LAYER_POSITION[LAYER_POSITION["BOTTOM_CENTER"] = 4] = "BOTTOM_CENTER";
     LAYER_POSITION[LAYER_POSITION["BOTTOM_RIGHT"] = 5] = "BOTTOM_RIGHT";
     LAYER_POSITION[LAYER_POSITION["DIALOG"] = 6] = "DIALOG";
-})(LAYER_POSITION || (LAYER_POSITION = {}));
-;
-/** Default value of config */
-const defaultConfig = {
+    return LAYER_POSITION;
+}({});
+/** Default value of config */ const defaultConfig = {
     closeOnEsc: true,
     overlay: false,
-    position: LAYER_POSITION.TOP_LEFT,
+    position: 0,
     component: null,
     exitDelay: 0,
     closeOnOverlayClick: true,
-    alwaysOnTop: false,
+    alwaysOnTop: false
 };
-/** Styles for each position */
-const POSITION_STYLE = {
-    [LAYER_POSITION.TOP_LEFT]: 'top: 0; left: 0;',
-    [LAYER_POSITION.TOP_CENTER]: 'top: 0; left: 50%; justify-content: center;',
-    [LAYER_POSITION.TOP_RIGHT]: 'top: 0; right: 0; justify-content: flex-end;',
-    [LAYER_POSITION.BOTTOM_LEFT]: 'bottom: 0; left: 0;',
-    [LAYER_POSITION.BOTTOM_CENTER]: 'bottom: 0; left: 50%; justify-content: center;',
-    [LAYER_POSITION.BOTTOM_RIGHT]: 'bottom: 0; right: 0; justify-content: flex-end;',
-    [LAYER_POSITION.DIALOG]: 'top: 0; left: 0; justify-content: center; align-items: center;',
+/** Styles for each position */ const POSITION_STYLE = {
+    [0]: 'top: 0; left: 0;',
+    [1]: 'top: 0; left: 50%; justify-content: center;',
+    [2]: 'top: 0; right: 0; justify-content: flex-end;',
+    [3]: 'bottom: 0; left: 0;',
+    [4]: 'bottom: 0; left: 50%; justify-content: center;',
+    [5]: 'bottom: 0; right: 0; justify-content: flex-end;',
+    [6]: 'top: 0; left: 0; justify-content: center; align-items: center;'
 };
-/** Layer container component. */
-const Container = styled.div `
-    position: fixed;
-    display: flex;
-    opacity: 0;
-    transition: opacity .3s ease;
-    ${props => POSITION_STYLE[props.position]}
-    ${props => props.overlay && `
+/** Layer container component. */ const Container$5 = /*#__PURE__*/ styled("div", {
+    target: "e1wjyeea0",
+    label: "Container"
+})("position:fixed;display:flex;opacity:0;transition:opacity 0.3s ease;", (props)=>POSITION_STYLE[props.position], " ", (props)=>props.overlay && `
         width: 100%;
         height: 100vh;
-        background-color: var(--backdrop-color, #2681da80);
+        background-color: ${getThemeValue(THEME_NAME.BACKDROP_COLOR)};
         backdrop-filter: blur(0px);
         pointer-events: all;
-    `}
-    z-index: ${props => props.zIndex};
-
-    .nf-layer-enter & {
-        opacity: 1;
-        ${props => props.overlay && `
+    `, "    z-index:", (props)=>props.zIndex, ";.nf-layer-enter &{opacity:1;", (props)=>props.overlay && `
             backdrop-filter: blur(3px);
-        `}
-    }
-`;
-/** Key code for different keys. */
-const KEY_CODES = {
+        `, "}");
+/** Key code for different keys. */ const KEY_CODES$1 = {
     ESC: 27
 };
 /**
@@ -70,97 +56,245 @@ const KEY_CODES = {
  * This way we need not worry about the z-index and can freely keep on creating
  * new layers. The staring layer z-index is 10000. Leaving enough z-index for the
  * user if they desires so.
- */
-class LayerManager {
+ *
+ * @important Usage Pattern
+ * To avoid creating duplicate layers (especially in React Strict Mode or Next.js),
+ * always call `renderLayer` only once - either in a lifecycle method (like `componentDidUpdate`)
+ * or in an imperative method (like `open()`).
+ *
+ * @example
+ * // ❌ Don't call renderLayer in render() method
+ * render() {
+ *   if (this.state.show) {
+ *     const [Component, closeFn] = LayerManager.renderLayer({ ... }); // Creates new layer on every render
+ *     return <Component />;
+ *   }
+ * }
+ *
+ * @example
+ * // ✅ Do call renderLayer once in a method and store the component
+ * open() {
+ *   const [Component, closeFn] = LayerManager.renderLayer({ ... });
+ *   this.setState({ LayerComponent: Component });
+ * }
+ *
+ * render() {
+ *   const { LayerComponent } = this.state;
+ *   return LayerComponent ? <LayerComponent /> : null;
+ * }
+ */ let LayerManager$1 = class LayerManager {
     /**
      * Constructor simply registers a event listener on body to
      * react to esc key press.
-     */
-    constructor() {
-        /** Layer stack */
-        this.layers = [];
-        /** z-index of the next layer */
-        this.nextIndex = 10000;
+     */ constructor(){
+        /** Layer stack */ this.layers = [];
+        /** z-index of the next layer */ this.nextIndex = 0;
+        this.timeoutIds = new Map(); // Track timeouts
+        // Add cleanup method
+        this.destroy = ()=>{
+            if (typeof document !== 'undefined' && this.keyupHandler) {
+                document.body.removeEventListener('keyup', this.keyupHandler);
+            }
+            // Clear all pending timeouts
+            this.timeoutIds.forEach((id)=>clearTimeout(id));
+            this.timeoutIds.clear();
+            // Clean up remaining layers
+            this.layers.forEach((layer)=>{
+                if (document.body.contains(layer.element)) {
+                    document.body.removeChild(layer.element);
+                }
+            });
+            this.layers = [];
+        };
         /**
-         * Un-mounts a layer.
-         *
-         * It first adds a class 'nf-layer-exit' and then un-mounts the
-         * layer after the `exitDelay` mentioned in the layer config.
-         * This class will help component in triggering the entry animation.
-         *
-         * @param layer
-         */
-        this.unmount = (layer, resp) => {
+     * Un-mounts a layer.
+     *
+     * It first adds a class 'nf-layer-exit' and then un-mounts the
+     * layer after the `exitDelay` mentioned in the layer config.
+     * This class will help component in triggering the entry animation.
+     *
+     * @param layer
+     */ this.unmount = (layer, resp)=>{
             layer.element.setAttribute('class', 'nf-layer-exit');
-            this.layers.splice(this.layers.findIndex(item => item === layer), 1);
-            setTimeout(() => {
+            const index = this.layers.findIndex((item)=>item === layer);
+            if (index !== -1) {
+                this.layers.splice(index, 1);
+            }
+            const timeoutId = window.setTimeout(()=>{
+                this.timeoutIds.delete(layer.id);
                 try {
-                    layer.config.closeCallback && layer.config.closeCallback(resp);
-                }
-                catch (e) {
-                    // Error in callback function. Ignore and proceed.
-                    console.warn(e.message);
+                    layer.config.closeCallback?.(resp);
+                } catch (err) {
+                    if (err instanceof Error) {
+                        console.warn(err.message);
+                    } else {
+                        console.warn(err);
+                    }
                 }
+                // Clear reference to help GC
+                layer.config.component = null;
             }, layer.config.exitDelay);
+            this.timeoutIds.set(layer.id, timeoutId);
+        };
+        this.Empty = ()=>{
+            return null;
         };
         /**
-         * Renders a layer.
-         * @param config
-         */
-        this.renderLayer = (config) => {
+     * Renders a layer.
+     * @param config
+     */ this.renderLayer = (config)=>{
+            // SSR guard
+            if (typeof document === 'undefined') {
+                return [
+                    /*#__PURE__*/ React.forwardRef(this.Empty),
+                    ()=>{}
+                ];
+            }
             // Merge default config with the provided config.
-            const layerConfig = Object.assign(Object.assign({}, defaultConfig), config);
+            const layerConfig = {
+                ...defaultConfig,
+                ...config
+            };
             // Get the z-index for the new layer
-            const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;
-            // Prepare the div on DOM where the new layer will be mounted.
-            const divElement = document.createElement('div');
-            divElement.setAttribute('id', `nf-layer-manager-${currentIndex}`);
-            document.body.appendChild(divElement);
-            // Add layer to stack.
-            const currentLayer = {
-                id: `nf-layer-manager-${currentIndex}`,
-                config: layerConfig,
-                element: divElement
+            const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : 10000 + this.nextIndex;
+            const className = layerConfig.alwaysOnTop ? 'nf-layer-manager-top' : 'nf-layer-manager';
+            // Create a unique ID for tracking this layer
+            const layerId = `${className}-${currentIndex + this.nextIndex}`;
+            // Always increment for next layer
+            this.nextIndex += 1;
+            const overlayClickHandler = ()=>{
+                const layer = this.layers.find((l)=>l.id === layerId);
+                if (layer && layer.config.closeOnOverlayClick !== false) {
+                    this.unmount(layer);
+                }
             };
-            this.layers.push(currentLayer);
-            const overlayClickHandler = (layer) => () => {
-                layer.config.closeOnOverlayClick !== false && this.unmount(layer);
+            const closeFn = (resp)=>{
+                const layer = this.layers.find((l)=>l.id === layerId);
+                if (layer) {
+                    this.unmount(layer, resp);
+                }
+            };
+            const LayerContainer = (props, ref)=>{
+                const [divElement, setDivElement] = React.useState(null);
+                useEffect(()=>{
+                    // Create the div element only once when component mounts
+                    const div = document.createElement('div');
+                    div.setAttribute('class', className);
+                    div.setAttribute('id', layerId);
+                    document.body.appendChild(div);
+                    // Add layer to stack
+                    const currentLayer = {
+                        id: layerId,
+                        config: layerConfig,
+                        element: div
+                    };
+                    this.layers.push(currentLayer);
+                    setDivElement(div);
+                    // Add entry animation class after a short delay
+                    setTimeout(()=>{
+                        div.setAttribute('class', 'nf-layer-enter');
+                    }, 10);
+                    // Track elements modified for accessibility
+                    const modifiedElements = [];
+                    let originalBodyOverflow = null;
+                    let originalBodyPosition = null;
+                    let originalBodyWidth = null;
+                    let originalBodyTop = null;
+                    let scrollY = 0;
+                    // Apply aria-hidden to siblings and body scroll lock for overlay modals
+                    if (layerConfig.overlay) {
+                        // Hide all body children except this layer portal, scripts, and styles
+                        const bodyChildren = Array.from(document.body.children);
+                        bodyChildren.forEach((child)=>{
+                            if (child !== div && child.className !== 'nf-layer-manager-top' && child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE') {
+                                const hadAriaHidden = child.hasAttribute('aria-hidden');
+                                const previousValue = child.getAttribute('aria-hidden');
+                                // Only set aria-hidden if not already hidden
+                                if (previousValue !== 'true') {
+                                    child.setAttribute('aria-hidden', 'true');
+                                    modifiedElements.push({
+                                        element: child,
+                                        hadAriaHidden,
+                                        previousValue
+                                    });
+                                }
+                            }
+                        });
+                        // Prevent body scroll on iOS
+                        scrollY = window.scrollY;
+                        originalBodyOverflow = document.body.style.overflow;
+                        originalBodyPosition = document.body.style.position;
+                        originalBodyWidth = document.body.style.width;
+                        originalBodyTop = document.body.style.top;
+                        document.body.style.overflow = 'hidden';
+                        document.body.style.position = 'fixed';
+                        document.body.style.width = '100%';
+                        document.body.style.top = `-${scrollY}px`;
+                    }
+                    // Cleanup function - remove div when component unmounts
+                    return ()=>{
+                        // Restore aria-hidden attributes
+                        modifiedElements.forEach(({ element, hadAriaHidden, previousValue })=>{
+                            if (document.body.contains(element)) {
+                                if (hadAriaHidden && previousValue !== null) {
+                                    element.setAttribute('aria-hidden', previousValue);
+                                } else {
+                                    element.removeAttribute('aria-hidden');
+                                }
+                            }
+                        });
+                        // Restore body scroll
+                        if (layerConfig.overlay) {
+                            document.body.style.overflow = originalBodyOverflow || '';
+                            document.body.style.position = originalBodyPosition || '';
+                            document.body.style.width = originalBodyWidth || '';
+                            document.body.style.top = originalBodyTop || '';
+                            window.scrollTo(0, scrollY);
+                        }
+                        if (document.body.contains(div)) {
+                            document.body.removeChild(div);
+                        }
+                        // Remove from layers array
+                        const index = this.layers.findIndex((layer)=>layer.id === layerId);
+                        if (index !== -1) {
+                            this.layers.splice(index, 1);
+                        }
+                    };
+                }, []); // Empty dependency array - run only once
+                if (!divElement) {
+                    return null;
+                }
+                return /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ jsx(Container$5, {
+                    ...props,
+                    ref: ref,
+                    onClick: overlayClickHandler,
+                    zIndex: currentIndex,
+                    ...layerConfig,
+                    children: layerConfig.component
+                }), divElement);
             };
             // Return callback which will trigger the un-mount.
             return [
-                // Render the layer and then add `nf-layer-enter` class to
-                // the div created above.
-                // This class will help component in triggering the entry animation.
-                function TestLayer() {
-                    useEffect(() => {
-                        // The delay is introduced to enable entry animation on Firefox.
-                        // Somehow on Firefox, useEffect is triggered before the component
-                        // is rendered it seems.
-                        setTimeout(() => {
-                            divElement.setAttribute('class', 'nf-layer-enter');
-                        }, 10);
-                        // Cleanup function
-                        return () => {
-                            document.body.removeChild(divElement);
-                        };
-                    }, []);
-                    return ReactDOM.createPortal(_jsx(Container, Object.assign({ onClick: overlayClickHandler(currentLayer), zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
-                },
-                (resp) => {
-                    this.unmount(currentLayer, resp);
-                }
+                /*#__PURE__*/ React.forwardRef(LayerContainer),
+                closeFn
             ];
         };
-        document.body.addEventListener('keyup', (e) => {
-            if (this.layers.length && e.keyCode === KEY_CODES.ESC) {
-                const lastLayer = this.layers.slice(-1)[0];
-                if (lastLayer.config.closeOnEsc !== false) {
-                    this.unmount(lastLayer);
+        if (typeof document !== 'undefined') {
+            // Store handler reference for cleanup
+            this.keyupHandler = (e)=>{
+                if (this.layers.length && e.keyCode === KEY_CODES$1.ESC) {
+                    const lastLayer = this.layers.slice(-1)[0];
+                    if (lastLayer.config.closeOnEsc !== false) {
+                        this.unmount(lastLayer);
+                    }
                 }
-            }
-        });
+            };
+            document.body.addEventListener('keyup', this.keyupHandler);
+        }
     }
-}
+};
 // Return the instance of the class to create a Singleton.
-export default new LayerManager();
-//# sourceMappingURL=LayerManager.js.map
+var LayerManager = new LayerManager$1();
+
+export { LAYER_POSITION, LayerManager as default };
+//# sourceMappingURL=LayerManager.js.map

package/lib-esm/shared/LayerManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerManager.js","sourceRoot":"","sources":["../../src/shared/LayerManager.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,0CAA0C;AAC1C,MAAM,CAAN,IAAY,cAQX;AARD,WAAY,cAAc;IACtB,2DAAQ,CAAA;IACR,+DAAU,CAAA;IACV,6DAAS,CAAA;IACT,iEAAW,CAAA;IACX,qEAAa,CAAA;IACb,mEAAY,CAAA;IACZ,uDAAM,CAAA;AACV,CAAC,EARW,cAAc,KAAd,cAAc,QAQzB;AAAA,CAAC;AAqBF,8BAA8B;AAC9B,MAAM,aAAa,GAAgB;IAC/B,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,cAAc,CAAC,QAAQ;IACjC,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,CAAC;IACZ,mBAAmB,EAAE,IAAI;IACzB,WAAW,EAAE,KAAK;CACrB,CAAA;AASD,+BAA+B;AAC/B,MAAM,cAAc,GAAG;IACnB,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,kBAAkB;IAC7C,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,6CAA6C;IAC1E,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,8CAA8C;IAC1E,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,qBAAqB;IACnD,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,gDAAgD;IAChF,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,iDAAiD;IAChF,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,gEAAgE;CAC5F,CAAA;AAED,iCAAiC;AACjC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAkC;;;;;MAKxD,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC;MACvC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI;;;;;;KAM3B;eACU,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM;;;;UAI1B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI;;SAE3B;;CAER,CAAC;AAEF,mCAAmC;AACnC,MAAM,SAAS,GAAG;IACd,GAAG,EAAE,EAAE;CACV,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,YAAY;IAMd;;;OAGG;IACH;QATA,kBAAkB;QACV,WAAM,GAAY,EAAE,CAAC;QAC7B,gCAAgC;QACxB,cAAS,GAAG,KAAK,CAAC;QAiB1B;;;;;;;;WAQG;QACK,YAAO,GAAG,CAAC,KAAY,EAAE,IAAU,EAAE,EAAE;YAC3C,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;YACrD,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;YAErE,UAAU,CAAC,GAAG,EAAE;gBACZ,IAAI,CAAC;oBACD,KAAK,CAAC,MAAM,CAAC,aAAa,IAAI,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;gBACnE,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACT,kDAAkD;oBAClD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;gBAC5B,CAAC;YACL,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC/B,CAAC,CAAA;QAED;;;WAGG;QACI,gBAAW,GAAG,CAAC,MAAmB,EAAmD,EAAE;YAC1F,iDAAiD;YACjD,MAAM,WAAW,mCACV,aAAa,GACb,MAAM,CACZ,CAAC;YAEF,oCAAoC;YACpC,MAAM,YAAY,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAE7E,8DAA8D;YAC9D,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACjD,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,oBAAoB,YAAY,EAAE,CAAC,CAAC;YAClE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAEtC,sBAAsB;YACtB,MAAM,YAAY,GAAG;gBACjB,EAAE,EAAE,oBAAoB,YAAY,EAAE;gBACtC,MAAM,EAAE,WAAW;gBACnB,OAAO,EAAE,UAAU;aACtB,CAAC;YACF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAE/B,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,GAAG,EAAE;gBAC/C,KAAK,CAAC,MAAM,CAAC,mBAAmB,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACtE,CAAC,CAAA;YAED,mDAAmD;YACnD,OAAO;gBACH,0DAA0D;gBAC1D,yBAAyB;gBACzB,oEAAoE;gBACpE,SAAS,SAAS;oBACd,SAAS,CAAC,GAAG,EAAE;wBACX,gEAAgE;wBAChE,kEAAkE;wBAClE,wBAAwB;wBACxB,UAAU,CAAC,GAAG,EAAE;4BACZ,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;wBACvD,CAAC,EAAE,EAAE,CAAC,CAAC;wBAEP,mBAAmB;wBACnB,OAAO,GAAG,EAAE;4BACR,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;wBAC1C,CAAC,CAAA;oBACL,CAAC,EAAE,EAAE,CAAC,CAAC;oBAEP,OAAO,QAAQ,CAAC,YAAY,CACxB,KAAC,SAAS,kBACN,OAAO,EAAE,mBAAmB,CAAC,YAAY,CAAC,EAC1C,MAAM,EAAE,YAAY,IAChB,WAAW,cAEd,WAAW,CAAC,SAAS,IACd,EACZ,UAAU,CAIb,CAAA;gBACL,CAAC;gBACD,CAAC,IAAU,EAAE,EAAE;oBACX,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;gBACrC,CAAC;aACJ,CAAA;QACL,CAAC,CAAA;QAtGG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,OAAO,KAAK,SAAS,CAAC,GAAG,EAAE,CAAC;gBACpD,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC3C,IAAI,SAAS,CAAC,MAAM,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;oBACxC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBAC5B,CAAC;YACL,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;CA+FJ;AAED,0DAA0D;AAC1D,eAAe,IAAI,YAAY,EAAE,CAAC"}
+{"version":3,"file":"LayerManager.js","sources":["../../src/shared/LayerManager.tsx"],"sourcesContent":["import React, { ForwardRefExoticComponent, RefAttributes, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from './constants';\n\n/** Enums for layer position on screen. */\nexport enum LAYER_POSITION {\n    TOP_LEFT,\n    TOP_CENTER,\n    TOP_RIGHT,\n    BOTTOM_LEFT,\n    BOTTOM_CENTER,\n    BOTTOM_RIGHT,\n    DIALOG,\n}\n\ninterface LayerConfig {\n    /** Show an overlay */\n    overlay?: boolean;\n    /** Element to render inside the layer. */\n    component: JSX.Element | null;\n    /** Position of the layer */\n    position?: LAYER_POSITION;\n    /** Delay for exit */\n    exitDelay?: number;\n    /** Close layer on `esc` key press. */\n    closeOnEsc?: boolean;\n    /** Close layer overlay is clicked. */\n    closeOnOverlayClick?: boolean;\n    /** Callback called when modal closes */\n    closeCallback?: (resp?: unknown) => void;\n    /** Layer is created with max z-index */\n    alwaysOnTop?: boolean;\n}\n\n/** Default value of config */\nconst defaultConfig: LayerConfig = {\n    closeOnEsc: true,\n    overlay: false,\n    position: LAYER_POSITION.TOP_LEFT,\n    component: null,\n    exitDelay: 0,\n    closeOnOverlayClick: true,\n    alwaysOnTop: false,\n};\n\n/** Metadata of each layer */\ninterface Layer {\n    id: string;\n    config: LayerConfig;\n    element: HTMLDivElement;\n}\n\n/** Styles for each position */\nconst POSITION_STYLE: Record<LAYER_POSITION, string> = {\n    [LAYER_POSITION.TOP_LEFT]: 'top: 0; left: 0;',\n    [LAYER_POSITION.TOP_CENTER]: 'top: 0; left: 50%; justify-content: center;',\n    [LAYER_POSITION.TOP_RIGHT]: 'top: 0; right: 0; justify-content: flex-end;',\n    [LAYER_POSITION.BOTTOM_LEFT]: 'bottom: 0; left: 0;',\n    [LAYER_POSITION.BOTTOM_CENTER]: 'bottom: 0; left: 50%; justify-content: center;',\n    [LAYER_POSITION.BOTTOM_RIGHT]: 'bottom: 0; right: 0; justify-content: flex-end;',\n    [LAYER_POSITION.DIALOG]: 'top: 0; left: 0; justify-content: center; align-items: center;',\n};\n\n/** Layer container component. */\nconst Container = styled.div<LayerConfig & { zIndex: number }>`\n    position: fixed;\n    display: flex;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    ${(props) => POSITION_STYLE[props.position as LAYER_POSITION]}\n    ${(props) =>\n        props.overlay &&\n        `\n        width: 100%;\n        height: 100vh;\n        background-color: ${getThemeValue(THEME_NAME.BACKDROP_COLOR)};\n        backdrop-filter: blur(0px);\n        pointer-events: all;\n    `}\n    z-index: ${(props) => props.zIndex};\n\n    .nf-layer-enter & {\n        opacity: 1;\n        ${(props) =>\n            props.overlay &&\n            `\n            backdrop-filter: blur(3px);\n        `}\n    }\n`;\n\n/** Key code for different keys. */\nconst KEY_CODES = {\n    ESC: 27,\n};\n\n/**\n * This is a shared helper class which manages the z-index of each layer.\n * If a component needs to be rendered in a different layer then this class\n * should be used. It internally maintains the stack of opened layer and each\n * `renderLayer` call will push a new layer in stack.\n *\n * This way we need not worry about the z-index and can freely keep on creating\n * new layers. The staring layer z-index is 10000. Leaving enough z-index for the\n * user if they desires so.\n *\n * @important Usage Pattern\n * To avoid creating duplicate layers (especially in React Strict Mode or Next.js),\n * always call `renderLayer` only once - either in a lifecycle method (like `componentDidUpdate`)\n * or in an imperative method (like `open()`).\n *\n * @example\n * // ❌ Don't call renderLayer in render() method\n * render() {\n *   if (this.state.show) {\n *     const [Component, closeFn] = LayerManager.renderLayer({ ... }); // Creates new layer on every render\n *     return <Component />;\n *   }\n * }\n *\n * @example\n * // ✅ Do call renderLayer once in a method and store the component\n * open() {\n *   const [Component, closeFn] = LayerManager.renderLayer({ ... });\n *   this.setState({ LayerComponent: Component });\n * }\n *\n * render() {\n *   const { LayerComponent } = this.state;\n *   return LayerComponent ? <LayerComponent /> : null;\n * }\n */\nclass LayerManager {\n    /** Layer stack */\n    private layers: Layer[] = [];\n    /** z-index of the next layer */\n    private nextIndex = 0;\n    private keyupHandler!: (e: KeyboardEvent) => void;\n    private timeoutIds = new Map<string, number>(); // Track timeouts\n\n    /**\n     * Constructor simply registers a event listener on body to\n     * react to esc key press.\n     */\n    constructor() {\n        if (typeof document !== 'undefined') {\n            // Store handler reference for cleanup\n            this.keyupHandler = (e) => {\n                if (this.layers.length && e.keyCode === KEY_CODES.ESC) {\n                    const lastLayer = this.layers.slice(-1)[0];\n                    if (lastLayer.config.closeOnEsc !== false) {\n                        this.unmount(lastLayer);\n                    }\n                }\n            };\n            document.body.addEventListener('keyup', this.keyupHandler);\n        }\n    }\n\n    // Add cleanup method\n    public destroy = () => {\n        if (typeof document !== 'undefined' && this.keyupHandler) {\n            document.body.removeEventListener('keyup', this.keyupHandler);\n        }\n        // Clear all pending timeouts\n        this.timeoutIds.forEach((id) => clearTimeout(id));\n        this.timeoutIds.clear();\n        // Clean up remaining layers\n        this.layers.forEach((layer) => {\n            if (document.body.contains(layer.element)) {\n                document.body.removeChild(layer.element);\n            }\n        });\n        this.layers = [];\n    };\n\n    /**\n     * Un-mounts a layer.\n     *\n     * It first adds a class 'nf-layer-exit' and then un-mounts the\n     * layer after the `exitDelay` mentioned in the layer config.\n     * This class will help component in triggering the entry animation.\n     *\n     * @param layer\n     */\n    private unmount = (layer: Layer, resp?: unknown) => {\n        layer.element.setAttribute('class', 'nf-layer-exit');\n        const index = this.layers.findIndex((item) => item === layer);\n        if (index !== -1) {\n            this.layers.splice(index, 1);\n        }\n\n        const timeoutId = window.setTimeout(() => {\n            this.timeoutIds.delete(layer.id);\n            try {\n                layer.config.closeCallback?.(resp);\n            } catch (err) {\n                if (err instanceof Error) {\n                    console.warn(err.message);\n                } else {\n                    console.warn(err);\n                }\n            }\n            // Clear reference to help GC\n            layer.config.component = null;\n        }, layer.config.exitDelay);\n\n        this.timeoutIds.set(layer.id, timeoutId);\n    };\n\n    private Empty = () => {\n        return null;\n    };\n\n    /**\n     * Renders a layer.\n     * @param config\n     */\n    public renderLayer = (\n        config: LayerConfig,\n    ): [ForwardRefExoticComponent<RefAttributes<HTMLDivElement>>, (resp?: unknown) => void] => {\n        // SSR guard\n        if (typeof document === 'undefined') {\n            return [React.forwardRef(this.Empty), () => {}];\n        }\n\n        // Merge default config with the provided config.\n        const layerConfig = {\n            ...defaultConfig,\n            ...config,\n        };\n\n        // Get the z-index for the new layer\n        const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : 10000 + this.nextIndex;\n        const className = layerConfig.alwaysOnTop ? 'nf-layer-manager-top' : 'nf-layer-manager';\n\n        // Create a unique ID for tracking this layer\n        const layerId = `${className}-${currentIndex + this.nextIndex}`;\n\n        // Always increment for next layer\n        this.nextIndex += 1;\n\n        const overlayClickHandler = () => {\n            const layer = this.layers.find((l) => l.id === layerId);\n            if (layer && layer.config.closeOnOverlayClick !== false) {\n                this.unmount(layer);\n            }\n        };\n\n        const closeFn = (resp?: unknown) => {\n            const layer = this.layers.find((l) => l.id === layerId);\n            if (layer) {\n                this.unmount(layer, resp);\n            }\n        };\n\n        const LayerContainer = (\n            props: React.HTMLAttributes<HTMLDivElement>,\n            ref: React.Ref<HTMLDivElement>,\n        ) => {\n            const [divElement, setDivElement] = React.useState<HTMLDivElement | null>(null);\n\n            useEffect(() => {\n                // Create the div element only once when component mounts\n                const div = document.createElement('div');\n                div.setAttribute('class', className);\n                div.setAttribute('id', layerId);\n                document.body.appendChild(div);\n\n                // Add layer to stack\n                const currentLayer = {\n                    id: layerId,\n                    config: layerConfig,\n                    element: div,\n                };\n                this.layers.push(currentLayer);\n\n                setDivElement(div);\n                // Add entry animation class after a short delay\n                setTimeout(() => {\n                    div.setAttribute('class', 'nf-layer-enter');\n                }, 10);\n\n                // Track elements modified for accessibility\n                const modifiedElements: Array<{\n                    element: Element;\n                    hadAriaHidden: boolean;\n                    previousValue: string | null;\n                }> = [];\n                let originalBodyOverflow: string | null = null;\n                let originalBodyPosition: string | null = null;\n                let originalBodyWidth: string | null = null;\n                let originalBodyTop: string | null = null;\n                let scrollY = 0;\n\n                // Apply aria-hidden to siblings and body scroll lock for overlay modals\n                if (layerConfig.overlay) {\n                    // Hide all body children except this layer portal, scripts, and styles\n                    const bodyChildren = Array.from(document.body.children);\n                    bodyChildren.forEach((child) => {\n                        if (\n                            child !== div &&\n                            child.className !== 'nf-layer-manager-top' &&\n                            child.tagName !== 'SCRIPT' &&\n                            child.tagName !== 'STYLE'\n                        ) {\n                            const hadAriaHidden = child.hasAttribute('aria-hidden');\n                            const previousValue = child.getAttribute('aria-hidden');\n\n                            // Only set aria-hidden if not already hidden\n                            if (previousValue !== 'true') {\n                                child.setAttribute('aria-hidden', 'true');\n                                modifiedElements.push({\n                                    element: child,\n                                    hadAriaHidden,\n                                    previousValue,\n                                });\n                            }\n                        }\n                    });\n\n                    // Prevent body scroll on iOS\n                    scrollY = window.scrollY;\n                    originalBodyOverflow = document.body.style.overflow;\n                    originalBodyPosition = document.body.style.position;\n                    originalBodyWidth = document.body.style.width;\n                    originalBodyTop = document.body.style.top;\n\n                    document.body.style.overflow = 'hidden';\n                    document.body.style.position = 'fixed';\n                    document.body.style.width = '100%';\n                    document.body.style.top = `-${scrollY}px`;\n                }\n\n                // Cleanup function - remove div when component unmounts\n                return () => {\n                    // Restore aria-hidden attributes\n                    modifiedElements.forEach(({ element, hadAriaHidden, previousValue }) => {\n                        if (document.body.contains(element)) {\n                            if (hadAriaHidden && previousValue !== null) {\n                                element.setAttribute('aria-hidden', previousValue);\n                            } else {\n                                element.removeAttribute('aria-hidden');\n                            }\n                        }\n                    });\n\n                    // Restore body scroll\n                    if (layerConfig.overlay) {\n                        document.body.style.overflow = originalBodyOverflow || '';\n                        document.body.style.position = originalBodyPosition || '';\n                        document.body.style.width = originalBodyWidth || '';\n                        document.body.style.top = originalBodyTop || '';\n                        window.scrollTo(0, scrollY);\n                    }\n\n                    if (document.body.contains(div)) {\n                        document.body.removeChild(div);\n                    }\n                    // Remove from layers array\n                    const index = this.layers.findIndex((layer) => layer.id === layerId);\n                    if (index !== -1) {\n                        this.layers.splice(index, 1);\n                    }\n                };\n            }, []); // Empty dependency array - run only once\n\n            if (!divElement) {\n                return null;\n            }\n\n            return ReactDOM.createPortal(\n                <Container\n                    {...props}\n                    ref={ref}\n                    onClick={overlayClickHandler}\n                    zIndex={currentIndex}\n                    {...layerConfig}\n                >\n                    {layerConfig.component}\n                </Container>,\n                divElement,\n            );\n        };\n\n        // Return callback which will trigger the un-mount.\n        return [\n            React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(LayerContainer),\n            closeFn,\n        ];\n    };\n}\n\n// Return the instance of the class to create a Singleton.\nexport default new LayerManager();\n"],"names":["LAYER_POSITION","defaultConfig","closeOnEsc","overlay","position","component","exitDelay","closeOnOverlayClick","alwaysOnTop","POSITION_STYLE","Container","styled","props","getThemeValue","THEME_NAME","BACKDROP_COLOR","zIndex","KEY_CODES","ESC","LayerManager","layers","nextIndex","timeoutIds","Map","destroy","document","keyupHandler","body","removeEventListener","forEach","id","clearTimeout","clear","layer","contains","element","removeChild","unmount","resp","setAttribute","index","findIndex","item","splice","timeoutId","window","setTimeout","delete","config","closeCallback","err","Error","console","warn","message","set","Empty","renderLayer","React","forwardRef","layerConfig","currentIndex","className","layerId","overlayClickHandler","find","l","closeFn","LayerContainer","ref","divElement","setDivElement","useState","useEffect","div","createElement","appendChild","currentLayer","push","modifiedElements","originalBodyOverflow","originalBodyPosition","originalBodyWidth","originalBodyTop","scrollY","bodyChildren","Array","from","children","child","tagName","hadAriaHidden","hasAttribute","previousValue","getAttribute","style","overflow","width","top","removeAttribute","scrollTo","ReactDOM","createPortal","_jsx","onClick","e","length","keyCode","lastLayer","slice","addEventListener"],"mappings":"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"}

package/lib-esm/shared/constants.d.ts

@@ -1,27 +1,58 @@
-declare const _default: {
-    PRIMARY: string;
-    PRIMARY_LIGHT: string;
-    PRIMARY_LIGHTER: string;
-    BACKDROP_COLOR: string;
-    INFO: string;
-    INFO_LIGHT: string;
-    SUCCESS: string;
-    SUCCESS_LIGHT: string;
-    WARNING: string;
-    WARNING_LIGHT: string;
-    ERROR: string;
-    ERROR_LIGHT: string;
-    BORDER_COLOR: string;
-    TOAST: string;
-    TOOLTIP_COLOR: string;
-    BORDER_LIGHT_COLOR: string;
-    BACKGROUND: string;
-    DISABLED_BACKGROUND: string;
-    DISABLED_BORDER: string;
-    LIGHT_GREY: string;
-    DISABLED: string;
-    SHADOW: string;
-    HOVER_SHADOW: string;
-    MODAL_SHADOW: string;
-};
-export default _default;
+export declare enum THEME_CONSTANTS {
+    PRIMARY = "#1f7ac5",
+    PRIMARY_LIGHT = "#64baff",
+    PRIMARY_LIGHTER = "#cfe9ff",
+    BACKDROP_COLOR = "#2681da80",
+    INFO = "#1f7ac5ff",
+    INFO_LIGHT = "#64baffff",
+    SUCCESS = "#1a835f",
+    SUCCESS_LIGHT = "#80eac6",
+    WARNING = "#916b01",
+    WARNING_LIGHT = "#ffba00",
+    ERROR = "#bb2828",
+    ERROR_LIGHT = "#f1a5a5",
+    BORDER_COLOR = "#555555",
+    TOAST = "#5f5f5f",
+    TOOLTIP_COLOR = "rgba(0,0,0,0.6)",
+    BORDER_LIGHT_COLOR = "#eeeeee",
+    BACKGROUND = "#ffffff",
+    DISABLED_BACKGROUND = "#fafafa",
+    DISABLED_BORDER = "#aaa",
+    LIGHT_GREY = "#ccc",
+    DISABLED = "#737373",
+    TEXT_COLOR_LIGHT = "#fff",
+    TEXT_COLOR_DARK = "#000",
+    SHADOW = "0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)",
+    HOVER_SHADOW = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    MODAL_SHADOW = "0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)"
+}
+export declare enum THEME_NAME {
+    PRIMARY = "--nfui-primary",
+    PRIMARY_LIGHT = "--nfui-primary-light",
+    PRIMARY_LIGHTER = "--nfui-primary-lighter",
+    INFO = "--nfui-info",
+    INFO_LIGHT = "--nfui-info-light",
+    SUCCESS = "--nfui-success",
+    SUCCESS_LIGHT = "--nfui-success-light",
+    WARNING = "--nfui-warning",
+    WARNING_LIGHT = "--nfui-warning-light",
+    ERROR = "--nfui-error",
+    ERROR_LIGHT = "--nfui-error-light",
+    BORDER_COLOR = "--nfui-border-color",
+    TOAST = "--nfui-toast",
+    TOOLTIP_COLOR = "--nfui-tooltip-color",
+    BORDER_LIGHT_COLOR = "--nfui-border-light-color",
+    BACKGROUND = "--nfui-background",
+    DISABLED_BACKGROUND = "--nfui-disabled-background",
+    DISABLED_BORDER = "--nfui-disabled-border",
+    LIGHT_GREY = "--nfui-light-grey",
+    DISABLED = "--nfui-disabled",
+    TEXT_COLOR_LIGHT = "--nfui-text-color-light",
+    TEXT_COLOR_DARK = "--nfui-text-color-dark",
+    SHADOW = "--nfui-shadow",
+    HOVER_SHADOW = "--nfui-hover-shadow",
+    MODAL_SHADOW = "--nfui-modal-shadow",
+    BACKDROP_COLOR = "--nfui-backdrop-color"
+}
+export declare const themeNameMap: Record<THEME_NAME, THEME_CONSTANTS>;
+export declare const getThemeValue: (key: THEME_NAME) => string;