@seed-design/react 1.2.15 → 2.0.1

package/src/hooks/useBreakpointValue.test.tsx

@@ -0,0 +1,102 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, mock } from "bun:test";
+
+import { useBreakpointValue } from "./useBreakpointValue";
+
+type ChangeHandler = (e: { matches: boolean }) => void;
+
+let currentWidth = 0;
+const entries = new Map<string, { minWidth: number; handlers: Set<ChangeHandler> }>();
+
+function mockMatchMedia(query: string) {
+  const match = query.match(/min-width:\s*(\d+)px/);
+  const minWidth = match ? Number(match[1]) : 0;
+  const entry = entries.get(query) ?? { minWidth, handlers: new Set<ChangeHandler>() };
+  entries.set(query, entry);
+  return {
+    get matches() {
+      return currentWidth >= entry.minWidth;
+    },
+    media: query,
+    addEventListener(_: string, handler: ChangeHandler) {
+      entry.handlers.add(handler);
+    },
+    removeEventListener(_: string, handler: ChangeHandler) {
+      entry.handlers.delete(handler);
+    },
+    onchange: null,
+    addListener: mock(),
+    removeListener: mock(),
+    dispatchEvent: () => false,
+  };
+}
+
+function setViewport(minWidthPx: number) {
+  currentWidth = minWidthPx;
+  for (const [, entry] of entries) {
+    const nowMatches = currentWidth >= entry.minWidth;
+    for (const handler of entry.handlers) {
+      handler({ matches: nowMatches });
+    }
+  }
+}
+
+beforeEach(() => {
+  currentWidth = 0;
+  entries.clear();
+  window.matchMedia = mockMatchMedia as unknown as typeof window.matchMedia;
+});
+
+describe("useBreakpointValue", () => {
+  it("passes through a single value", () => {
+    const { result } = renderHook(() => useBreakpointValue(42));
+    expect(result.current).toBe(42);
+  });
+
+  it("passes through a string value", () => {
+    const { result } = renderHook(() => useBreakpointValue("hello"));
+    expect(result.current).toBe("hello");
+  });
+
+  it("resolves base value at base breakpoint", () => {
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2, xl: 4 }));
+    expect(result.current).toBe(1);
+  });
+
+  it("falls back to base when current breakpoint has no value", () => {
+    currentWidth = 480; // sm
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2 }));
+    // sm is not defined, falls back to base
+    expect(result.current).toBe(1);
+  });
+
+  it("resolves md value at md breakpoint", () => {
+    currentWidth = 768;
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2, xl: 4 }));
+    expect(result.current).toBe(2);
+  });
+
+  it("falls back to md at lg when lg is not defined", () => {
+    currentWidth = 1280; // lg
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2, xl: 4 }));
+    // lg not defined, falls back to md
+    expect(result.current).toBe(2);
+  });
+
+  it("resolves xl value at xl breakpoint", () => {
+    currentWidth = 1440;
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2, xl: 4 }));
+    expect(result.current).toBe(4);
+  });
+
+  it("updates when viewport changes", () => {
+    const { result } = renderHook(() => useBreakpointValue({ base: "compact", md: "full" }));
+    expect(result.current).toBe("compact");
+
+    act(() => setViewport(768));
+    expect(result.current).toBe("full");
+
+    act(() => setViewport(0));
+    expect(result.current).toBe("compact");
+  });
+});

package/src/hooks/useBreakpointValue.ts

@@ -0,0 +1,33 @@
+import { type Breakpoint, breakpointNames } from "@seed-design/css/breakpoints";
+import { useMemo } from "react";
+
+import type { ResponsiveValue } from "../types/responsive";
+import { isResponsiveObject } from "../types/responsive";
+import { type UseBreakpointOptions, useBreakpoint } from "./useBreakpoint";
+
+export function resolveResponsiveValue<T>(
+  values: { [K in Breakpoint]?: T },
+  breakpoint: Breakpoint,
+): T | undefined {
+  const idx = breakpointNames.indexOf(breakpoint);
+  for (let i = idx; i >= 0; i--) {
+    const val = values[breakpointNames[i]];
+
+    if (val !== undefined) return val;
+  }
+
+  return undefined;
+}
+
+export function useBreakpointValue<T>(
+  values: ResponsiveValue<T>,
+  options?: UseBreakpointOptions,
+): T | undefined {
+  const breakpoint = useBreakpoint(options);
+
+  return useMemo(() => {
+    if (!isResponsiveObject(values)) return values;
+
+    return resolveResponsiveValue(values, breakpoint);
+  }, [values, breakpoint]);
+}

package/src/index.ts

@@ -1,4 +1,12 @@
 export * from "./components";
 
+export type { ResponsiveValue, UnwrapResponsive, BreakpointThreshold } from "./types/responsive";
+
+export { useBreakpoint } from "./hooks/useBreakpoint";
+export type { UseBreakpointOptions } from "./hooks/useBreakpoint";
+export { useBreakpointValue } from "./hooks/useBreakpointValue";
+export { BreakpointProvider } from "./providers/BreakpointProvider";
+export type { BreakpointProviderProps } from "./providers/BreakpointProvider";
+
 // unstable_StyleProps is unstable and will be changed or removed without prior notice
 export type { StyleProps as unstable_StyleProps } from "./utils/styled";

package/src/primitive.ts

@@ -1,10 +1,15 @@
+export * from "@seed-design/react-attachment-display";
 export * from "@seed-design/react-avatar";
 export * from "@seed-design/react-checkbox";
 export * from "@seed-design/react-dialog";
+export * from "@seed-design/react-file-upload";
+export * from "@seed-design/react-middle-truncate";
+export * from "@seed-design/react-navigation-menu";
 export * from "@seed-design/react-popover";
 export * from "@seed-design/react-progress";
 export * from "@seed-design/react-pull-to-refresh";
 export * from "@seed-design/react-radio-group";
+export * from "@seed-design/react-side-navigation";
 export * from "@seed-design/react-slider";
 export * from "@seed-design/react-snackbar";
 export * from "@seed-design/react-switch";

package/src/primitives/breakpoint-store.ts

@@ -0,0 +1,69 @@
+import { type Breakpoint, breakpointNames, mediaQueries } from "@seed-design/css/breakpoints";
+
+type Listener = () => void;
+
+const thresholds = breakpointNames.filter(
+  (name): name is Exclude<Breakpoint, "base"> => name !== "base",
+);
+
+let listeners: Set<Listener> | null = null;
+let mediaQueryLists: MediaQueryList[] | null = null;
+let currentBreakpoint: Breakpoint = "base";
+
+function computeBreakpoint(): Breakpoint {
+  if (!mediaQueryLists) return "base";
+  for (let i = thresholds.length - 1; i >= 0; i--) {
+    if (mediaQueryLists[i].matches) return thresholds[i];
+  }
+  return "base";
+}
+
+function handleChange() {
+  const next = computeBreakpoint();
+  if (next !== currentBreakpoint) {
+    currentBreakpoint = next;
+    for (const fn of listeners ?? []) fn();
+  }
+}
+
+function init() {
+  mediaQueryLists = thresholds.map((name) => window.matchMedia(mediaQueries[name]));
+  currentBreakpoint = computeBreakpoint();
+  for (const mql of mediaQueryLists) {
+    mql.addEventListener("change", handleChange);
+  }
+}
+
+function teardown() {
+  if (mediaQueryLists) {
+    for (const mql of mediaQueryLists) {
+      mql.removeEventListener("change", handleChange);
+    }
+    mediaQueryLists = null;
+  }
+  currentBreakpoint = "base";
+}
+
+export function subscribe(listener: Listener): () => void {
+  if (!listeners) {
+    listeners = new Set();
+    init();
+  }
+  listeners.add(listener);
+
+  return () => {
+    listeners?.delete(listener);
+    if (listeners?.size === 0) {
+      teardown();
+      listeners = null;
+    }
+  };
+}
+
+export function getSnapshot(): Breakpoint {
+  return currentBreakpoint;
+}
+
+export function getServerSnapshot(): Breakpoint {
+  return "base";
+}

package/src/providers/BreakpointProvider.tsx

@@ -0,0 +1,26 @@
+import type { Breakpoint } from "@seed-design/css/breakpoints";
+import type * as React from "react";
+import { useMemo, useSyncExternalStore } from "react";
+
+import { BreakpointContext } from "../hooks/useBreakpoint";
+import * as store from "../primitives/breakpoint-store";
+
+export interface BreakpointProviderProps {
+  defaultBreakpoint?: Breakpoint;
+  children: React.ReactNode;
+}
+
+export function BreakpointProvider({
+  defaultBreakpoint = "base",
+  children,
+}: BreakpointProviderProps) {
+  const breakpoint = useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    () => defaultBreakpoint,
+  );
+
+  const value = useMemo(() => ({ breakpoint, defaultBreakpoint }), [breakpoint, defaultBreakpoint]);
+
+  return <BreakpointContext.Provider value={value}>{children}</BreakpointContext.Provider>;
+}

package/src/types/responsive.ts

@@ -0,0 +1,19 @@
+import type { Breakpoint } from "@seed-design/css/breakpoints";
+
+// Before: `T | { [K in Breakpoint]?: T }`
+// When T is an object (e.g. ButtonProps), union excess property check is weak
+// and allows mixing T's keys with Breakpoint keys without error.
+// The intersection with `never`-mapped keys forces TypeScript to reject the mix.
+type ResponsiveObject<T> = { [K in Breakpoint]?: T } & (T extends object
+  ? { [K in Exclude<keyof T & string, Breakpoint>]?: never }
+  : {});
+
+export type ResponsiveValue<T> = T | ResponsiveObject<T>;
+
+export type UnwrapResponsive<T> = T extends ResponsiveValue<infer U> ? U : T;
+
+export type BreakpointThreshold = Exclude<Breakpoint, "base">;
+
+export function isResponsiveObject<T>(value: ResponsiveValue<T>): value is ResponsiveObject<T> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/src/utils/createRenderTrackingContext.tsx

@@ -0,0 +1,50 @@
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+
+interface RenderTrackingContextValue {
+  /** Whether the tracked sibling element is currently rendered. */
+  isRendered: boolean;
+  /** Ref callback the tracked element composes onto its node to register that it is rendered. */
+  trackRef: (node: HTMLElement | null) => void;
+}
+
+/**
+ * Tracks whether an optional sub-component is rendered, so a sibling slot can emit a
+ * styling-only data-attribute (e.g. `data-show-close-button`, `data-has-overlay`).
+ *
+ * This lives in the styled `@seed-design/react` layer on purpose: the attribute exists
+ * solely to drive a `@seed-design/css` selector, so the styled layer — which already holds
+ * the version contract with css — owns it, rather than leaking a css↔headless contract.
+ *
+ * Unrelated to `@seed-design/react-presence`: that handles enter/exit animation, whereas
+ * this only records whether a sibling is in the tree.
+ */
+export function createRenderTrackingContext(name: string) {
+  const RenderTrackingContext = createContext<RenderTrackingContextValue | null>(null);
+
+  function Provider({ children }: { children: React.ReactNode }) {
+    const [isRendered, setIsRendered] = useState(false);
+    const trackRef = useCallback((node: HTMLElement | null) => {
+      setIsRendered(!!node);
+    }, []);
+
+    const value = useMemo<RenderTrackingContextValue>(
+      () => ({ isRendered, trackRef }),
+      [isRendered, trackRef],
+    );
+
+    return (
+      <RenderTrackingContext.Provider value={value}>{children}</RenderTrackingContext.Provider>
+    );
+  }
+  Provider.displayName = `${name}RenderTrackingProvider`;
+
+  function useRenderTracking() {
+    const context = useContext(RenderTrackingContext);
+    if (context === null) {
+      throw new Error(`use${name}RenderTracking must be used within ${name}RenderTrackingProvider`);
+    }
+    return context;
+  }
+
+  return { Provider, useRenderTracking };
+}

package/src/utils/getHelpBubbleArrowTipPath.ts

@@ -0,0 +1,11 @@
+/**
+ * Builds the SVG path for a HelpBubble arrow tip given its measured size.
+ * Shared by HelpBubble (dialog) and HelpBubbleTooltip (tooltip) so the arrow
+ * geometry stays in a single place.
+ */
+export const getHelpBubbleArrowTipPath = (width: number, height: number, tipRadius: number) =>
+  `M0,0
+      H${width}
+      L${width / 2 + tipRadius},${height - tipRadius}
+      Q${width / 2},${height} ${width / 2 - tipRadius},${height - tipRadius}
+      Z`;