@k8o/arte-odyssey 1.2.0 → 1.3.0

package/dist/components/icon-button/icon-button.js

@@ -13,7 +13,7 @@ const IconButton = ({
     {
       "aria-label": props.role ? label : void 0,
       className: cn(
-        "inline-flex rounded-full bg-transparent",
+        "inline-flex cursor-pointer rounded-full bg-transparent",
         "hover:bg-bg-subtle",
         "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info active:bg-bg-emphasize",
         bg === "base" && "bg-bg-base/90",

package/dist/hooks/index.d.ts

@@ -4,7 +4,9 @@ export * from './clipboard';
 export * from './hash';
 export * from './interval';
 export * from './local-storage';
+export * from './resize';
 export * from './scroll-direction';
 export * from './step';
 export * from './timeout';
+export * from './window-resize';
 export * from './window-size';

package/dist/hooks/index.js

@@ -4,7 +4,9 @@ export * from "./clipboard";
 export * from "./hash";
 export * from "./interval";
 export * from "./local-storage";
+export * from "./resize";
 export * from "./scroll-direction";
 export * from "./step";
 export * from "./timeout";
+export * from "./window-resize";
 export * from "./window-size";

package/dist/hooks/resize/index.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+type Options = {
+    enabled?: boolean;
+    debounceMs?: number;
+};
+export declare const useResize: <T extends Element = HTMLElement>(callback: (entry: ResizeObserverEntry) => void, options?: Options) => RefObject<T | null>;
+export {};

package/dist/hooks/resize/index.js

@@ -0,0 +1,37 @@
+"use client";
+import { useEffect, useRef } from "react";
+const useResize = (callback, options = {}) => {
+  const { enabled = true, debounceMs } = options;
+  const ref = useRef(null);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const element = ref.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (debounceMs !== void 0) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
+          timeoutRef.current = setTimeout(() => {
+            callback(entry);
+          }, debounceMs);
+        } else {
+          callback(entry);
+        }
+      }
+    });
+    observer.observe(element);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      observer.disconnect();
+    };
+  }, [callback, enabled, debounceMs]);
+  return ref;
+};
+export {
+  useResize
+};

package/dist/hooks/resize/index.test.js

@@ -0,0 +1,68 @@
+import { renderHook } from "vitest-browser-react";
+import { useResize } from ".";
+describe("useResize", () => {
+  it("\u8981\u7D20\u306E\u30EA\u30B5\u30A4\u30BA\u6642\u306B\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u308B", async () => {
+    const callback = vi.fn();
+    const { result } = await renderHook(() => useResize(callback));
+    const element = document.createElement("div");
+    Object.defineProperty(result.current, "current", {
+      writable: true,
+      value: element
+    });
+    const observer = new ResizeObserver(callback);
+    observer.observe(element);
+    const contentRect = new DOMRectReadOnly(0, 0, 100, 100);
+    const entry = {
+      target: element,
+      contentRect,
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: []
+    };
+    callback(entry);
+    expect(callback).toHaveBeenCalled();
+    observer.disconnect();
+  });
+  it("enabled=false\u306E\u5834\u5408\u306F\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u306A\u3044", async () => {
+    const callback = vi.fn();
+    const { result } = await renderHook(
+      () => useResize(callback, { enabled: false })
+    );
+    expect(result.current.current).toBeNull();
+    expect(callback).not.toHaveBeenCalled();
+  });
+  it("debounceMs\u6307\u5B9A\u6642\u306F\u6307\u5B9A\u6642\u9593\u5F8C\u306B\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u308B", async () => {
+    vi.useFakeTimers();
+    const callback = vi.fn();
+    const { result } = await renderHook(
+      () => useResize(callback, { debounceMs: 300 })
+    );
+    const element = document.createElement("div");
+    Object.defineProperty(result.current, "current", {
+      writable: true,
+      value: element
+    });
+    const observer = new ResizeObserver((entries) => {
+      for (const entry2 of entries) {
+        callback(entry2);
+      }
+    });
+    observer.observe(element);
+    const contentRect = new DOMRectReadOnly(0, 0, 100, 100);
+    const entry = {
+      target: element,
+      contentRect,
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: []
+    };
+    callback(entry);
+    expect(callback).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(299);
+    expect(callback).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(1);
+    expect(callback).toHaveBeenCalledTimes(1);
+    observer.disconnect();
+    vi.useRealTimers();
+  });
+});

package/dist/hooks/window-resize/index.d.ts

@@ -0,0 +1,10 @@
+type Size = {
+    width: number;
+    height: number;
+};
+type Options = {
+    enabled?: boolean;
+    debounceMs?: number;
+};
+export declare const useWindowResize: (callback: (size: Size) => void, options?: Options) => void;
+export {};

package/dist/hooks/window-resize/index.js

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useRef } from "react";
+const useWindowResize = (callback, options = {}) => {
+  const { enabled = true, debounceMs } = options;
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const handleResize = () => {
+      const size = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+      if (debounceMs !== void 0) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+          callback(size);
+        }, debounceMs);
+      } else {
+        callback(size);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [callback, enabled, debounceMs]);
+};
+export {
+  useWindowResize
+};

package/dist/hooks/window-resize/index.test.js

@@ -0,0 +1,43 @@
+import { renderHook } from "vitest-browser-react";
+import { useWindowResize } from ".";
+describe("useWindowResize", () => {
+  it("window\u30EA\u30B5\u30A4\u30BA\u6642\u306B\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u308B", async () => {
+    const resizedWindowSize = { width: 1e3, height: 1e3 };
+    const callback = vi.fn();
+    const { act } = await renderHook(() => useWindowResize(callback));
+    expect(callback).not.toHaveBeenCalled();
+    window.innerWidth = resizedWindowSize.width;
+    window.innerHeight = resizedWindowSize.height;
+    act(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(callback).toHaveBeenCalledWith(resizedWindowSize);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+  it("enabled=false\u306E\u5834\u5408\u306F\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u306A\u3044", async () => {
+    const callback = vi.fn();
+    await renderHook(() => useWindowResize(callback, { enabled: false }));
+    expect(callback).not.toHaveBeenCalled();
+  });
+  it("debounceMs\u6307\u5B9A\u6642\u306F\u6307\u5B9A\u6642\u9593\u5F8C\u306B\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u308B", async () => {
+    vi.useFakeTimers();
+    const resizedWindowSize = { width: 1e3, height: 1e3 };
+    const callback = vi.fn();
+    const { act } = await renderHook(
+      () => useWindowResize(callback, { debounceMs: 300 })
+    );
+    expect(callback).not.toHaveBeenCalled();
+    window.innerWidth = resizedWindowSize.width;
+    window.innerHeight = resizedWindowSize.height;
+    act(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(callback).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(299);
+    expect(callback).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1);
+    expect(callback).toHaveBeenCalledWith(resizedWindowSize);
+    expect(callback).toHaveBeenCalledTimes(1);
+    vi.useRealTimers();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "k8o's react ui library",
   "author": "k8o <kosakanoki@gmail.com>",
   "keywords": [