no-frills-ui 0.0.14-alpha.2 → 0.0.14-alpha.3

package/dist/index.js

@@ -1115,6 +1115,32 @@ const KEY_CODES$1 = {
  * 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.
+ *
+ * @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;
+ * }
  */
 class LayerManager {
     /**
@@ -1154,59 +1180,79 @@ class LayerManager {
          * @param config
          */
         this.renderLayer = (config) => {
+            // SSR guard
+            if (typeof document === 'undefined') {
+                return [() => null, () => { }];
+            }
             // Merge default config with the provided config.
             const layerConfig = Object.assign(Object.assign({}, 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,
-            };
-            this.layers.push(currentLayer);
-            const overlayClickHandler = (layer) => () => {
-                if (layer.config.closeOnOverlayClick !== false) {
+            // Create a unique ID for tracking this layer
+            const layerId = `nf-layer-manager-${currentIndex}`;
+            const overlayClickHandler = () => {
+                const layer = this.layers.find((l) => l.id === layerId);
+                if (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);
+                }
+            };
             // 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() {
+                () => {
+                    const [divElement, setDivElement] = React.useState(null);
                     React.useEffect(() => {
-                        // The delay is introduced to enable entry animation on Firefox.
-                        // Somehow on Firefox, useEffect is triggered before the component
-                        // is rendered it seems.
+                        // Create the div element only once when component mounts
+                        const div = document.createElement('div');
+                        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(() => {
-                            divElement.setAttribute('class', 'nf-layer-enter');
+                            div.setAttribute('class', 'nf-layer-enter');
                         }, 10);
-                        // Cleanup function
+                        // Cleanup function - remove div when component unmounts
                         return () => {
-                            document.body.removeChild(divElement);
+                            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);
+                            }
                         };
-                    }, []);
-                    return ReactDOM.createPortal(jsxRuntime.jsx(Container$5, Object.assign({ onClick: overlayClickHandler(currentLayer), zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
-                },
-                (resp) => {
-                    this.unmount(currentLayer, resp);
+                    }, []); // Empty dependency array - run only once
+                    if (!divElement) {
+                        return null;
+                    }
+                    return ReactDOM.createPortal(jsxRuntime.jsx(Container$5, Object.assign({ onClick: overlayClickHandler, zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
                 },
+                closeFn,
             ];
         };
-        document === null || document === void 0 ? void 0 : document.body.addEventListener('keyup', (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);
+        if (typeof document !== 'undefined') {
+            document.body.addEventListener('keyup', (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);
+                    }
                 }
-            }
-        });
+            });
+        }
     }
 }
 // Return the instance of the class to create a Singleton.
@@ -1234,10 +1280,23 @@ class Dialog extends React.Component {
         super(...arguments);
         this.state = {
             show: false,
+            LayerComponent: undefined,
         };
         this.open = (closeCallback) => {
+            const _a = this.props, { closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["closeOnEsc", "closeOnOverlayClick", "children"]);
+            const [Component, closeFn] = LayerManager$1.renderLayer({
+                exitDelay: 300,
+                overlay: true,
+                closeOnEsc,
+                closeCallback: this.closeCallback,
+                closeOnOverlayClick,
+                position: LAYER_POSITION.DIALOG,
+                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
+            });
+            this.closeDialog = closeFn;
             this.setState({
                 show: true,
+                LayerComponent: Component,
             });
             this.onCloseFn = closeCallback;
         };
@@ -1249,6 +1308,7 @@ class Dialog extends React.Component {
             var _a;
             this.setState({
                 show: false,
+                LayerComponent: undefined,
             });
             (_a = this.onCloseFn) === null || _a === void 0 ? void 0 : _a.call(this, resp);
         };
@@ -1257,19 +1317,9 @@ class Dialog extends React.Component {
         return this.state.show !== nextState.show;
     }
     render() {
-        const _a = this.props, { closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["closeOnEsc", "closeOnOverlayClick", "children"]);
-        if (this.state.show) {
-            const [Component, closeFn] = LayerManager$1.renderLayer({
-                exitDelay: 300,
-                overlay: true,
-                closeOnEsc,
-                closeCallback: this.closeCallback,
-                closeOnOverlayClick,
-                position: LAYER_POSITION.DIALOG,
-                component: (jsxRuntime.jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
-            });
-            this.closeDialog = closeFn;
-            return jsxRuntime.jsx(Component, {});
+        const { LayerComponent } = this.state;
+        if (this.state.show && LayerComponent) {
+            return jsxRuntime.jsx(LayerComponent, {});
         }
         else {
             return null;
@@ -1300,7 +1350,7 @@ class AlertDialog extends React.Component {
         this.close = () => this.dialog.current.close();
     }
     render() {
-        return (jsxRuntime.jsxs(Dialog, Object.assign({}, this.props.dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [this.props.header && jsxRuntime.jsx(Header$1, { children: this.props.header }), jsxRuntime.jsx(Body$1, { children: this.props.body }), jsxRuntime.jsx(Footer$1, { children: jsxRuntime.jsx(Button$2, { onClick: this.close, children: this.props.buttonText }) })] })));
+        return (jsxRuntime.jsxs(Dialog, Object.assign({}, this.props.dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: true, children: [this.props.header && jsxRuntime.jsx(Header$1, { children: this.props.header }), jsxRuntime.jsx(Body$1, { children: this.props.body }), jsxRuntime.jsx(Footer$1, { children: jsxRuntime.jsx(Button$2, { onClick: this.close, children: this.props.buttonText }) })] })));
     }
 }
 AlertDialog.propTypes = {