Refactor useCollapsibleTrigger with useButton

mui · Sep 4, 2024 · b5f818e · b5f818e
1 parent c5f8aa5
commit b5f818e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 19 deletions.
diff --git a/packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx b/packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx
@@ -11,17 +11,18 @@ import { accordionStyleHookMapping } from '../Section/styleHooks';
 
 const AccordionTrigger = React.forwardRef(function AccordionTrigger(
   props: AccordionTrigger.Props,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+  forwardedRef: React.ForwardedRef<Element>,
 ) {
   const { disabled: disabledProp, className, render, ...otherProps } = props;
 
   const { contentId, disabled: contextDisabled, open, setOpen } = useCollapsibleContext();
 
   const { getRootProps } = useCollapsibleTrigger({
     contentId,
+    disabled: disabledProp || contextDisabled,
     open,
+    rootRef: forwardedRef,
     setOpen,
-    disabled: disabledProp || contextDisabled,
   });
 
   const { ownerState, triggerId } = useAccordionSectionContext();
@@ -31,7 +32,6 @@ const AccordionTrigger = React.forwardRef(function AccordionTrigger(
     render: render ?? 'button',
     ownerState,
     className,
-    ref: forwardedRef,
     extraProps: { ...otherProps, id: triggerId },
     customStyleHookMapping: accordionStyleHookMapping,
   });

diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx
@@ -20,14 +20,14 @@ const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger(
     contentId,
     open,
     setOpen,
+    rootRef: forwardedRef,
   });
 
   const { renderElement } = useComponentRenderer({
     propGetter: getRootProps,
     render: render ?? 'button',
     ownerState,
     className,
-    ref: forwardedRef,
     extraProps: otherProps,
     customStyleHookMapping: collapsibleStyleHookMapping,
   });

diff --git a/packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts b/packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts
@@ -1,6 +1,9 @@
 'use client';
 import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
+import { useForkRef } from '../../utils/useForkRef';
+import { GenericHTMLProps } from '../../utils/types';
+import { useButton } from '../../useButton';
 /**
  *
  * Demos:
@@ -14,20 +17,35 @@ import { mergeReactProps } from '../../utils/mergeReactProps';
 export function useCollapsibleTrigger(
   parameters: useCollapsibleTrigger.Parameters,
 ): useCollapsibleTrigger.ReturnValue {
-  const { contentId, disabled, open, setOpen } = parameters;
+  const { contentId, disabled, open, rootRef: externalRef, setOpen } = parameters;
+
+  const { getRootProps: getButtonProps, rootRef: buttonRef } = useButton({
+    disabled,
+    focusableWhenDisabled: true,
+    type: 'button',
+  });
+
+  const handleRef = useForkRef(externalRef, buttonRef);
 
   const getRootProps: useCollapsibleTrigger.ReturnValue['getRootProps'] = React.useCallback(
-    (externalProps = {}) =>
-      mergeReactProps<'button'>(externalProps, {
-        type: 'button',
-        'aria-controls': contentId,
-        'aria-expanded': open,
-        disabled,
-        onClick() {
-          setOpen(!open);
-        },
-      }),
-    [contentId, disabled, open, setOpen],
+    (externalProps: GenericHTMLProps = {}) =>
+      mergeReactProps(
+        externalProps,
+        mergeReactProps(
+          {
+            type: 'button',
+            'aria-controls': contentId,
+            'aria-expanded': open,
+            disabled,
+            onClick() {
+              setOpen(!open);
+            },
+            ref: handleRef,
+          },
+          getButtonProps(),
+        ),
+      ),
+    [contentId, disabled, getButtonProps, handleRef, open, setOpen],
   );
 
   return {
@@ -46,15 +64,14 @@ export namespace useCollapsibleTrigger {
      * The open state of the Collapsible
      */
     open: boolean;
+    rootRef?: React.Ref<Element>;
     /**
      * A state setter that sets the open state of the Collapsible
      */
     setOpen: (open: boolean) => void;
   }
 
   export interface ReturnValue {
-    getRootProps: (
-      externalProps?: React.ComponentPropsWithRef<'button'>,
-    ) => React.ComponentPropsWithRef<'button'>;
+    getRootProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
   }
 }