custome-modal 1.0.10 → 1.0.11

package/README.md

@@ -1,6 +1,6 @@
 # Custom Modal
 
-Lightweight modal component for React. Focused on rendering any React children, with simple API and optional imperative control.
+Lightweight modal component for React. Make you own modal component with your favorite css framework or style (TailwindCSS) or without any framework.
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "custome-modal",
-    "version": "1.0.10",
+    "version": "1.0.11",
     "description": "Custom modal component for react",
     "type": "module",
     "main": "./src/index.js",
@@ -12,12 +12,12 @@
             "default": "./src/index.js"
         },
         "./react": {
-            "types": "./src/react-modal.d.ts",
-            "default": "./src/react-modal.js"
+            "types": "./src/react/modal.d.ts",
+            "default": "./src/react/modal.js"
         }
     },
     "publishConfig": {
-        "@firstzxd:registry": "https://npm.pkg.github.com"
+        "registry": "https://registry.npmjs.org"
     },
     "repository": {
         "url": "https://github.com/First1zaza/CustomeModal.git"

package/src/custom-modal.js

@@ -1,244 +1,228 @@
-const template = document.createElement("template");
-
-template.innerHTML = `
-  <style>
-    :host {
-      --cm-overlay-bg: rgba(0, 0, 0, 0.55);
-      --cm-bg: #ffffff;
-      --cm-text: #1a1a1a;
-      --cm-radius: 16px;
-      --cm-width: 720px;
-      --cm-max-width: 92vw;
-      --cm-max-height: 85vh;
-      --cm-padding: 12px;
-      --cm-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
-      --cm-z-index: 1000;
-      --cm-anim-duration: 180ms;
-      --cm-align-items: center;
-      --cm-justify-content: center;
-
-      display: none;
-      position: fixed;
-      inset: 0;
-      z-index: var(--cm-z-index);
-      font: inherit;
-      color: var(--cm-text);
-    }
-
-    :host([open]) {
-      display: block;
-    }
-
-    .overlay {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: var(--cm-align-items);
-      justify-content: var(--cm-justify-content);
-      padding: var(--cm-padding);
-      background: var(--cm-overlay-bg);
-      opacity: 0;
-      transition: opacity var(--cm-anim-duration) ease;
-    }
-
-    :host([open]) .overlay {
-      opacity: 1;
-    }
-
-    .dialog {
-      position: relative;
-      width: var(--cm-width);
-      max-width: var(--cm-max-width);
-      max-height: var(--cm-max-height);
-      overflow: auto;
-      background: var(--cm-bg);
-      border-radius: var(--cm-radius);
-      box-shadow: var(--cm-shadow);
-      transform: translateY(10px) scale(0.98);
-      opacity: 0;
-      transition: transform var(--cm-anim-duration) ease, opacity var(--cm-anim-duration) ease;
-      outline: none;
-    }
-
-    :host([open]) .dialog {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-  </style>
-
-  <div class="overlay" part="overlay">
-    <div class="dialog" part="dialog" role="dialog" aria-modal="true" tabindex="-1">
-      <slot></slot>
-    </div>
-  </div>
-`;
-
-class CustomModal extends HTMLElement {
-  static get observedAttributes() {
-    return ["open", "width", "align", "justify", "dismiss-on-backdrop"];
-  }
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-    this._overlayEl = this.shadowRoot.querySelector(".overlay");
-    this._dialogEl = this.shadowRoot.querySelector(".dialog");
-
-    this._handleOverlayClick = this._handleOverlayClick.bind(this);
-  }
-
-  connectedCallback() {
-    this._upgradeProperty("open");
-    this._upgradeProperty("width");
-    this._upgradeProperty("align");
-    this._upgradeProperty("justify");
-    this._upgradeProperty("dismissOnBackdrop");
-
-    this._overlayEl.addEventListener("click", this._handleOverlayClick);
-    this._syncLayout();
-  }
-
-  disconnectedCallback() {
-    this._overlayEl.removeEventListener("click", this._handleOverlayClick);
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) {
-      return;
-    }
-
-    if (name === "open") {
-      if (this.open) {
-        this._onOpen();
-      } else {
-        this._onClose();
-      }
-      return;
-    }
-
-    if (name === "width" || name === "align" || name === "justify") {
-      this._syncLayout();
-    }
-  }
-
-  get open() {
-    return this.hasAttribute("open");
-  }
-
-  set open(value) {
-    if (value) {
-      this.setAttribute("open", "");
-    } else {
-      this.removeAttribute("open");
-    }
-  }
-
-  openModal() {
-    this.open = true;
-  }
-
-  closeModal() {
-    this.open = false;
-  }
-
-  get dismissOnBackdrop() {
-    return !this._isFalseAttr("dismiss-on-backdrop");
-  }
-
-  set dismissOnBackdrop(value) {
-    if (value === false) {
-      this.setAttribute("dismiss-on-backdrop", "false");
-    } else {
-      this.removeAttribute("dismiss-on-backdrop");
-    }
-  }
-
-  _upgradeProperty(prop) {
-    if (Object.prototype.hasOwnProperty.call(this, prop)) {
-      const value = this[prop];
-      delete this[prop];
-      this[prop] = value;
-    }
-  }
-
-  _isFalseAttr(name) {
-    const attr = this.getAttribute(name);
-    return attr !== null && attr.toLowerCase() === "false";
-  }
-
-  _handleOverlayClick(event) {
-    if (event.target !== this._overlayEl) {
-      return;
-    }
-    if (this.dismissOnBackdrop) {
-      this.closeModal();
-    }
-  }
-
-  _onOpen() {
-    this._lastActive = document.activeElement;
-    this.dispatchEvent(new CustomEvent("modal-opened", { bubbles: true }));
-
-    window.requestAnimationFrame(() => {
-      this._dialogEl.focus();
-    });
-  }
-
-  _onClose() {
-    this.dispatchEvent(new CustomEvent("modal-closed", { bubbles: true }));
-
-    if (this._lastActive && typeof this._lastActive.focus === "function") {
-      this._lastActive.focus();
-    }
-  }
-
-  _syncLayout() {
-    const align = (this.getAttribute("align") || "center").toLowerCase();
-    const justify = (this.getAttribute("justify") || "center").toLowerCase();
-    const width = (this.getAttribute("width") || "lg").toLowerCase();
-
-    const alignMap = {
-      left: "flex-start",
-      center: "center",
-      right: "flex-end"
-    };
-
-    const justifyMap = {
-      top: "flex-start",
-      center: "center",
-      bottom: "flex-end"
-    };
-
-    const widthMap = {
-      sm: "300px",
-      md: "500px",
-      lg: "720px",
-      xl: "960px",
-      "2xl": "1140px",
-      "3xl": "1280px",
-      "4xl": "1440px",
-      "5xl": "1600px"
-    };
-
-    const widthValue = widthMap[width] || width;
-    this.style.setProperty("--cm-align-items", alignMap[align] || "center");
-    this.style.setProperty("--cm-justify-content", justifyMap[justify] || "center");
-    this.style.setProperty("--cm-width", this._formatWidth(widthValue));
-  }
-
-  _formatWidth(value) {
-    if (!value) {
-      return "720px";
-    }
-    if (/^\d+$/.test(value)) {
-      return `${value}px`;
-    }
-    return value;
-  }
-}
-
-customElements.define("custom-modal", CustomModal);
-
-export { CustomModal };
+const template = document.createElement("template");
+
+template.innerHTML = `
+  <style>
+    :host {
+      --cm-overlay-bg: rgba(0, 0, 0, 0.5);
+      --cm-width: 720px;
+      --cm-max-width: 92vw;
+      --cm-max-height: 90vh;
+      --cm-align-items: center;
+      --cm-justify-content: center;
+      --cm-z-index: 1000;
+
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: var(--cm-z-index);
+      font: inherit;
+    }
+
+    :host([open]) {
+      display: flex;
+      align-items: var(--cm-align-items);
+      justify-content: var(--cm-justify-content);
+      padding: 12px;
+    }
+
+    .overlay {
+      position: absolute;
+      inset: 0;
+      background: var(--cm-overlay-bg);
+    }
+
+    .dialog {
+      position: relative;
+      z-index: 1;
+      width: var(--cm-width);
+      max-width: var(--cm-max-width);
+      max-height: var(--cm-max-height);
+      overflow: auto;
+      outline: none;
+    }
+  </style>
+
+  <div class="overlay" part="overlay"></div>
+  <div class="dialog" part="dialog" role="dialog" aria-modal="true" tabindex="-1">
+    <slot></slot>
+  </div>
+`;
+
+class CustomModal extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "width", "align", "justify", "dismiss-on-backdrop"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    this._overlayEl = this.shadowRoot.querySelector(".overlay");
+    this._dialogEl = this.shadowRoot.querySelector(".dialog");
+
+    this._handleOverlayClick = this._handleOverlayClick.bind(this);
+    this._handleKeyDown = this._handleKeyDown.bind(this);
+  }
+
+  connectedCallback() {
+    this._upgradeProperty("open");
+    this._upgradeProperty("width");
+    this._upgradeProperty("align");
+    this._upgradeProperty("justify");
+    this._upgradeProperty("dismissOnBackdrop");
+
+    this._overlayEl.addEventListener("click", this._handleOverlayClick);
+    this._syncLayout();
+  }
+
+  disconnectedCallback() {
+    this._overlayEl.removeEventListener("click", this._handleOverlayClick);
+    if (this._hasScrollLock) {
+      this._releaseScrollLock();
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    if (name === "open") {
+      if (this.hasAttribute("open")) {
+        this._onOpen();
+      } else {
+        this._onClose();
+      }
+      return;
+    }
+
+    if (name === "width" || name === "align" || name === "justify") {
+      this._syncLayout();
+    }
+  }
+
+  get open() {
+    return this.hasAttribute("open");
+  }
+
+  set open(value) {
+    if (value) {
+      this.setAttribute("open", "");
+    } else {
+      this.removeAttribute("open");
+    }
+  }
+
+  openModal() {
+    this.open = true;
+  }
+
+  closeModal() {
+    this.open = false;
+  }
+
+  get dismissOnBackdrop() {
+    return !this._isFalseAttr("dismiss-on-backdrop");
+  }
+
+  set dismissOnBackdrop(value) {
+    if (value === false) {
+      this.setAttribute("dismiss-on-backdrop", "false");
+    } else {
+      this.removeAttribute("dismiss-on-backdrop");
+    }
+  }
+
+  _upgradeProperty(prop) {
+    if (Object.prototype.hasOwnProperty.call(this, prop)) {
+      const value = this[prop];
+      delete this[prop];
+      this[prop] = value;
+    }
+  }
+
+  _isFalseAttr(name) {
+    const attr = this.getAttribute(name);
+    return attr !== null && attr.toLowerCase() === "false";
+  }
+
+  _handleOverlayClick() {
+    if (this.dismissOnBackdrop) {
+      this.closeModal();
+    }
+  }
+
+  _handleKeyDown(event) {
+    if (event.key === "Escape" && this.open) {
+      this.closeModal();
+    }
+  }
+
+  _acquireScrollLock() {
+    if (window._cmScrollLocks === undefined) {
+      window._cmScrollLocks = 0;
+    }
+    if (window._cmScrollLocks === 0) {
+      window._cmPrevOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    window._cmScrollLocks++;
+    this._hasScrollLock = true;
+  }
+
+  _releaseScrollLock() {
+    if (!this._hasScrollLock) return;
+    
+    window._cmScrollLocks--;
+    this._hasScrollLock = false;
+    
+    if (window._cmScrollLocks === 0 && window._cmPrevOverflow !== undefined) {
+      document.body.style.overflow = window._cmPrevOverflow;
+    }
+  }
+
+  _onOpen() {
+    this._lastActive = document.activeElement;
+    document.addEventListener("keydown", this._handleKeyDown);
+    this._acquireScrollLock();
+    
+    this.dispatchEvent(new CustomEvent("modal-opened", { bubbles: true }));
+
+    window.requestAnimationFrame(() => {
+      this._dialogEl.focus();
+    });
+  }
+
+  _onClose() {
+    document.removeEventListener("keydown", this._handleKeyDown);
+    this._releaseScrollLock();
+    
+    this.dispatchEvent(new CustomEvent("modal-closed", { bubbles: true }));
+
+    if (this._lastActive && typeof this._lastActive.focus === "function") {
+      this._lastActive.focus();
+    }
+  }
+
+  _syncLayout() {
+    const align = (this.getAttribute("align") || "center").toLowerCase();
+    const justify = (this.getAttribute("justify") || "center").toLowerCase();
+    const width = (this.getAttribute("width") || "lg").toLowerCase();
+
+    const alignMap = { left: "flex-start", center: "center", right: "flex-end" };
+    const justifyMap = { top: "flex-start", center: "center", bottom: "flex-end" };
+    const widthMap = {
+      sm: "300px", md: "500px", lg: "720px", xl: "960px",
+      "2xl": "1140px", "3xl": "1280px", "4xl": "1440px", "5xl": "1600px"
+    };
+
+    const widthValue = widthMap[width] || width || "720px";
+    
+    this.style.setProperty("--cm-align-items", alignMap[align] || "center");
+    this.style.setProperty("--cm-justify-content", justifyMap[justify] || "center");
+    this.style.setProperty("--cm-width", /^\d+$/.test(widthValue) ? `${widthValue}px` : widthValue);
+  }
+}
+
+customElements.define("custom-modal", CustomModal);
+
+export { CustomModal };

package/src/{react-modal.d.ts → react/modal.d.ts}

@@ -7,19 +7,19 @@ type Justify = "top" | "center" | "bottom";
 type Width = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | number | string;
 
 export type ModalProps = {
-  children?: ReactNode;
-  dismissOnBackdrop?: boolean;
-  align?: Align;
-  justify?: Justify;
-  width?: Width;
+    children?: ReactNode;
+    dismissOnBackdrop?: boolean;
+    align?: Align;
+    justify?: Justify;
+    width?: Width;
 };
 
 export function Modal(props: ModalProps): JSX.Element | null;
 
 export function useModal(options?: Partial<ModalProps>): {
-  open: boolean;
-  setOpen: (value: boolean) => void;
-  openModal: () => void;
-  closeModal: () => void;
-  Modal: (props: ModalProps) => JSX.Element | null;
+    open: boolean;
+    setOpen: (value: boolean) => void;
+    openModal: () => void;
+    closeModal: () => void;
+    Modal: (props: ModalProps) => JSX.Element | null;
 };

package/src/react/modal.js

@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState, createElement } from "react";
+import { createPortal } from "react-dom";
+
+const ALIGN_MAP = { left: "flex-start", center: "center", right: "flex-end" };
+const JUSTIFY_MAP = { top: "flex-start", center: "center", bottom: "flex-end" };
+const WIDTH_MAP = { 
+    sm: "300px", md: "500px", lg: "720px", xl: "960px", 
+    "2xl": "1140px", "3xl": "1280px", "4xl": "1440px", "5xl": "1600px" 
+};
+
+let scrollLocks = 0;
+let prevOverflow = "";
+
+export function Modal({
+    children,
+    dismissOnBackdrop = true,
+    align = "center",
+    justify = "center",
+    width = "lg",
+    _open = false,
+    _onClose
+}) {
+    useEffect(() => {
+        if (!_open) return;
+
+        if (scrollLocks === 0) {
+            prevOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        scrollLocks++;
+
+        const onEsc = (e) => e.key === "Escape" && _onClose?.();
+        document.addEventListener("keydown", onEsc);
+
+        return () => {
+            scrollLocks--;
+            if (scrollLocks === 0 && prevOverflow !== undefined) {
+                document.body.style.overflow = prevOverflow;
+            }
+            document.removeEventListener("keydown", onEsc);
+        };
+    }, [_open, _onClose]);
+
+    if (!_open) return null;
+
+    const alignItems = ALIGN_MAP[align] || "center";
+    const justifyContent = JUSTIFY_MAP[justify] || "center";
+    const widthValue = typeof width === "number" ? `${width}px` : (WIDTH_MAP[width] || width || "720px");
+
+    return createPortal(
+        createElement("div", {
+            style: {
+                position: "fixed", inset: 0, zIndex: 1000, display: "flex",
+                alignItems, justifyContent, padding: "12px"
+            }
+        },
+            createElement("div", {
+                style: { position: "absolute", inset: 0, background: "rgba(0, 0, 0, 0.5)" },
+                onClick: () => dismissOnBackdrop && _onClose?.()
+            }),
+            createElement("div", {
+                role: "dialog", "aria-modal": "true",
+                style: {
+                    position: "relative",
+                    width: widthValue, maxWidth: "92vw", maxHeight: "90vh", overflow: "auto"
+                },
+                onClick: (e) => e.stopPropagation()
+            }, children)
+        ),
+        document.body
+    );
+}
+
+export function useModal(options = {}) {
+    const [open, setOpen] = useState(false);
+    const close = () => setOpen(false);
+
+    const stateRef = useRef({ open, options });
+    stateRef.current = { open, options };
+
+    const modalSlotRef = useRef(null);
+    if (!modalSlotRef.current) {
+        modalSlotRef.current = function ModalSlot(props) {
+            const current = stateRef.current;
+            return createElement(Modal, {
+                _open: current.open,
+                _onClose: close,
+                ...current.options,
+                ...props
+            });
+        };
+        modalSlotRef.current.displayName = "ModalSlot";
+    }
+
+    return {
+        open,
+        setOpen,
+        openModal: () => setOpen(true),
+        closeModal: close,
+        Modal: modalSlotRef.current
+    };
+}

package/src/react-modal.js

@@ -1,216 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-const ALIGN_MAP = {
-    left: "flex-start",
-    center: "center",
-    right: "flex-end"
-};
-
-const JUSTIFY_MAP = {
-    top: "flex-start",
-    center: "center",
-    bottom: "flex-end"
-};
-
-const WIDTH_MAP = {
-    sm: "300px",
-    md: "500px",
-    lg: "720px",
-    xl: "960px",
-    "2xl": "1140px",
-    "3xl": "1280px",
-    "4xl": "1440px",
-    "5xl": "1600px"
-};
-
-let scrollLockCount = 0;
-
-function enableScrollLock() {
-    if (scrollLockCount === 0) {
-        const prevOverflow = document.body.style.overflow;
-        document.body.dataset.scrollLockPrev = prevOverflow || "auto";
-        document.body.style.overflow = "hidden";
-    }
-    scrollLockCount += 1;
-}
-
-function disableScrollLock() {
-    scrollLockCount = Math.max(0, scrollLockCount - 1);
-    if (scrollLockCount === 0) {
-        const prevOverflow = document.body.dataset.scrollLockPrev || "auto";
-        document.body.style.overflow = prevOverflow;
-        delete document.body.dataset.scrollLockPrev;
-    }
-}
-
-function Portal({ children, selector = "body" }) {
-    const container = useMemo(() => document.createElement("div"), []);
-
-    useEffect(() => {
-        let host = document.body;
-        if (typeof selector === "string" && selector.length > 0) {
-            try {
-                host = document.querySelector(selector) ?? document.body;
-            } catch {
-                host = document.body;
-            }
-        }
-
-        host.appendChild(container);
-
-        return () => {
-            if (host.contains(container)) {
-                host.removeChild(container);
-            }
-        };
-    }, [selector, container]);
-
-    return createPortal(children, container);
-}
-
-export function Modal({
-    children,
-    dismissOnBackdrop = true,
-    align = "center",
-    justify = "center",
-    width = "lg",
-    _open = false,
-    _onClose,
-    _lockScroll = true,
-    _closeOnEsc = true
-} = {}) {
-    const dialogRef = useRef(null);
-
-    useEffect(() => {
-        if (!_open || !_lockScroll) {
-            return undefined;
-        }
-        enableScrollLock();
-        return () => disableScrollLock();
-    }, [_open, _lockScroll]);
-
-    useEffect(() => {
-        if (!_open || !_closeOnEsc) {
-            return undefined;
-        }
-
-        function onKey(event) {
-            if (event.key === "Escape") {
-                _onClose?.();
-            }
-        }
-
-        document.addEventListener("keydown", onKey);
-        return () => document.removeEventListener("keydown", onKey);
-    }, [_open, _closeOnEsc, _onClose]);
-
-
-    if (!_open) {
-        return null;
-    }
-
-    const alignItems = ALIGN_MAP[align] || "center";
-    const justifyContent = JUSTIFY_MAP[justify] || "center";
-    const widthValue = typeof width === "number" ? `${width}px` : (WIDTH_MAP[width] || width);
-
-    const safeContainerStyle = {
-        position: "fixed",
-        inset: 0,
-        zIndex: 1000,
-        display: "flex",
-        alignItems,
-        justifyContent,
-        padding: "12px"
-    };
-
-    const safeOverlayStyle = {
-        position: "absolute",
-        inset: 0,
-        background: "rgba(0, 0, 0, 0.5)"
-    };
-
-    const safeDialogStyle = {
-        position: "relative",
-        zIndex: 1,
-        background: "#ffffff",
-        borderRadius: "12px",
-        boxShadow: "0 20px 60px rgba(0, 0, 0, 0.2)",
-        width: widthValue || "720px",
-        maxWidth: "92vw",
-        maxHeight: "85vh",
-        overflow: "auto"
-    };
-
-    return React.createElement(
-        Portal,
-        { selector: "body" },
-        React.createElement(
-            "div",
-            {
-                className: "",
-                style: safeContainerStyle
-            },
-            React.createElement("div", {
-                className: "",
-                style: safeOverlayStyle,
-                onClick: () => dismissOnBackdrop && _onClose?.()
-            }),
-            React.createElement(
-                "div",
-                {
-                    ref: dialogRef,
-                    role: "dialog",
-                    "aria-modal": "true",
-                    className: "",
-                    style: safeDialogStyle,
-                    onClick: (event) => event.stopPropagation()
-                },
-                children
-            )
-        )
-    );
-}
-
-export function useModal(options = {}) {
-    const [open, setOpen] = useState(false);
-
-    const openModal = () => setOpen(true);
-    const closeModal = () => setOpen(false);
-
-    const stateRef = useRef({
-        open,
-        closeModal,
-        options
-    });
-
-    stateRef.current = {
-        open,
-        closeModal,
-        options
-    };
-
-    const modalSlotRef = useRef(null);
-    if (!modalSlotRef.current) {
-        modalSlotRef.current = function ModalSlot(props) {
-            const current = stateRef.current;
-            return React.createElement(Modal, {
-                _open: current.open,
-                _onClose: current.closeModal,
-                _lockScroll: true,
-                _closeOnEsc: true,
-                ...current.options,
-                ...props
-            });
-        };
-        modalSlotRef.current.displayName = "ModalSlot";
-    }
-
-    return {
-        open,
-        setOpen,
-        openModal,
-        closeModal,
-        Modal: modalSlotRef.current
-    };
-}