feat(Collapsible): enhance animation handling and add accessibility features

Author: huijiewei

packages/react-ui/src/components/collapsible/collapsible-content.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, useState } from "react";
+import { type CSSProperties, useEffect, useState } from "react";
 import { useMergeRefs } from "../../hooks";
 import type { EmptyObject, PrimitiveProps } from "../../primitives";
 import { tx } from "../../utils";
@@ -7,10 +7,22 @@ import { useCollapsibleContent } from "./collapsible-context";
 export const CollapsibleContent = (props: PrimitiveProps<"div", EmptyObject, "id">) => {
   const { children, ref, ...rest } = props;
 
-  const { id, mounted, status, setElement } = useCollapsibleContent();
+  const { id, open, mounted, status, setElement } = useCollapsibleContent();
 
   const [height, setHeight] = useState<number>();
 
+  const [skipAnimation, setSkipAnimation] = useState(open || mounted);
+
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      setSkipAnimation(false);
+    });
+
+    return () => {
+      cancelAnimationFrame(raf);
+    };
+  }, []);
+
   const elemRef = (node: HTMLDivElement) => {
     if (node) {
       setHeight(node.getBoundingClientRect().height);
@@ -31,7 +43,11 @@ export const CollapsibleContent = (props: PrimitiveProps<"div", EmptyObject, "id
           "--hv": height ? `${height}px` : undefined,
         } as CSSProperties
       }
-      className={tx("duration-(--dv) overflow-hidden transition-[height]", status == "open" ? "h-(--hv)" : "h-0")}
+      className={tx(
+        "overflow-hidden",
+        !skipAnimation && "duration-(--dv) overflow-hidden transition-[height]",
+        skipAnimation || status == "open" ? "h-(--hv)" : "h-0",
+      )}
     >
       <div id={id} ref={refs} {...rest}>
         {children}

packages/react-ui/src/components/collapsible/collapsible-context.ts

@@ -13,6 +13,7 @@ export const [CollapsibleTriggerContext, useCollapsibleTrigger] = createSafeCont
 
 export type CollapsibleContentContextValue = {
   id: string;
+  open: boolean;
   mounted: boolean;
   status: "unmounted" | "initial" | "open" | "close";
   duration: number;

packages/react-ui/src/components/collapsible/collapsible-root.tsx

@@ -1,6 +1,7 @@
 import { type CSSProperties, useId } from "react";
 import { useDisclosure, type UseDisclosureOptions, useElementTransitionStatus } from "../../hooks";
 import type { PrimitiveProps } from "../../primitives";
+import { tx } from "../../utils";
 import {
   CollapsibleContentContext,
   type CollapsibleContentContextValue,
@@ -10,7 +11,7 @@ import {
 
 export type CollapsibleRootProps = UseDisclosureOptions & {
   /**
-   * 是否禁用可折叠
+   * 是否禁用
    * @default false
    */
   disabled?: boolean;
@@ -23,7 +24,17 @@ export type CollapsibleRootProps = UseDisclosureOptions & {
 };
 
 export const CollapsibleRoot = (props: PrimitiveProps<"div", CollapsibleRootProps>) => {
-  const { open, defaultOpen = false, onOpenChange, disabled = false, duration = 250, style, children, ...rest } = props;
+  const {
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false,
+    duration = 250,
+    style,
+    children,
+    className,
+    ...rest
+  } = props;
 
   const [openState, { handleToggle }] = useDisclosure({ open, defaultOpen, onOpenChange });
 
@@ -39,14 +50,19 @@ export const CollapsibleRoot = (props: PrimitiveProps<"div", CollapsibleRootProp
   };
   const contentContext: CollapsibleContentContextValue = {
     id,
+    open: openState,
     mounted: isMounted,
     status,
     duration,
     setElement,
   };
 
   return (
-    <div style={{ ...style, "--dv": `${duration}ms` } as CSSProperties} {...rest}>
+    <div
+      style={{ ...style, "--dv": `${duration}ms` } as CSSProperties}
+      className={tx(disabled && "opacity-60", className)}
+      {...rest}
+    >
       <CollapsibleTriggerContext value={triggerContext}>
         <CollapsibleContentContext value={contentContext}>{children}</CollapsibleContentContext>
       </CollapsibleTriggerContext>

packages/react-ui/src/components/collapsible/collapsible-trigger.tsx

@@ -1,10 +1,10 @@
+import type { MouseEvent } from "react";
 import { useButtonProps } from "../../hooks";
 import { type EmptyObject, Polymorphic, type PolymorphicProps } from "../../primitives";
-import { ariaAttr } from "../../utils";
 import { useCollapsibleTrigger } from "./collapsible-context";
 
 export const CollapsibleTrigger = (props: PolymorphicProps<"button", EmptyObject, "type" | "disabled">) => {
-  const { render, tabIndex, children, ...rest } = props;
+  const { render, tabIndex, children, onClick, ...rest } = props;
 
   const { id, open, disabled, toggle } = useCollapsibleTrigger();
 
@@ -14,16 +14,24 @@ export const CollapsibleTrigger = (props: PolymorphicProps<"button", EmptyObject
     disabled,
   });
 
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    onClick?.(e);
+    toggle();
+  };
+
   return (
     <Polymorphic<"button">
       as={"button"}
       render={render}
       {...buttonProps}
-      aria-expanded={ariaAttr(open)}
+      aria-expanded={open}
       aria-controls={id}
-      onClick={() => {
-        toggle();
-      }}
+      onClick={handleClick}
       {...rest}
     >
       {children}

packages/react-ui/src/components/collapsible/tests/collapsible.test.tsx

@@ -0,0 +1,51 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { afterEach, describe, expect, test } from "vitest";
+import { axe } from "vitest-axe";
+import { Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger } from "../collapsible";
+
+const ComponentUnderTest = (props: CollapsibleProps) => (
+  <Collapsible {...props}>
+    <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+    <CollapsibleContent>Content</CollapsibleContent>
+  </Collapsible>
+);
+
+describe("Collapsible", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("should have no a11y violations", async () => {
+    const { container } = render(<ComponentUnderTest />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+
+  test("should toggle", async () => {
+    render(<ComponentUnderTest />);
+
+    expect(screen.queryByText("Content")).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
+    expect(screen.getByText("Content")).toBeVisible();
+
+    await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
+    await waitFor(() => expect(screen.queryByText("Content")).not.toBeInTheDocument());
+  });
+
+  test("should be fully controlled (true)", async () => {
+    render(<ComponentUnderTest open={true} />);
+
+    await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
+    expect(screen.getByText("Content")).toBeVisible();
+  });
+
+  test("should be fully controlled (false)", async () => {
+    render(<ComponentUnderTest open={false} />);
+
+    await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
+    await waitFor(() => expect(screen.queryByText("Content")).not.toBeInTheDocument());
+  });
+});

website/src/routes/docs/_mdx/components/collapsible.mdx

@@ -48,6 +48,42 @@ export default function App() {
 
 ## 举例
 
+### 默认打开
+
+```jsx demo
+import { SpriteIcon } from "~/components/sprite-icon";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@resolid/react-ui";
+
+export default function App() {
+  return (
+    <div className={"flex flex-row justify-center"}>
+      <Collapsible
+        defaultOpen
+        className={"border-bd-normal bg-bg-normal mx-auto w-80 rounded-md border"}
+      >
+        <CollapsibleTrigger
+          className={"group flex w-full flex-row items-center justify-between p-3"}
+        >
+          <h6 className={"font-medium"}>Resolid React UI 是什么?</h6>
+
+          <SpriteIcon
+            className={"duration-(--dv) transition-transform group-aria-expanded:rotate-180"}
+            size={"1.5em"}
+            name={"angle-down"}
+          />
+        </CollapsibleTrigger>
+        <CollapsibleContent className={"border-bd-normal border-t p-3"}>
+          Resolid React UI 是 React 的开源设计系统。使用 React 和 Tailwind CSS
+          构建。它提供了一组即用型组件，用于构建具有一致外观的 Web 应用程序。
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}
+```
+
+### 自定义
+
 ```jsx demo
 import { SpriteIcon } from "~/components/sprite-icon";
 import { Button, Collapsible, CollapsibleTrigger, CollapsibleContent } from "@resolid/react-ui";
@@ -87,6 +123,40 @@ export default function App() {
 }
 ```
 
+### 禁用
+
+```jsx demo
+import { SpriteIcon } from "~/components/sprite-icon";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@resolid/react-ui";
+
+export default function App() {
+  return (
+    <div className={"flex flex-row justify-center"}>
+      <Collapsible
+        disabled
+        className={"border-bd-normal bg-bg-normal mx-auto w-80 rounded-md border"}
+      >
+        <CollapsibleTrigger
+          className={"group flex w-full flex-row items-center justify-between p-3"}
+        >
+          <h6 className={"font-medium"}>Resolid React UI 是什么?</h6>
+
+          <SpriteIcon
+            className={"duration-(--dv) transition-transform group-aria-expanded:rotate-180"}
+            size={"1.5em"}
+            name={"angle-down"}
+          />
+        </CollapsibleTrigger>
+        <CollapsibleContent className={"border-bd-normal border-t p-3"}>
+          Resolid React UI 是 React 的开源设计系统。使用 React 和 Tailwind CSS
+          构建。它提供了一组即用型组件，用于构建具有一致外观的 Web 应用程序。
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}
+```
+
 ## 属性
 
 ::PropsTable{file=collapsible/collapsible.tsx}