Skip to content

Commit

Permalink
Refactor useCollapsibleTrigger with useButton
Browse files Browse the repository at this point in the history
  • Loading branch information
mj12albert committed Sep 5, 2024
1 parent 258295c commit 85062eb
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 20 deletions.
6 changes: 3 additions & 3 deletions packages/mui-base/src/Accordion/Trigger/AccordionTrigger.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,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();
Expand All @@ -40,7 +41,6 @@ const AccordionTrigger = React.forwardRef(function AccordionTrigger(
render: render ?? 'button',
ownerState,
className,
ref: forwardedRef,
extraProps: { ...otherProps, id: triggerId },
customStyleHookMapping: accordionStyleHookMapping,
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,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,
});
Expand Down
58 changes: 42 additions & 16 deletions packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,51 @@
'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:
*
* - [Collapsible](https://mui.com/base-ui/react-collapsible/#hooks)
*
* API:
*
* - [useCollapsibleTrigger API](https://mui.com/base-ui/react-collapsible/hooks-api/#use-collapsible-trigger)
*/
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 {
Expand All @@ -37,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;
}
}

0 comments on commit 85062eb

Please sign in to comment.