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

package/src/components/switch/switch.test.tsx

@@ -70,9 +70,9 @@ describe("Switch composite", () => {
 
   it("applies classNames.wrapper to wrapper div", () => {
     render(<Switch classNames={{ wrapper: "cls-wrap" }} />);
-    expect(document.querySelector('[data-slot="switch"]')?.parentElement).toHaveClass(
-      "cls-wrap",
-    );
+    expect(
+      document.querySelector('[data-slot="switch"]')?.parentElement,
+    ).toHaveClass("cls-wrap");
   });
 
   it("applies classNames.thumb to thumb", () => {

package/src/components/table/table.test.tsx

@@ -109,7 +109,9 @@ describe("Table data-slots", () => {
         <tbody />
       </TableRoot>,
     );
-    expect(document.querySelector('[data-slot="table-container"]')).toBeTruthy();
+    expect(
+      document.querySelector('[data-slot="table-container"]'),
+    ).toBeTruthy();
     expect(document.querySelector('[data-slot="table"]')).toBeTruthy();
   });
 
@@ -244,14 +246,18 @@ describe("Table composite extras", () => {
   });
 
   it("applies classNames.thead to thead", () => {
-    render(<Table data={[]} columns={columns} classNames={{ thead: "cls-thead" }} />);
+    render(
+      <Table data={[]} columns={columns} classNames={{ thead: "cls-thead" }} />,
+    );
     expect(document.querySelector('[data-slot="table-header"]')).toHaveClass(
       "cls-thead",
     );
   });
 
   it("applies classNames.td to body cells", () => {
-    render(<Table data={data} columns={columns} classNames={{ td: "cls-td" }} />);
+    render(
+      <Table data={data} columns={columns} classNames={{ td: "cls-td" }} />,
+    );
     const cells = document.querySelectorAll('[data-slot="table-cell"]');
     expect(cells[0]).toHaveClass("cls-td");
   });

package/src/components/tabs/tabs.test.tsx

@@ -78,7 +78,9 @@ describe("Tabs data-slots", () => {
         <TabList />
       </Tabs>,
     );
-    expect(document.querySelector('[data-slot="tabs-list"]')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="tabs-list"]'),
+    ).toBeInTheDocument();
   });
 
   it("sets data-slot='tab-indicator' inside list", () => {
@@ -100,7 +102,9 @@ describe("Tabs data-slots", () => {
         </TabList>
       </Tabs>,
     );
-    expect(document.querySelector('[data-slot="tabs-tab"]')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="tabs-tab"]'),
+    ).toBeInTheDocument();
   });
 
   it("sets data-slot='tabs-content' on panel", () => {

package/src/components/tag/tag.test.tsx

@@ -35,9 +35,7 @@ describe("Tag variants", () => {
 
 describe("Tag render prop", () => {
   it("renders as anchor when render prop provided", () => {
-    render(
-      <Tag render={<a href="/test" />}>Link tag</Tag>,
-    );
+    render(<Tag render={<a href="/test" />}>Link tag</Tag>);
     expect(screen.getByRole("link")).toBeInTheDocument();
     expect(screen.getByRole("link")).toHaveTextContent("Link tag");
   });

package/src/components/textarea/textarea.test.tsx

@@ -11,7 +11,10 @@ describe("Textarea component", () => {
 
   it("sets data-slot='textarea'", () => {
     render(<Textarea />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("data-slot", "textarea");
+    expect(screen.getByRole("textbox")).toHaveAttribute(
+      "data-slot",
+      "textarea",
+    );
   });
 
   it("applies className", () => {

package/src/components/timeline/timeline.test.tsx

@@ -21,7 +21,9 @@ const defaultItems = [
 describe("TimelineRoot", () => {
   it("renders with data-slot='timeline'", () => {
     render(<TimelineRoot />);
-    expect(document.querySelector('[data-slot="timeline"]')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="timeline"]'),
+    ).toBeInTheDocument();
   });
 
   it("defaults to vertical orientation", () => {
@@ -181,7 +183,10 @@ describe("Timeline composite", () => {
 
   it("applies classNames.item to timeline items", () => {
     render(
-      <Timeline items={[{ title: "T1" }]} classNames={{ item: "custom-item" }} />,
+      <Timeline
+        items={[{ title: "T1" }]}
+        classNames={{ item: "custom-item" }}
+      />,
     );
     expect(document.querySelector('[data-slot="timeline-item"]')).toHaveClass(
       "custom-item",
@@ -195,8 +200,8 @@ describe("Timeline composite", () => {
         classNames={{ content: "custom-content" }}
       />,
     );
-    expect(document.querySelector('[data-slot="timeline-content"]')).toHaveClass(
-      "custom-content",
-    );
+    expect(
+      document.querySelector('[data-slot="timeline-content"]'),
+    ).toHaveClass("custom-content");
   });
 });

package/src/components/toast/toast.test.tsx

@@ -1,11 +1,10 @@
-import { renderHook } from "@testing-library/react";
-import { render, screen } from "@testing-library/react";
+import { render, renderHook, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it } from "vitest";
 import {
+  createToastManager,
   ToastPrimitive,
   ToastProvider,
-  createToastManager,
   toast,
   useToastManager,
 } from "../toast";
@@ -52,7 +51,9 @@ describe("Toast component", () => {
     renderWithProvider(<ToastTrigger variant="success" description="test" />);
     await userEvent.click(screen.getByText("Show toast"));
     await screen.findByText("test");
-    const toastEl = document.querySelector('[data-slot="toast"]') as HTMLElement;
+    const toastEl = document.querySelector(
+      '[data-slot="toast"]',
+    ) as HTMLElement;
     expect(toastEl.className).toContain("ring-success");
   });
 });
@@ -87,7 +88,9 @@ describe("Toast variants", () => {
     renderWithProvider(<ToastTrigger variant={variant} description="msg" />);
     await userEvent.click(screen.getByText("Show toast"));
     await screen.findByText("msg");
-    const toastEl = document.querySelector('[data-slot="toast"]') as HTMLElement;
+    const toastEl = document.querySelector(
+      '[data-slot="toast"]',
+    ) as HTMLElement;
     expect(toastEl.className).toContain(ringClass);
   });
 });
@@ -215,9 +218,7 @@ describe("Toast manager.update", () => {
             Add
           </button>
           <button
-            onClick={() =>
-              manager.update("upd-id", { description: "Updated" })
-            }
+            onClick={() => manager.update("upd-id", { description: "Updated" })}
           >
             Update
           </button>
@@ -264,16 +265,12 @@ describe("Toast dedup", () => {
       return (
         <>
           <button
-            onClick={() =>
-              manager.add({ id: "dup-id", description: "First" })
-            }
+            onClick={() => manager.add({ id: "dup-id", description: "First" })}
           >
             Add First
           </button>
           <button
-            onClick={() =>
-              manager.add({ id: "dup-id", description: "Second" })
-            }
+            onClick={() => manager.add({ id: "dup-id", description: "Second" })}
           >
             Add Second
           </button>

package/src/components/tooltip/tooltip.test.tsx

@@ -127,11 +127,7 @@ describe("Tooltip classNames", () => {
 
   it("applies classNames.arrow to arrow", () => {
     render(
-      <Tooltip
-        content="tip"
-        defaultOpen
-        classNames={{ arrow: "custom-arrow" }}
-      >
+      <Tooltip content="tip" defaultOpen classNames={{ arrow: "custom-arrow" }}>
         <Button>t</Button>
       </Tooltip>,
     );

package/src/components/tree/tree.test.tsx

@@ -69,7 +69,9 @@ function Harness({
             className={itemClassName}
           >
             <TreeItemLabel className={labelClassName}>
-              {labelClassName ? item.getItemName() : `Custom: ${item.getItemName()}`}
+              {labelClassName
+                ? item.getItemName()
+                : `Custom: ${item.getItemName()}`}
             </TreeItemLabel>
           </TreeItem>
         ) : (

package/src/hooks/index.ts

@@ -1,6 +1,7 @@
 export { useControllableState } from "@radix-ui/react-use-controllable-state";
 export * from "./use-array";
 export * from "./use-async";
+export * from "./use-boolean";
 export * from "./use-click-outside";
 export * from "./use-clipboard";
 export * from "./use-debounce-callback";
@@ -20,8 +21,7 @@ export * from "./use-object";
 export * from "./use-on-mount";
 export * from "./use-pagination";
 export * from "./use-portal";
-export * from "./use-prevent-close-window";
+export * from "./use-prevent-page-close";
 export * from "./use-range-pagination";
 export * from "./use-selection";
 export * from "./use-step";
-export * from "./use-toggle";

package/src/hooks/internal/index.ts

@@ -1,2 +1,4 @@
+export { isAppleDevice } from "./is-apple-device";
 export { isBrowser } from "./is-browser";
 export { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+export { useLatestRef } from "./use-latest-ref";

package/src/hooks/internal/is-apple-device.test.ts

@@ -0,0 +1,41 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { isAppleDevice } from "./is-apple-device";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("isAppleDevice", () => {
+  it("returns true when navigator.userAgentData.platform reports macOS", () => {
+    vi.stubGlobal("navigator", { userAgentData: { platform: "macOS" } });
+    expect(isAppleDevice()).toBe(true);
+  });
+
+  it("returns true for iPhone via legacy navigator.platform", () => {
+    vi.stubGlobal("navigator", { platform: "iPhone" });
+    expect(isAppleDevice()).toBe(true);
+  });
+
+  it("returns true for iPad via legacy navigator.platform", () => {
+    vi.stubGlobal("navigator", { platform: "iPad" });
+    expect(isAppleDevice()).toBe(true);
+  });
+
+  it("returns false on a non-Apple platform (Windows)", () => {
+    vi.stubGlobal("navigator", { platform: "Win32" });
+    expect(isAppleDevice()).toBe(false);
+  });
+
+  it("prefers userAgentData.platform over legacy navigator.platform", () => {
+    vi.stubGlobal("navigator", {
+      userAgentData: { platform: "Windows" },
+      platform: "MacIntel",
+    });
+    expect(isAppleDevice()).toBe(false);
+  });
+
+  it("returns false when navigator is missing (SSR)", () => {
+    vi.stubGlobal("navigator", undefined);
+    expect(isAppleDevice()).toBe(false);
+  });
+});

package/src/hooks/internal/is-apple-device.ts

@@ -0,0 +1,33 @@
+import { isBrowser } from "./is-browser";
+
+/**
+ * Structural shape of the modern `navigator.userAgentData` API, which is not
+ * yet part of the standard TypeScript DOM lib. Only the `platform` field is
+ * read here.
+ */
+type NavigatorWithUAData = Navigator & {
+  userAgentData?: { platform?: string };
+};
+
+const APPLE_PLATFORM_PATTERN = /mac|iphone|ipad|ipod/i;
+
+/**
+ * Lazily detects whether the current device is an Apple platform (macOS, iOS,
+ * iPadOS). Reads `navigator.userAgentData?.platform` when available, falling
+ * back to the legacy `navigator.platform`.
+ *
+ * SSR-safe: returns `false` when there is no `navigator` (e.g. on the server),
+ * so the `mod` hotkey modifier deterministically resolves to `ctrl` there.
+ *
+ * The check runs on every call (not memoized at module-eval) so it can be
+ * stubbed per-test and stays correct if the environment changes.
+ */
+export const isAppleDevice = (): boolean => {
+  if (!isBrowser || typeof navigator === "undefined") return false;
+
+  const nav = navigator as NavigatorWithUAData;
+  const platform = nav.userAgentData?.platform ?? nav.platform;
+  if (!platform) return false;
+
+  return APPLE_PLATFORM_PATTERN.test(platform);
+};

package/src/hooks/internal/use-isomorphic-layout-effect.ts

@@ -1,4 +1,6 @@
 import { useEffect, useLayoutEffect } from "react";
 import { isBrowser } from "./is-browser";
 
-export const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+export const useIsomorphicLayoutEffect = isBrowser
+  ? useLayoutEffect
+  : useEffect;

package/src/hooks/internal/use-latest-ref.ts

@@ -0,0 +1,21 @@
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+
+/**
+ * Returns a ref whose `.current` always holds the latest value passed in.
+ *
+ * Internal building block for the handler-stable pattern: hooks that accept
+ * user callbacks should read them through a ref so listeners attached to
+ * `window`/`document`/elements never need to be re-attached when the consumer
+ * passes an inline function.
+ *
+ * Updates happen in a layout effect so the ref is current before any user
+ * effect or commit-phase work runs in the same render.
+ */
+export const useLatestRef = <T>(value: T) => {
+  const ref = useRef<T>(value);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+};