Repository: adobe/react-spectrum
File: packages/@react-spectrum/s2/src/Accordion.tsx (TypeScript)

Code before:
export const Accordion = forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
  [props, ref] = useSpectrumContextProps(props, ref, AccordionContext);
  let domRef = useDOMRef(ref);
  let {
    UNSAFE_style,
    UNSAFE_className = '',
    size = 'M',
    density = 'regular',
    isQuiet
  } = props;
  return (
    <DisclosureContext.Provider value={{size, isQuiet, density}}>
      <DisclosureGroup
        {...props}
        ref={domRef}
        style={UNSAFE_style}
        className={(UNSAFE_className ?? '') + accordion(null, props.styles)}>
        {props.children}
      </DisclosureGroup>
    </DisclosureContext.Provider>
  );
});

export interface AccordionItemProps extends DisclosureProps {
  /** The contents of the accordion, consisting of a AccordionItemTitle and AccordionItemPanel. */
  children: ReactNode
}
/**
 * A accordion item is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
 */
export const AccordionItem = forwardRef(function AccordionItem(props: AccordionItemProps, ref: DOMRef<HTMLDivElement>) {
  return <Disclosure {...props} ref={ref} />;
});

export const AccordionItemContext = DisclosureContext;

export interface AccordionItemTitleProps extends DisclosureTitleProps {}
/**
 * An accordion item title consisting of a heading and a trigger button to expand/collapse the panel.
 */
export const AccordionItemTitle = forwardRef(function AccordionItemTitle(props: AccordionItemTitleProps, ref: DOMRef<HTMLDivElement>) {
  return <DisclosureTitle {...props} ref={ref} />;
});

export interface AccordionItemHeaderProps extends UnsafeStyles, DOMProps {
  children: React.ReactNode
}
/**
 * A wrapper element for the accordion item title that can contain other elements not part of the trigger.
 */
export const AccordionItemHeader = forwardRef(function AccordionItemHeader(props: AccordionItemHeaderProps, ref: DOMRef<HTMLDivElement>) {

Review comment (suggestion):
Not sure how much we want to update the individual prop descriptions here and/or if we want to just copy the props wholesale to guard as much as possible from future breaking changes that Disclosure may under go

Code after:
export const Accordion = forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
  [props, ref] = useSpectrumContextProps(props, ref, AccordionContext);
  let domRef = useDOMRef(ref);
  let {
    UNSAFE_style,
    UNSAFE_className = '',
    size = 'M',
    density = 'regular',
    isQuiet
  } = props;
  return (
    <DisclosureContext.Provider value={{size, isQuiet, density}}>
      <DisclosureGroup
        {...props}
        ref={domRef}
        style={UNSAFE_style}
        className={(UNSAFE_className ?? '') + accordion(null, props.styles)}>
        {props.children}
      </DisclosureGroup>
    </DisclosureContext.Provider>
  );
});

export interface AccordionItemProps extends DisclosureProps {
  /** The contents of the accordion, consisting of a AccordionItemTitle and AccordionItemPanel. */
  children: ReactNode
}
/**
 * A accordion item is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.
 */
export const AccordionItem = forwardRef(function AccordionItem(props: AccordionItemProps, ref: DOMRef<HTMLDivElement>) {
  return <Disclosure {...props} ref={ref} />;
});

export interface AccordionItemTitleProps extends DisclosureTitleProps {}
/**
 * An accordion item title consisting of a heading and a trigger button to expand/collapse the panel.
 */
export const AccordionItemTitle = forwardRef(function AccordionItemTitle(props: AccordionItemTitleProps, ref: DOMRef<HTMLDivElement>) {
  return <DisclosureTitle {...props} ref={ref} />;
});

export interface AccordionItemHeaderProps extends UnsafeStyles, DOMProps {
  children: React.ReactNode
}
/**
 * A wrapper element for the accordion item title that can contain other elements not part of the trigger.
 */
export const AccordionItemHeader = forwardRef(function AccordionItemHeader(props: AccordionItemHeaderProps, ref: DOMRef<HTMLDivElement>) {
  return <DisclosureHeader {...props} ref={ref} />;
});