import { CollapseProvider } from '@uhg-abyss/web/ui/CollapseProvider';

Usage

Wrap any number of collapsible child components utilizing the useCollapse hook in the CollapseProvider to allow for collapse/expand control of all children.

CollapseProvider.Button

Use CollapseProvider.Button within the CollapseProvider to interface directly with the collapse/expand functionality. The collapsed state will be uncontrolled and handled internally by the component. If you'd like to provide a default state to all collapsible child components, utilize the defaultIsOpen prop detailed below.

Use the expandText and collapseText props to set custom text for the expand and collapse buttons. The default text is "Expand All" and "Collapse All", respectively.

useCollapseContext (custom button)

import { useCollapseContext } from '@uhg-abyss/web/hooks/useCollapseContext';

To use a custom button that interfaces with the collapse/expand functionality of the CollapseProvider use the useCollapseContext hook. This hook provides access to the global collapse state and methods to toggle all collapsible children.

defaultIsOpen

Use the defaultIsOpen prop to set a default collapse state for all collapsible child components within the CollapseProvider. This should be utilized when using Collapse.Button. Default value is true.

CollapseProvider Props

Name	Type	Default	Required	Description
defaultIsOpen	boolean	-	-	The default open state of the collapse.

CollapseProvider.Button Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information

CollapseProvider.Button Classes

Class Name	Description
.abyss-collapse-button-root	CollapseButton root element
.abyss-collapse-all-button	Collapse all button element
.abyss-expand-all-button	Expand all button element
.abyss-collapse-all-button-icon	IconSymbol for collapse all button
.abyss-expand-all-button-icon	IconSymbol for expand all button
.abyss-collapse-all-button-text	Text content for collapse all button
.abyss-expand-all-button-text	Text content for expand all button