Disclosure

An interactive component which expands/collapses a panel.

#
Documentation

#
Usage


import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Disclosure maxW="sm" w="full">
      <DisclosureTrigger>Disclosure label</DisclosureTrigger>
      <DisclosureContent>
        Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis
        sapien, venenatis eu pharetra at, ullamcorper sed nibh.
      </DisclosureContent>
    </Disclosure>
  );
}

#
Anatomy


import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
} from "@optiaxiom/react";
 
export default () => (
  <Disclosure>
    <DisclosureTrigger />
    <DisclosureContent />
  </Disclosure>
);

#
Controlled

Use the open and defaultOpen props to toggle between controlled and uncontrolled usage. And combine it with onOpenChange to listen for changes to the state.

Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis sapien, venenatis eu pharetra at, ullamcorper sed nibh.

State: open


"use client";
 
import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
  Flex,
  Text,
} from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [open, setOpen] = useState(true);
 
  return (
    <Flex maxW="sm" w="full">
      <Disclosure onOpenChange={setOpen} open={open}>
        <DisclosureTrigger>Disclosure label</DisclosureTrigger>
        <DisclosureContent>
          Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla
          turpis sapien, venenatis eu pharetra at, ullamcorper sed nibh.
        </DisclosureContent>
      </Disclosure>
      <Text fontSize="md">State: {open ? "open" : "closed"}</Text>
    </Flex>
  );
}

#
Indicator position

Use the chevronPosition prop on DisclosureTrigger to control which side the chevron is placed.

Chevron position


"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
} from "@optiaxiom/react";
 
export function App({
  chevronPosition,
}: Pick<ComponentPropsWithRef<typeof DisclosureTrigger>, "chevronPosition">) {
  return (
    <Disclosure maxW="sm" w="full">
      <DisclosureTrigger chevronPosition={chevronPosition}>
        Disclosure label
      </DisclosureTrigger>
      <DisclosureContent>
        Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis
        sapien, venenatis eu pharetra at, ullamcorper sed nibh.
      </DisclosureContent>
    </Disclosure>
  );
}

#
Addons

Use the addonBefore and addonAfter prop to add icons, text, or any other interactive elements to the start or end of the trigger.


"use client";
 
import {
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
  toaster,
} from "@optiaxiom/react";
import { Pill } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Disclosure maxW="sm" w="full">
      <DisclosureTrigger
        addonAfter={
          <Pill onClick={() => toaster.create("Clicked pill")}>3</Pill>
        }
      >
        Categories
      </DisclosureTrigger>
      <DisclosureContent>
        Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis
        sapien, venenatis eu pharetra at, ullamcorper sed nibh.
      </DisclosureContent>
    </Disclosure>
  );
}

#
Customize trigger

By default we use a button for the disclosure trigger which always shows a chevron indicator.

We can also completely change the trigger by using asChild and passing our own component.


import {
  Button,
  Disclosure,
  DisclosureContent,
  DisclosureTrigger,
} from "@optiaxiom/react";
import { IconThumbDown } from "@tabler/icons-react";
 
export function App() {
  return (
    <Disclosure maxW="sm" w="full">
      <DisclosureTrigger asChild>
        <Button aria-label="Dislike" icon={<IconThumbDown />} />
      </DisclosureTrigger>
      <DisclosureContent>
        Aenean neque dui, lobortis et sem quis, mattis varius nisl. Nulla turpis
        sapien, venenatis eu pharetra at, ullamcorper sed nibh.
      </DisclosureContent>
    </Disclosure>
  );
}

#
Props

#
Disclosure

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`defaultOpen` The initial open state in uncontrolled mode. `false \| true` Default: `false`
`disabled` `false \| true`
`onOpenChange` Handler that is called when the open state changes. `(open: boolean) => void`
`open` The open state in controlled mode. `false \| true`

#
DisclosureTrigger

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`addonAfter` Display content after the button. `ReactNode`
`addonBefore` Display content before the button. `ReactNode`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`chevronPosition` Control which side to place the chevron. `"end" \| "start"` Default: `start`
`className` `string`

#
DisclosureContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`hiddenUntilFound` Enable this to always keep content present in DOM and visually hidden when collapsed. `false \| true`

#
Accessibility

#
Keyboard interactions

Key	Description
`Space` `Enter`	Opens/closes the panel.

#
Changelog

#
0.1.0

Added component