import * as React from 'react'; import { useState } from 'react'; import { InternalFormFieldGroup } from './InternalFormFieldGroup'; export interface FormFieldGroupExpandableProps extends React.HTMLProps { /** Anything that can be rendered as form field group content. */ children?: React.ReactNode; /** Additional classes added to the form field group. */ className?: string; /** Form field group header */ header?: React.ReactNode; /** Flag indicating if the form field group is initially expanded */ isExpanded?: boolean; /** Aria-label to use on the form field group toggle button */ toggleAriaLabel?: string; } export const FormFieldGroupExpandable: React.FunctionComponent = ({ children, className, header, isExpanded = false, toggleAriaLabel, ...props }: FormFieldGroupExpandableProps) => { const [localIsExpanded, setIsExpanded] = useState(isExpanded); return ( setIsExpanded(!localIsExpanded)} {...props} > {children} ); }; FormFieldGroupExpandable.displayName = 'FormFieldGroupExpandable';