refactor(Collapsible): split context files and update transition status hook

Author: huijiewei

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

@@ -0,0 +1,11 @@
+import { createSafeContext } from "../../primitives";
+
+export type CollapsibleContentContextValue = {
+  id: string;
+  open: boolean;
+  duration: number;
+};
+
+export const [CollapsibleContentContext, useCollapsibleContent] = createSafeContext<CollapsibleContentContextValue>({
+  name: "CollapsibleContentContext",
+});

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

@@ -1,21 +1,22 @@
-import { type CSSProperties, useEffect, useRef, useState } from "react";
-import { useIsomorphicEffect, useMergeRefs } from "../../hooks";
+import { type CSSProperties, useEffect, useState } from "react";
+import { useElementTransitionStatus, useIsomorphicEffect, useMergeRefs } from "../../hooks";
 import type { EmptyObject, PrimitiveProps } from "../../primitives";
 import { useOrientation } from "../../primitives/composite/orientation-context";
 import { tx } from "../../utils";
-import { useCollapsibleContent } from "./collapsible-context";
+import { useCollapsibleContent } from "./collapsible-content-context";
 
 export const CollapsibleContent = (props: PrimitiveProps<"div", EmptyObject, "id">) => {
   const { children, ref, ...rest } = props;
 
-  const { id, open, mounted, status, setElement } = useCollapsibleContent();
-
   const orientation = useOrientation(true);
 
-  const elemRef = useRef<HTMLDivElement>(null);
+  const { id, open, duration } = useCollapsibleContent();
+
+  const { isMounted, status, element, setElement } = useElementTransitionStatus(open, { duration });
+
   const [size, setSize] = useState<{ width?: number; height?: number }>();
 
-  const [skipAnimation, setSkipAnimation] = useState(open || mounted);
+  const [skipAnimation, setSkipAnimation] = useState(open || isMounted);
 
   useEffect(() => {
     const raf = requestAnimationFrame(() => {
@@ -28,19 +29,19 @@ export const CollapsibleContent = (props: PrimitiveProps<"div", EmptyObject, "id
   }, []);
 
   useIsomorphicEffect(() => {
-    if (mounted && elemRef.current) {
-      const rect = elemRef.current.getBoundingClientRect();
+    if (isMounted && element) {
+      const rect = element.getBoundingClientRect();
 
       setSize({
         width: rect.width,
         height: rect.height,
       });
     }
-  }, [mounted]);
+  }, [element, isMounted]);
 
-  const refs = useMergeRefs(ref, elemRef, setElement);
+  const refs = useMergeRefs(ref, setElement);
 
-  if (!mounted) {
+  if (!isMounted) {
     return null;
   }
 

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

@@ -1,14 +1,10 @@
 import { type CSSProperties, useId } from "react";
-import { useDisclosure, useElementTransitionStatus } from "../../hooks";
+import { useDisclosure } from "../../hooks";
 import type { PrimitiveProps } from "../../primitives";
 import type { DisclosureProps } from "../../shared/types";
 import { tx } from "../../utils";
-import {
-  CollapsibleContentContext,
-  type CollapsibleContentContextValue,
-  CollapsibleTriggerContext,
-  type CollapsibleTriggerContextValue,
-} from "./collapsible-context";
+import { CollapsibleContentContext, type CollapsibleContentContextValue } from "./collapsible-content-context";
+import { CollapsibleTriggerContext, type CollapsibleTriggerContextValue } from "./collapsible-trigger-context";
 
 export type CollapsibleRootProps = DisclosureProps & {
   /**
@@ -35,21 +31,17 @@ export const CollapsibleRoot = (props: PrimitiveProps<"div", CollapsibleRootProp
 
   const id = useId();
 
-  const { isMounted, status, setElement } = useElementTransitionStatus(openState, { duration });
-
   const triggerContext: CollapsibleTriggerContextValue = {
     id,
+    disabled,
     open: openState,
     toggle: handleToggle,
-    disabled,
   };
+
   const contentContext: CollapsibleContentContextValue = {
     id,
     open: openState,
-    mounted: isMounted,
-    status,
     duration,
-    setElement,
   };
 
   return (

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

@@ -0,0 +1,12 @@
+import { createSafeContext } from "../../primitives";
+
+export type CollapsibleTriggerContextValue = {
+  id: string;
+  disabled: boolean;
+  open: boolean;
+  toggle: () => void;
+};
+
+export const [CollapsibleTriggerContext, useCollapsibleTrigger] = createSafeContext<CollapsibleTriggerContextValue>({
+  name: "CollapsibleTriggerContext",
+});

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

@@ -1,7 +1,7 @@
 import type { MouseEvent } from "react";
 import { useButtonProps } from "../../hooks";
 import { type EmptyObject, Polymorphic, type PolymorphicProps } from "../../primitives";
-import { useCollapsibleTrigger } from "./collapsible-context";
+import { useCollapsibleTrigger } from "./collapsible-trigger-context";
 
 export const CollapsibleTrigger = (props: PolymorphicProps<"button", EmptyObject, "type" | "disabled">) => {
   const { render, tabIndex, children, onClick, ...rest } = props;

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

@@ -1,23 +1,19 @@
 import { type FloatingContext, useTransitionStatus, type UseTransitionStatusProps } from "@floating-ui/react";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 
 export const useElementTransitionStatus = <E extends HTMLElement = HTMLElement>(
   open: boolean,
   props?: UseTransitionStatusProps,
 ) => {
-  const [elementState, setElementState] = useState<E | null>(null);
-
-  const setElement = useCallback((node: E | null) => {
-    setElementState(node);
-  }, []);
+  const [element, setElement] = useState<E | null>(null);
 
   const { isMounted, status } = useTransitionStatus(
     {
       open,
-      elements: { floating: elementState, reference: null, domReference: null },
+      elements: { floating: element, reference: null, domReference: null },
     } as unknown as FloatingContext,
     props,
   );
 
-  return { isMounted, status, setElement };
+  return { isMounted, status, element, setElement };
 };

packages/react-ui/src/hooks/use-element-transition-status/index.ts

@@ -141,6 +141,10 @@ const menus: Menu[] = [
         label: "单选框组",
         path: "components/radio-group",
       },
+      {
+        label: "列表框",
+        path: "components/listbox",
+      },
       {
         label: "组合框",
         path: "components/combobox",