@pyreon/hooks 0.11.0 → 0.11.2

package/src/__tests__/useElementSize.test.ts

@@ -0,0 +1,190 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+let mountCallbacks: Array<() => unknown> = []
+let unmountCallbacks: Array<() => void> = []
+
+vi.mock("@pyreon/core", () => ({
+  onMount: (fn: () => unknown) => {
+    mountCallbacks.push(fn)
+  },
+  onUnmount: (fn: () => void) => {
+    unmountCallbacks.push(fn)
+  },
+}))
+
+import { useElementSize } from "../useElementSize"
+
+describe("useElementSize", () => {
+  let resizeCallback: ((entries: ResizeObserverEntry[]) => void) | undefined
+  let observeSpy: ReturnType<typeof vi.fn>
+  let disconnectSpy: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    mountCallbacks = []
+    unmountCallbacks = []
+    resizeCallback = undefined
+    observeSpy = vi.fn()
+    disconnectSpy = vi.fn()
+
+    globalThis.ResizeObserver = vi.fn(function (this: unknown, cb: ResizeObserverCallback) {
+      resizeCallback = cb as (entries: ResizeObserverEntry[]) => void
+      return {
+        observe: observeSpy,
+        unobserve: vi.fn(),
+        disconnect: disconnectSpy,
+      }
+    }) as unknown as typeof ResizeObserver
+  })
+
+  it("returns initial size of 0x0", () => {
+    const size = useElementSize(() => null)
+    expect(size().width).toBe(0)
+    expect(size().height).toBe(0)
+  })
+
+  it("measures initial element size on mount", () => {
+    const el = document.createElement("div")
+    vi.spyOn(el, "getBoundingClientRect").mockReturnValue({
+      width: 200,
+      height: 100,
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      bottom: 100,
+      right: 200,
+      toJSON: () => {
+        /* no-op */
+      },
+    })
+
+    const size = useElementSize(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(size().width).toBe(200)
+    expect(size().height).toBe(100)
+  })
+
+  it("observes the element with ResizeObserver", () => {
+    const el = document.createElement("div")
+    vi.spyOn(el, "getBoundingClientRect").mockReturnValue({
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      toJSON: () => {
+        /* no-op */
+      },
+    })
+
+    useElementSize(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(observeSpy).toHaveBeenCalledWith(el)
+  })
+
+  it("updates size when ResizeObserver fires", () => {
+    const el = document.createElement("div")
+    vi.spyOn(el, "getBoundingClientRect").mockReturnValue({
+      width: 100,
+      height: 50,
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      bottom: 50,
+      right: 100,
+      toJSON: () => {
+        /* no-op */
+      },
+    })
+
+    const size = useElementSize(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    expect(size().width).toBe(100)
+
+    // Simulate resize
+    resizeCallback?.([
+      {
+        contentRect: { width: 300, height: 150 },
+      } as unknown as ResizeObserverEntry,
+    ])
+
+    expect(size().width).toBe(300)
+    expect(size().height).toBe(150)
+  })
+
+  it("does nothing on mount when element is null", () => {
+    useElementSize(() => null)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(observeSpy).not.toHaveBeenCalled()
+  })
+
+  it("disconnects ResizeObserver on unmount", () => {
+    const el = document.createElement("div")
+    vi.spyOn(el, "getBoundingClientRect").mockReturnValue({
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      toJSON: () => {
+        /* no-op */
+      },
+    })
+
+    useElementSize(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    unmountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(disconnectSpy).toHaveBeenCalled()
+  })
+
+  it("handles ResizeObserver callback with no entry", () => {
+    const el = document.createElement("div")
+    vi.spyOn(el, "getBoundingClientRect").mockReturnValue({
+      width: 50,
+      height: 25,
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      bottom: 25,
+      right: 50,
+      toJSON: () => {
+        /* no-op */
+      },
+    })
+
+    const size = useElementSize(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    // Empty entries array
+    resizeCallback?.([])
+    // Should keep initial measurement
+    expect(size().width).toBe(50)
+    expect(size().height).toBe(25)
+  })
+})

package/src/__tests__/useFocus.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest"
+import { useFocus } from "../useFocus"
+
+describe("useFocus", () => {
+  it("initializes with focused=false", () => {
+    const { focused } = useFocus()
+    expect(focused()).toBe(false)
+  })
+
+  it("sets focused to true on focus", () => {
+    const { focused, props } = useFocus()
+    props.onFocus()
+    expect(focused()).toBe(true)
+  })
+
+  it("sets focused to false on blur", () => {
+    const { focused, props } = useFocus()
+    props.onFocus()
+    expect(focused()).toBe(true)
+    props.onBlur()
+    expect(focused()).toBe(false)
+  })
+
+  it("toggles focus state through multiple cycles", () => {
+    const { focused, props } = useFocus()
+    props.onFocus()
+    expect(focused()).toBe(true)
+    props.onBlur()
+    expect(focused()).toBe(false)
+    props.onFocus()
+    expect(focused()).toBe(true)
+  })
+
+  it("calling blur when not focused is safe", () => {
+    const { focused, props } = useFocus()
+    props.onBlur()
+    expect(focused()).toBe(false)
+  })
+
+  it("calling focus multiple times stays true", () => {
+    const { focused, props } = useFocus()
+    props.onFocus()
+    props.onFocus()
+    expect(focused()).toBe(true)
+  })
+
+  it("returns props object with onFocus and onBlur", () => {
+    const { props } = useFocus()
+    expect(typeof props.onFocus).toBe("function")
+    expect(typeof props.onBlur).toBe("function")
+  })
+})

package/src/__tests__/useFocusTrap.test.ts

@@ -0,0 +1,162 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+let mountCallbacks: Array<() => void> = []
+let unmountCallbacks: Array<() => void> = []
+
+vi.mock("@pyreon/core", () => ({
+  onMount: (fn: () => unknown) => {
+    mountCallbacks.push(fn as () => void)
+  },
+  onUnmount: (fn: () => void) => {
+    unmountCallbacks.push(fn)
+  },
+}))
+
+import { useFocusTrap } from "../useFocusTrap"
+
+describe("useFocusTrap", () => {
+  let container: HTMLDivElement
+  let btn1: HTMLButtonElement
+  let btn2: HTMLButtonElement
+  let btn3: HTMLButtonElement
+
+  beforeEach(() => {
+    mountCallbacks = []
+    unmountCallbacks = []
+    container = document.createElement("div")
+    btn1 = document.createElement("button")
+    btn2 = document.createElement("button")
+    btn3 = document.createElement("button")
+    container.append(btn1, btn2, btn3)
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    document.body.removeChild(container)
+  })
+
+  it("wraps focus from last to first on Tab", () => {
+    useFocusTrap(() => container)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    btn3.focus()
+    const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true })
+    const prevented = vi.spyOn(event, "preventDefault")
+    document.dispatchEvent(event)
+
+    expect(prevented).toHaveBeenCalled()
+    expect(document.activeElement).toBe(btn1)
+  })
+
+  it("wraps focus from first to last on Shift+Tab", () => {
+    useFocusTrap(() => container)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    btn1.focus()
+    const event = new KeyboardEvent("keydown", {
+      key: "Tab",
+      shiftKey: true,
+      bubbles: true,
+    })
+    const prevented = vi.spyOn(event, "preventDefault")
+    document.dispatchEvent(event)
+
+    expect(prevented).toHaveBeenCalled()
+    expect(document.activeElement).toBe(btn3)
+  })
+
+  it("does not wrap when Tab on middle element", () => {
+    useFocusTrap(() => container)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    btn2.focus()
+    const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true })
+    const prevented = vi.spyOn(event, "preventDefault")
+    document.dispatchEvent(event)
+
+    expect(prevented).not.toHaveBeenCalled()
+  })
+
+  it("ignores non-Tab keys", () => {
+    useFocusTrap(() => container)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    btn3.focus()
+    const event = new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+    const prevented = vi.spyOn(event, "preventDefault")
+    document.dispatchEvent(event)
+
+    expect(prevented).not.toHaveBeenCalled()
+  })
+
+  it("does nothing when element is null", () => {
+    useFocusTrap(() => null)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true })
+    const prevented = vi.spyOn(event, "preventDefault")
+    document.dispatchEvent(event)
+
+    expect(prevented).not.toHaveBeenCalled()
+  })
+
+  it("does nothing when container has no focusable children", () => {
+    const emptyContainer = document.createElement("div")
+    emptyContainer.appendChild(document.createElement("div"))
+    document.body.appendChild(emptyContainer)
+
+    useFocusTrap(() => emptyContainer)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true })
+    const prevented = vi.spyOn(event, "preventDefault")
+    document.dispatchEvent(event)
+
+    expect(prevented).not.toHaveBeenCalled()
+    document.body.removeChild(emptyContainer)
+  })
+
+  it("cleans up event listener on unmount", () => {
+    const removeSpy = vi.spyOn(document, "removeEventListener")
+    useFocusTrap(() => container)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    unmountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(removeSpy).toHaveBeenCalledWith("keydown", expect.any(Function))
+    removeSpy.mockRestore()
+  })
+
+  it("does not prevent default when Shift+Tab on non-first element", () => {
+    useFocusTrap(() => container)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    btn2.focus()
+    const event = new KeyboardEvent("keydown", {
+      key: "Tab",
+      shiftKey: true,
+      bubbles: true,
+    })
+    const prevented = vi.spyOn(event, "preventDefault")
+    document.dispatchEvent(event)
+
+    expect(prevented).not.toHaveBeenCalled()
+  })
+})

package/src/__tests__/useHover.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest"
+import { useHover } from "../useHover"
+
+describe("useHover", () => {
+  it("initializes with hovered=false", () => {
+    const { hovered } = useHover()
+    expect(hovered()).toBe(false)
+  })
+
+  it("sets hovered to true on mouseEnter", () => {
+    const { hovered, props } = useHover()
+    props.onMouseEnter()
+    expect(hovered()).toBe(true)
+  })
+
+  it("sets hovered to false on mouseLeave", () => {
+    const { hovered, props } = useHover()
+    props.onMouseEnter()
+    expect(hovered()).toBe(true)
+    props.onMouseLeave()
+    expect(hovered()).toBe(false)
+  })
+
+  it("toggles hover state correctly through multiple cycles", () => {
+    const { hovered, props } = useHover()
+    props.onMouseEnter()
+    expect(hovered()).toBe(true)
+    props.onMouseLeave()
+    expect(hovered()).toBe(false)
+    props.onMouseEnter()
+    expect(hovered()).toBe(true)
+    props.onMouseLeave()
+    expect(hovered()).toBe(false)
+  })
+
+  it("calling mouseLeave when already not hovered is safe", () => {
+    const { hovered, props } = useHover()
+    props.onMouseLeave()
+    expect(hovered()).toBe(false)
+  })
+
+  it("calling mouseEnter multiple times stays true", () => {
+    const { hovered, props } = useHover()
+    props.onMouseEnter()
+    props.onMouseEnter()
+    expect(hovered()).toBe(true)
+  })
+
+  it("returns props object with onMouseEnter and onMouseLeave", () => {
+    const { props } = useHover()
+    expect(typeof props.onMouseEnter).toBe("function")
+    expect(typeof props.onMouseLeave).toBe("function")
+  })
+
+  it("returns stable handler references", () => {
+    const { props } = useHover()
+    const enter = props.onMouseEnter
+    const leave = props.onMouseLeave
+    expect(props.onMouseEnter).toBe(enter)
+    expect(props.onMouseLeave).toBe(leave)
+  })
+})

package/src/__tests__/useIntersection.test.ts

@@ -0,0 +1,154 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+let mountCallbacks: Array<() => unknown> = []
+let unmountCallbacks: Array<() => void> = []
+
+vi.mock("@pyreon/core", () => ({
+  onMount: (fn: () => unknown) => {
+    mountCallbacks.push(fn)
+  },
+  onUnmount: (fn: () => void) => {
+    unmountCallbacks.push(fn)
+  },
+}))
+
+import { useIntersection } from "../useIntersection"
+
+describe("useIntersection", () => {
+  let intersectionCallback: ((entries: IntersectionObserverEntry[]) => void) | undefined
+  let observeSpy: ReturnType<typeof vi.fn>
+  let disconnectSpy: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    mountCallbacks = []
+    unmountCallbacks = []
+    intersectionCallback = undefined
+    observeSpy = vi.fn()
+    disconnectSpy = vi.fn()
+
+    globalThis.IntersectionObserver = vi.fn(function (
+      this: unknown,
+      cb: IntersectionObserverCallback,
+      options?: IntersectionObserverInit,
+    ) {
+      intersectionCallback = cb as (entries: IntersectionObserverEntry[]) => void
+      return {
+        observe: observeSpy,
+        unobserve: vi.fn(),
+        disconnect: disconnectSpy,
+        root: options?.root ?? null,
+        rootMargin: options?.rootMargin ?? "0px",
+        thresholds: Array.isArray(options?.threshold)
+          ? options.threshold
+          : [options?.threshold ?? 0],
+        takeRecords: vi.fn(() => []),
+      }
+    }) as unknown as typeof IntersectionObserver
+  })
+
+  it("returns null initially", () => {
+    const entry = useIntersection(() => null)
+    expect(entry()).toBeNull()
+  })
+
+  it("observes the element on mount", () => {
+    const el = document.createElement("div")
+    useIntersection(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(observeSpy).toHaveBeenCalledWith(el)
+  })
+
+  it("does not observe when element is null", () => {
+    useIntersection(() => null)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(observeSpy).not.toHaveBeenCalled()
+  })
+
+  it("updates entry when intersection changes", () => {
+    const el = document.createElement("div")
+    const entrySignal = useIntersection(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    const mockEntry = {
+      isIntersecting: true,
+      intersectionRatio: 0.5,
+      target: el,
+      boundingClientRect: el.getBoundingClientRect(),
+      intersectionRect: el.getBoundingClientRect(),
+      rootBounds: null,
+      time: Date.now(),
+    } as unknown as IntersectionObserverEntry
+
+    intersectionCallback?.([mockEntry])
+    expect(entrySignal()).toBe(mockEntry)
+    expect(entrySignal()?.isIntersecting).toBe(true)
+  })
+
+  it("passes options to IntersectionObserver", () => {
+    const el = document.createElement("div")
+    const options = { threshold: 0.5, rootMargin: "10px" }
+    useIntersection(() => el, options)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(IntersectionObserver).toHaveBeenCalledWith(expect.any(Function), options)
+  })
+
+  it("disconnects observer on unmount", () => {
+    const el = document.createElement("div")
+    useIntersection(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+    unmountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    expect(disconnectSpy).toHaveBeenCalled()
+  })
+
+  it("does not crash when callback has empty entries", () => {
+    const el = document.createElement("div")
+    const entrySignal = useIntersection(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    // Empty entries - e is undefined, so entry.set should not be called
+    intersectionCallback?.([])
+    expect(entrySignal()).toBeNull()
+  })
+
+  it("updates to latest entry on subsequent intersections", () => {
+    const el = document.createElement("div")
+    const entrySignal = useIntersection(() => el)
+    mountCallbacks.forEach((cb) => {
+      cb()
+    })
+
+    const entry1 = {
+      isIntersecting: true,
+      intersectionRatio: 0.3,
+    } as unknown as IntersectionObserverEntry
+
+    const entry2 = {
+      isIntersecting: false,
+      intersectionRatio: 0,
+    } as unknown as IntersectionObserverEntry
+
+    intersectionCallback?.([entry1])
+    expect(entrySignal()).toBe(entry1)
+
+    intersectionCallback?.([entry2])
+    expect(entrySignal()).toBe(entry2)
+  })
+})

package/src/__tests__/useInterval.test.ts

@@ -0,0 +1,48 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { useInterval } from "../useInterval"
+
+// Mock onUnmount since it requires component lifecycle context
+vi.mock("@pyreon/core", () => ({
+  onMount: (fn: () => void) => fn(),
+  onUnmount: (_fn: () => void) => {
+    /* no-op */
+  },
+}))
+
+describe("useInterval", () => {
+  beforeEach(() => vi.useFakeTimers())
+  afterEach(() => vi.useRealTimers())
+
+  it("calls callback at the specified interval", () => {
+    const fn = vi.fn()
+    useInterval(fn, 100)
+
+    vi.advanceTimersByTime(100)
+    expect(fn).toHaveBeenCalledTimes(1)
+
+    vi.advanceTimersByTime(100)
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
+  it("does not call callback when delay is null", () => {
+    const fn = vi.fn()
+    useInterval(fn, null)
+
+    vi.advanceTimersByTime(1000)
+    expect(fn).not.toHaveBeenCalled()
+  })
+
+  it("calls the latest callback", () => {
+    let value = 0
+    let currentCb = () => {
+      value = 1
+    }
+    useInterval(() => currentCb(), 100)
+
+    currentCb = () => {
+      value = 2
+    }
+    vi.advanceTimersByTime(100)
+    expect(value).toBe(2)
+  })
+})

package/src/__tests__/useIsomorphicLayoutEffect.test.ts

@@ -0,0 +1,9 @@
+import { onMount } from "@pyreon/core"
+import { describe, expect, it } from "vitest"
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect"
+
+describe("useIsomorphicLayoutEffect", () => {
+  it("is onMount in a browser environment", () => {
+    expect(useIsomorphicLayoutEffect).toBe(onMount)
+  })
+})