Accordion

Accordion component expands/collapses to show more information on clicking the trigger button. It follows The WAI-ARIA Accordion Pattern for keyboard interaction & accessibiltiy properties.

Table of Contents

Usage
Other Examples
Composition
Props

Usage

import * as React from "react";

import {
  Accordion,
  AccordionDisclosure,
  AccordionPanel,
  useAccordionState,
} from "@adaptui/react";

export const AccordionBasic = props => {
  const state = useAccordionState(props);

  return (
    <Accordion state={state}>
      <h2>
        <AccordionDisclosure id="Trigger 1">Trigger 1</AccordionDisclosure>
      </h2>
      <AccordionPanel id="Panel 1">Panel 1</AccordionPanel>
      <h2>
        <AccordionDisclosure id="Trigger 2">Trigger 2</AccordionDisclosure>
      </h2>
      <AccordionPanel id="Panel 2">Panel 2</AccordionPanel>
      <h2>
        <AccordionDisclosure id="Trigger 3">Trigger 3</AccordionDisclosure>
      </h2>
      <AccordionPanel id="Panel 3">Panel 3</AccordionPanel>
      <h2>
        <AccordionDisclosure id="Trigger 4">Trigger 4</AccordionDisclosure>
      </h2>
      <AccordionPanel id="Panel 4">Panel 4</AccordionPanel>
      <h2>
        <AccordionDisclosure id="Trigger 5">Trigger 5</AccordionDisclosure>
      </h2>
      <AccordionPanel id="Panel 5">Panel 5</AccordionPanel>
      <h2>
        <AccordionDisclosure id="Trigger 6">Trigger 6</AccordionDisclosure>
      </h2>
      <AccordionPanel id="Panel 6">Panel 6</AccordionPanel>
    </Accordion>
  );
};

export default AccordionBasic;

Other Examples

Composition

Accordion uses useComposite
AccordionDisclosure uses useCompositeItem
AccordionPanel uses useFocusable, useCollectionItem, and useDisclosureContent
useAccordionState uses useCompositeState

Props

`AccordionOptions`

Name	Type	Description
`state`	`AccordionState`	Object returned by the `useAccordionState` hook.

CompositeOptions props

> These props are returned by the other props You can also provide these props.

Name	Type	Description
`disabled`	`boolean \| undefined`	Determines whether the focusable element is disabled. If the focusableelement doesn't support the native `disabled` attribute, the`aria-disabled` attribute will be used instead.
`autoFocus`	`boolean \| undefined`	Automatically focus the element when it is mounted. It works similarly tothe native `autoFocus` prop, but solves an issue where the element isgiven focus before React effects can run.
`focusable`	`boolean \| undefined`	Whether the element should be focusable.
`accessibleWhenDisabled`	`boolean \| undefined`	Determines whether the element should be focusable even when it isdisabled.This is important when discoverability is a concern. For example:> A toolbar in an editor contains a set of special smart paste functionsthat are disabled when the clipboard is empty or when the function is notapplicable to the current content of the clipboard. It could be helpful tokeep the disabled buttons focusable if the ability to discover theirfunctionality is primarily via their presence on the toolbar.Learn more on Focusability of disabledcontrols.
`onFocusVisible`	`((event: SyntheticEvent<Element, Event>) => voi...`	Custom event handler that is called when the element is focused via thekeyboard or when a key is pressed while the element is focused.
`composite`	`boolean \| undefined`	Whether the component should behave as a composite widget. This prop shouldbe set to `false` when combining different composite widgets where only oneshould behave as such.
`focusOnMove`	`boolean \| undefined`	Whether the active composite item should receive focus when`composite.move` is called.

`AccordionDisclosureOptions`

Name	Type	Description
`state`	`AccordionState \| undefined`	Object returned by the `useAccordionState` hook. If not provided, the parent`Accordion` component's context will be used.

CompositeItemOptions props

> These props are returned by the other props You can also provide these props.

Name	Type	Description
`disabled`	`boolean \| undefined`	Determines whether the focusable element is disabled. If the focusableelement doesn't support the native `disabled` attribute, the`aria-disabled` attribute will be used instead.
`autoFocus`	`boolean \| undefined`	Automatically focus the element when it is mounted. It works similarly tothe native `autoFocus` prop, but solves an issue where the element isgiven focus before React effects can run.
`focusable`	`boolean \| undefined`	Whether the element should be focusable.
`accessibleWhenDisabled`	`boolean \| undefined`	Determines whether the element should be focusable even when it isdisabled.This is important when discoverability is a concern. For example:> A toolbar in an editor contains a set of special smart paste functionsthat are disabled when the clipboard is empty or when the function is notapplicable to the current content of the clipboard. It could be helpful tokeep the disabled buttons focusable if the ability to discover theirfunctionality is primarily via their presence on the toolbar.Learn more on Focusability of disabledcontrols.
`onFocusVisible`	`((event: SyntheticEvent<Element, Event>) => voi...`	Custom event handler that is called when the element is focused via thekeyboard or when a key is pressed while the element is focused.
`shouldRegisterItem`	`boolean \| undefined`	Whether the item should be registered to the state.
`getItem`	`((props: Item) => Item) \| undefined`	A memoized function that returns props that will be passed along with theitem when it gets registered to the state.
`clickOnEnter`	`boolean \| undefined`	If true, pressing the enter key will trigger a click on the button.
`clickOnSpace`	`boolean \| undefined`	If true, pressing the space key will trigger a click on the button.
`rowId`	`string \| undefined`	The id that will be used to group items in the same row. This isusually retrieved by the `CompositeRow` component through context so inmost cases you don't need to set it manually.
`preventScrollOnKeyDown`	`BooleanOrCallback<KeyboardEvent<HTMLElement>> \|...`	Whether the scroll behavior should be prevented when pressing arrow keyson the first or the last items.

`AccordionPanelOptions`

Name	Type	Description
`state`	`AccordionState \| undefined`	Object returned by the `useAccordionState` hook.
`accordionId`	`string \| null \| undefined`	The id of the accordion that controls this panel. By default, this value willbe inferred based on the order of the accordions and the panels.

FocusableOptions props

> These props are returned by the other props You can also provide these props.

Name	Type	Description
`disabled`	`boolean \| undefined`	Determines whether the focusable element is disabled. If the focusableelement doesn't support the native `disabled` attribute, the`aria-disabled` attribute will be used instead.
`autoFocus`	`boolean \| undefined`	Automatically focus the element when it is mounted. It works similarly tothe native `autoFocus` prop, but solves an issue where the element isgiven focus before React effects can run.
`focusable`	`boolean \| undefined`	Whether the element should be focusable.
`accessibleWhenDisabled`	`boolean \| undefined`	Determines whether the element should be focusable even when it isdisabled.This is important when discoverability is a concern. For example:> A toolbar in an editor contains a set of special smart paste functionsthat are disabled when the clipboard is empty or when the function is notapplicable to the current content of the clipboard. It could be helpful tokeep the disabled buttons focusable if the ability to discover theirfunctionality is primarily via their presence on the toolbar.Learn more on Focusability of disabledcontrols.
`onFocusVisible`	`((event: SyntheticEvent<Element, Event>) => voi...`	Custom event handler that is called when the element is focused via thekeyboard or when a key is pressed while the element is focused.

CollectionItemOptions props

> These props are returned by the other props You can also provide these props.

Name	Type	Description
`shouldRegisterItem`	`boolean \| undefined`	Whether the item should be registered to the state.
`getItem`	`((props: Item) => Item) \| undefined`	A memoized function that returns props that will be passed along with theitem when it gets registered to the state.

DisclosureContentOptions props

> These props are returned by the other props You can also provide these props.

Name	Type	Description

`AccordionStateProps`

Name	Type	Description
`selectedId`	`string \| string[] \| null \| undefined`	The id of the accordion whose panel is currently visible.
`selectOnMove`	`boolean \| undefined`	Whether the accordion should be selected when it receives focus. If it's set to`false`, the accordion will be selected only when it's clicked.
`shouldSelectFirstId`	`boolean \| undefined`	Whether the first accordion should be selected by default. If it's set to `false`,the accordion will be selected only when it's clicked.
`allowToggle`	`boolean`	Whether the accordion panels can be toggled on click. If it's set to`false`, the panels cannot be closed on the next click.
`allowMultiple`	`boolean`	Whether multiple accordion panels can be viewed at once. If it's set to`false`, the accordion will only allow one panel to be viewed at once.
`defaultSelectedId`	`string \| string[] \| null \| undefined`	The id of the accordion whose panel should be initially visible.
`setSelectedId`	`((selectedId: string \| string[] \| null \| undefi...`	Function that will be called when setting the accordion `selectedId` state.

CompositeStateProps props

> These props are returned by the other props You can also provide these props.

Name	Type	Description
`items`	`T[]`	Lists all the items with their `ref`s. This state is automatically updatedwhen an item is registered or unregistered with the `registerItem`function. The order of the items is automatically defined by the order ofthe elements in the DOM.
`setItems`	`((items: T[]) => void) \| undefined`	Function that will be called when setting the collection `items` state.
`virtualFocus`	`boolean`	If enabled, the composite element will act as anaria-activedescendantcontainer instead of rovingtabindex.DOM focus will remain on the composite while its items receive virtualfocus.
`orientation`	`Orientation`	Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `both`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites.
`rtl`	`boolean`	Determines how the `next` and `previous` functions will behave. If `rtl` isset to `true`, they will be inverted. This only affects the compositewidget behavior. You still need to set `dir="rtl"` on HTML/CSS.
`focusLoop`	`boolean \| Orientation`	On one-dimensional composites: - `true` loops from the last item to the first item and vice-versa. - `horizontal` loops only if `orientation` is `horizontal` or not set. - `vertical` loops only if `orientation` is `vertical` or not set. - If `activeId` is initially set to `null`, the composite element will be focused in between the last and first items.On two-dimensional composites: - `true` loops from the last row/column item to the first item in the same row/column and vice-versa. If it's the last item in the last row, it moves to the first item in the first row and vice-versa. - `horizontal` loops only from the last row item to the first item in the same row. - `vertical` loops only from the last column item to the first item in the column row. - If `activeId` is initially set to `null`, vertical loop will have no effect as moving down from the last row or up from the first row will focus the composite element. - If `focusWrap` matches the value of `focusLoop`, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.
`focusWrap`	`boolean \| Orientation`	Has effect only on two-dimensional composites. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `focusLoop` matches the value of `focusWrap`, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.
`focusShift`	`boolean`	Has effect only on two-dimensional composites. If enabled, moving upor down when there's no next item or the next item is disabled will shiftto the item right before it.
`moves`	`number`	The number of times the `move` function has been called.
`includesBaseElement`	`boolean`	Indicates whether the `Composite` element should be included in the focusorder.
`activeId`	`string \| null \| undefined`	The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able to navigate out of it using arrow keys. - If `activeId` is initially set to `null`, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.
`defaultActiveId`	`string \| null \| undefined`	The composite item id that should be focused when the composite isinitialized.
`setMoves`	`((moves: number) => void) \| undefined`	Function that will be called when setting the composite `moves` state.
`setActiveId`	`((activeId: string \| null \| undefined) => void)...`	Function that will be called when setting the composite `activeId`.