v0.2.0-alpha

Largely an effort to modernize, refactor, and add new features. The library now uses TypeScript and provides typing for each component, method, etc. Instead of using HOCs and discouraged APIs, it now uses custom hooks and context. Provides various changes to improve QoL and general usability, but most are breaking.

• Requires React 18
• Adopts TypeScript
  • Provides typing for each component, method, etc.
• Released as CJS and ESM modules, not UMD
  • If importing a sub-module (e.g. import { ... } from 'react-aria-widgets/accordion';) in a TS application, set moduleResolution to node16 or nodenext
• React modernization effort and many (breaking) API changes
  • General
    • Now uses hooks instead of HOCs
      • useAccordion - replaces withAccordionManager HOC
      • useAccordionContext - grabs state and methods from an AccordionContext
      • useAccordionItemContext - grabs this section's/item's ID from an AccordionItemContext
    • Uses context to pass down data instead of React.Children and React.cloneElement
      • AccordionContext - passes down state and methods from useAccordion
      • AccordionItemContext - passes down this accordion section's/item's ID
    • All provided styling and stylesheets have been removed (i.e. no more .react-aria-widgets-hidden)
    • Much, much more flexible styling customization
    • Relies on React 18's useId to set HTML IDs
    • Removes the withNoOp HOC
    • Many other misc. internal changes
  • useAccordion
    • Replaces the old withAccordionManager HOC, holds state and provides methods for the accordion
    • allowToggle has been renamed to allowCollapseLast and has slightly different semantics
    • toggleSection has been renamed toggleExpanded
    • New method toggleDisabled lets users manually disable accordion sections/items
    • Users can now set which accordion sections/items should be initially expanded/disabled
      • initialExpanded
      • initialDisabled
    • Users can now supply callbacks when state or focus changes occur
      • onToggleExpanded
      • onToggleDisabled
      • onFocusChange - only executes when built-in focus methods are run
    • Focus methods now (mostly) based on IDs rather than indices
      • Focus methods have been renamed from "focus header" to "focus item"
      • focusPrevItem and focusNextItem now accept string IDs instead of indices
      • New method focusItemId that allows focusing accordion items by their ID
    • The ref callback setHeaderRef has been renamed to pushHeaderRef
    • The ref callback ref now requires an ID and the DOM element
  • <Accordion>
    • No longer implements event handlers that get passed down
    • Various prop changes
      • headerLevel is now required and no longer defaults to 2
      • No longer accepts many props that used to come from withAccordionManager
      • Now accepts a number of new props that are mostly for useAccordion
  • <ControlledAccordion>
    • Simple wrapper for the accordion context provider for cases where you want to be able to control the accordion's state from "further above"
  • <AccordionItem>
    • "Accordion section" has been renamed to "accordion item"
  • <AccordionHeader>
    • Now accepts a render function as a child that has access to all accordion state and methods
    • No longer accepts many props as it now receives accordion data through context
    • Implements its own onClick and onKeyDown event handlers
    • Styling changes with headerProps and buttonProps
      • Accepts a className prop as either a function that receives state data or a string
      • Accepts a style prop as either a function that receives state data or an object
      • Provides default CSS classes that can be targeted if no className is supplied
    • Sets HTML data attributes data-expanded and data-disabled on the underlying header element to reflect the accordion's state
  • <AccordionPanel>
    • Now accepts a render function as a child that has access to all accordion state and methods
    • No longer accepts many props as it now receives accordion data through context
    • Styling changes
      • Accepts a className prop as either a function that receives state data or a string
      • Accepts a style prop as either a function that receives state data or an object
      • Provides a default CSS class that can be targeted if no className is supplied
    • Sets HTML data attributes data-expanded and data-disabled on the underlying element to reflect the accordion's state
  • <BaseAccordionHeader>
    • Renamed some props to match the actual ARIA attributes
      • controlsId -> aria-controls
      • isExpanded -> aria-expanded
      • isDisabled -> `aria-disabled
    • aria-expanded and aria-disabled are now required
  • <BaseAccordionPanel>
    • Renamed the labelId prop to match the actual ARIA attributes aria-labelledby