fix: #7, #5

package.json

@@ -1,16 +1,23 @@
 {
   "name": "react-layers-manager",
-  "version": "0.1.2",
-  "repository": "giuseppeg/react-layers-manager",
+  "version": "0.1.3",
+  "description": "Manage layers and z-index in React applications effectively.",
+  "bugs": "https://github.com/giuseppeg/react-layers-manager/issues",
   "main": "./lib/index.cjs.js",
   "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
   "files": [
-    "index.js",
     "lib",
     "README.md",
     "LICENSE.md"
   ],
-  "description": "Manage layers and z-index in React applications effectively",
+  "scripts": {
+    "clean": "rimraf lib",
+    "compile": "rollup -c",
+    "build": "yarn run clean && yarn run compile",
+    "package": "yarn run build && yarn pack",
+    "deploy": "yarn run package && yarn publish"
+  },
   "keywords": [
     "react",
     "z-index",
@@ -22,18 +29,25 @@
   "author": "Giuseppe Gurgone",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "rollup": "^0.60.1",
-    "rollup-plugin-babel": "^3.0.4"
+    "@babel/core": "^7.28.5",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.53.5",
+    "rollup-plugin-babel": "^4.4.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "peerDependencies": {
     "react": ">= 16.3.x"
   },
-  "scripts": {
-    "prepublish": "rm -rf lib && rollup -c"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/giuseppeg/react-layers-manager.git"
   }
 }

rollup.config.js

@@ -1,15 +1,28 @@
-import babel from 'rollup-plugin-babel'
+import typescript from "@rollup/plugin-typescript";
+import babel from 'rollup-plugin-babel';
 
-export default ['cjs', 'es'].map(format => ({
-  input: './src/index.js',
-  output: {
-    file: `./lib/index.${format}.js`,
-    format
-  },
-  plugins: [
-    babel({
-      exclude: 'node_modules/**'
-    })
-  ],
-  external: ['react', 'react-dom']
-}));
+
+export default ['cjs', 'es'].map(format => (
+    {
+        input: './src/index.ts',
+        output: {
+            file: `./lib/index.${format}.js`,
+            format
+        },
+        plugins: [
+            typescript(
+                {
+                    declaration: true,
+                    declarationDir: './lib',
+                    rootDir: './src'
+                }
+            ),
+            babel(
+                {
+                    exclude: 'node_modules/**'
+                }
+            )
+        ],
+        external: ['react', 'react-dom']
+    }
+));

src/Layer.tsx

@@ -0,0 +1,36 @@
+import { type ReactNode, Component } from "react";
+
+import { Consumer, type ContextValue } from "./context";
+import LayerImpl from "./LayerImpl";
+
+
+export interface LayerProps {
+    children?: ReactNode;
+    index?: number;
+    onMount?: (root: HTMLDivElement) => void;
+    onUnmount?: (root: HTMLDivElement) => void;
+}
+
+
+class Layer extends Component<LayerProps, {}> {
+    constructor(props: LayerProps) {
+        super(props);
+    }
+
+    public render(): ReactNode {
+        return (
+            <Consumer>
+                {(contextValue: ContextValue): ReactNode => contextValue.host && contextValue.root && (
+                    <LayerImpl
+                        {...this.props}
+                        host={contextValue.host}
+                        root={contextValue.root}
+                    />
+                )}
+            </Consumer>
+        );
+    }
+}
+
+
+export default Layer;

src/LayerImpl.tsx

@@ -0,0 +1,66 @@
+import { Component, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import { type LayerProps } from "./Layer";
+
+
+interface LayerImplProps extends LayerProps{
+    host: HTMLDivElement;
+    root: HTMLDivElement;
+}
+
+
+interface LayerImplState {
+    container: HTMLDivElement | null;
+}
+
+
+class LayerImpl extends Component<LayerImplProps, LayerImplState> {
+    constructor(props: LayerImplProps) {
+        super(props);
+
+        this.state = {
+            container: null
+        };
+    }
+
+    public componentDidMount(): void {
+        const { host, index, onMount, root } = this.props;
+        const container: HTMLDivElement = host.ownerDocument.createElement("div");
+        const sibling: Element | null = typeof index === "number" && host.children[index] ? host.children[index] : null;
+
+        if (sibling) {
+            host.insertBefore(container, sibling);
+        } else {
+            host.appendChild(container);
+        }
+
+        this.setState({container}, (): void => {
+            if (root && onMount) {
+                onMount(root);
+            }
+        });
+    }
+
+    public componentWillUnmount(): void {
+        const { container } = this.state;
+        const { root, host, onUnmount } = this.props;
+
+        if (root && onUnmount) {
+            onUnmount(root);
+        }
+
+        if (host && container) {
+            host.removeChild(container);
+        }
+    }
+
+    public render(): ReactNode {
+        const { container } = this.state;
+
+        return container && createPortal(this.props.children, container);
+    }
+}
+
+
+export default LayerImpl;

src/LayersManager.tsx

@@ -0,0 +1,50 @@
+import { type ReactNode, Component, type RefObject, createRef } from "react";
+
+import { Provider } from "./context";
+
+
+interface LayersManagerProps {
+    children?: ReactNode;
+}
+
+
+interface LayersManagerState {
+    root: HTMLDivElement | null;
+    host: HTMLDivElement | null;
+}
+
+
+class LayersManager extends Component<LayersManagerProps, LayersManagerState> {
+    private readonly root: RefObject<HTMLDivElement | null> = createRef<HTMLDivElement>();
+    private readonly host: RefObject<HTMLDivElement | null> = createRef<HTMLDivElement>();
+
+    constructor(props: LayersManagerProps) {
+        super(props);
+
+        this.state = {
+            root: this.root.current,
+            host: this.host.current,
+        };
+    }
+
+    public componentDidMount(): void {
+        this.setState({
+            root: this.root.current,
+            host: this.host.current,
+        });
+    }
+
+    public render(): ReactNode {
+        return (
+            <Provider value={this.state}>
+                <div ref={this.root} style={{ opacity: 0.9999999 }}>
+                    {this.props.children}
+                </div>
+                <div ref={this.host} style={{ opacity: 0.9999999 }} />
+            </Provider>
+        );
+    }
+}
+
+
+export default LayersManager;

src/context.ts

@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+
+export interface ContextValue {
+    root: HTMLDivElement | null;
+    host: HTMLDivElement | null;
+}
+
+
+export const { Provider, Consumer } = createContext<ContextValue>({
+    root: null,
+    host: null,
+});

tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "outDir": "./lib",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": [],
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true,
+
+    /* Bunder mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+  },
+  "include": ["src"]
+}