@boxcustodia/library 2.0.0-alpha.18 → 2.0.0-alpha.19

package/src/hooks/{useRangePagination/__test__/useRangePagination.test.tsx → use-range-pagination/use-range-pagination.test.tsx}

@@ -1,6 +1,6 @@
 import { renderHook } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import useRangePagination, { DOTS } from "../useRangePagination";
+import { useRangePagination, DOTS } from "../use-range-pagination";
 
 describe("usePagination hook", () => {
   it("should be defined", () => {

package/src/hooks/{useRangePagination/useRangePagination.tsx → use-range-pagination/use-range-pagination.tsx}

@@ -1,5 +1,7 @@
-import { range } from "lodash";
 import { useMemo } from "react";
+
+const range = (start: number, end: number): number[] =>
+  Array.from({ length: end - start }, (_, i) => i + start);
 import { usePagination, type usePaginationProps } from "../../hooks";
 
 export const DOTS = "...";
@@ -11,7 +13,7 @@ export type useRangePaginationProps = {
   siblingCount?: number;
 } & usePaginationProps;
 
-const useRangePagination = ({
+export const useRangePagination = ({
   siblingCount = 1,
   ...paginationProps
 }: useRangePaginationProps) => {
@@ -69,4 +71,3 @@ const useRangePagination = ({
   };
 };
 
-export default useRangePagination;

package/src/hooks/use-selection/index.ts

@@ -0,0 +1 @@
+export * from "./use-selection";

package/src/hooks/{useSelection/__doc__/useSelection.stories.tsx → use-selection/use-selection.stories.tsx}

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react-vite";
 import { Trash } from "lucide-react";
 import { useMemo, useState } from "react";
-import { Button, Checkbox } from "../../../components";
-import { cn } from "../../../lib";
-import useSelection from "../useSelection";
+import { Button, Checkbox } from "../../components";
+import { cn } from "../../lib";
+import { useSelection } from "../use-selection";
 
 /**
  * Gestión de la selección de elementos en una lista.

package/src/hooks/use-selection/use-selection.test.tsx

@@ -0,0 +1,79 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useSelection } from "../use-selection";
+
+describe("useSelection hook", () => {
+  it("initial state: isAllSelected=false, isNoneSelected=true", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    expect(result.current.isAllSelected).toBe(false);
+    expect(result.current.isNoneSelected).toBe(true);
+    expect(result.current.isSomeSelected).toBe(false);
+  });
+
+  it("select adds item to selected array", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.select(2));
+    expect(result.current.isSelected(2)).toBe(true);
+    expect(result.current.selected).toEqual([2]);
+  });
+
+  it("unselect removes item from selection", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.select(2));
+    expect(result.current.isSelected(2)).toBe(true);
+    act(() => result.current.unselect(2));
+    expect(result.current.isSelected(2)).toBe(false);
+    expect(result.current.selected).toEqual([]);
+  });
+
+  it("toggle adds unselected item", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.toggle(1));
+    expect(result.current.isSelected(1)).toBe(true);
+  });
+
+  it("toggle removes already-selected item", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.select(1));
+    act(() => result.current.toggle(1));
+    expect(result.current.isSelected(1)).toBe(false);
+  });
+
+  it("setSelected replaces selection with given items", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.setSelected([1, 3]));
+    expect(result.current.isSelected(1)).toBe(true);
+    expect(result.current.isSelected(2)).toBe(false);
+    expect(result.current.isSelected(3)).toBe(true);
+  });
+
+  it("toggleAll selects all when none selected", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.toggleAll());
+    expect(result.current.isAllSelected).toBe(true);
+    expect(result.current.isNoneSelected).toBe(false);
+  });
+
+  it("toggleAll deselects all when all selected", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.toggleAll());
+    act(() => result.current.toggleAll());
+    expect(result.current.isAllSelected).toBe(false);
+    expect(result.current.isNoneSelected).toBe(true);
+  });
+
+  it("isSomeSelected is true when partial selection", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.select(1));
+    expect(result.current.isSomeSelected).toBe(true);
+    expect(result.current.isAllSelected).toBe(false);
+  });
+
+  it("clear removes all selections", () => {
+    const { result } = renderHook(() => useSelection([1, 2, 3]));
+    act(() => result.current.toggleAll());
+    act(() => result.current.clear());
+    expect(result.current.isNoneSelected).toBe(true);
+    expect(result.current.selected).toEqual([]);
+  });
+});

package/src/hooks/{useSelection/useSelection.ts → use-selection/use-selection.ts}

@@ -62,7 +62,7 @@ type Return<T> = {
    */
   clear: () => void;
 };
-function useSelection<T>(items: T[]): Return<T> {
+export function useSelection<T>(items: T[]): Return<T> {
   const [selected, setSelected] = useState(new Set<T>());
 
   const isSelected = useCallback((item: T) => selected.has(item), [selected]);
@@ -118,4 +118,3 @@ function useSelection<T>(items: T[]): Return<T> {
   };
 }
 
-export default useSelection;

package/src/hooks/use-step/index.ts

@@ -0,0 +1 @@
+export * from "./use-step";

package/src/hooks/{useStep/__doc__/useStep.stories.tsx → use-step/use-step.stories.tsx}

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react-vite";
-import { Button } from "../../../components";
-import { cn } from "../../../lib";
-import useStep from "../useStep";
+import { Button } from "../../components";
+import { cn } from "../../lib";
+import { useStep } from "../use-step";
 
 /**
  * Hook que recibe un array de elementos `T` y facita el manejo de vistas/formularios con múltiples pasos

package/src/hooks/use-step/use-step.test.ts

@@ -0,0 +1,73 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useStep } from "../../hooks";
+
+describe("useStep hook", () => {
+  const steps = ["step1", "step2", "step3"];
+
+  it("starts at index 0 with isFirstStep=true", () => {
+    const { result } = renderHook(() => useStep(steps));
+    expect(result.current.currentStepIndex).toBe(0);
+    expect(result.current.step).toBe("step1");
+    expect(result.current.isFirstStep).toBe(true);
+    expect(result.current.isLastStep).toBe(false);
+    expect(result.current.steps).toBe(steps);
+  });
+
+  it("next advances to next step", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.next());
+    expect(result.current.currentStepIndex).toBe(1);
+    expect(result.current.step).toBe("step2");
+    expect(result.current.isFirstStep).toBe(false);
+  });
+
+  it("back returns to previous step", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.next());
+    act(() => result.current.back());
+    expect(result.current.currentStepIndex).toBe(0);
+    expect(result.current.isFirstStep).toBe(true);
+  });
+
+  it("next does not advance past last step", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.goTo(2));
+    expect(result.current.isLastStep).toBe(true);
+    act(() => result.current.next());
+    expect(result.current.currentStepIndex).toBe(2);
+  });
+
+  it("back does not go before first step", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.back());
+    expect(result.current.currentStepIndex).toBe(0);
+  });
+
+  it("goTo jumps to specified index", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.goTo(2));
+    expect(result.current.currentStepIndex).toBe(2);
+    expect(result.current.isLastStep).toBe(true);
+  });
+
+  it("findAndGo jumps to step matching predicate", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.findAndGo((s) => s === "step3"));
+    expect(result.current.currentStepIndex).toBe(2);
+  });
+
+  it("findAndGo does nothing when predicate matches nothing", () => {
+    const { result } = renderHook(() => useStep(steps));
+    act(() => result.current.findAndGo((s) => s === "nonexistent"));
+    expect(result.current.currentStepIndex).toBe(0);
+  });
+
+  it("respects amountSteps override for boundary checks", () => {
+    const { result } = renderHook(() => useStep(steps, 2));
+    act(() => result.current.goTo(1));
+    expect(result.current.isLastStep).toBe(true);
+    act(() => result.current.next());
+    expect(result.current.currentStepIndex).toBe(1);
+  });
+});

package/src/hooks/{useStep/useStep.ts → use-step/use-step.ts}

@@ -1,4 +1,3 @@
-import { findIndex, ListIterateeCustom } from "lodash";
 import { ReactNode, useState } from "react";
 
 interface Return<T = ReactNode> {
@@ -10,10 +9,10 @@ interface Return<T = ReactNode> {
   goTo: (i: number) => void;
   next: () => void;
   back: () => void;
-  findAndGo: (callback: ListIterateeCustom<T, boolean>) => void;
+  findAndGo: (predicate: (item: T) => boolean) => void;
 }
 
-function useStep<T = ReactNode>(steps: T[], amountSteps?: number): Return<T> {
+export function useStep<T = ReactNode>(steps: T[], amountSteps?: number): Return<T> {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const length = amountSteps ?? steps.length;
 
@@ -35,8 +34,8 @@ function useStep<T = ReactNode>(steps: T[], amountSteps?: number): Return<T> {
     setCurrentStepIndex(i);
   };
 
-  const findAndGo = (t: ListIterateeCustom<T, boolean>): void => {
-    const stepIndex = findIndex(steps, t);
+  const findAndGo = (predicate: (item: T) => boolean): void => {
+    const stepIndex = steps.findIndex(predicate);
     if (stepIndex === -1) return;
     goTo(stepIndex);
   };
@@ -54,4 +53,3 @@ function useStep<T = ReactNode>(steps: T[], amountSteps?: number): Return<T> {
   };
 }
 
-export default useStep;

package/src/hooks/use-toggle/index.ts

@@ -0,0 +1 @@
+export * from "./use-toggle";

package/src/hooks/{useToggle/__doc__/useToggle.stories.tsx → use-toggle/use-toggle.stories.tsx}

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react-vite";
-import { Button, Checkbox } from "../../../components";
-import useToggle from "../useToggle";
+import { Button, Checkbox } from "../../components";
+import { useToggle } from "../use-toggle";
 
 /**
  * Hook que facilita el manejo de un estado booleano. Provee métodos para abrir, cerrar y toggle el estado

package/src/hooks/{useToggle/__test__/useToggle.test.tsx → use-toggle/use-toggle.test.tsx}

@@ -1,6 +1,6 @@
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import useToggle from "../useToggle";
+import { useToggle } from "../use-toggle";
 
 describe("useToggle hook", () => {
   it("should be defined", () => {
@@ -40,4 +40,25 @@ describe("useToggle hook", () => {
       expect(state).toBe(false);
     });
   });
+
+  it("should flip twice when called twice in the same tick", () => {
+    const { result } = renderHook(() => useToggle(false));
+
+    act(() => {
+      const [, toggle] = result.current;
+      toggle();
+      toggle();
+    });
+
+    expect(result.current[0]).toBe(false);
+
+    act(() => {
+      const [, toggle] = result.current;
+      toggle();
+      toggle();
+      toggle();
+    });
+
+    expect(result.current[0]).toBe(true);
+  });
 });

package/src/hooks/{useToggle/useToggle.ts → use-toggle/use-toggle.ts}

@@ -2,15 +2,13 @@ import { useState } from "react";
 
 type Return = [boolean, (newValue?: boolean) => void];
 
-function useToggle(initialValue = false): Return {
+export function useToggle(initialValue = false): Return {
   const [value, setValue] = useState<boolean>(initialValue);
 
   const toggle = (newValue?: boolean): void => {
-    const isUndefined = newValue === undefined;
-    setValue(isUndefined ? !value : newValue);
+    setValue((prev) => (newValue === undefined ? !prev : newValue));
   };
 
   return [value, toggle] as const;
 }
 
-export default useToggle;

package/src/utils/form.test.tsx

@@ -0,0 +1,138 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { z } from "zod";
+import { HookField, HookForm, parseFormValues, useHookForm } from "./form";
+import { renderHook } from "@testing-library/react";
+
+// ─── parseFormValues ──────────────────────────────────────────────────────────
+
+describe("parseFormValues", () => {
+  const schema = z.object({
+    name: z.string().min(1, "required"),
+    age: z.coerce.number().min(0),
+  });
+
+  it("returns data and empty errors on valid input", () => {
+    const result = parseFormValues(schema, { name: "Alice", age: "30" });
+    expect(result.data).toEqual({ name: "Alice", age: 30 });
+    expect(result.errors).toEqual({});
+  });
+
+  it("returns null data and field errors on invalid input", () => {
+    const result = parseFormValues(schema, { name: "", age: "30" });
+    expect(result.data).toBeNull();
+    expect(result.errors.name).toBeDefined();
+    expect(result.errors.name.length).toBeGreaterThan(0);
+  });
+
+  it("captures multiple field errors simultaneously", () => {
+    const result = parseFormValues(schema, { name: "", age: -1 });
+    expect(result.data).toBeNull();
+    expect(result.errors.name).toBeDefined();
+    expect(result.errors.age).toBeDefined();
+  });
+});
+
+// ─── useHookForm ──────────────────────────────────────────────────────────────
+
+describe("useHookForm", () => {
+  it("returns a react-hook-form instance", () => {
+    const schema = z.object({ email: z.string().email() });
+    const { result } = renderHook(() => useHookForm(schema));
+    expect(result.current.handleSubmit).toBeTypeOf("function");
+    expect(result.current.register).toBeTypeOf("function");
+  });
+});
+
+// ─── HookForm ─────────────────────────────────────────────────────────────────
+
+const loginSchema = z.object({ username: z.string().min(1, "required") });
+
+function LoginForm({ onSubmit }: { onSubmit: (v: { username: string }) => void }) {
+  const form = useHookForm(loginSchema);
+  return (
+    <HookForm form={form} onFormSubmit={onSubmit}>
+      <input {...form.register("username")} data-testid="username" />
+      <button type="submit">Submit</button>
+    </HookForm>
+  );
+}
+
+describe("HookForm", () => {
+  it("renders children", () => {
+    render(<LoginForm onSubmit={vi.fn()} />);
+    expect(screen.getByTestId("username")).toBeInTheDocument();
+  });
+
+  it("calls onFormSubmit with parsed values on valid submit", async () => {
+    const onSubmit = vi.fn();
+    render(<LoginForm onSubmit={onSubmit} />);
+
+    fireEvent.change(screen.getByTestId("username"), {
+      target: { value: "alice" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    expect(onSubmit).toHaveBeenCalledWith({ username: "alice" }, undefined);
+  });
+
+  it("does not call onFormSubmit on invalid submit", async () => {
+    const onSubmit = vi.fn();
+    render(<LoginForm onSubmit={onSubmit} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(onSubmit).not.toHaveBeenCalled());
+  });
+});
+
+// ─── HookField ────────────────────────────────────────────────────────────────
+
+function FieldForm({
+  onSubmit,
+}: {
+  onSubmit: (v: { email: string }) => void;
+}) {
+  const schema = z.object({ email: z.string().email("invalid email") });
+  const form = useHookForm(schema);
+  return (
+    <HookForm form={form} onFormSubmit={onSubmit}>
+      <HookField
+        name="email"
+        label="Email"
+        render={({ onChange, value, invalid }) => (
+          <input
+            data-testid="email"
+            data-invalid={invalid}
+            value={value}
+            onChange={onChange}
+          />
+        )}
+      />
+      <button type="submit">Submit</button>
+    </HookForm>
+  );
+}
+
+describe("HookField", () => {
+  it("renders the field input", () => {
+    render(<FieldForm onSubmit={vi.fn()} />);
+    expect(screen.getByTestId("email")).toBeInTheDocument();
+  });
+
+  it("exposes invalid=false initially", () => {
+    render(<FieldForm onSubmit={vi.fn()} />);
+    expect(screen.getByTestId("email").dataset.invalid).toBe("false");
+  });
+
+  it("marks invalid after failed submit", async () => {
+    render(<FieldForm onSubmit={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("email").dataset.invalid).toBe("true"),
+    );
+  });
+});

package/src/utils/functions/createSafeContext.test.tsx

@@ -0,0 +1,37 @@
+import { renderHook } from "@testing-library/react";
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { createSafeContext } from "./createSafeContext";
+
+describe("createSafeContext", () => {
+  it("returns a [useContext, Provider] tuple", () => {
+    const [useCtx, Provider] = createSafeContext<string>();
+    expect(typeof useCtx).toBe("function");
+    expect(Provider).toBeDefined();
+  });
+
+  it("throws when used outside a provider", () => {
+    const [useCtx] = createSafeContext<string>();
+    expect(() => renderHook(() => useCtx())).toThrow("Context value is null");
+  });
+
+  it("returns value when wrapped in provider", () => {
+    const [useCtx, Provider] = createSafeContext<string>();
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider value="hello">{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useCtx(), { wrapper });
+    expect(result.current).toBe("hello");
+  });
+
+  it("returns object values correctly", () => {
+    const [useCtx, Provider] = createSafeContext<{ count: number }>();
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider value={{ count: 42 }}>{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useCtx(), { wrapper });
+    expect(result.current.count).toBe(42);
+  });
+});

package/src/utils/functions/ensureReactElement.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ensureReactElement } from "./ensureReactElement";
+
+describe("ensureReactElement", () => {
+  it("wraps a string in the default div", () => {
+    const el = ensureReactElement({ children: "hello" });
+    render(el);
+    expect(screen.getByText("hello").tagName).toBe("DIV");
+  });
+
+  it("returns a valid ReactElement as-is", () => {
+    const child = <span data-testid="span">content</span>;
+    const el = ensureReactElement({ children: child });
+    render(el);
+    expect(screen.getByTestId("span")).toBeInTheDocument();
+  });
+
+  it("calls a render function with props and returns the result", () => {
+    const renderFn = (props: { label: string }) => (
+      <span data-testid="fn-result">{props.label}</span>
+    );
+    const el = ensureReactElement({
+      children: renderFn,
+      props: { label: "from-fn" },
+    });
+    render(el);
+    expect(screen.getByTestId("fn-result")).toHaveTextContent("from-fn");
+  });
+
+  it("wraps a number in the default div", () => {
+    const el = ensureReactElement({ children: 42 as any });
+    render(el);
+    expect(screen.getByText("42").tagName).toBe("DIV");
+  });
+
+  it("uses custom wrapper element via as prop", () => {
+    const el = ensureReactElement({ children: "text", as: "section" });
+    render(el);
+    expect(screen.getByText("text").tagName).toBe("SECTION");
+  });
+
+  it("wraps in fallback when render fn returns non-element (null)", () => {
+    const renderFn = () => null as any;
+    const el = ensureReactElement({ children: renderFn, as: "span" });
+    const { container } = render(el);
+    expect(container.querySelector("span")).toBeInTheDocument();
+  });
+});

package/src/utils/functions/getFormData.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from "vitest";
+import { getFormData } from "./getFormData";
+import type { FormEvent } from "react";
+
+function makeFormEvent(
+  fields: { name: string; value: string }[],
+): FormEvent<HTMLFormElement> {
+  const form = document.createElement("form");
+  for (const { name, value } of fields) {
+    const input = document.createElement("input");
+    input.name = name;
+    input.value = value;
+    form.appendChild(input);
+  }
+
+  const event = new Event("submit") as unknown as FormEvent<HTMLFormElement>;
+  Object.defineProperty(event, "currentTarget", {
+    value: form,
+    writable: false,
+  });
+  (event as any).preventDefault = vi.fn();
+  return event;
+}
+
+describe("getFormData", () => {
+  it("calls event.preventDefault", () => {
+    const event = makeFormEvent([]);
+    getFormData(event);
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+  });
+
+  it("returns empty object when form has no inputs", () => {
+    const event = makeFormEvent([]);
+    expect(getFormData(event)).toEqual({});
+  });
+
+  it("returns named inputs as key-value pairs", () => {
+    const event = makeFormEvent([
+      { name: "username", value: "alice" },
+      { name: "email", value: "alice@example.com" },
+    ]);
+    expect(getFormData(event)).toEqual({
+      username: "alice",
+      email: "alice@example.com",
+    });
+  });
+
+  it("skips elements without a name", () => {
+    const event = makeFormEvent([
+      { name: "username", value: "alice" },
+      { name: "", value: "ignored" },
+    ]);
+    const data = getFormData(event);
+    expect(Object.keys(data)).toHaveLength(1);
+    expect(data.username).toBe("alice");
+  });
+});

package/src/utils/functions/mergeRefs.test.ts

@@ -0,0 +1,56 @@
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { mergeRefs } from "./mergeRefs";
+
+describe("mergeRefs", () => {
+  it("returns a callback ref", () => {
+    expect(typeof mergeRefs([])).toBe("function");
+  });
+
+  it("sets .current on MutableRefObject refs", () => {
+    const a = createRef<HTMLDivElement>();
+    const b = createRef<HTMLDivElement>();
+    const el = document.createElement("div") as unknown as HTMLDivElement;
+
+    mergeRefs([a, b])(el);
+
+    expect(a.current).toBe(el);
+    expect(b.current).toBe(el);
+  });
+
+  it("calls function refs with value", () => {
+    const fn = vi.fn();
+    const el = document.createElement("div") as unknown as HTMLDivElement;
+
+    mergeRefs([fn])(el);
+
+    expect(fn).toHaveBeenCalledOnce();
+    expect(fn).toHaveBeenCalledWith(el);
+  });
+
+  it("skips null and undefined refs without throwing", () => {
+    const el = document.createElement("div") as unknown as HTMLDivElement;
+    expect(() => mergeRefs([null, undefined])(el)).not.toThrow();
+  });
+
+  it("passes null when clearing (e.g. on unmount)", () => {
+    const ref = createRef<HTMLDivElement>();
+    const fn = vi.fn();
+
+    mergeRefs([ref, fn])(null);
+
+    expect(ref.current).toBeNull();
+    expect(fn).toHaveBeenCalledWith(null);
+  });
+
+  it("handles mixed ref types in one call", () => {
+    const obj = createRef<HTMLDivElement>();
+    const fn = vi.fn();
+    const el = document.createElement("div") as unknown as HTMLDivElement;
+
+    mergeRefs([obj, fn, null, undefined])(el);
+
+    expect(obj.current).toBe(el);
+    expect(fn).toHaveBeenCalledWith(el);
+  });
+});