@seed-design/react-collapsible 0.0.0

package/lib/index.js

@@ -0,0 +1,11 @@
+import { C as CollapsibleContent, a as CollapsibleRoot, b as CollapsibleTrigger } from './Collapsible-12s-CzE3seHv.js';
+export { c as CollapsibleProvider, d as useCollapsible, u as useCollapsibleContext } from './Collapsible-12s-CzE3seHv.js';
+
+var Collapsible_namespace = {
+  __proto__: null,
+  Content: CollapsibleContent,
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger
+};
+
+export { Collapsible_namespace as Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@seed-design/react-collapsible",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/react-headless/collapsible"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "bunchee",
+    "lint:publish": "bun publint"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@radix-ui/react-use-layout-effect": "^1.1.1",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-primitive": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Collapsible.namespace.ts

@@ -0,0 +1,8 @@
+export {
+  CollapsibleRoot as Root,
+  CollapsibleTrigger as Trigger,
+  CollapsibleContent as Content,
+  type CollapsibleRootProps as RootProps,
+  type CollapsibleTriggerProps as TriggerProps,
+  type CollapsibleContentProps as ContentProps,
+} from "./Collapsible";

package/src/Collapsible.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef } from "react";
+import type { UseCollapsibleProps } from "./useCollapsible";
+import { useCollapsible } from "./useCollapsible";
+import { CollapsibleProvider, useCollapsibleContext } from "./useCollapsibleContext";
+
+export interface CollapsibleRootProps
+  extends UseCollapsibleProps,
+    PrimitiveProps,
+    Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {}
+
+export const CollapsibleRoot = forwardRef<HTMLDivElement, CollapsibleRootProps>((props, ref) => {
+  const { open, defaultOpen, onOpenChange, disabled, ...otherProps } = props;
+
+  const api = useCollapsible({
+    open,
+    defaultOpen,
+    onOpenChange,
+    disabled,
+  });
+
+  return (
+    <CollapsibleProvider value={api}>
+      <Primitive.div ref={ref} {...mergeProps(api.stateProps, otherProps)} />
+    </CollapsibleProvider>
+  );
+});
+CollapsibleRoot.displayName = "CollapsibleRoot";
+
+export interface CollapsibleTriggerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
+  (props, ref) => {
+    const api = useCollapsibleContext();
+
+    return (
+      <Primitive.button
+        ref={ref}
+        {...mergeProps(api.stateProps, api.triggerAriaProps, api.triggerHandlers, props)}
+      />
+    );
+  },
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+
+export interface CollapsibleContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CollapsibleContent = forwardRef<HTMLDivElement, CollapsibleContentProps>(
+  (props, ref) => {
+    const api = useCollapsibleContext();
+
+    return (
+      <Primitive.div
+        ref={composeRefs(ref, api.refs.content)}
+        {...mergeProps(api.contentProps, props)}
+      />
+    );
+  },
+);
+CollapsibleContent.displayName = "CollapsibleContent";

package/src/dom.ts

@@ -0,0 +1 @@
+export const getContentId = (id: string) => `collapsible:${id}:content`;

package/src/index.ts

@@ -0,0 +1,22 @@
+export {
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  type CollapsibleRootProps,
+  type CollapsibleTriggerProps,
+  type CollapsibleContentProps,
+} from "./Collapsible";
+
+export {
+  useCollapsibleContext,
+  CollapsibleProvider,
+  type UseCollapsibleContext,
+} from "./useCollapsibleContext";
+
+export {
+  useCollapsible,
+  type UseCollapsibleProps,
+  type UseCollapsibleReturn,
+} from "./useCollapsible";
+
+export * as Collapsible from "./Collapsible.namespace";

package/src/useCollapsible.test.tsx

@@ -0,0 +1,203 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { ReactElement } from "react";
+import * as React from "react";
+
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  type CollapsibleRootProps,
+} from "./Collapsible";
+
+/**
+ * @see https://github.com/ZeeCoder/use-resize-observer/issues/40#issuecomment-644536259
+ * useCollapsible에서 사용하는 ResizeObserver를 mock으로 대체합니다.
+ */
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+afterEach(cleanup);
+
+function setUp(jsx: ReactElement) {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+}
+
+function Collapsible(props: CollapsibleRootProps) {
+  return (
+    <CollapsibleRoot {...props}>
+      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+      <CollapsibleContent>Content</CollapsibleContent>
+    </CollapsibleRoot>
+  );
+}
+
+describe("useCollapsible", () => {
+  window.ResizeObserver = ResizeObserver;
+
+  it("should render the collapsible correctly", () => {
+    const { getByRole, getByText } = setUp(<Collapsible />);
+
+    const trigger = getByRole("button");
+    const content = getByText("Content");
+
+    expect(trigger).toBeInTheDocument();
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(content).toHaveAttribute("hidden");
+  });
+
+  it("should render the collapsible with defaultOpen=true", () => {
+    const { getByRole, getByText } = setUp(<Collapsible defaultOpen={true} />);
+
+    const trigger = getByRole("button");
+    const content = getByText("Content");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(content).not.toHaveAttribute("hidden");
+  });
+
+  it("should render the collapsible with defaultOpen=false", () => {
+    const { getByRole, getByText } = setUp(<Collapsible defaultOpen={false} />);
+
+    const trigger = getByRole("button");
+    const content = getByText("Content");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(content).toHaveAttribute("hidden");
+  });
+
+  it("should toggle open state when trigger is clicked", async () => {
+    const { getByRole, getByText, user } = setUp(<Collapsible />);
+
+    const trigger = getByRole("button");
+    const content = getByText("Content");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(content).toHaveAttribute("hidden");
+
+    await user.click(trigger);
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(content).not.toHaveAttribute("hidden");
+
+    await user.click(trigger);
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should call onOpenChange when toggle is clicked", async () => {
+    const handleOpenChange = vi.fn();
+
+    const { getByRole, user } = setUp(<Collapsible onOpenChange={handleOpenChange} />);
+    const trigger = getByRole("button");
+
+    await user.click(trigger);
+    expect(handleOpenChange).toHaveBeenCalledWith(true);
+
+    await user.click(trigger);
+    expect(handleOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("should have correct aria-controls attribute", () => {
+    const { getByRole, getByText } = setUp(<Collapsible />);
+
+    const trigger = getByRole("button");
+    const content = getByText("Content");
+
+    const contentId = content.getAttribute("id");
+    expect(trigger).toHaveAttribute("aria-controls", contentId);
+  });
+
+  it("should have data-open attribute when open", async () => {
+    const { getByRole, user } = setUp(<Collapsible />);
+
+    const trigger = getByRole("button");
+
+    expect(trigger).not.toHaveAttribute("data-open");
+
+    await user.click(trigger);
+
+    expect(trigger).toHaveAttribute("data-open");
+  });
+
+  describe("disabled prop test", () => {
+    it("should have aria-disabled when disabled prop is true", () => {
+      const { getByRole } = setUp(<Collapsible disabled={true} />);
+      const trigger = getByRole("button");
+
+      expect(trigger).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("should not toggle when trigger is clicked while disabled", async () => {
+      const { getByRole, user } = setUp(<Collapsible disabled={true} />);
+      const trigger = getByRole("button");
+
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+      await user.click(trigger);
+
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+    });
+
+    it("should not call onOpenChange when clicked while disabled", async () => {
+      const handleOpenChange = vi.fn();
+
+      const { getByRole, user } = setUp(
+        <Collapsible disabled={true} onOpenChange={handleOpenChange} />,
+      );
+      const trigger = getByRole("button");
+
+      await user.click(trigger);
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+
+    it("should have data-disabled attribute when disabled", () => {
+      const { getByRole } = setUp(<Collapsible disabled={true} />);
+      const trigger = getByRole("button");
+
+      expect(trigger).toHaveAttribute("data-disabled");
+    });
+  });
+
+  describe("controlled mode", () => {
+    function ControlledCollapsible() {
+      const [open, setOpen] = React.useState(false);
+      return (
+        <div>
+          <button type="button" onClick={() => setOpen(true)}>
+            Open
+          </button>
+          <button type="button" onClick={() => setOpen(false)}>
+            Close
+          </button>
+          <Collapsible open={open} onOpenChange={setOpen} />
+        </div>
+      );
+    }
+
+    it("should be controlled by external state", async () => {
+      const { getByRole, getByText, user } = setUp(<ControlledCollapsible />);
+
+      const trigger = getByRole("button", { name: "Toggle" });
+      const openButton = getByText("Open");
+      const closeButton = getByText("Close");
+
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+      await user.click(openButton);
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+      await user.click(closeButton);
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+    });
+  });
+});

package/src/useCollapsible.ts

@@ -0,0 +1,121 @@
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
+import { dataAttr, elementProps } from "@seed-design/dom-utils";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import * as dom from "./dom";
+
+export interface UseCollapsibleStateProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function useCollapsibleState(props: UseCollapsibleStateProps) {
+  const [open, setOpen] = useControllableState({
+    prop: props.open,
+    defaultProp: props.defaultOpen ?? false,
+    onChange: props.onOpenChange,
+  });
+
+  return useMemo(() => ({ open, setOpen }), [open, setOpen]);
+}
+
+export interface UseCollapsibleProps extends UseCollapsibleStateProps {
+  disabled?: boolean;
+}
+
+export type UseCollapsibleReturn = ReturnType<typeof useCollapsible>;
+
+export function useCollapsible(props: UseCollapsibleProps) {
+  const { open, setOpen } = useCollapsibleState(props);
+  const { disabled } = props;
+
+  const id = useId();
+  const contentId = dom.getContentId(id);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | undefined>(undefined);
+  const [visible, setVisible] = useState(open);
+
+  const hidden = !open && !visible;
+
+  useLayoutEffect(() => {
+    if (!contentRef.current) return;
+
+    const updateHeight = () => {
+      if (!contentRef.current) return;
+
+      setHeight(contentRef.current.offsetHeight);
+    };
+
+    updateHeight();
+
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(contentRef.current);
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+
+    // When expanded, immediately show to allow transition
+    setVisible(true);
+  }, [open]);
+
+  const panelHeight = open ? `${height}px` : "0px";
+
+  const stateProps = useMemo(
+    () =>
+      elementProps({
+        "data-collapsible": "",
+        "data-open": dataAttr(open),
+        "data-disabled": dataAttr(disabled),
+      }),
+    [open, disabled],
+  );
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      disabled,
+
+      stateProps,
+
+      triggerAriaProps: elementProps({
+        "aria-expanded": open,
+        "aria-controls": contentId,
+        "aria-disabled": disabled,
+      }),
+      triggerHandlers: elementProps({
+        onClick: (event) => {
+          if (event.defaultPrevented) return;
+          if (disabled) return;
+
+          setOpen((prev) => !prev);
+        },
+      }),
+
+      contentProps: elementProps({
+        ...stateProps,
+        id: contentId,
+        hidden,
+        style: {
+          "--collapsible-content-height": height !== undefined ? panelHeight : undefined,
+        } as React.CSSProperties,
+        onTransitionEnd: (event) => {
+          if (event.propertyName !== "height") return;
+          if (open) return;
+
+          setVisible(false);
+        },
+      }),
+
+      refs: {
+        content: contentRef,
+      },
+    }),
+    [open, setOpen, disabled, stateProps, contentId, hidden, height, panelHeight],
+  );
+}

package/src/useCollapsibleContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+import type { UseCollapsibleReturn } from "./useCollapsible";
+
+export interface UseCollapsibleContext extends UseCollapsibleReturn {}
+
+const CollapsibleContext = createContext<UseCollapsibleContext | null>(null);
+
+export const CollapsibleProvider = CollapsibleContext.Provider;
+
+export function useCollapsibleContext<T extends boolean | undefined = true>({
+  strict = true,
+}: {
+  strict?: T;
+} = {}): T extends false ? UseCollapsibleContext | null : UseCollapsibleContext {
+  const context = useContext(CollapsibleContext);
+  if (!context && strict) {
+    throw new Error("useCollapsibleContext must be used within a CollapsibleRoot");
+  }
+
+  return context as UseCollapsibleContext;
+}