import { Children , ComponentProps , KeyboardEvent , MouseEvent , ReactElement , ReactNode , SyntheticEvent , forwardRef , useCallback } from "react" ; import { InternalProps , Keys , OmitInternalProps , StyledComponentProps , augmentElement , cssModule , isNil , mergeProps , resolveChildren , useControllableState , useEventCallback , useId , useMergedRefs } from "../../shared" ; import { DisclosureContext } from "./DisclosureContext" ; import { Text } from "../../typography" ; import { useSlidingTransition } from "./useSlidingTransition" ; const DefaultElement = "div" ; export interface InnerDisclosureProps extends InternalProps , StyledComponentProps < typeof DefaultElement > { /**
     * React children.
     */ children : ReactNode ; /**
     * The initial value of `open` when uncontrolled.
     */ defaultOpen ? : boolean ; param { SyntheticEvent } event param { bool } isOpen returns { void } onOpenChange ? : ( event : SyntheticEvent , isOpen : boolean ) => void ; /**
     * A controlled open value.
     */ open ? : boolean | null ; } export function InnerDisclosure ( { as = DefaultElement , children , defaultOpen , forwardedRef , id , onOpenChange , open , ... rest } ) { const [ isOpen , setIsOpen ] = useControllableState ( open , defaultOpen , false ) ; const contentRef = useMergedRefs ( forwardedRef ) ; const toggle = useCallback ( ( event ) => { setIsOpen ( ! isOpen ) ; if ( ! isNil ( onOpenChange ) ) { onOpenChange ( event , ! isOpen ) ; } } , [ isOpen , setIsOpen , onOpenChange ] ) ; const close = useCallback ( ( event ) => { if ( isOpen ) { toggle ( event ) ; } } , [ isOpen , toggle ] ) ; const [ trigger , content ] = Children . toArray ( resolveChildren ( children ) ) as ReactElement [ ] ; if ( isNil ( trigger ) || isNil ( content ) ) { throw new Error ( "A disclosure component must have a trigger and a content element." ) ; } const handleClick = useEventCallback ( ( event ) => { event . preventDefault ( ) ; toggle ( event ) ; } ) ; const handleKeyDown = useEventCallback ( ( event ) => { switch ( event . key ) { case Keys . enter : case Keys . space : event . preventDefault ( ) ; toggle ( event ) ; break ; } } ) ; const handleKeyUp = useEventCallback ( ( event ) => { if ( event . key === Keys . space ) { event . preventDefault ( ) ; } } ) ; const rootId = useId ( id , "o-ui-disclosure" ) ; const contentId = `${ rootId }-content` ; const triggerMarkup = augmentElement ( trigger , { "aria-controls" : contentId , "aria-expanded" : isOpen , onClick : handleClick , onKeyDown : handleKeyDown , onKeyUp : handleKeyUp } ) ; const contentMarkup = augmentElement ( content , { "aria-hidden" : ! isOpen , className : "o-ui-disclosure-content-inner" , id : contentId } ) ; const { transitionClasses , transitionProps } = useSlidingTransition ( isOpen , contentRef ) ; return ( < DisclosureContext . Provider value = { { close , isOpen } } > { triggerMarkup } < Text { ... mergeProps ( rest , { as , className : cssModule ( "o-ui-disclosure-content" , transitionClasses ) , id : rootId , ref : contentRef } , transitionProps ) } > { contentMarkup } < /Text> < /DisclosureContext.Provider>); } InnerDisclosure . defaultElement = DefaultElement ; export const Disclosure = forwardRef < any , OmitInternalProps < InnerDisclosureProps > > ( ( props , ref ) => ( < InnerDisclosure { ... props } forwardedRef = { ref } / > ) ) ; export type DisclosureProps = ComponentProps < typeof Disclosure > ;