fix: Modal island fixed for ProductImageZoom

components/product/Gallery/ImageSlider.tsx

@@ -60,22 +60,6 @@ export default function GallerySlider(props: Props) {
           ))}
         </Slider>
 
-        {
-          /* <Slider.PrevButton
-          class="no-animation absolute left-2 top-1/2 btn btn-circle btn-outline"
-          disabled
-        >
-          <Icon size={24} id="ChevronLeft" strokeWidth={3} />
-        </Slider.PrevButton>
-
-        <Slider.NextButton
-          class="no-animation absolute right-2 top-1/2 btn btn-circle btn-outline"
-          disabled={images.length < 2}
-        >
-          <Icon size={24} id="ChevronRight" strokeWidth={3} />
-        </Slider.NextButton> */
-        }
-
         <div class="absolute bottom-2 right-2 bg-base-100 rounded-full">
           <ProductImageZoom
             images={images}

components/ui/Modal.tsx

@@ -1,43 +1,55 @@
-import { useScript } from "deco/hooks/useScript.ts";
+import { useId } from "$store/sdk/useId.ts";
+import { useSignal } from "@preact/signals";
 import { ComponentChildren } from "preact";
-import { useId } from "../../sdk/useId.ts";
+import { useEffect } from "preact/hooks";
 
 interface Props {
+  onClose?: () => void;
   open?: boolean;
+  class?: string;
+  style?: string;
   children?: ComponentChildren;
-  id?: string;
+  loading?: "eager" | "lazy";
 }
 
-const script = (id: string) => {
-  const handler = (e: KeyboardEvent) => {
-    if (e.key !== "Escape" && e.keyCode !== 27) {
-      return;
-    }
+function Modal(props: Props) {
+  const {
+    children,
+    open,
+    onClose,
+    loading = "lazy",
+  } = props;
+  const lazy = useSignal(loading === "lazy" && !open);
+  const id = useId();
 
-    const input = document.getElementById(id) as HTMLInputElement | null;
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) =>
+      (e.key === "Escape" || e.keyCode === 27) && open && onClose?.();
 
-    if (!input) {
-      return;
-    }
+    addEventListener("keydown", handler);
 
-    input.checked = false;
-  };
+    return () => {
+      removeEventListener("keydown", handler);
+    };
+  }, [open]);
 
-  addEventListener("keydown", handler);
-};
+  useEffect(() => {
+    lazy.value = false;
+  }, []);
 
-function Modal({ children, open, id = useId() }: Props) {
   return (
     <>
-      <input id={id} checked={open} type="checkbox" class="modal-toggle" />
+      <input
+        id={id}
+        checked={open}
+        type="checkbox"
+        class="modal-toggle"
+        onChange={(e) => e.currentTarget.checked === false && onClose?.()}
+      />
       <div class="modal">
-        {children}
+        {!lazy.value && children}
         <label class="modal-backdrop" for={id}>Close</label>
       </div>
-      <script
-        type="module"
-        dangerouslySetInnerHTML={{ __html: useScript(script, id) }}
-      />
     </>
   );
 }